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

package/dist/src/collection-facets/more-facets-scroller.js

@@ -0,0 +1,429 @@
+import { __decorate } from "tslib";
+import { css, html, LitElement, unsafeCSS, } from 'lit';
+import { customElement, property, query } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
+import { guard } from 'lit/directives/guard.js';
+import { ref } from 'lit/directives/ref.js';
+import { repeat } from 'lit/directives/repeat.js';
+import { localized, msg } from '@lit/localize';
+import arrowLeftIcon from '../assets/img/icons/arrow-left';
+import arrowRightIcon from '../assets/img/icons/arrow-right';
+import { srOnlyStyle } from '../styles/sr-only';
+import { facetRowStyles, facetRowTemplate, getFacetState, } from './facet-row-template';
+import { PageWindow } from './page-window';
+import { MORE_FACETS__COLUMN_WIDTH, MORE_FACETS__ROWS_PER_COLUMN, } from './models';
+/** Height in px reserved below the columns for the horizontal scrollbar */
+const SCROLLBAR_SIZE = 12;
+/**
+ * A long list of facet buckets laid out top to bottom in fixed-width columns
+ * that scroll horizontally and snap to whole pages. Only the pages around the
+ * viewport are in the DOM, so thousands of values stay responsive.
+ *
+ * Rows are plain DOM rather than `<facet-row>` elements, and one listener
+ * handles every row's checkbox clicks.
+ *
+ * See docs/design/column-virtualization.md before changing the windowing.
+ *
+ * @fires facetClick - A row's checkbox was clicked. Detail: `FacetEventDetails`
+ * @fires pageChanged - The scroller came to rest on a different page. Detail:
+ *   the 0-based page index
+ */
+let MoreFacetsScroller = class MoreFacetsScroller extends LitElement {
+    constructor() {
+        super(...arguments);
+        /** Every bucket to show, in display order */
+        this.buckets = [];
+        /** How many buckets to stack in each column before starting the next one */
+        this.rowsPerColumn = MORE_FACETS__ROWS_PER_COLUMN;
+        /**
+         * Whether rows leave out their hide (eye) button, unless the value is
+         * already hidden. Set it when the facet has only one value in all, since
+         * hiding that would leave no results. Don't base it on how many rows are
+         * showing: a filter that leaves a single row still needs its hide button.
+         */
+        this.omitHideButtons = false;
+        this.win = new PageWindow(this, {
+            colWidth: MORE_FACETS__COLUMN_WIDTH,
+            total: 0,
+            onRest: page => this.rested(page),
+        });
+        /** The last page reported in a `pageChanged` event */
+        this.reportedPage = 0;
+    }
+    /** The page resting at the start of the viewport */
+    get currentPage() {
+        return this.win.currentPage;
+    }
+    /** How many pages the buckets span at the current width */
+    get pageCount() {
+        return this.win.pageCount;
+    }
+    /** Scrolls so that `page` rests at the start of the viewport */
+    scrollToPage(page, behavior = 'auto') {
+        this.win.scrollToPage(page, behavior);
+    }
+    willUpdate(changed) {
+        if (changed.has('buckets') || changed.has('rowsPerColumn')) {
+            this.win.setTotal(Math.ceil(this.buckets.length / this.rowsPerColumn));
+        }
+        this.keepFocusOnScreen();
+    }
+    render() {
+        const w = this.win;
+        const live = [];
+        for (let i = w.first; i <= w.last; i++)
+            live.push(i);
+        return html `
+      <div class="scroll-nav">
+        ${this.arrowTemplate('prev')}
+        <div class="frame">
+          <div
+            class="scroller"
+            role="group"
+            aria-label=${ifDefined(this.label)}
+            tabindex=${w.pageCount > 0 ? 0 : -1}
+            style="--rowsPerColumn: ${this.rowsPerColumn}"
+            ${ref(w.attach)}
+            @click=${this.rowClicked}
+            @focusin=${this.rowFocused}
+          >
+            <div class="sizer" style="width:${w.totalWidth}px">
+              ${guard([w.pageCount, w.pageWidth, w.totalWidth], () => this.snapStubsTemplate())}
+              ${repeat(live, i => i, i => html `<div
+                    class="page"
+                    data-page=${i}
+                    style="left:${i * w.pageWidth}px;width:${w.pageSpan(i)}px"
+                  >
+                    ${this.pageTemplate(i)}
+                  </div>`)}
+            </div>
+          </div>
+        </div>
+        ${this.arrowTemplate('next')}
+      </div>
+    `;
+    }
+    /**
+     * One empty snap target per page, always mounted. The browser keeps
+     * re-picking its snap target while a fling decelerates, so the targets must
+     * not come and go with the window of rendered pages.
+     */
+    snapStubsTemplate() {
+        const w = this.win;
+        const all = Array.from({ length: w.pageCount }, (_, i) => i);
+        return html `${repeat(all, i => i, i => html `<div
+          class="snap-stub"
+          style="left:${i * w.pageWidth}px;width:${w.pageSpan(i)}px"
+        ></div>`)}`;
+    }
+    /** The columns of rows on page `page` */
+    pageTemplate(page) {
+        const { facetType, buckets, rowsPerColumn } = this;
+        if (!facetType)
+            return [];
+        const { colsPerPage } = this.win;
+        const firstCol = page * colsPerPage;
+        const endCol = Math.min(firstCol + colsPerPage, Math.ceil(buckets.length / rowsPerColumn));
+        const columns = [];
+        for (let col = firstCol; col < endCol; col++) {
+            const start = col * rowsPerColumn;
+            const rows = buckets.slice(start, start + rowsPerColumn);
+            columns.push(html `<div class="column">
+          ${rows.map(bucket => facetRowTemplate({
+                facetType,
+                bucket,
+                collectionTitles: this.collectionTitles,
+                omitHideButton: this.omitHideButtons,
+            }))}
+        </div>`);
+        }
+        return columns;
+    }
+    arrowTemplate(direction) {
+        const { currentPage, pageCount } = this.win;
+        const isPrev = direction === 'prev';
+        const disabled = isPrev ? currentPage <= 0 : currentPage >= pageCount - 1;
+        // Arrows keep their space even when there's nothing to scroll to, so that
+        // showing them never changes how many columns fit.
+        const classes = classMap({
+            'scroll-arrow': true,
+            [direction]: true,
+            unneeded: pageCount <= 1,
+        });
+        return html `<button
+      type="button"
+      class=${classes}
+      ?disabled=${disabled}
+      aria-label=${isPrev
+            ? msg('Show previous page of values')
+            : msg('Show next page of values')}
+      @click=${() => this.arrowClicked(isPrev ? -1 : 1)}
+    >
+      ${isPrev ? arrowLeftIcon : arrowRightIcon}
+    </button>`;
+    }
+    /**
+     * Handles clicks on any row's checkboxes. The rows have no listeners of
+     * their own.
+     */
+    rowClicked(e) {
+        const input = e.target;
+        const { facetType } = this;
+        if (!(input instanceof HTMLInputElement) || !facetType)
+            return;
+        const bucket = this.buckets.find(b => b.key === input.value);
+        if (!bucket)
+            return;
+        const negative = input.classList.contains('hide-facet-checkbox');
+        this.dispatchEvent(new CustomEvent('facetClick', {
+            detail: {
+                facetType,
+                bucket: { ...bucket, state: getFacetState(input.checked, negative) },
+                negative,
+            },
+        }));
+    }
+    /**
+     * When focus comes into the rows from outside them, or from the scroller
+     * itself (a tab stop just before the rows), keeps it on the page being
+     * shown. Otherwise Tab lands on the mounted page before this one, and
+     * Shift+Tab on the last one after it, and the browser scrolls there.
+     * Moving from row to row is left alone, so Tab and Shift+Tab still carry on
+     * into the next or previous page.
+     */
+    rowFocused(e) {
+        const { scroller } = this;
+        const row = e.target;
+        if (!scroller || !(row instanceof HTMLElement) || row === scroller)
+            return;
+        const from = e.relatedTarget;
+        const fromRows = from instanceof Node && from !== scroller && scroller.contains(from);
+        if (fromRows)
+            return;
+        const page = Number(row.closest('.page')?.dataset.page);
+        const { currentPage } = this.win;
+        if (Number.isNaN(page) || page === currentPage)
+            return;
+        const rowsOnPage = [
+            ...scroller.querySelectorAll(`.page[data-page="${currentPage}"] input`),
+        ].filter(input => !input.closest('[hidden]'));
+        const target = page < currentPage ? rowsOnPage[0] : rowsOnPage[rowsOnPage.length - 1];
+        target?.focus({ preventScroll: true });
+        // Whatever moved focus may also scroll to the row it picked: in the
+        // dialog, modal-manager's focus trap already has, before this event; the
+        // browser's own Tab does just after this handler returns. Put the page
+        // back now, and again before the next frame is painted (and before the
+        // window is recomputed, so this page stays mounted).
+        this.win.scrollToPage(currentPage);
+        requestAnimationFrame(() => this.win.scrollToPage(currentPage));
+    }
+    /**
+     * If a row has focus and its page is about to leave the window, moves focus
+     * to the scroller itself. Otherwise focus would fall back to the document
+     * when the page is removed, and the arrow keys would stop scrolling. The
+     * scroller being a tab stop matters here: modal-manager's focus trap only
+     * moves Tab between tabbable elements, and from anything else it goes back
+     * to the start of the dialog.
+     */
+    keepFocusOnScreen() {
+        const focusedPage = this.shadowRoot?.activeElement?.closest('.page');
+        if (!focusedPage)
+            return;
+        const page = Number(focusedPage.dataset.page);
+        if (page >= this.win.first && page <= this.win.last)
+            return;
+        this.scroller?.focus({ preventScroll: true });
+    }
+    arrowClicked(step) {
+        // Count from where an earlier click is already headed, so that clicking
+        // twice quickly moves two pages.
+        const from = this.pendingPage ?? this.win.currentPage;
+        const target = Math.max(0, Math.min(from + step, this.win.pageCount - 1));
+        this.pendingPage = target;
+        const reduceMotion = window.matchMedia?.('(prefers-reduced-motion: reduce)').matches;
+        this.win.scrollToPage(target, reduceMotion ? 'auto' : 'smooth');
+    }
+    rested(page) {
+        this.pendingPage = undefined;
+        if (page === this.reportedPage)
+            return;
+        this.reportedPage = page;
+        this.dispatchEvent(new CustomEvent('pageChanged', { detail: page }));
+    }
+    static get styles() {
+        const colWidth = unsafeCSS(`${MORE_FACETS__COLUMN_WIDTH}px`);
+        const scrollbarSize = unsafeCSS(`${SCROLLBAR_SIZE}px`);
+        const ownCss = css `
+      :host {
+        display: block;
+        --colWidth: ${colWidth};
+        --facetRowHeight: 2.4rem;
+      }
+
+      .scroll-nav {
+        display: flex;
+        align-items: center;
+      }
+
+      .frame {
+        flex: 1 1 auto;
+        min-width: 0;
+        container-type: inline-size;
+      }
+
+      .scroller {
+        /* Fallback where round() is unsupported: fill the frame */
+        width: 100%;
+        /* Otherwise round down to whole columns, so none is ever cut off */
+        width: max(
+          round(down, 100cqi, var(--colWidth)),
+          min(100cqi, var(--colWidth))
+        );
+        height: calc(
+          var(--rowsPerColumn) * var(--facetRowHeight) + ${scrollbarSize}
+        );
+        margin: 0 auto;
+        outline-offset: 2px;
+        overflow-x: auto;
+        overflow-y: hidden;
+        contain: strict;
+        scroll-snap-type: x mandatory;
+        /* scroll-snap-stop stays at its default 'normal' so a fling can cross
+           many pages before resting. 'always' would force one page per gesture. */
+      }
+
+      /* Keep the scrollbar visible, so it's clear there is more to see */
+      .scroller::-webkit-scrollbar {
+        height: ${scrollbarSize};
+      }
+      .scroller::-webkit-scrollbar-track {
+        background: #f1f1f1;
+        border-radius: 6px;
+      }
+      .scroller::-webkit-scrollbar-thumb {
+        background: #888;
+        border-radius: 6px;
+      }
+      .scroller::-webkit-scrollbar-thumb:hover {
+        background: #555;
+      }
+      /* Chrome ignores the rules above once these are set, so only Firefox gets them */
+      @supports not selector(::-webkit-scrollbar) {
+        .scroller {
+          scrollbar-width: thin;
+          scrollbar-color: #888 #f1f1f1;
+        }
+      }
+
+      .sizer {
+        position: relative;
+        height: 100%;
+      }
+
+      .snap-stub {
+        position: absolute;
+        top: 0;
+        height: 100%;
+        scroll-snap-align: start;
+        pointer-events: none;
+        contain: strict;
+      }
+
+      .page {
+        position: absolute;
+        top: 0;
+        height: 100%;
+        display: flex;
+        contain: content;
+        content-visibility: auto;
+        contain-intrinsic-size: auto none;
+      }
+
+      .column {
+        flex: none;
+        width: var(--colWidth);
+        box-sizing: border-box;
+        padding: 0 0.75rem;
+      }
+
+      /* Rows are a fixed height with one line of text, so every column holds
+         exactly rowsPerColumn rows. The full text is in the row's tooltip. */
+      .facet-row-container {
+        height: var(--facetRowHeight);
+        box-sizing: border-box;
+        align-items: center;
+      }
+      .facet-info-display {
+        flex-wrap: nowrap;
+        min-width: 0;
+      }
+      .facet-title {
+        min-width: 0;
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        word-break: normal;
+      }
+      .facet-count {
+        flex: none;
+        padding-left: 0.5rem;
+      }
+
+      .scroll-arrow {
+        flex: none;
+        width: 2.4rem;
+        padding: 0.5rem;
+        background: none;
+        border: none;
+        cursor: pointer;
+      }
+      .scroll-arrow svg {
+        height: 14px;
+        fill: #2c2c2c;
+      }
+      .scroll-arrow:disabled {
+        opacity: 0.3;
+        cursor: default;
+      }
+      .scroll-arrow.unneeded {
+        visibility: hidden;
+      }
+
+      /* Touch screens swipe; the space is better spent on the column */
+      @media (max-width: 560px) {
+        .scroll-arrow {
+          display: none;
+        }
+      }
+    `;
+        return [srOnlyStyle, facetRowStyles, ownCss];
+    }
+};
+__decorate([
+    property({ type: String })
+], MoreFacetsScroller.prototype, "facetType", void 0);
+__decorate([
+    property({ type: Array })
+], MoreFacetsScroller.prototype, "buckets", void 0);
+__decorate([
+    property({ type: Object })
+], MoreFacetsScroller.prototype, "collectionTitles", void 0);
+__decorate([
+    property({ type: Number })
+], MoreFacetsScroller.prototype, "rowsPerColumn", void 0);
+__decorate([
+    property({ type: Boolean })
+], MoreFacetsScroller.prototype, "omitHideButtons", void 0);
+__decorate([
+    property({ type: String })
+], MoreFacetsScroller.prototype, "label", void 0);
+__decorate([
+    query('.scroller')
+], MoreFacetsScroller.prototype, "scroller", void 0);
+MoreFacetsScroller = __decorate([
+    customElement('more-facets-scroller'),
+    localized()
+], MoreFacetsScroller);
+export { MoreFacetsScroller };
+//# sourceMappingURL=more-facets-scroller.js.map

