its-swiss 0.8.0 → 0.9.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 609e2de8676ac502b9fd59c7c0eb8fa4a57e2c6ba5a0a7ab37b618f81b3203b4
-  data.tar.gz: 7fced9860618baa6456eb521f4b2a1e6fecb667f8adc3c9f550c990d067669c7
+  metadata.gz: 7ab6df97c9cfca52b616b05f5e985aa37df4253563fd1b1177c9c67890706cad
+  data.tar.gz: 6e9d6316b70b2670b7b307b33ec64955e88d562d085c95a86e07836e635d1a97
 SHA512:
-  metadata.gz: 0fc7073ab2bf1bc8f39db1a2124b08e746d3811f71fbf38e0573af7fb6e59912e776e3f6bddce62802b08d9ae6528f5eb51d15d147904e0d4516f69db738df9c
-  data.tar.gz: 914e4ea3dee558b14821e3a0b3ce134220520b7be6d9d5d10727d2f8f6b173d025868aa30c4316b81e523ff7bfb8fb5a2563a2219a33b2686f9be2b8b0753fca
+  metadata.gz: 5a3f8671a25c996f2883add93ead145a89244a8a5bbec670022c0b3d49d587d19dd1b5a664eb94bd49908b1d8a4b28877e66b180ac49d3b653b47b0493cf7d02
+  data.tar.gz: 286de25b2203d9928f9a4cbf596341aa8d450c3cfaecf016cafff44737586df4d4cd65d98271d102f2dcf2af9e8f9e058413ead233ad86602a3e242a5f471a4d

data/CHANGELOG.md

@@ -2,6 +2,52 @@
 
 Semver. Consumers pin `~> 0.1`.
 
+## 0.9.1 — 2026-09-07
+
+### Fixed
+
+- **The suite, and so the release, under json 3.0.0.** json 3.0.0 came out
+  twenty minutes after 0.9.0's pull request went green and changed the
+  signature of `JSON.parse`; Active Support 8.1.3.1 still calls it the old
+  way when it reads a signed cookie, so the session and the flash raised on
+  every request and the release of 0.9.0 stopped at its own tests. The
+  Gemfile holds json below 3 until a Rails that takes it. Nothing in the
+  library changed; 0.9.1 is 0.9.0 released.
+
+## 0.9.0 — 2026-09-07
+
+A day of use, and what a day asks of a style: less talk and one red.
+
+### Added
+
+- **Sections.** `page_head(title, sections:)` names the surfaces of one
+  page under its title — what a thing is made of, what it wears, how it
+  leaves — the one shown in the weight, and a page 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, never by scrolling past what
+  was done yesterday. `page_sections(sections)` writes the nav on its own.
+
+- **Explanations.** `explain(text)` puts what a section means behind one
+  mark: a question mark on the line, closed, and the text in the hint
+  register under it when it is asked for. A sentence over every table is
+  needed on the first day and never again.
+
+### Changed
+
+- **One red per page.** The chosen filter and a current menu are in the
+  weight, in ink. The accent is for where you are on the site — the nav,
+  the subnav, the page numbers — and for the one thing that cannot be
+  undone. A page that said "this one" in red five times above the fold
+  had no signal left.
+
+- **Hints are prose.** `.hint` is set at body size. The small size is for
+  labels and metadata, and a hint set in it at a body line's leading read
+  as a list of afterthoughts. Table headings go the other way: the label
+  register, bold, on the line.
+
+- **The filter block is ruled once, below.** The rule above it was a third
+  rule in ten lines, and the rule is the one mark this style draws.
+
 ## 0.8.0 — 2026-09-07
 
 The third consumer, and what it and the second found in common.

data/README.md

@@ -329,12 +329,36 @@ a run beside them, wrapping under the title when the page is narrow.
 
 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 mark. 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 a
+question mark on the line opens it.
+
+```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 colours and weights.
+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">
@@ -419,7 +443,9 @@ beyond the shell is the application's, for the same reason its grid is.
 | `copy_button(value)` | A value that copies itself |
 | `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 |
