its-swiss 0.1.0 → 0.3.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 844fa90d3877d55f3c22b850b00bedfe6156241216b1165aad929ad3540edbd8
-  data.tar.gz: 470159b689994419fb692d26c0d1ede1cd48c73508090a4cb9f472ffa95788cc
+  metadata.gz: 07e25008eecb7b3bdc7e35b37c934d1c948e30f36bca49283798499740fc6c14
+  data.tar.gz: 987b4c9b997effa03a2b2071a7d7072580b36d3655d3f760a6299b5e80e3eab4
 SHA512:
-  metadata.gz: 40e2d6de3e683bc1adffbaabefd3863e3886ce7462c4e071ed916ff45a743f08b1d590535b6c0732821fa56017299d182045c631da1a1e30a9f84e3c00b5d666
-  data.tar.gz: e3ef3c8e93c892330619ad27ac091a0e9a3e9f3b8613db69dda8ed5ddf0da0548e406f83912770a1cfd010612380481906060cc8163aebc85d682846d7b20e52
+  metadata.gz: 2651041e9048e42c29b62456ebd9d9c8f3ad4077315ea8b73c5e839442c7994031d3e7336efcf02435326da91daa3d5ec853919d906664350fc9537c9a799a08
+  data.tar.gz: 8ec6e22df73670a4a118cf10d60a87fc756f5fdae210a2134f3a9c3a38be5210ef30187518046f638a58abff2e4c02b463f809ee7a57d22de32eaf8bd17573db

data/CHANGELOG.md

@@ -2,6 +2,184 @@
 
 Semver. Consumers pin `~> 0.1`.
 
