RubyGems - its-swiss - Versions diffs - 1.0.0 → 1.1.0 - Mend

its-swiss 1.0.0 → 1.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (6) hide show

checksums.yaml +4 -4
data/CHANGELOG.md +19 -0
data/README.md +108 -441
data/app/assets/stylesheets/its_swiss/components.css +27 -1
data/lib/its_swiss/version.rb +1 -1
metadata +2 -2

checksums.yaml CHANGED Viewed

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: e87eed3705a969f109f9e21d5c4242173bcbcbbb6d0700441fbeb588c5aa6845
-  data.tar.gz: ac3ab6f0964280e6ea4f2ac67db52975ab7f55cfd9a341976515a76718275d2b
+  metadata.gz: 23a617f3f75e3b652becb681c8b54a38d122ba3aa0d3b7cfa4cc3187eb2177b5
+  data.tar.gz: d7d384f67cf5653cb917322ccb560c05fa6a97858f8668c46785c7520e86a562
 SHA512:
-  metadata.gz: 38eb6ffa9089d649da9a1f6fd57ebc71e54515445051147acb4aad296c2d68bf1641926113f45b8a79f757cc52f1a5034a19f447d11ce01b2cd51c8b4e32b055
-  data.tar.gz: f48734b201bf2528f749c1990065d7ae68c1da803d3d67aec8f717f11bf48da95620f9a1b469ec0294fc794d603c3ad2be3c038475d4e670e5e9eefddcb76201
+  metadata.gz: 56fb78910a3dd24b99bce266e8d008096ae4158efcb80e8025843a5813d958cdf1673272b834f7b15926fac0b2111b0de168880ee4f6dc1e639beb9a3ea3b52c
+  data.tar.gz: 05f4c40910d9febd7f82e66867be7c5c1ef30c617a5d0cead8376c3ac931bb1651e689c1eecc6d8ff88524841f5e0e8b19a92f0a9d4a70c1d53f4522f74d4204

data/CHANGELOG.md CHANGED Viewed

@@ -2,6 +2,25 @@
 Semver. Consumers pin `~> 1.0`.
+## 1.1.0 — 2026-09-24
+### Added
+- **A textarea is ruled.** A dotted rule on every line of the grid that type
+  can stand on, on the row of pixels a rule would take there, in
+  `--rule-strong`. None on the line of air under the label, which nothing is
+  written on, and none under the last line, which the control's own rule
+  closes. The dots are painted in the text's box and scroll with it, so a
+  long message keeps a rule under every line. `--ruled-dot` sets their
+  colour.
+### Changed
+- **A textarea's line of air is a border.** It was padding, so text scrolled
+  up ran on into the air, under a dense form's label. It is a transparent
+  border of the same width, so scrolled text is cut at the first line. The
+  box, and where its text sits, are unchanged.
 ## 1.0.0 — 2026-09-08
 The surface three applications settled on, reviewed as a whole: what a tech

data/README.md CHANGED Viewed

@@ -1,492 +1,159 @@
 # its-swiss
-A Swiss typographic style for Rails applications, in two layers.
+sensible Swiss defaults for Rails
-The **core** is plain CSS and one small piece of JavaScript: tokens, faces, a
-reset, typography, grid primitives, components and view transition rules. It
-needs nothing but a `<link>` tag.
+Tokens, reset, typography, grid primitives and components in the spirit of the
+International Typographic Style, as plain CSS plus a Rails engine that ships
+it. Monochrome by default: the value scale does the work, and the one accent
+is the consuming application's to set.
-The **engine** ships that core through `app/assets`, plus a base layout shell,
-partials, a form builder, helpers and an install generator.
-It is monochrome. A six-step value scale does the work and the one accent is
-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.
+## quickstart
 ```ruby
-gem "its-swiss", "~> 1.0"
+# Gemfile
+gem "its-swiss", github: "bobbymeyer/its-swiss"
 ```
 ```sh
+bundle install
 bin/rails generate its_swiss:install
 ```
