explico 0.4.0 → 0.6.0

package/src/components/table/Table.astro

@@ -17,7 +17,7 @@
 export interface Props {
   /** Stable key, e.g. `id="kinematics-summary"`. Omit for a positional-only table. */
   id?: string;
-  /** Visible caption, shown below the table and in the hover-preview card. */
+  /** Visible caption, shown above the table (the LaTeX convention — the reverse of a figure caption, which goes below) and in the hover-preview card. */
   caption: string;
   /** Computed by `remark-notation.mjs` — never author this directly. */
   number?: string;
@@ -43,9 +43,6 @@ if (!number || !anchorId) {
   data-tab-number={number}
   data-tab-key={id}
 >
-  <div class="keyed-table__body">
-    <slot />
-  </div>
   <figcaption class="keyed-table__caption">
     <a
       class="keyed-table__number"
@@ -54,6 +51,9 @@ if (!number || !anchorId) {
     >
     <span class="keyed-table__caption-text">{caption}</span>
   </figcaption>
+  <div class="keyed-table__body">
+    <slot />
+  </div>
 </figure>
 
 <style>
@@ -67,13 +67,100 @@ if (!number || !anchorId) {
   }
 
   .keyed-table__body :global(table) {
-    margin: 0;
+    /* Centered in the content column when narrower than it, same as a
+       centered figure — not pinned to the start edge just because that's
+       where block layout would otherwise leave it. Auto margins resolve to
+       0 (left-aligned, scrollable) once the table is wider than its
+       container, so this is safe unconditionally. */
+    margin-block: 0;
+    margin-inline: auto;
   }
 
   .keyed-table__caption {
-    margin-block-start: 0.5rem;
-    font-size: var(--sl-text-sm);
+    position: relative;
+    margin-block-end: 0.5rem;
+    font-size: var(--sl-text-base);
+    color: var(--sl-color-gray-3);
+  }
+
+  /* Added by the row-pagination script below for every table (it always
+     gets a minimize-to-header-row toggle, regardless of row count) —
+     reserves room so caption text never runs under the absolutely-positioned
+     toggle button in the corner. */
+  .keyed-table__caption--paginated {
+    padding-inline-end: 1.75em;
+  }
+
+  /* The toggle button and everything else this rule block styles are
+     created at runtime (see the `<script>` below), so they never carry this
+     component's `data-astro-cid-*` scoping attribute — `:global()` is
+     required for the same reason `.keyed-table__body :global(table)` above
+     needs it. Reuses `.table-overflow-expand-btn` from
+     `TableOverflowExpander.astro` (Part 4) for its base look
+     (border/hover/focus/print-hidden), just repositioned into the caption's
+     top-right corner instead of a flex-row side column. */
+  :global(.keyed-table__pagination-toggle) {
+    position: absolute;
+    top: 0;
+    inset-inline-end: 0;
+    border: 1px solid var(--sl-color-gray-5);
+    border-radius: 0.3rem;
+  }
+
+  :global(.keyed-table__more-row td) {
+    padding-block: 0.4rem;
     color: var(--sl-color-gray-3);
+    font-size: var(--sl-text-sm);
+    font-style: italic;
+    text-align: center;
+  }
+
+  /* Only the live table's own more-row gets this class — a hover-card
+     preview clone (`FloatRefLayer.astro`) strips it so the same row reads
+     as an inert truncation marker there instead of a dead-looking link. */
+  :global(.keyed-table__more-row--interactive) {
+    cursor: pointer;
+  }
+
+  :global(.keyed-table__more-row--interactive:hover td),
+  :global(.keyed-table__more-row--interactive:focus-visible td) {
+    color: var(--sl-color-text-accent);
+    text-decoration: underline;
+  }
+
+  :global(.keyed-table__more-row--interactive:focus-visible) {
+    outline: 2px solid var(--sl-color-accent);
+    outline-offset: -0.15rem;
+  }
+
+  :global(.keyed-table__pagination-links) {
+    margin-block-start: 0.75rem;
+    text-align: center;
+  }
+
+  :global(.keyed-table__pagination-link) {
+    padding: 0;
+    border: 0;
+    background: none;
+    color: var(--sl-color-text-accent);
+    font: inherit;
+    font-size: var(--sl-text-sm);
+    text-decoration: underline;
+    cursor: pointer;
+  }
+
+  :global(.keyed-table__pagination-link:hover),
+  :global(.keyed-table__pagination-link:focus-visible) {
+    color: var(--sl-color-white);
+  }
+
+  :global(.keyed-table__pagination-link:focus-visible) {
+    outline: 2px solid var(--sl-color-accent);
+    outline-offset: 0.15rem;
+  }
+
+  :global(.keyed-table__pagination-link + .keyed-table__pagination-link) {
+    margin-inline-start: 1.25rem;
   }
 
   .keyed-table__number {
@@ -101,5 +188,204 @@ if (!number || !anchorId) {
     .keyed-table__number {
       color: inherit;
     }
+
+    :global(.keyed-table__pagination-links),
+    :global(.keyed-table__more-row) {
+      display: none !important;
+    }
+
+    /* A minimized/truncated table must still print in full regardless of
+       its on-screen state — same pattern every other collapsible in
+       docs/plans/collapsible-disclosure.md follows. */
+    .keyed-table__body :global(tr[hidden]) {
+      display: table-row !important;
+    }
   }
 </style>
+
+<script>
+  /**
+   * Table row show/hide pagination
+   * (docs/plans/collapsible-disclosure.md Part 5) — three states per table,
+   * not two independent toggles: `minimized` (header row only) ->
+   * `truncated` (first/last few rows, the default once a table is long
+   * enough to bother) -> `expanded` (every row). Every table gets the
+   * minimize-to-header-row toggle in its caption, regardless of row count —
+   * a short table (`totalRows <= PAGINATE_ABOVE_ROWS`) just never grows the
+   * "… N more rows …" truncation row or the "Show less"/"Minimize" links
+   * below it, so it only ever has two reachable states, `minimized` and
+   * `expanded`. No persisted state here, same as `TableOverflowExpander.astro`'s
+   * expand/collapse (Part 4) — this is transient per-view UI, not a reader
+   * preference worth remembering across visits.
+   *
+   * Independent of `TableOverflowExpander.astro` otherwise: that script
+   * measures/reacts to horizontal overflow, this one only ever hides/shows
+   * `<tr>`s inside whatever `<table>` ends up in `.keyed-table__body` — it
+   * doesn't matter which of the two scripts wires up first. Hiding rows can
+   * change whether the table still overflows horizontally though (fewer
+   * visible rows can mean narrower content), so every state change
+   * dispatches a plain `resize` event afterward — `TableOverflowExpander`
+   * already listens for that to re-check its own expand button, which
+   * avoids these two files needing to import from each other.
+   */
+
+  type PaginationState = 'minimized' | 'truncated' | 'expanded';
+
+  const KEEP_EACH_END = 3;
+  const PAGINATE_ABOVE_ROWS = 6;
+
+  // Mirrors `TableOverflowExpander.astro`'s own `captionFor` exactly, for
+  // the same aria-label wording across both tables' controls.
+  function captionFor(figure: HTMLElement): string {
+    const text = figure
+      .querySelector('.keyed-table__caption-text')
+      ?.textContent?.trim();
+    const number = figure.dataset.tabNumber;
+    if (number && text) return `Table ${number} — ${text}`;
+    return text || 'this table';
+  }
+
+  function wireTable(figure: HTMLElement) {
+    figure.dataset.paginationWired = 'true';
+
+    const body = figure.querySelector<HTMLElement>(
+      ':scope > .keyed-table__body',
+    );
+    const table = body?.querySelector('table');
+    const tbody = table?.tBodies[0];
+    if (!body || !table || !tbody) return;
+
+    const rows = Array.from(tbody.rows);
+    const totalRows = rows.length;
+    if (totalRows === 0) return;
+
+    // Long enough to also need truncation, on top of the minimize toggle
+    // every table gets below.
+    const paginated = totalRows > PAGINATE_ABOVE_ROWS;
+
+    const caption = figure.querySelector<HTMLElement>(
+      ':scope > .keyed-table__caption',
+    );
+    caption?.classList.add('keyed-table__caption--paginated');
+    const toggle = document.createElement('button');
+    toggle.type = 'button';
+    toggle.className =
+      'table-overflow-expand-btn keyed-table__pagination-toggle';
+    caption?.append(toggle);
+
+    let moreRow: HTMLTableRowElement | null = null;
+    let links: HTMLElement | null = null;
+    let showLess: HTMLButtonElement | null = null;
+    let minimizeAll: HTMLButtonElement | null = null;
+
+    if (paginated) {
+      const hiddenCount = totalRows - KEEP_EACH_END * 2;
+      const headerCells = table.tHead?.rows[0]?.cells ?? rows[0].cells;
+      const colCount =
+        Array.from(headerCells).reduce(
+          (sum, cell) => sum + (cell.colSpan || 1),
+          0,
+        ) || 1;
+
+      // The "… N more rows …" separator is itself the control that reveals
+      // the rest of the table — the whole row is clickable (and, via
+      // `role="button"`/`tabIndex`, focusable/keyboard-activatable), not just
+      // its text, so there's no separate "Show all N rows" link to also make
+      // room for. `--interactive` carries the pointer cursor/hover-underline
+      // styling; `FloatRefLayer.astro`'s cloned preview strips both that class
+      // and the role/tabindex so the same markup reads as an inert truncation
+      // marker there instead.
+      moreRow = document.createElement('tr');
+      moreRow.className = 'keyed-table__more-row keyed-table__more-row--interactive';
+      moreRow.tabIndex = 0;
+      moreRow.setAttribute('role', 'button');
+      moreRow.setAttribute('aria-label', `Show all ${totalRows} rows`);
+      const moreCell = document.createElement('td');
+      moreCell.colSpan = colCount;
+      moreCell.textContent =
+        hiddenCount === 1 ? '… 1 more row …' : `… ${hiddenCount} more rows …`;
+      moreRow.append(moreCell);
+      tbody.insertBefore(moreRow, rows[KEEP_EACH_END]);
+
+      // Centered below the table body, and only ever shown once every row is
+      // — "Show less" un-truncates back down, "Minimize to header row"
+      // duplicates the caption toggle's own minimize action for a reader who
+      // has scrolled well past that corner button by the time all the rows
+      // are on screen.
+      links = document.createElement('p');
+      links.className = 'keyed-table__pagination-links';
+      showLess = document.createElement('button');
+      showLess.type = 'button';
+      showLess.className = 'keyed-table__pagination-link';
+      showLess.textContent = 'Show less';
+      minimizeAll = document.createElement('button');
+      minimizeAll.type = 'button';
+      minimizeAll.className = 'keyed-table__pagination-link';
+      minimizeAll.textContent = 'Minimize to header row';
+      links.append(showLess, minimizeAll);
+      body.after(links);
+    }
+
+    // A short table only ever reaches `minimized`/`expanded` — `truncated`
+    // is unreachable for it since there's nothing to truncate.
+    let state: PaginationState = paginated ? 'truncated' : 'expanded';
+
+    function render() {
+      const minimized = state === 'minimized';
+      const expanded = state === 'expanded';
+      rows.forEach((row, index) => {
+        const inMiddle =
+          paginated &&
+          index >= KEEP_EACH_END &&
+          index < totalRows - KEEP_EACH_END;
+        row.hidden = minimized || (inMiddle && !expanded);
+      });
+      if (moreRow) moreRow.hidden = minimized || expanded;
+
+      toggle.textContent = minimized ? '▾' : '▴';
+      toggle.setAttribute('aria-expanded', String(!minimized));
+      toggle.setAttribute(
+        'aria-label',
+        minimized
+          ? `Show rows of ${captionFor(figure)}`
+          : `Minimize ${captionFor(figure)} to its header row`,
+      );
+      toggle.title = minimized ? 'Show rows' : 'Minimize to header row';
+
+      // Only meaningful once every row is already shown — while truncated,
+      // the more-row link above is itself the only control needed.
+      if (links) links.hidden = !expanded;
+
+      // Hiding/showing rows can change whether the table still overflows
+      // horizontally — let `TableOverflowExpander.astro`'s own debounced
+      // resize handler re-check its expand button.
+      window.dispatchEvent(new Event('resize'));
+    }
+
+    function setState(next: PaginationState) {
+      if (state === next) return;
+      state = next;
+      render();
+    }
+
+    toggle.addEventListener('click', () => {
+      setState(
+        state === 'minimized' ? (paginated ? 'truncated' : 'expanded') : 'minimized',
+      );
+    });
+    moreRow?.addEventListener('click', () => setState('expanded'));
+    moreRow?.addEventListener('keydown', (event) => {
+      if (event.key !== 'Enter' && event.key !== ' ') return;
+      event.preventDefault();
+      setState('expanded');
+    });
+    showLess?.addEventListener('click', () => setState('truncated'));
+    minimizeAll?.addEventListener('click', () => setState('minimized'));
+
+    render();
+  }
+
+  document
+    .querySelectorAll<HTMLElement>('.keyed-table:not([data-pagination-wired])')
+    .forEach(wireTable);
+</script>