+## 0.3.0 — 2026-09-01
+
+The vertical rhythm, twice: once to put every box on the baseline, and again
+to put the type on it. Found from outside, in a page that embedded the
+specimen and turned the baseline overlay on — the grid was drawn correctly and
+nothing sat on it.
+
+Rendering moves. Every ruled component is a pixel or two shorter, and where a
+browser can trim a text box the leading comes out of the block, so a page is
+tighter than 0.2.0 by a few pixels per block. Read this section before
+upgrading.
+
+### Fixed
+
+- **The vertical rhythm was decorative.** Every line box was a whole number of
+  baselines and the page was still off the grid, because a line box is not a
+  box: wherever a rule sat on a padded edge, its width was *added* to a box
+  whose padding was already whole baselines. A hairline is a pixel, so each
+  one moved everything below it by a pixel — and since the masthead, the
+  footer, `hr`, every table row, every field control, every button, the
+  pagination and the errors block all did it, the error accumulated down the
+  column rather than showing up once. On the specimen the page was one pixel
+  out by the first heading and seven by the footer.
+
+  Every rule now comes out of the padding it sits on — `calc(var(--space-1) -
+  var(--rule-hair))` — and `hr` draws its rule on the top edge of a box one
+  baseline tall instead of compensating in a margin, because a margin
+  compensation collapses away exactly where a rule leads or precedes a
+  section. Boxes that change height: a button and a table row are 40px rather
+  than 42 and 41, a field control 32 rather than 33, a `select` 32 rather than
+  29.
+- **A token in a line of prose grew the line.** `code`, `kbd` and `samp` set
+  in the mono stack are a second font on the line, with an ascent and a
+  descent of their own that the line box had to hold — a pixel at body size,
+  four under the page title, and only on the lines that happened to mention a
+  token. Their leading is now zero, which leaves the line box to the strut;
+  the glyphs are untouched.
+- **`select` ignored its leading.** `font: inherit` hands a control the family
+  and the size and puts its line box back to `normal`, so a select stood 29px
+  where every other control stood 32. It is now given the height the rest of
+  the ladder produces.
+- **A checkbox row was 20px.** The label beside a checkbox took the micro
+  register's 16px line box, which is not the row a 13px control sits on. It
+  now takes the same 24px line the library already gives the micro type you
+  can tap.
+- **Table rows landed on half pixels.** With `border-collapse: collapse` the
+  shared rule belongs to the boundary rather than to either cell, and the
+  browser splits it: every row sat at `x.5` and the header row was half a
+  pixel short. Nothing in the library draws a border two cells could share, so
+  borders are separate — with the spacing still zero — and a row is exactly as
+  tall as the ladder says.
+
+### Added
+
+- **The type sits on the baseline now, not merely in step with it.** Boxes in
+  step are not a baseline grid. Where a line's baseline falls inside its line
+  box depends on the font's ascent and the leading either side of it, so at
+  0.2.0 a paragraph's baselines sat a pixel off the grid, a caption's four,
+  and the two were three pixels out of register with each other — every
+  register keeping its own grid, none of them the page's.
+
+  Every text register is now trimmed — `text-box: trim-both cap alphabetic` —
+  which makes a block's over edge the cap of its first line and its under edge
+  the baseline of its last. What then separates the box from the grid is the
+  cap height, and one padding rounds it up: `calc(round(up, 1cap,
+  var(--baseline)) - 1cap)`, measured by the browser in cap units, so a
+  library that leaves the typeface to the application still never has to be
+  told the font's metrics. It is published as `--cap-correction`, which any
+  component setting its own padding adds to it — `calc(var(--space-1) +
+  var(--cap-correction))` is the right padding in both paths.
+
+  Behind `@supports`, and the fallback is the box rhythm below: Chromium and
+  Safari trim, Firefox does not yet. **The two do not render identically.**
+  Trimming takes the leading out of a block's own box, so the spacing you
+  declare is the spacing you see; a trimmed page is a few pixels tighter per
+  block than the same page in Firefox, and the ladder means what it says
+  rather than what it says plus half a line. Both stay on the grid.
+
+  Controls opt out — a button is five baselines of box with its label centred,
+  and trimming the label would take the box with it — as does any block whose
+  content is not type. `text-box: normal; padding-block-start: 0` is how.
+
+### Fixed
+
+- **`rake release` did not exist.** The release workflow runs
+  `bundle exec rake release`, which is Bundler's task and arrives with
+  `require "bundler/gem_tasks"` — which the Rakefile did not have. So a
+  release passed every check it makes, minted its credentials over OIDC, and
+  stopped at *Don't know how to build task 'release'*. 0.2.0 never reached
+  RubyGems for this reason, and 0.1.0 only did because it was pushed by hand
+  before the workflow existed, which the "already published" guard then read
+  as nothing to do. Guarded now, along with the workflow's own tag-versus-
+  gemspec check.
+- **Every browser test was skipping in CI.** The suite looks for a browser and
+  a driver, and a candidate found on the `PATH` came back as the bare name it
+  was looked up by. Selenium wants a file — given `"chromedriver"` it raises
+  *not a file* — so the harness caught that, fell back to `rack_test` and
+  skipped, on a runner that had just installed a driver for it. The job was
+  green and had checked nothing: 12 runs, 12 skips. Candidates now resolve to
+  where they actually are, and the CI job now names the browser and the driver
+  the same step installed — the runner image ships a chromedriver of its own,
+  and a driver a major version ahead of the browser refuses to start a session
+  at all — and sets `REQUIRE_BROWSER`, which turns a skip into a failure — a skipped browser test is invisible in a passing
+  job, and the assertions that need a browser are the ones about what the
+  cascade and the box model actually did.
+- **The `:head` slot rendered before the library's own stylesheets**, so a
+  layer named there took its place in the order ahead of every layer the
+  library declares and lost to all of them. The specimen's own furniture is
+  one such stylesheet, and it could not override the library it documents. The
+  slot now comes after.
+
+### Guards added
+
+- **Every register's last baseline is on a baseline**, measured in the
+  browser. Under `trim-both … alphabetic` a block's under edge *is* that
+  baseline, so measuring the box measures the type — and it is measured rather
+  than probed on purpose: inserting a span to read a baseline re-lays out a
+  trimmed page and moves the thing it was measuring. Skips where the browser
+  cannot trim.
+- **The correction is zero where the browser cannot trim**, read from the
+  source, so the enhancement can never become a requirement.
+- **Every box on the specimen starts on a baseline and is a whole number of
+  them tall**, measured in the browser on the page that holds one of
+  everything. The suite already asserted that every *line box* was a whole
+  number of baselines, which was true throughout and is what let all of the
+  above through.
+- The leading guard now admits `0`, the one value that is not a measurement:
+  an inline box that takes no part in the line it sits on.
+
+## 0.2.0 — 2026-08-31
+
+Everything here was found by the second consumer inside a day of building on
+0.1.0, which is roughly the point of having one.
+
+### Fixed
+
+- **The pagination partial printed its own source.** Its opening comment held
+  a worked example written in ERB; the example's own closing delimiter ended
+  the comment, and the two lines after it were emitted as page content. On
+  every page that rendered it — including the specimen, the library's own
+  documentation and regression fixture, for the whole of 0.1.0. The example
+  now lives in the README, where it can be quoted.
+- **`.table .numeric` zeroed the end padding of every numeric cell**, not just
+  one in the final column, because it set the padding with the `padding-inline`
+  shorthand. Anywhere else in a table the next column's text began exactly
+  where the number ended. Now sets only `padding-inline-start`, and leaves the
+  final column to the `:last-child` rule that already handled it.
+
+### Changed
+
+- **`its_swiss:install` generates a nested layout** — `app/views/layouts/
+  application.html.erb` ending in `render template: "layouts/its_swiss/shell"`
+  — instead of injecting `layout "its_swiss/shell"` into `ApplicationController`.
+  The shell is filled through `content_for`, which has to run while a view is
+  rendering; naming it on the controller rendered the shell but left nowhere
+  to fill it once, so an application wrote its masthead into every view. The
+  generated layout also **links `theme.css`**, which nothing did before: an
+  application that followed the README exactly got no accent and no grid, with
+  no error anywhere.
+
+  Existing installs keep working. To move: delete the `layout` line from
+  `ApplicationController` and add the layout, or re-run the generator.
+
+### Guards added
+
+Three of the four findings were in views, a generator and a form builder —
+surfaces a CSS library's tests do not reach. Two new ones, both of which fail
+on the bugs above:
+
+- The rendered specimen contains no template delimiters. Every other assertion
+  in that file was about markup that should be present; none about output that
+  should not be.
+- No view's comment quotes ERB. A comment ends at the first closing delimiter
+  it meets, so an example inside one is an example that truncates it.
+
+The specimen's table now has a numeric column that is not last, and a browser
+test measures its end padding — the case that broke.
+
 ## 0.1.0 — 2026-08-31
 
 The first extraction, from Pandatone, which ships on it.