-Then open `/its-swiss/specimen`.
-The current specimen is also published, for anywhere that cannot run Rails:
-**[bobbymeyer.github.io/its-swiss](https://bobbymeyer.github.io/its-swiss/)**.
-`bin/specimen out` writes it as one static file, and a Pages workflow does
-that on every push to `main`; the versions kept in `published/` are copied
-alongside it at `/<version>.html` for anything that needs to pin.
-## What is in the gem, and what stays in the application
+The generator fills the four slots an application owns:
-| In the gem | Stays in the application |
+| It writes | Which is |
 | --- | --- |
-| Tokens, reset, base typography | The grid itself — which blocks span which fields |
-| Masthead, nav, page head, footer, table, form, button, definition list, pagination, filters, cards | Domain components |
-| A base layout shell with `content_for` slots | Page layouts beyond the shell |
-| View transition names and durations | Which pages transition to which |
-| The value scale and the accent slot | Any hue, any palette knowledge |
-| The machine's grotesque, declared to sit on the baseline | The typeface |
-A pattern enters the gem after it appears in two applications, not before.
-### The boundary is the cascade, not a convention
+| `app/assets/stylesheets/theme.css` | The accent, the typeface, the value scale, the field count, the baseline |
+| `app/views/layouts/application.html.erb` | A nested layout inside the shell — no `layout` line on any controller |
+| A route for the specimen | Development only; skipped if already mounted |
-Everything the gem ships is inside a cascade layer. An application's own CSS is
-unlayered, and an unlayered rule beats every layered one whatever its
-specificity — so the application always wins, without having to out-specify
-anything or reach for `!important`.
-```
-@layer its-swiss.tokens, its-swiss.faces, its-swiss.reset, its-swiss.type,
-       its-swiss.grid, its-swiss.components, its-swiss.transitions;
-```
+Everything else is a gem dependency: Propshaft finds the stylesheets, and the
+engine pins its own JavaScript, so upgrading the gem is enough.
-Each file declares its own layer, so linking the seven files individually (what
-`its_swiss_stylesheet_tags` does) and linking the single `its-swiss.css` that
-imports them resolve identically.
+[**Specimen →**](https://bobbymeyer.github.io/its-swiss/) — every component,
+the type scale, the value scale and the grid primitives, rendered by the
+library and published from this repository.
-## The slots an application fills
+## the shell
-`bin/rails generate its_swiss:install` writes `app/assets/stylesheets/theme.css`
-holding all of them. Nothing here has a default the gem could pick honestly.
+`layouts/its_swiss/shell` carries the view-transition opt-in, the stylesheets
+in layer order, a skip link, and the slots. All optional:
-| Slot | What it is |
+| Slot | Is |
 | --- | --- |
-| `--accent`, `--accent-ink` | State and emphasis only. Unset, the accent is ink |
-| `--font-family` | The typeface. The gem ships none — declare yours with `its_swiss_typeface`, and this is what a machine without it falls through to |
-| `--value-chroma`, `--value-hue` | Warms the whole value scale together. Neutral as shipped |
-| `--columns`, `--gutter` | How many fields this problem has |
-| `--line` | The baseline: the interval everything vertical registers to |
-| `--module` | A field's height, in lines: what divides the page down |
-| `--measure-characters` | How many characters a line of prose holds; the grid is what it stops on |
-| `--ratio` | A picture's aspect ratio, per figure — the library cannot read one |
-| `--card` | How many fields a card takes, and at which widths |
-| `--filter-label` | The column a filter's label occupies, so every register's choices start on one line |
-| `--face-150`, `--face-200`, `--face-100` | Read, not set: the face a register names for its ratio of leading to size |
-### The baseline
-`--line` (24px) is the interval everything vertical registers to, and the
-leading of the body text: one number, because that is what a baseline grid
-is. Every leading, margin, padding and gap on the vertical axis is a whole
-number of lines; `--space-*` is the horizontal step.
-Every baseline is the under edge of its line box, two ways. The library sets
-every register in a face of its own, the machine's grotesque declared again
-with its ascent set to the register's ratio of leading to size and no
-descent, which Chromium and Firefox honour. Where a browser ignores what a
-face says about its metrics, Safari, every text block is trimmed to its type
-instead, and one line of script ahead of the stylesheets says which is in
-force. `its_swiss_stylesheet_tags` writes it; anything linking the
-stylesheets by hand should too:
-```html
-<script>if (!("ascentOverride" in FontFace.prototype)) document.documentElement.classList.add("no-metric-overrides")</script>
-```
-The whole argument, and what follows from it, is in `DESIGN.md`.
-#### Your own typeface
-Declared under the same names with the same descriptors, and the helper writes
-it:
-```erb
-<%= its_swiss_typeface regular: "inter-regular.woff2", bold: "inter-bold.woff2" %>
-<%= its_swiss_typeface variable: "inter.woff2", mono: "jetbrains-mono.woff2" %>
-<%= its_swiss_typeface variable: "inter.woff2", family: "Inter" %>
-```
-Put it after the library's stylesheets. `family:` declares the typeface under
-its own name as well, which a control's text is set in; `--font-family` is
-what a machine with none of the faces falls through to.
-#### The one subgrid
-A block of small type may sit on a half-line:
-```html
-<div class="subgrid">…</div>
-```
-It halves `--line` for the block's **children** and moves the small register
-onto the face for its new ratio. A block, and only a block: an inline
-`<small>` shares its paragraph's line.
-### The value scale
-Six steps of OKLCH lightness, paper to ink. OKLCH because the steps have to be
-perceptually even to read as a scale at all — the same arithmetic in sRGB puts
-four of the six inside the top quarter of the range.
-| Token | Lightness | Alias | For |
-| --- | --- | --- | --- |
-| `--value-0` | 98% | `--paper` | The ground |
-| `--value-1` | 94% | `--paper-shaded` | A shaded ground |
-| `--value-2` | 89% | `--rule` | A hairline |
-| `--value-3` | 72% | `--rule-strong` | A rule that has to be seen |
-| `--value-4` | 54% | `--ink-quiet` | Secondary text — 4.7:1 on paper |
-| `--value-5` | 18% | `--ink` | Ink |
-The ladder is deliberately not evenly spaced: a hairline has to be barely
-there, so the top is dense; the middle only has to hold secondary text away
-from primary, so it is sparse. An even ladder gives a usable mid-gray and no
-usable rule.
-Neutral as shipped. `--value-chroma: 0.006; --value-hue: 95` turns the whole
-ladder to the warm grays of a printed page — and, near enough, to Pandatone's:
-| Step | Warmed | Pandatone had |
-| --- | --- | --- |
-| `--value-0` | `#FAF8F4` | `#FAF9F7` `--ground` |
-| `--value-2` | `#DCDBD6` | `#DCDAD4` `--keyline` |
-| `--value-4` | `#706F6B` | `#6F6F6A` `--ink-quiet` |
-| `--value-5` | `#12120F` | `#111111` `--ink` |
-Within three units a channel, which is the cost of the four hand-picked
-values becoming one ladder with a single chroma and a single hue. Measured in
-Chromium, not calculated.
-### Pictures
-The one case that nearly does not transfer from print. A picture's height is
-its fluid width over its ratio, so without help one picture puts the whole
-column below it off the grid at every width but a few.
-```html
-<figure class="figure" style="--ratio: 1.618">
-  <img src="…" alt="…">
-  <figcaption class="micro">…</figcaption>
-</figure>
-```
-The box is the picture's natural height taken up to the next whole line, by
-`round()`, recomputed as the container resizes. The picture is fitted inside
-it — `contain` by default, because a library must not crop an image it did not
-choose. `.figure--cover` crops instead, which is the Müller-Brockmann move and
-yours to make where you own the picture.
-`--ratio` is yours to declare; CSS cannot read an intrinsic one.
-### The grid
-The gem ships primitives and never a grid.
-```css
-.page     /* the one measured container: --page-max wide, --page-inset either side, and the container a field is measured in */
-.grid     /* repeat(var(--columns), minmax(0, 1fr)) with --gutter between */
-.measure  /* the measure: --measure-characters of the type, stopped on a field line */
-.fields   /* --span fields wide */
-.modules  /* --modules modules tall */
-.run      /* items on a shared baseline, a space apart, wrapping when they must */
-.stack    /* the same, turned ninety degrees */
-```
-A child of `.grid` says how many fields it takes with `--span`; a child that
-says nothing runs the whole field. `--span` is registered not to inherit, so a
-grid inside a spanned item starts its own children on the whole field.
-A field is the page's actual width, less the gutters, divided, measured in
-container units from the `.page` the fields are laid out in:
-```css
---field: calc((100cqw - var(--gutter) * (var(--columns) - 1)) / var(--columns));
-```
-The measure is a count of characters, and the grid is what it stops on:
-`--measure-characters` (65) in the type's own font, taken up to the nearest
-whole run of fields, and never past the page. The module is a field's height
-in lines, `--module` (6): the columns divide the page across and the module
-divides it down, and `.modules` and `.figure--modular` size a block or a
-picture to whole ones.
-### The page head
-What a page is and what can be done to it, in one shape on every page: the
-title in the page-title register, its lede when it has one, and the actions in
-a run beside them, wrapping under the title when the page is narrow.
-```erb
-<%= page_head "Palettes", lede: "Every palette in the library." do %>
-  <%= link_to "New palette", new_palette_path, class: "button button--primary" %>
-<% end %>
-```
-The document is titled from it unless the view has already set `:title`.
-A page with several surfaces — what a thing is made of, what it wears, how it
-leaves — names them under the title with `sections:`, each a name, a URL and
-whether it is the one shown, and shows that one alone. A working page must
-not scroll: what is done daily is reached from the head, in the same position
-on every page.
-```erb
-<%= page_head @pattern.name, sections: [ [ "Compose", pattern_path(@pattern), @section == "compose" ],
-                                         [ "Dress", pattern_path(@pattern, section: "dress"), @section == "dress" ] ] do %>
-```
-### Explanations
-What a section means, behind one word. A sentence over every table is needed
-on the first day and never again, and a tool used daily is read on every
-other day; so `explain` writes it in the hint register, closed, and the word
-"About" in the small register opens it. `label:` says another word.
-```erb
-<%= explain "The repeat, in order along the stripe normal." %>
-```
-### Filters and cards
-What narrows a list, and the list. A search that filters as you type, and a
-register for each other way of narrowing it — a tag, an order, a size — in the
-same two positions every time: a quiet label, then the choices, the one in
-force carrying `aria-current`, which the CSS sets in the weight. In ink, not
-the accent: the accent is for where you are on the site and for the one
-thing that cannot be undone, and a page has one red.
-```erb
-<div class="filters">
-  <%= search_form palettes_path, frame: "palettes", keep: { tag: params[:tag], sort: params[:sort] } %>
-  <%= filter_register "Tagged", [ [ "All", palettes_path, params[:tag].blank? ],
-                                  *tags.map { |t| [ t, palettes_path(tag: t), params[:tag] == t ] } ],
-        name: "tag" %>
-</div>
-<%= turbo_frame_tag "palettes", target: "_top" do %>
-  <ul class="grid cards">
-    <li class="card">
-      <a class="card__link" href="…">
-        <figure class="card__figure figure" style="--ratio: 1.5"><img src="…" alt=""></figure>
-        <span class="card__name">Brand Core</span>
-      </a>
-      <span class="card__meta">4 swatches</span>
-    </li>
-  </ul>
-<% end %>
-```
-The search form belongs outside the frame it fills, so only the results are
-replaced and the field keeps its cursor. `keep:` carries the other choices as
-hidden fields, so a search does not drop the tag or the order you were reading
-in. The button is there for a browser that runs no script; the controller
-takes it away once it has connected.
-A card is `--card` fields wide on the page's own grid — say how many once, and
-again at each width that changes it. The picture is a `.figure` with its
-`--ratio` declared, so its box is whole lines at any width and the name under
-it stays on the grid.
-## The layout shell
-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 seven
-stylesheets and the module that registers its controllers, and stops; the
-accent and the grid live in yours, and nothing links it but this.
-Slots, all optional:
-| Slot | |
-| --- | --- |
-| `:title` | Falls back to the application's name |
-| `:head` | Anything else that belongs in `<head>` |
+| `:title` | The page's title; falls back to the application's name |
+| `:head` | Anything else belonging in `<head>` |
 | `:mark` | The wordmark. No mark and no nav means no masthead at all |
 | `:nav` | The destinations |
-| `:subnav` | A second layer of destinations, inside the one you are in: a shaded band under the masthead |
+| `:subnav` | A second layer, inside the one you are in |
 | `:main_class` | What the page's main region is, if it is a grid |
 | `:footer` | Whatever belongs after the page |
-The shell writes the view transition opt-in, the seven stylesheet links, the
-importmap tags, the library's JavaScript module, a skip link, and the flash. It stops there — a page layout
-beyond the shell is the application's, for the same reason its grid is.
+It stops there. A page layout beyond the shell is the application's, for the
+same reason its grid is.
-## Helpers
-| | |
-| --- | --- |
-| `its_swiss_stylesheet_tags` | The seven links, tracked for Turbo, and the metric-override mark with the page's nonce |
-| `its_swiss_typeface(regular:, bold:)` | The application's typeface, declared under the library's face names |
-| `nav_link_to(name, url, current:)` | A destination, with `aria-current` when you are at it |
-| `nav_menu(label, current:) { links }` | A destination that opens into destinations, with no script |
-| `copy_button(value)` | A value that copies itself |
-| `its_swiss_form_with(...)` | `form_with`, already holding the library's builder, at the measure |
-| `its_swiss_page_numbers(page, pages)` | Which numbers a run of them shows, elided |
-| `page_head(title, lede:, sections:) { actions }` | The one shape every page opens with |
-| `page_sections(sections)` | The surfaces of one page, the one shown in the weight |
-| `explain(text, label:) { }` | What a section means, behind one word |
-| `filter_register(label, choices, name:)` | One register of a filter block |
-| `search_form(url, frame:, keep:)` | A search that narrows a list as you type |
-### 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) } %>
-```
+## tokens
-Long runs are elided around the current page. `window:` (default 2) sets how
-many neighbours show; `label:` names the `<nav>` for a screen reader.
+Set in `theme.css`; everything else reads them.
-### JavaScript
+| Group | Custom properties |
+| --- | --- |
+| Value scale | `--value-chroma`, `--value-hue`, `--value-0` … `--value-5` |
+| Roles | `--paper`, `--paper-shaded`, `--rule`, `--rule-strong`, `--ink-quiet`, `--ink`, `--accent`, `--accent-ink` |
+| Rules | `--rule-hair`, `--rule-heavy` |
+| Type | `--font-family`, `--font-mono`, `--face-100`, `--face-150`, `--face-200`, `--face-mono`, `--cap-correction` |
+| Scale | `--size-1` … `--size-5` |
+| Baseline | `--line`, `--line-2`, `--line-3`, `--line-4`, `--half-line`, `--module` |
+| Space | `--space-unit`, `--space-1`, `--space-2`, `--space-3`, `--space-4`, `--space-6`, `--space-8` |
+| Page | `--columns`, `--gutter`, `--page-max`, `--page-inset`, `--field` |
+| Measure | `--measure`, `--measure-characters`, `--card`, `--filter-label` |
+| Transitions | `--transition-page`, `--transition-morph`, `--transition-ease` |
-Two Stimulus controllers, pinned by the engine, and a module that registers
-them with the host's Stimulus application, which the shell imports. A host
-has nothing to write; one that registers the two by hand still can, and
-registering them twice is harmless. `copy_button` and `search_form` write
-the `data-controller` attributes; a page without script still works, with
-the value selectable and the search's button on the page.
+## grid primitives
-## The form builder
+`.page`, `.grid`, `.run`, `.stack`, `.modules`, `.fields`, `.measure`.
-One shape for every field: a label, a control, and — when there is something to
-say — a hint or the reason it was refused.
+## components
-```erb
-<%= its_swiss_form_with model: @palette do |form| %>
-  <%= form.text_field :name, hint: "As it appears in the nav." %>
-  <%= form.check_box :published %>
-  <%= form.submit "Save" %>
-<% end %>
-```
+| Class | Is |
+| --- | --- |
+| `.masthead`, `.nav`, `.subnav`, `.menu`, `.menu--current`, `.skip-link` | Navigation |
+| `.page-head`, `.sections`, `.footer` | Page furniture |
+| `.button`, `.button--primary`, `.button--quiet`, `.button--danger` | Buttons |
+| `.form`, `.form--inline`, `.form--dense`, `.field`, `.field--inline`, `.field--invalid`, `.choice`, `.errors` | Forms |
+| `.filters`, `.filter` | Filter bars |
+| `.cards`, `.card` | Cards |
+| `.table`, `.numeric` | Tables |
+| `.pairs`, `.pairs--stacked` | Definition pairs |
+| `.figure`, `.figure--cover`, `.figure--modular` | Figures |
+| `.pagination` | Pagination |
+| `.md`, `.measure`, `.copy`, `.explain`, `.link-quiet`, `.empty` | Prose and states |
+| `.css`, `.components`, `.visually-hidden`, `.no-metric-overrides`, `.rule--heavy` | Utilities |
+## helpers
+| Helper | Does |
+| --- | --- |
+| `its_swiss_form_with` | The form builder |
+| `its_swiss_stylesheet_tags` | The seven stylesheets, in layer order |
+| `its_swiss_page_numbers` | Page numbers for pagination |
+| `its_swiss_application_name` | The application's name |
+| `its_swiss_face`, `its_swiss_typeface` | The typeface slots |
+| `page_head`, `page_sections` | Page head and section destinations |
+| `nav_link_to`, `nav_menu` | Navigation |
+| `search_form`, `filter_register` | Filter bars |
+| `copy_button` | A value that copies itself |
+| `explain` | An explanatory note |
-It exists because the parts that get left out by hand are the parts nobody
-sees missing: a label whose `for` does not match its input does not enlarge the
-target; a hint beside a control is a hint a screen reader never reaches; a
-refused field coloured by CSS alone is a refusal only some readers get. The
-builder wires `for`, `aria-describedby`, `aria-invalid` and `.field--invalid`
-every time.
+Partials: `its_swiss/shared/masthead`, `flash`, `errors`, `pagination`.
-`label: false` hides the label rather than removing it — the name moves onto
-the control as `aria-label`. A textarea's `rows:` is how many lines tall it
-is. `class: "form form--dense"` puts each label on its control's line of
-air, three lines a field rather than four, for a form of many fields.
+### form builder
-A control's rule is the strong rule at rest, ink under the hand, and the
-accent, heavy, when the control has the focus or has been refused. The focus
-is the rule, not a box.
+`its_swiss_form_with` adds `field`, `select`, `collection_select`,
+`check_box`, `radio_button`, `text_area` and `submit`, each rendering its own
+label, hint and error, wired with `aria-describedby`.
-## The specimen
+## JavaScript
-`/its-swiss/specimen`, mounted by the installer under `if Rails.env.development?`
-and refused a second time by the controller, because a route is a line in a file
-someone can move.
+Three Stimulus controllers, registered by the module the shell imports. The
+host adds nothing to its importmap.
-It renders every component, the type scale, the value scale and the grid
-primitives — **twice**. The first take is the library exactly as it ships, with
-the accent collapsed onto ink; the second sets an accent and changes nothing
-else. If the first reads correctly, the value scale is doing the work.
+| Controller | Does |
+| --- | --- |
+| `its-swiss-clipboard` | A value that copies itself |
+| `its-swiss-live-search` | Search on an index |
+| `its-swiss-mono` | Monospace metric handling |
-It is the documentation and the regression fixture.
+## the cascade
-## Tests
+Every file states its own layer, and the order is declared before the first
+import:
-```sh
-bin/test                                     # everything; browser tests skip
-CHROME_BINARY=... CHROMEDRIVER=... bin/test   # including the browser tests
-bin/specimen tmp/specimen && node test/browsers/grid.mjs tmp/specimen/index.html   # chromium, webkit, firefox
+```css
+@layer its-swiss.tokens, its-swiss.faces, its-swiss.reset, its-swiss.type,
+       its-swiss.grid, its-swiss.components, its-swiss.transitions;
 ```
-Tests come first, and a guard is only kept if removing what it guards makes it
-fail.
+Everything is inside `@layer`, so any application rule wins without effort. A
+stylesheet the application adds after the library takes its place in the order
+from where its layer is first named.
-Most of the suite reads the CSS rather than rendering it, which is enough for
-the decisions that are decisions about the source: that the value scale is a
-descending ladder, that no stylesheet invents a colour or a column count, that
-every line box is measured in baselines, that no signal rests on colour alone.
+`its-swiss.css` is the whole library in one `<link>`; the Rails helper writes
+the seven separately. Both resolve identically.
-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 box on the
-specimen starts and ends on a line, that every run of type on it has its
-baseline 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.
+## tech
-The two grid questions are one function, `test/support/on_the_grid.js`, and
-`test/browsers/grid.mjs` asks it of the published specimen in Chromium, WebKit
-and Firefox through Playwright. CI runs all three; a grid checked in one
-browser is a claim about that browser. Chromium is also asked with the faces
-taken away and the document marked, which is the page as Safari lays it out,
-so the trim is measured on every push and not only in the one job that has
-WebKit.
+Rails engine, v1.1.0. Ruby >= 3.2. 1,457 lines of CSS in seven files. No
+build step and no CSS framework.
-There are no pixel tests.
-## Coming from Pandatone
+```sh
+bundle exec rake test
+```
-The token names changed where the boundary moved. The value scale is the same
-ladder; the names are the library's rather than the application's.
+150 runs. 30 of them drive a real browser through Capybara and Selenium, and
+need a Chrome matching the installed ChromeDriver. The specimen is measured in
+Chromium, WebKit and Firefox before it is published.
-| Pandatone | its-swiss |
-| --- | --- |
-| `--ground` | `--paper` |
-| `--keyline` | `--rule` |
-| `--ink-quiet`, `--ink` | unchanged |
-| `--accent` | unchanged — still the application's to set |
-| `--font` | `--font-family` |
-| `--size-1..5`, `--space-N`, `--measure`, `--page-max` | unchanged |
-| `--baseline` (8px) | **gone.** `--line` (24px) is the baseline now — see 0.4.0 |
-| `--space-5`, `--space-13`, `--line-6` | **gone** in 1.0.0: nothing in the library used them. `--space-6`, `--space-8` and `--line-4` remain |
-| `.masthead__nav` | `.nav` |
-| `.channels` | `.pairs` |
-| `.form`, `.field`, `.button*`, `.copy`, `.errors`, `.hint`, `.empty` | unchanged |
-| `.tag*`, `.filter*`, `.page-head`, `live-search` | `.filter*`, `.page-head`, `.cards`, `its-swiss-live-search` — in the gem since 0.8.0 |
-| `--columns-dense`, `--card-wide`, `.swatch*` | stay in Pandatone |
-Two behavioural differences to know about:
-- **The masthead no longer sits on the page's field.** It lays itself out in
-  flex, so it does not break when an application changes `--columns`.
-- **`--field` now subtracts the page's own inset** before dividing. Pandatone's
-  `--measure` was a gutter and a half wider than three fields; anything relying
-  on the old number moves in by 24px.
-- **`.button--danger` is set apart by a step on the ladder, not an auto
-  margin.** Pandatone scoped the auto margin to two named regions; a library
-  cannot, and an auto margin across a whole page reads as a different control
-  rather than a separated one.
-## Versioning
-Semver with a changelog. Consumers pin `~> 1.0`.
-1.0.0 is the surface three applications settled on, and what changes it now
-changes a major. Read `CHANGELOG.md` before upgrading, and see `RELEASING.md`
-for how a version gets out.
-## License
+## license
 MIT.

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

@@ -381,14 +381,40 @@
   .field :is(input, select, textarea):not([type="checkbox"], [type="radio"]):focus-visible {
     outline: none;
     border-bottom: var(--rule-heavy) solid var(--accent);
+  }
+  .field :is(input, select):not([type="checkbox"], [type="radio"]):focus-visible {
     padding-block-start: calc(var(--line) - var(--rule-heavy));
   }
   /* As many lines as it was asked for: the builder writes --rows from rows:,
-     four when it was not. */
+     four when it was not.
+     A textarea is ruled like a page: a dotted rule on every line of the
+     baseline grid that type can stand on, on the same row of pixels a rule
+     would take, and none where it cannot. The line of air is a border rather
+     than a padding, so text scrolled up is cut at the first line and never
+     crosses the air, and a mask keeps the air clear of the one rule that
+     would fall there: the line under the label, which nothing is written on.
+     The last line is closed by the control's own rule, which is drawn over
+     its dots. The dots are painted in the text's own box and scroll with it,
+     so a long message keeps a rule under every line. */
   .field textarea {
+    --ruled-dot: var(--rule-strong);
     block-size: calc(var(--line) * var(--rows, 4));
     resize: vertical;
+    border-block-start: calc(var(--line) - var(--rule-hair)) solid transparent;
+    padding-block-start: 0;
+    background-image: conic-gradient(from 270deg at var(--rule-hair) var(--rule-hair), var(--ruled-dot) 25%, transparent 0);
+    background-size: var(--space-unit) var(--line);
+    background-origin: content-box;
+    background-clip: content-box;
+    background-attachment: local;
+    mask-image: linear-gradient(transparent var(--line), var(--ink) 0);
+  }
+  .field textarea:focus-visible {
+    border-block-start-width: calc(var(--line) - var(--rule-heavy));
   }
   /* A checkbox or a radio is the one control whose label sits beside it, on

data/lib/its_swiss/version.rb CHANGED Viewed

@@ -1,3 +1,3 @@
 module ItsSwiss
-  VERSION = "1.0.0"
+  VERSION = "1.1.0"
 end

metadata CHANGED Viewed

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: its-swiss
 version: !ruby/object:Gem::Version
-  version: 1.0.0
+  version: 1.1.0
 platform: ruby
 authors:
 - Bobby Meyer
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2026-09-07 00:00:00.000000000 Z
+date: 2026-09-24 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: railties