A shelf with counts

August 2026 · JavaScript: 0 B

2 min read Original article ↗

Lab · Baseline · replaces a faceted-search widget and a count query

Within a facet the boxes are or. Across facets they are and. Each count is the rows that would remain if you ticked that box, given the other facet. A hole in the catalog hides the option that would read (0).

Specimen

There is no folio printed in oxide. Check Folio and the Oxide option hides. The counts follow the list.

  1. Issue 01

    oxide · quarto

  2. Gripper

    paper · folio

  3. Night folio

    ink · broadsheet

  4. Lab quarto

    paper · quarto

  5. Make-ready

    ink · folio

  6. Recipe rust

    oxide · broadsheet

  7. Issue 02

    paper · folio

  8. Overlay

    oxide · quarto

  9. Hornbook

    ink · folio

  10. Waste sheet

    paper · quarto

  11. Work and turn

    ink · broadsheet

  12. Oxide quarto

    oxide · quarto

  13. Issue 03

    paper · folio

  14. Tympan

    oxide · broadsheet

  15. Colophon

    paper · quarto

  16. Second night

    ink · folio

  17. Binding dummy

    oxide · quarto

  18. Recipe broad

    ink · broadsheet

Two ledgers

A row with display: none does not increment. The format numbers therefore live on a copy that only hides for Ink, and the ink numbers on a copy that only hides for Format. The cards hide for both. counter() only sees what came before it, so the lists sit first in the source; order puts the facets on top.

CSS cannot test counter() == 0. The missing pairs are written as :has() rules: folio has no oxide, quarto has no ink, broadsheet has no paper. A checked box stays, so you can still uncheck your way into an empty cut.

.ledger-format > [data-format='folio'] {
  counter-increment: n-folio;
}

.shelf:has(#shelf-ink:checked, #shelf-oxide:checked):not(
  :has(#shelf-paper:checked)
) :is(.stock, .ledger-format) > [data-ink='paper'] {
  display: none;
}