@@ -53,5 +231,7 @@ They are in the boundary the handoff drew and they break the library's own
 rule about two applications; they are the two components most likely to move
 when Stripeclub lands.
 
+*(Both of them shipped broken. See 0.2.0.)*
+
 `.footer` is the same shape of guess — the shell has the slot and Pandatone
 does not fill it.

data/README.md

@@ -14,7 +14,7 @@ the consuming application's to set — it is not a theme with the colour left
 out, it is a style whose argument is that the values are enough.
 
 ```ruby
-gem "its-swiss"
+gem "its-swiss", "~> 0.1"
 ```
 
 ```sh
@@ -63,6 +63,44 @@ holding all of them. Nothing here has a default the gem could pick honestly.
 | `--font-family` | The typeface. The gem ships none — declare `@font-face` and name it |
 | `--value-chroma`, `--value-hue` | Warms the whole value scale together. Neutral as shipped |
 | `--columns`, `--gutter`, `--baseline` | How many fields this problem has, and the unit everything vertical is measured in |
+| `--cap-correction` | Read, not set: what a trimmed register adds above its cap to reach the next baseline |
+
+### The baseline
+
+Everything vertical is measured in baselines, and the type sits on them rather
+than merely in step with them.
+
+Boxes in step are the easy half: line boxes and spacing are whole numbers of
+`--baseline`, so blocks that start together stay together down the column.
+That alone is not a baseline grid — where a line's baseline falls inside its
+line box depends on the font's ascent and the leading either side of it, so a
+caption and a paragraph can both be in step and still be three pixels out of
+register with each other.
+
+So every text register is trimmed to its own type: `text-box: trim-both cap
+alphabetic` makes a block's over edge the cap of its first line and its under
+edge the baseline of its last, and one padding rounds the cap height up to the
+next baseline —
+
+```css
+padding-block-start: calc(round(up, 1cap, var(--baseline)) - 1cap);
+```
+
+— which the browser computes in cap units, so the library still never has to
+be told the font's metrics. It is published as `--cap-correction`: a component
+that sets its own padding on trimmed text adds it, as
+`calc(var(--space-1) + var(--cap-correction))`, which is the right padding
+whether or not the browser trims.
+
+Two things opt out, with `text-box: normal; padding-block-start: 0`: a control,
+whose box is the target and whose label is centred in it, and any block whose
+content is not type — an image, a swatch, a diagram.
+
+It is behind `@supports`, and the fallback is the box rhythm above. Chromium
+and Safari trim; Firefox does not yet. The two do not render identically:
+trimming takes the leading out of a block's own box, so a trimmed page is a
+few pixels tighter per block and the ladder means what it says rather than
+what it says plus half a line. Both stay on the grid.
 
 ### The value scale
 
@@ -126,12 +164,28 @@ it stops on a field line:
 
 ## The layout shell
 
-```ruby
-class ApplicationController < ActionController::Base
-  layout "its_swiss/shell"
-end
+The installer writes `app/views/layouts/application.html.erb` as a layout
+**for** the shell rather than one instead of it:
+
+```erb
+<% content_for :head do %>
+  <%= stylesheet_link_tag "theme", "data-turbo-track": "reload" %>
+<% end %>
+
+<% content_for :mark do %><%= link_to "Your app", root_path %><% end %>
+
+<%= render template: "layouts/its_swiss/shell" %>
 ```
 