package/dist/src/collection-facets/more-facets-scroller.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"more-facets-scroller.js","sourceRoot":"","sources":["../../../src/collection-facets/more-facets-scroller.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n  css,\n  CSSResultGroup,\n  html,\n  LitElement,\n  PropertyValues,\n  TemplateResult,\n  unsafeCSS,\n} from 'lit';\nimport { customElement, property, query } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { guard } from 'lit/directives/guard.js';\nimport { ref } from 'lit/directives/ref.js';\nimport { repeat } from 'lit/directives/repeat.js';\nimport { localized, msg } from '@lit/localize';\nimport type { FacetBucket, FacetEventDetails, FacetOption } from '../models';\nimport type { CollectionTitles } from '../data-source/models';\nimport arrowLeftIcon from '../assets/img/icons/arrow-left';\nimport arrowRightIcon from '../assets/img/icons/arrow-right';\nimport { srOnlyStyle } from '../styles/sr-only';\nimport {\n  facetRowStyles,\n  facetRowTemplate,\n  getFacetState,\n} from './facet-row-template';\nimport { PageWindow } from './page-window';\nimport {\n  MORE_FACETS__COLUMN_WIDTH,\n  MORE_FACETS__ROWS_PER_COLUMN,\n} from './models';\n\n/** Height in px reserved below the columns for the horizontal scrollbar */\nconst SCROLLBAR_SIZE = 12;\n\n/**\n * A long list of facet buckets laid out top to bottom in fixed-width columns\n * that scroll horizontally and snap to whole pages. Only the pages around the\n * viewport are in the DOM, so thousands of values stay responsive.\n *\n * Rows are plain DOM rather than `<facet-row>` elements, and one listener\n * handles every row's checkbox clicks.\n *\n * See docs/design/column-virtualization.md before changing the windowing.\n *\n * @fires facetClick - A row's checkbox was clicked. Detail: `FacetEventDetails`\n * @fires pageChanged - The scroller came to rest on a different page. Detail:\n *   the 0-based page index\n */\n@customElement('more-facets-scroller')\n@localized()\nexport class MoreFacetsScroller extends LitElement {\n  /** The name of the facet group the buckets belong to (e.g., \"subject\") */\n  @property({ type: String }) facetType?: FacetOption;\n\n  /** Every bucket to show, in display order */\n  @property({ type: Array }) buckets: FacetBucket[] = [];\n\n  /** The collection name cache for converting collection identifiers to titles */\n  @property({ type: Object }) collectionTitles?: CollectionTitles;\n\n  /** How many buckets to stack in each column before starting the next one */\n  @property({ type: Number }) rowsPerColumn = MORE_FACETS__ROWS_PER_COLUMN;\n\n  /**\n   * Whether rows leave out their hide (eye) button, unless the value is\n   * already hidden. Set it when the facet has only one value in all, since\n   * hiding that would leave no results. Don't base it on how many rows are\n   * showing: a filter that leaves a single row still needs its hide button.\n   */\n  @property({ type: Boolean }) omitHideButtons = false;\n\n  /** Accessible name for the columns, e.g. \"Subject values\" */\n  @property({ type: String }) label?: string;\n\n  private win = new PageWindow(this, {\n    colWidth: MORE_FACETS__COLUMN_WIDTH,\n    total: 0,\n    onRest: page => this.rested(page),\n  });\n\n  /** The page an arrow button is scrolling to, until the scroller rests */\n  private pendingPage?: number;\n\n  /** The last page reported in a `pageChanged` event */\n  private reportedPage = 0;\n\n  @query('.scroller')\n  private scroller?: HTMLElement;\n\n  /** The page resting at the start of the viewport */\n  get currentPage(): number {\n    return this.win.currentPage;\n  }\n\n  /** How many pages the buckets span at the current width */\n  get pageCount(): number {\n    return this.win.pageCount;\n  }\n\n  /** Scrolls so that `page` rests at the start of the viewport */\n  scrollToPage(page: number, behavior: ScrollBehavior = 'auto'): void {\n    this.win.scrollToPage(page, behavior);\n  }\n\n  willUpdate(changed: PropertyValues): void {\n    if (changed.has('buckets') || changed.has('rowsPerColumn')) {\n      this.win.setTotal(Math.ceil(this.buckets.length / this.rowsPerColumn));\n    }\n    this.keepFocusOnScreen();\n  }\n\n  render(): TemplateResult {\n    const w = this.win;\n    const live: number[] = [];\n    for (let i = w.first; i <= w.last; i++) live.push(i);\n\n    return html`\n      <div class=\"scroll-nav\">\n        ${this.arrowTemplate('prev')}\n        <div class=\"frame\">\n          <div\n            class=\"scroller\"\n            role=\"group\"\n            aria-label=${ifDefined(this.label)}\n            tabindex=${w.pageCount > 0 ? 0 : -1}\n            style=\"--rowsPerColumn: ${this.rowsPerColumn}\"\n            ${ref(w.attach)}\n            @click=${this.rowClicked}\n            @focusin=${this.rowFocused}\n          >\n            <div class=\"sizer\" style=\"width:${w.totalWidth}px\">\n              ${guard([w.pageCount, w.pageWidth, w.totalWidth], () =>\n                this.snapStubsTemplate(),\n              )}\n              ${repeat(\n                live,\n                i => i,\n                i =>\n                  html`<div\n                    class=\"page\"\n                    data-page=${i}\n                    style=\"left:${i * w.pageWidth}px;width:${w.pageSpan(i)}px\"\n                  >\n                    ${this.pageTemplate(i)}\n                  </div>`,\n              )}\n            </div>\n          </div>\n        </div>\n        ${this.arrowTemplate('next')}\n      </div>\n    `;\n  }\n\n  /**\n   * One empty snap target per page, always mounted. The browser keeps\n   * re-picking its snap target while a fling decelerates, so the targets must\n   * not come and go with the window of rendered pages.\n   */\n  private snapStubsTemplate(): TemplateResult {\n    const w = this.win;\n    const all = Array.from({ length: w.pageCount }, (_, i) => i);\n    return html`${repeat(\n      all,\n      i => i,\n      i =>\n        html`<div\n          class=\"snap-stub\"\n          style=\"left:${i * w.pageWidth}px;width:${w.pageSpan(i)}px\"\n        ></div>`,\n    )}`;\n  }\n\n  /** The columns of rows on page `page` */\n  private pageTemplate(page: number): TemplateResult[] {\n    const { facetType, buckets, rowsPerColumn } = this;\n    if (!facetType) return [];\n\n    const { colsPerPage } = this.win;\n    const firstCol = page * colsPerPage;\n    const endCol = Math.min(\n      firstCol + colsPerPage,\n      Math.ceil(buckets.length / rowsPerColumn),\n    );\n\n    const columns: TemplateResult[] = [];\n    for (let col = firstCol; col < endCol; col++) {\n      const start = col * rowsPerColumn;\n      const rows = buckets.slice(start, start + rowsPerColumn);\n      columns.push(\n        html`<div class=\"column\">\n          ${rows.map(bucket =>\n            facetRowTemplate({\n              facetType,\n              bucket,\n              collectionTitles: this.collectionTitles,\n              omitHideButton: this.omitHideButtons,\n            }),\n          )}\n        </div>`,\n      );\n    }\n    return columns;\n  }\n\n  private arrowTemplate(direction: 'prev' | 'next'): TemplateResult {\n    const { currentPage, pageCount } = this.win;\n    const isPrev = direction === 'prev';\n    const disabled = isPrev ? currentPage <= 0 : currentPage >= pageCount - 1;\n\n    // Arrows keep their space even when there's nothing to scroll to, so that\n    // showing them never changes how many columns fit.\n    const classes = classMap({\n      'scroll-arrow': true,\n      [direction]: true,\n      unneeded: pageCount <= 1,\n    });\n\n    return html`<button\n      type=\"button\"\n      class=${classes}\n      ?disabled=${disabled}\n      aria-label=${isPrev\n        ? msg('Show previous page of values')\n        : msg('Show next page of values')}\n      @click=${() => this.arrowClicked(isPrev ? -1 : 1)}\n    >\n      ${isPrev ? arrowLeftIcon : arrowRightIcon}\n    </button>`;\n  }\n\n  /**\n   * Handles clicks on any row's checkboxes. The rows have no listeners of\n   * their own.\n   */\n  private rowClicked(e: Event): void {\n    const input = e.target;\n    const { facetType } = this;\n    if (!(input instanceof HTMLInputElement) || !facetType) return;\n\n    const bucket = this.buckets.find(b => b.key === input.value);\n    if (!bucket) return;\n\n    const negative = input.classList.contains('hide-facet-checkbox');\n    this.dispatchEvent(\n      new CustomEvent<FacetEventDetails>('facetClick', {\n        detail: {\n          facetType,\n          bucket: { ...bucket, state: getFacetState(input.checked, negative) },\n          negative,\n        },\n      }),\n    );\n  }\n\n  /**\n   * When focus comes into the rows from outside them, or from the scroller\n   * itself (a tab stop just before the rows), keeps it on the page being\n   * shown. Otherwise Tab lands on the mounted page before this one, and\n   * Shift+Tab on the last one after it, and the browser scrolls there.\n   * Moving from row to row is left alone, so Tab and Shift+Tab still carry on\n   * into the next or previous page.\n   */\n  private rowFocused(e: FocusEvent): void {\n    const { scroller } = this;\n    const row = e.target;\n    if (!scroller || !(row instanceof HTMLElement) || row === scroller) return;\n\n    const from = e.relatedTarget;\n    const fromRows =\n      from instanceof Node && from !== scroller && scroller.contains(from);\n    if (fromRows) return;\n\n    const page = Number(row.closest<HTMLElement>('.page')?.dataset.page);\n    const { currentPage } = this.win;\n    if (Number.isNaN(page) || page === currentPage) return;\n\n    const rowsOnPage = [\n      ...scroller.querySelectorAll<HTMLElement>(\n        `.page[data-page=\"${currentPage}\"] input`,\n      ),\n    ].filter(input => !input.closest('[hidden]'));\n    const target =\n      page < currentPage ? rowsOnPage[0] : rowsOnPage[rowsOnPage.length - 1];\n    target?.focus({ preventScroll: true });\n\n    // Whatever moved focus may also scroll to the row it picked: in the\n    // dialog, modal-manager's focus trap already has, before this event; the\n    // browser's own Tab does just after this handler returns. Put the page\n    // back now, and again before the next frame is painted (and before the\n    // window is recomputed, so this page stays mounted).\n    this.win.scrollToPage(currentPage);\n    requestAnimationFrame(() => this.win.scrollToPage(currentPage));\n  }\n\n  /**\n   * If a row has focus and its page is about to leave the window, moves focus\n   * to the scroller itself. Otherwise focus would fall back to the document\n   * when the page is removed, and the arrow keys would stop scrolling. The\n   * scroller being a tab stop matters here: modal-manager's focus trap only\n   * moves Tab between tabbable elements, and from anything else it goes back\n   * to the start of the dialog.\n   */\n  private keepFocusOnScreen(): void {\n    const focusedPage =\n      this.shadowRoot?.activeElement?.closest<HTMLElement>('.page');\n    if (!focusedPage) return;\n    const page = Number(focusedPage.dataset.page);\n    if (page >= this.win.first && page <= this.win.last) return;\n    this.scroller?.focus({ preventScroll: true });\n  }\n\n  private arrowClicked(step: 1 | -1): void {\n    // Count from where an earlier click is already headed, so that clicking\n    // twice quickly moves two pages.\n    const from = this.pendingPage ?? this.win.currentPage;\n    const target = Math.max(0, Math.min(from + step, this.win.pageCount - 1));\n    this.pendingPage = target;\n\n    const reduceMotion = window.matchMedia?.(\n      '(prefers-reduced-motion: reduce)',\n    ).matches;\n    this.win.scrollToPage(target, reduceMotion ? 'auto' : 'smooth');\n  }\n\n  private rested(page: number): void {\n    this.pendingPage = undefined;\n    if (page === this.reportedPage) return;\n    this.reportedPage = page;\n    this.dispatchEvent(\n      new CustomEvent<number>('pageChanged', { detail: page }),\n    );\n  }\n\n  static get styles(): CSSResultGroup {\n    const colWidth = unsafeCSS(`${MORE_FACETS__COLUMN_WIDTH}px`);\n    const scrollbarSize = unsafeCSS(`${SCROLLBAR_SIZE}px`);\n\n    const ownCss = css`\n      :host {\n        display: block;\n        --colWidth: ${colWidth};\n        --facetRowHeight: 2.4rem;\n      }\n\n      .scroll-nav {\n        display: flex;\n        align-items: center;\n      }\n\n      .frame {\n        flex: 1 1 auto;\n        min-width: 0;\n        container-type: inline-size;\n      }\n\n      .scroller {\n        /* Fallback where round() is unsupported: fill the frame */\n        width: 100%;\n        /* Otherwise round down to whole columns, so none is ever cut off */\n        width: max(\n          round(down, 100cqi, var(--colWidth)),\n          min(100cqi, var(--colWidth))\n        );\n        height: calc(\n          var(--rowsPerColumn) * var(--facetRowHeight) + ${scrollbarSize}\n        );\n        margin: 0 auto;\n        outline-offset: 2px;\n        overflow-x: auto;\n        overflow-y: hidden;\n        contain: strict;\n        scroll-snap-type: x mandatory;\n        /* scroll-snap-stop stays at its default 'normal' so a fling can cross\n           many pages before resting. 'always' would force one page per gesture. */\n      }\n\n      /* Keep the scrollbar visible, so it's clear there is more to see */\n      .scroller::-webkit-scrollbar {\n        height: ${scrollbarSize};\n      }\n      .scroller::-webkit-scrollbar-track {\n        background: #f1f1f1;\n        border-radius: 6px;\n      }\n      .scroller::-webkit-scrollbar-thumb {\n        background: #888;\n        border-radius: 6px;\n      }\n      .scroller::-webkit-scrollbar-thumb:hover {\n        background: #555;\n      }\n      /* Chrome ignores the rules above once these are set, so only Firefox gets them */\n      @supports not selector(::-webkit-scrollbar) {\n        .scroller {\n          scrollbar-width: thin;\n          scrollbar-color: #888 #f1f1f1;\n        }\n      }\n\n      .sizer {\n        position: relative;\n        height: 100%;\n      }\n\n      .snap-stub {\n        position: absolute;\n        top: 0;\n        height: 100%;\n        scroll-snap-align: start;\n        pointer-events: none;\n        contain: strict;\n      }\n\n      .page {\n        position: absolute;\n        top: 0;\n        height: 100%;\n        display: flex;\n        contain: content;\n        content-visibility: auto;\n        contain-intrinsic-size: auto none;\n      }\n\n      .column {\n        flex: none;\n        width: var(--colWidth);\n        box-sizing: border-box;\n        padding: 0 0.75rem;\n      }\n\n      /* Rows are a fixed height with one line of text, so every column holds\n         exactly rowsPerColumn rows. The full text is in the row's tooltip. */\n      .facet-row-container {\n        height: var(--facetRowHeight);\n        box-sizing: border-box;\n        align-items: center;\n      }\n      .facet-info-display {\n        flex-wrap: nowrap;\n        min-width: 0;\n      }\n      .facet-title {\n        min-width: 0;\n        overflow: hidden;\n        white-space: nowrap;\n        text-overflow: ellipsis;\n        word-break: normal;\n      }\n      .facet-count {\n        flex: none;\n        padding-left: 0.5rem;\n      }\n\n      .scroll-arrow {\n        flex: none;\n        width: 2.4rem;\n        padding: 0.5rem;\n        background: none;\n        border: none;\n        cursor: pointer;\n      }\n      .scroll-arrow svg {\n        height: 14px;\n        fill: #2c2c2c;\n      }\n      .scroll-arrow:disabled {\n        opacity: 0.3;\n        cursor: default;\n      }\n      .scroll-arrow.unneeded {\n        visibility: hidden;\n      }\n\n      /* Touch screens swipe; the space is better spent on the column */\n      @media (max-width: 560px) {\n        .scroll-arrow {\n          display: none;\n        }\n      }\n    `;\n\n    return [srOnlyStyle, facetRowStyles, ownCss];\n  }\n}\n"]}