-| `page_head(title, lede:) { actions }` | The one shape every page opens with |
+| `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) { }` | What a section means, behind one mark |
 | `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 |
 

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

@@ -95,10 +95,11 @@
   .menu > summary:hover,
   .menu[open] > summary { color: var(--ink); }
 
-  /* Where you are, when where you are is inside the menu: said twice, the
-     way the nav says it. */
+  /* Where you are, when where you are is inside the menu: the weight, in
+     ink. Not the accent — a page has one red, and the subnav under a menu
+     that is current already names the place in it. */
   .menu--current > summary {
-    color: var(--accent);
+    color: var(--ink);
     font-weight: 700;
   }
 
@@ -206,6 +207,62 @@
      than holding their one-line width and pushing a phone's page sideways. */
   .page-head__actions { flex: 0 1 auto; }
 
+  /* --- Sections -----------------------------------------------------------
+     One page, several surfaces: what a thing is made of, what it wears,
+     how it leaves. A run of names under the title, the one you are on in
+     the weight, and the surface below it the only thing on the page. A
+     working page must not scroll: what is done every day is reached from
+     the head, in the same position on every page, and never by scrolling
+     past what was done yesterday. */
+  .sections {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--line) var(--space-3);
+  }
+
+  /* Its own row in the head, under the title and the actions. */
+  .page-head > .sections { flex-basis: 100%; }
+
+  .sections a {
+    display: inline-block;
+    color: var(--ink-quiet);
+    text-decoration: none;
+  }
+
+  .sections a:hover { color: var(--ink); }
+
+  /* Where you are, in the weight. Ink, not the accent: the accent is for
+     where you are on the site, and this is where you are on the page. */
+  .sections [aria-current] {
+    color: var(--ink);
+    font-weight: 700;
+  }
+
+  /* --- Explanations -------------------------------------------------------
+     What a section means, behind one mark, for the day it is first read.
+     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 the
+     explanation is there, in the hint register, and closed: a question
+     mark on the line, and the text under it when it is asked for. A
+     details element, so it opens with no script. */
+  /* A block as wide as its one character, so the line it sits on is whole
+     and the target is the mark and not the row. */
+  .explain > summary {
+    list-style: none;
+    display: block;
+    width: max-content;
+    cursor: pointer;
+    color: var(--ink-quiet);
+    font-weight: 700;
+  }
+
+  .explain > summary::-webkit-details-marker { display: none; }
+
+  .explain > summary:hover,
+  .explain[open] > summary { color: var(--ink); }
+
+  .explain__body { margin-block-start: var(--line); }
+
   /* --- Rules --------------------------------------------------------------
      The one horizontal mark in the style, at the two weights tokens.css
      declares. */
@@ -301,9 +358,15 @@
     vertical-align: top;
   }
 
+  /* A heading is a label: the label register, bold, on the line. Body size
+     made it a second row of values. */
   .table th {
+    font-family: var(--face-200), var(--font-family);
+    font-size: var(--size-1);
+    line-height: var(--line);
     color: var(--ink-quiet);
     font-weight: 700;
+    letter-spacing: 0.01em;
   }
 
   .table thead th { border-bottom-color: var(--ink); }
@@ -613,17 +676,19 @@
      control: pick one of a handful. A register is a quiet label and then
      the choices, in the same two positions every time, so filtering and
      ordering read as the registers they are rather than as two rows of
-     identical words. Ruled above and below: the block belongs to the list
-     under it, not to the page head above. */
+     identical words. Ruled below, once: the block belongs to the list
+     under it, and the space above it is the page head's. A second rule
+     above it was a third rule in ten lines, and the rule is the one mark
+     this style draws, so it has to be rare. */
 
   .filters {
     display: flex;
     flex-wrap: wrap;
     align-items: flex-start;
     gap: var(--line) var(--space-3);
-    /* The rules are drawn inside the box, so the block stays whole lines. */
-    padding-block: calc(var(--line) - var(--rule-hair));
-    border-block: var(--rule-hair) solid var(--rule);
+    /* The rule is drawn inside the box, so the block stays whole lines. */
+    padding-block-end: calc(var(--line) - var(--rule-hair));
+    border-block-end: var(--rule-hair) solid var(--rule);
     margin-block-end: var(--line);
   }
 
@@ -659,9 +724,11 @@
 
   .filter__choices a:hover { color: var(--ink); }
 
-  /* Which one is chosen, said twice, for the reason the nav says it twice. */
+  /* Which one is chosen: the weight, in ink. The accent is for where you
+     are on the site and for the one thing that cannot be undone; a page
+     with four registers each saying "this one" in red has no signal left. */
   .filter__choices [aria-current] {
-    color: var(--accent);
+    color: var(--ink);
     font-weight: 700;
   }
 

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

@@ -106,9 +106,12 @@
   .button--danger,
   .link-quiet { color: var(--ink-quiet); }
 
+  /* A hint is prose — a sentence about the thing beside it — and prose is
+     read at body size. The small size is for labels and metadata, and a
+     hint set in it read as a list of afterthoughts. */
   .hint {
-    font-family: var(--face-200), var(--font-family);
-    font-size: var(--size-1);
+    font-family: var(--face-150), var(--font-family);
+    font-size: var(--size-2);
     line-height: var(--line);
     max-width: var(--measure);
   }
@@ -232,8 +235,10 @@
       dd:not(:has(> :is(p, ul, ol, dl, div, figure, table, pre, blockquote))),
       .micro, .hint, .lede, .empty, .masthead__mark, .field__error, .errors__title,
       .filter__label, .card__name, .card__meta,
+      .explain > summary,
       /* Flex items are blockified, so the text in a row is trimmable too. */
       .nav a,
+      .sections a,
       .menu > summary,
       .menu__list a,
       .subnav a,

data/app/helpers/its_swiss/application_helper.rb

@@ -155,7 +155,13 @@ module ItsSwiss
     #   <%= page_head "Palettes", lede: "Every palette in the library." do %>
     #     <%= link_to "New palette", new_palette_path, class: "button button--primary" %>
     #   <% end %>
-    def page_head(title, lede: nil, &block)
+    #
+    # A page with several surfaces names them under the title, and the one
+    # you are on carries the weight:
+    #
+    #   <%= page_head @pattern.name, sections: [ [ "Compose", pattern_path(@pattern), true ],
+    #                                            [ "Dress", pattern_path(@pattern, section: "dress"), false ] ] do %>
+    def page_head(title, lede: nil, sections: nil, &block)
       content_for(:title, strip_tags(title.to_s)) unless content_for?(:title)
       actions = capture(&block) if block
 
@@ -164,11 +170,35 @@ module ItsSwiss
           tag.div(class: "page-head__title") do
             safe_join([ tag.h1(title, class: "page-title"), (tag.p(lede, class: "lede") if lede) ].compact)
           end,
-          (tag.div(actions, class: "page-head__actions run") if actions.present?)
+          (tag.div(actions, class: "page-head__actions run") if actions.present?),
+          (page_sections(sections) if sections.present?)
         ].compact)
       end
     end
 
+    # The surfaces of one page: a name, a URL and whether it is the one
+    # shown, each a whole navigation so it survives a reload and can be
+    # sent to somebody. The page head places it; on its own it is a nav.
+    def page_sections(sections, label: "Sections")
+      tag.nav(class: "sections", aria: { label: label }) do
+        safe_join(sections.map { |text, url, current| link_to(text, url, aria: { current: ("page" if current) }) })
+      end
+    end
+
+    # What a section means, behind one mark. The explanation is written in
+    # the hint register and closed: a page used daily is read on every day
+    # but the first, and a sentence over every table is for the first.
+    #
+    #   <%= explain "The repeat, in order along the stripe normal." %>
+    #   <%= explain do %><p class="hint">…</p><% end %>
+    def explain(text = nil, label: "Explain", &block)
+      body = block ? capture(&block) : tag.p(text, class: "hint")
+
+      tag.details(class: "explain") do
+        safe_join([ tag.summary("?", aria: { label: label }), tag.div(body, class: "explain__body") ])
+      end
+    end
+
     # One register of a filter block: a quiet label, then the choices, each
     # a name, a URL and whether it is the one in force. Filtering and
     # ordering are the same kind of control — pick one of a handful — so

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

@@ -4,8 +4,8 @@
     What narrows a list, and the list. A search that filters as you type, and
     a register for each other way of narrowing it: the same two positions
     every time, a quiet label and the choices, the one in force carrying the
-    accent and the weight. Under it, cards on the page's own fields — this
-    page says a card is two fields wide.
+    weight. Under it, cards on the page's own fields — this page says a card
+    is two fields wide.
   </p>
 
   <div class="filters">

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

@@ -12,4 +12,22 @@
     <a href="#page-head" class="button">New from this</a>
     <a href="#page-head" class="button button--danger">Delete palette</a>
   <% end %>
+
+  <h4>Sections</h4>
+  <p class="hint">
+    A page with several surfaces names them under the title, the one shown
+    in the weight, and shows that one alone. What is done daily is reached
+    from the head, never by scrolling past what was done yesterday.
+  </p>
+  <%= page_head "Deck Chair", sections: [ [ "Compose", "#page-head", true ], [ "Dress", "#page-head", false ], [ "Export", "#page-head", false ] ] do %>
+    <a href="#page-head" class="button button--primary">Dress this pattern</a>
+    <a href="#page-head" class="button button--quiet">Rename</a>
+  <% end %>
+
+  <h4>Explanations</h4>
+  <p class="hint">
+    What a section means, behind one mark, for the day it is first read.
+    Closed, in the hint register, and there when it is asked for.
+  </p>
+  <%= explain "The repeat, in order along the stripe normal. Widths sum to one." %>
 </section>

data/lib/its_swiss/version.rb

@@ -1,3 +1,3 @@
 module ItsSwiss
-  VERSION = "0.8.0"
+  VERSION = "0.9.1"
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: its-swiss
 version: !ruby/object:Gem::Version
-  version: 0.8.0
+  version: 0.9.1
 platform: ruby
 authors:
 - Bobby Meyer