+Nested, not `layout "its_swiss/shell"` on a controller. `content_for` has to
+run while a view is rendering, and these slots are set once for the whole
+application — naming the shell on the controller renders it but leaves
+nowhere to fill it, so every view ends up writing the same masthead.
+
+Note the `:head` slot links `theme.css`. The shell links the library's six
+stylesheets and stops; the accent and the grid live in yours, and nothing
+links it but this.
+
 Slots, all optional:
 
 | Slot | |
@@ -157,6 +211,19 @@ beyond the shell is the application's, for the same reason its grid is.
 | `its_swiss_form_with(...)` | `form_with`, already holding the library's builder |
 | `its_swiss_page_numbers(page, pages)` | Which numbers a run of them shows, elided |
 
+### Pagination
+
+The library has no paginator and no opinion about which one you use — it takes
+a page, a total, and something that turns a number into a URL:
+
+```erb
+<%= render "its_swiss/shared/pagination",
+      page: @page, pages: @pages, url: ->(n) { colors_path(page: n) } %>
+```
+
+Long runs are elided around the current page. `window:` (default 2) sets how
+many neighbours show; `label:` names the `<nav>` for a screen reader.
+
 ## The form builder
 
 One shape for every field: a label, a control, and — when there is something to
@@ -211,10 +278,11 @@ every line box is measured in baselines, that no signal rests on colour alone.
 The rest needs a browser, because a rule on the wrong selector reads correctly
 in the CSS and does nothing on a page. Those assert what Chromium actually
 resolved: that an unlayered declaration beats the library's layered one, that
-the accent unset is ink, that quiet ink clears 4.5:1, that every line box is a
-whole number of baselines, that nothing escapes the page at 390px, and that the
-measure lands on a field line the browser really laid out. They skip loudly
-rather than pretending to have checked.
+the accent unset is ink, that quiet ink clears 4.5:1, that every box on the
+specimen starts on a baseline and is a whole number of them tall, that every
+register's last baseline lands on one, that nothing escapes the page at 390px,
+and that the measure lands on a field line the browser really laid out. They
+skip loudly rather than pretending to have checked.
 
 There are no pixel tests.
 

data/app/assets/stylesheets/its_swiss/components.css

@@ -22,7 +22,7 @@
     flex-wrap: wrap;
     align-items: baseline;
     gap: var(--space-2) var(--space-4);
-    padding-block: var(--space-3);
+    padding-block: var(--space-3) calc(var(--space-3) - var(--rule-hair));
     border-bottom: var(--rule-hair) solid var(--rule);
   }
 