package/dist/src/collection-facets/page-window.d.ts

@@ -0,0 +1,73 @@
+import type { ReactiveController, ReactiveControllerHost } from 'lit';
+export type PageWindowConfig = {
+    /** Width in px of every column. Columns are uniform. */
+    colWidth: number;
+    /** Total number of columns in the dataset. */
+    total: number;
+    /** Pages kept mounted on each side of the visible ones. Defaults to 1. */
+    buffer?: number;
+    /**
+     * Called each time the scroller comes to rest (or is re-laid out), with the
+     * page it rests on. Fires even when that page hasn't changed.
+     */
+    onRest?: (page: number) => void;
+};
+/**
+ * Windowing controller for a horizontal scroller of fixed-width columns that
+ * snaps to page boundaries. Tracks which pages should be in the DOM (`first`
+ * through `last`) and which page the scroller last came to rest on.
+ *
+ * All positions are arithmetic on `colWidth`; the only measurement is the
+ * scroller's width, which comes from a ResizeObserver.
+ *
+ * See docs/design/column-virtualization.md before changing this, especially
+ * its invariants.
+ */
+export declare class PageWindow implements ReactiveController {
+    private host;
+    private cfg;
+    /** Index of the first mounted page. */
+    first: number;
+    /** Index of the last mounted page, or -1 when nothing is mounted. */
+    last: number;
+    /** How many columns fit in the scroller, derived from its measured width. */
+    colsPerPage: number;
+    /** The page the scroller last came to rest on. */
+    currentPage: number;
+    private scroller?;
+    private viewportW;
+    private frame;
+    private landFrame;
+    private endTimer;
+    private ro?;
+    /** Page to realign to once the host has re-rendered at a new page width. */
+    private realignTo?;
+    /** Whether to re-check the resting page once the host has re-rendered. */
+    private relandAfterUpdate;
+    constructor(host: ReactiveControllerHost, cfg: PageWindowConfig);
+    get pageWidth(): number;
+    get pageCount(): number;
+    get totalWidth(): number;
+    /**
+     * Width of page `i`. Every page is `pageWidth` except a partial last page,
+     * which is trimmed so that nothing extends the scroll area past `totalWidth`.
+     */
+    pageSpan(i: number): number;
+    /** Updates the number of columns, e.g. when the dataset is filtered. */
+    setTotal(total: number): void;
+    /** Scrolls so that `page` sits at the start of the viewport. */
+    scrollToPage(page: number, behavior?: ScrollBehavior): void;
+    /** Ref callback for the scroll container. */
+    attach: (el?: Element) => void;
+    hostUpdated(): void;
+    hostDisconnected(): void;
+    private detach;
+    private onResize;
+    private onScroll;
+    /** Fallback for browsers without `scrollend`: treat 120ms of quiet as rest. */
+    private onScrollIdle;
+    private onScrollEnd;
+    private recompute;
+    /** Records which page the scroller is resting on. */
+    private land;
+}