@@ -68,7 +68,7 @@
 
   .footer {
     margin-top: var(--space-13);
-    padding-block: var(--space-3);
+    padding-block: calc(var(--space-3) - var(--rule-hair)) var(--space-3);
     border-top: var(--rule-hair) solid var(--rule);
     font-size: var(--size-1);
     line-height: var(--space-3);
@@ -78,11 +78,19 @@
      The one horizontal mark in the style, at the two weights tokens.css
      declares. */
 
+  /* The rule is drawn on the top edge of a box one baseline tall rather than
+     on a box of no height at all, so its width is inside the box and both
+     margins stay whole baselines. Compensating in a margin instead looks
+     right until the margin collapses — a rule leading a section loses its
+     top margin to the section's, a rule before one loses its bottom margin to
+     the same — and a compensation that has collapsed away is a pixel back on
+     the page. Both weights fit the same box, which is why the heavy one only
+     changes the drawing. */
   hr {
-    height: 0;
+    height: var(--space-1);
     border: 0;
     border-top: var(--rule-hair) solid var(--rule);
-    margin-block: var(--space-3);
+    margin-block: var(--space-3) var(--space-2);
   }
 
   hr.rule--heavy { border-top-width: var(--rule-heavy); border-color: var(--ink); }
@@ -104,7 +112,7 @@
 
   .table th,
   .table td {
-    padding-block: var(--space-1);
+    padding-block: calc(var(--space-1) + var(--cap-correction)) calc(var(--space-1) - var(--rule-hair));
     padding-inline-end: var(--space-3);
     border-bottom: var(--rule-hair) solid var(--rule);
     vertical-align: baseline;
@@ -120,8 +128,13 @@
   .table td:last-child,
   .table th:last-child { padding-inline-end: 0; }
 
-  /* A column of numbers reads right-aligned against its own heading. */
-  .table .numeric { text-align: right; padding-inline: var(--space-3) 0; }
+  /* A column of numbers reads right-aligned against its own heading. The
+     space moves to the start, where the previous column's text now ends —
+     but only the start: written as the padding-inline shorthand this also set
+     the end to zero on every numeric cell, which is right for one in the
+     final column, already covered by the rule above, and wrong anywhere else,
+     because the next column then begins exactly where the number ends. */
+  .table .numeric { text-align: right; padding-inline-start: var(--space-3); }
 
   /* --- Definition list ----------------------------------------------------
      Term and value in two columns, the term set in the quiet register and the
@@ -193,9 +206,15 @@
     font: inherit;
     /* No padding above it: the rule belongs under the text, not a line's
        height below it, or the label reads as belonging to nothing. */
-    padding-block: 0 var(--space-1);
+    padding-block: 0 calc(var(--space-1) - var(--rule-hair));
   }
 
+  /* A select takes its height from the browser rather than from the leading
+     it was given — `font: inherit` hands it the family and the size and puts
+     the line box back to normal — so it is the one control told what it is:
+     the same four baselines the others come out at. */
+  .field select { height: var(--space-4); }
+
   .field textarea { resize: vertical; }
 
   /* A checkbox or a radio is the one control whose label sits beside it. */
@@ -233,7 +252,8 @@
     background: transparent;
     color: var(--ink);
     font-family: inherit;
-    padding: var(--space-1) var(--space-2);
+    padding-block: calc(var(--space-1) - var(--rule-hair));
+    padding-inline: var(--space-2);
     cursor: pointer;
     text-decoration: none;
   }
@@ -329,7 +349,7 @@
     align-items: baseline;
     gap: var(--space-1) var(--space-2);
     margin-top: var(--space-5);
-    padding-top: var(--space-2);
+    padding-top: calc(var(--space-2) - var(--rule-hair));
     border-top: var(--rule-hair) solid var(--rule);
   }
 
@@ -356,7 +376,7 @@
 
   .errors {
     width: 100%;
-    padding-top: var(--space-2);
+    padding-top: calc(var(--space-2) - var(--rule-heavy));
     border-top: var(--rule-heavy) solid var(--accent);
   }
 
@@ -393,7 +413,8 @@
     left: var(--space-2);
     top: var(--space-2);
     z-index: 1;
-    padding: var(--space-1) var(--space-2);
+    padding-block: calc(var(--space-1) - var(--rule-hair));
+    padding-inline: var(--space-2);
     background: var(--paper);
     border: var(--rule-hair) solid var(--ink);
     transform: translateY(calc(-100% - var(--space-4)));

data/app/assets/stylesheets/its_swiss/reset.css

@@ -28,8 +28,16 @@
   img, svg, video { max-width: 100%; display: block; }
 
   /* A table is a grid of values, and a gap between its cells is a gap the
-     spacing ladder should be setting rather than the browser. */
-  table { border-collapse: collapse; border-spacing: 0; }
+     spacing ladder should be setting rather than the browser — hence the zero
+     spacing.
+
+     Separate rather than collapsed, because a collapsed border belongs to the
+     boundary rather than to either cell, and the browser pays for it by
+     splitting it: every row lands on a half pixel and the first one is half a
+     pixel short. Nothing here draws a vertical rule or a border two cells
+     could share, so separate borders cost nothing and each row is exactly as
+     tall as the ladder says. */
+  table { border-collapse: separate; border-spacing: 0; }
 
   /* The browser hides [hidden] with display: none, and any author rule that
      sets display at all outranks it — a .button says inline-block, so a

data/app/assets/stylesheets/its_swiss/specimen.css

@@ -22,6 +22,12 @@
     box-shadow: inset 0 0 0 var(--rule-hair) color-mix(in oklch, var(--ink) 12%, transparent);
   }
 
+  /* A swatch is not a line of type. The type registers carry a padding that
+     rounds their cap height up to a baseline; a dd whose whole content is a
+     block of value has no cap to correct, and the padding would just make the
+     row four pixels taller than the ladder says. */
+  .pairs dd:has(> .specimen__value) { text-box: normal; padding-block-start: 0; }
+
   /* The field, drawn. Each child is one span, and the bar inside it shows
      where that span starts and stops against the page. */
   .specimen__grid { row-gap: var(--space-1); }

data/app/assets/stylesheets/its_swiss/tokens.css

@@ -63,10 +63,28 @@
 
     /* --- Rules -------------------------------------------------------------
        Two weights. A hairline separates; a heavier one interrupts, and is
-       kept for the two or three places a page has something to insist on. */
+       kept for the two or three places a page has something to insist on.
+
+       A rule is drawn inside the box it belongs to, never on top of it:
+       wherever one sits on a padded edge, its width comes out of that
+       padding — calc(var(--space-1) - var(--rule-hair)) — and wherever it is
+       the element, out of the margin above it. A pixel added instead of
+       taken is a box a pixel taller than the ladder says, which puts
+       everything below it off the baseline; and since every rule on the page
+       does it, the error accumulates down the column rather than showing up
+       once. */
     --rule-hair: 1px;
     --rule-heavy: 2px;
 
+    /* What a trimmed block adds above its cap to reach the next baseline.
+       Zero here and given a value in type.css where the browser can trim, so
+       a component that sets its own padding writes the same arithmetic in
+       both directions — calc(var(--space-1) + var(--cap-correction)) is the
+       padding either way. It is deliberately not resolved here: a custom
+       property is substituted where it is used, so 1cap inside it is the cap
+       height of the element that reads it rather than of the root. */
+    --cap-correction: 0px;
+
     /* --- Type --------------------------------------------------------------
        Five sizes on an alternating 1.33 / 1.5 ratio, every one a multiple of
        four. Five is the count an interface actually uses: labels, body, a

data/app/assets/stylesheets/its_swiss/type.css

@@ -60,6 +60,7 @@
      At a 16px line box these are 14px targets, under the 24px minimum. The
      leading does the work so the type does not have to change. */
   .micro--tap,
+  .choice label,
   .pagination a,
   .pagination [aria-current] { line-height: var(--space-3); }
 
@@ -106,4 +107,66 @@
   .copy { font: inherit; }
 
   code, pre, kbd, samp { font-family: var(--font-mono); font-size: 0.9em; }
+
+  /* --- The baseline, actually -------------------------------------------
+     Everything above puts whole baselines between one line box and the next,
+     which keeps blocks in step but is not yet a baseline grid: where a line's
+     baseline falls inside its line box depends on the font's ascent and the
+     leading either side of it, so a caption's baselines and a paragraph's are
+     both 24 apart and 3px out of register with each other. The grid was the
+     boxes' and the type sat wherever the font left it.
+
+     Trimming makes the box the type's: the block's over edge becomes the cap
+     of its first line and its under edge the baseline of its last. The cap
+     height is then all that separates the box from the grid, and one padding
+     rounds it up to a whole baseline — measured by the browser, in cap units,
+     so a library that leaves the family to the application still never has to
+     be told the font's metrics. Every baseline in the block lands on a line,
+     because the rest are a whole number of them above the last.
+
+     Behind @supports, and the fallback is the rhythm above: Chromium and
+     Safari trim, Firefox does not yet, and a page that keeps its boxes on the
+     ladder is what the two have in common. */
+  @supports (text-box: trim-both cap alphabetic) and (padding-top: round(up, 1cap, 8px)) {
+    :root { --cap-correction: calc(round(up, 1cap, var(--baseline)) - 1cap); }
+
+    .page-title,
+    h1, h2, h3, h4,
+    p, li, dt, dd, th, td, blockquote, figcaption, caption, legend, label,
+    .micro, .hint, .lede, .empty,
+    /* Flex items are blockified, so the text in a row is trimmable too — and
+       has to be, or a row that aligns on the baseline is aligning a trimmed
+       box against an untrimmed one. */
+    .nav a,
+    .pagination a,
+    .pagination [aria-current],
+    .pagination__gap {
+      text-box: trim-both cap alphabetic;
+      padding-block-start: var(--cap-correction);
+    }
+
+    /* A control's box is the target, not the type in it: a button is five
+       baselines of box with its label centred, and trimming the label would
+       take the box with it. */
+    .button,
+    .copy,
+    /* The label beside a checkbox is the exception among labels: it shares a
+       row with a control the browser draws at a size of its own, and the row
+       is held to a line by the leading rather than by the box. */
+    .choice label { text-box: normal; padding-block-start: 0; }
+  }
+
+  /* A token set in a line of prose is a second font on that line, and a
+     second font brings its own ascent and descent. Both inline boxes align on
+     the baseline and the line box has to hold both, so the line grows — by a
+     pixel at body size, by four under the page title, and only on the lines
+     that happen to mention a token. Zero leading takes the inline box out of
+     that calculation and leaves the line to the strut, which is the one thing
+     on the line already measured in baselines. The glyphs are unaffected:
+     leading has never been what draws them.
+
+     Inline only. A pre is a block, and a block with no leading has no lines. */
+  code, kbd, samp { line-height: 0; }
+
+  pre { line-height: var(--space-3); }
 }

data/app/views/its_swiss/shared/_pagination.html.erb

@@ -1,19 +1,18 @@
+<%# locals: (page:, pages:, url:, window: 2, label: "Pages") %>
 <%#
-  A run of numbers under a hairline. Takes a page number, a total, and a block
-  that turns a number into a URL — the library has no paginator and no opinion
-  about which one an application uses.
+  A run of numbers under a hairline. Takes a page number, a total, and a
+  callable that turns a number into a URL — the library has no paginator and
+  no opinion about which one an application uses. Long runs are elided around
+  the current page, because a hundred numbers is not a control.
 
-    <%= render "its_swiss/shared/pagination", page: @page, pages: @pages,
-          url: ->(n) { colors_path(page: n) } %>
-
-  Long runs are elided around the current page, because a hundred numbers is
-  not a control.
+  The worked example is in the README, and has to be: an ERB comment ends at
+  the first closing delimiter it meets, including one belonging to an example
+  written inside it, and every line after that is emitted as page content.
+  Which is what this file did, on the specimen, for the whole of 0.1.0.
 %>
-<% window = local_assigns.fetch(:window, 2) %>
-<% numbers = its_swiss_page_numbers(page, pages, window:) %>
 <% if pages > 1 %>
-  <nav class="pagination" aria-label="<%= local_assigns.fetch(:label, "Pages") %>">
-    <% numbers.each do |number| %>
+  <nav class="pagination" aria-label="<%= label %>">
+    <% its_swiss_page_numbers(page, pages, window:).each do |number| %>
       <% if number.nil? %>
         <span class="pagination__gap" aria-hidden="true">…</span>
       <% elsif number == page %>

data/app/views/its_swiss/specimen/_table.html.erb

@@ -3,13 +3,21 @@
   <table class="table">
     <caption>Ruled horizontally, never vertically. No zebra: a filled row is a filled area.</caption>
     <thead>
-      <tr><th scope="col">Token</th><th scope="col">Step</th><th scope="col" class="numeric">Lightness</th></tr>
+      <tr>
+        <th scope="col">Token</th>
+        <th scope="col" class="numeric">Lightness</th>
+        <th scope="col">For</th>
+      </tr>
     </thead>
     <tbody>
-      <tr><td>Paper</td><td><code>--value-0</code></td><td class="numeric">98%</td></tr>
-      <tr><td>Hairline</td><td><code>--value-2</code></td><td class="numeric">89%</td></tr>
-      <tr><td>Quiet ink</td><td><code>--value-4</code></td><td class="numeric">54%</td></tr>
-      <tr><td>Ink</td><td><code>--value-5</code></td><td class="numeric">18%</td></tr>
+      <tr><td>Paper</td><td class="numeric">98%</td><td>The ground</td></tr>
+      <tr><td>Hairline</td><td class="numeric">89%</td><td>A rule you barely see</td></tr>
+      <tr><td>Quiet ink</td><td class="numeric">54%</td><td>Secondary text</td></tr>
+      <tr><td>Ink</td><td class="numeric">18%</td><td>Ink</td></tr>
     </tbody>
   </table>
+  <p class="hint">
+    The numeric column is deliberately not the last one: a figure that runs
+    straight into the next column is what this table shipped with.
+  </p>
 </section>

data/app/views/layouts/its_swiss/shell.html.erb

@@ -29,10 +29,15 @@
     <%= csrf_meta_tags %>
     <%= csp_meta_tag %>
 
-    <%= yield :head %>
-
     <%= its_swiss_stylesheet_tags %>
     <%= javascript_importmap_tags if respond_to?(:javascript_importmap_tags) %>
+
+    <%# After the library, not before it. A layer takes its place in the order
+        from where it is first named, so a page that adds a layered stylesheet
+        through this slot — the specimen's own furniture is one — would
+        otherwise land ahead of every layer the library declares and lose to
+        all of them. %>
+    <%= yield :head %>
   </head>
 
   <body>

data/lib/generators/its_swiss/install/install_generator.rb

@@ -16,15 +16,20 @@ module ItsSwiss
         template "theme.css", "app/assets/stylesheets/theme.css"
       end
 
-      # An application that has already chosen a layout has chosen it.
-      def render_through_the_shell
-        controller = "app/controllers/application_controller.rb"
-        return say_status(:skip, "#{controller} not found", :yellow) unless exists?(controller)
-
-        contents = read(controller)
-        return say_status(:skip, "#{controller} already chooses a layout", :yellow) if contents.match?(/^\s*layout\s/)
-
-        inject_into_class controller, "ApplicationController", %(  layout "its_swiss/shell"\n)
+      # A nested layout, not a `layout` line on the controller.
+      #
+      # 0.1.0 injected `layout "its_swiss/shell"` into ApplicationController.
+      # That renders the shell, but the shell is filled through content_for,
+      # and content_for has to run while a view is rendering — so there was
+      # nowhere to set the masthead once, and an application would write it
+      # into every view before noticing. This is the Rails idiom for the same
+      # thing, and it needs no line on the controller at all, because
+      # application.html.erb is already the default layout's name.
+      #
+      # copy_file rather than template: the file is ERB the application will
+      # run, not ERB this generator should.
+      def create_the_layout
+        copy_file "application.html.erb", "app/views/layouts/application.html.erb"
       end
 
       # Development only, and the controller refuses it a second time: the
@@ -50,8 +55,9 @@ module ItsSwiss
 
           its-swiss is installed. What is left is yours:
 
-            app/assets/stylesheets/theme.css   the accent, the typeface, the grid
-            /its-swiss/specimen                every component, rendered twice
+            app/assets/stylesheets/theme.css      the accent, the typeface, the grid
+            app/views/layouts/application.html.erb the shell's slots, to fill
+            /its-swiss/specimen                   every component, rendered twice
 
           The library ships no typeface and no palette. Set --accent to one
           colour and read the specimen with it unset: if the page still works,

data/lib/generators/its_swiss/install/templates/application.html.erb

@@ -0,0 +1,32 @@
+<%# What this application puts in the slots its_swiss/shell leaves. Everything
+    else a layout used to have to remember — the view transition opt-in, the
+    library's stylesheets, the importmap, a way past the masthead for a
+    keyboard, and the flash — is the shell's.
+
+    A layout rather than `layout "its_swiss/shell"` on the controller, because
+    content_for has to run while a view is rendering and these are set once for
+    the whole application. The last line is what makes this a layout *for* the
+    shell rather than one instead of it. %>
+
+<% content_for :head do %>
+  <%# This application's own stylesheets. The shell links the library's six and
+      stops; theme.css holds the accent and the grid, and nothing links it but
+      this. Unlayered, so they win wherever the two meet, whatever order they
+      arrive in. %>
+  <%= stylesheet_link_tag "theme", "data-turbo-track": "reload" %>
+<% end %>
+
+<% content_for :mark do %>
+  <%= link_to Rails.application.class.module_parent_name.underscore.humanize, root_path %>
+<% end %>
+
+<% content_for :nav do %>
+  <%# nav_link_to marks where you are with aria-current, which the library
+      colours and weights. Pass current: where current_page? would be wrong —
+      on a show page that still belongs to an index, say. %>
+<% end %>
+
+<%# Give main the grid when this application's pages are laid out on one:
+    content_for :main_class, "grid" %>
+
+<%= render template: "layouts/its_swiss/shell" %>

data/lib/its_swiss/version.rb

@@ -1,3 +1,3 @@
 module ItsSwiss
-  VERSION = "0.1.0"
+  VERSION = "0.3.0"
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: its-swiss
 version: !ruby/object:Gem::Version
-  version: 0.1.0
+  version: 0.3.0
 platform: ruby
 authors:
 - Bobby Meyer
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2026-08-31 00:00:00.000000000 Z
+date: 2026-09-01 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: railties
@@ -136,6 +136,7 @@ files:
 - config/importmap.rb
 - config/routes.rb
 - lib/generators/its_swiss/install/install_generator.rb
+- lib/generators/its_swiss/install/templates/application.html.erb
 - lib/generators/its_swiss/install/templates/theme.css
 - lib/its-swiss.rb
 - lib/its_swiss.rb