@iyulab/house-style 0.1.5 → 0.3.0

package/CHANGELOG.md

@@ -1,5 +1,65 @@
 # Changelog
 
+## [0.3.0] - 2026-10-13
+
+### Changed
+
+- 🔴**The house now sets the text between components.** Paragraphs, headings, lists and code spans an application
+  writes outside any component drew at the browser's defaults — a 16px body with `line-height: normal`, an `h2` of
+  1.5em that outranked every component title, 1em gaps above and below. They now take the house ladder: the body at
+  the body step (14px · 1.571), `h1`/`h2`/`h3` at display/title/subtitle, `h4`–`h6` at the body step in semibold;
+  one gap below each block (`--u-space-sm` after a heading, `--u-space-md` after a paragraph, list, quote, figure or
+  `pre`), none above and none after the last block in its box; `code`, `kbd`, `samp` and `pre` in the house monospace.
+  All zero-specificity inside `iyu.house` — your own rules win. A screen that relied on the browser's defaults draws
+  smaller and tighter; set your own rule on that element to keep the old look.
+- **Native checkboxes, radios and ranges take the selection colour** (`accent-color`), and scrollbars the strong line
+  colour (`scrollbar-color`).
+
+### Added
+
+- **House chart colours** — `--u-chart-color-1` … `-8`, light and dark. Slot one is the interaction blue (`#2F6FEB`;
+  dark `#628FEA`, the dark blue taken to the mark band), so a one-series chart draws in the colour the screen already
+  uses for links, focus and selection; the other seven are muted, warm-leaning hues chosen as a set — neighbours
+  ΔE ≥ 15 for full colour vision and ≥ 8 under red–green deficiency, no slot within ΔE 10 of a status colour, every
+  dark slot ≥ 3:1 on the surfaces. Light slot six (olive) is 2.8:1 on white: six or more series need a legend or
+  labels. Before, the house set no chart colours and series drew in the built-in Material palette. Charts drawn
+  through `@iyulab/u-widgets/themes/components.css` pick them up slot for slot.
+- `--u-selection-color` / `--u-selection-txt-color` — the mark of a chosen option (a checked box, a selected radio) and
+  the check drawn on it: the interaction blue, light and dark, held to 3:1 against the surface and its check.
+- `.hs-prose` and `--hs-measure` (70ch) — running text that can grow wider than reads well stops its paragraphs and
+  lists at the measure.
+
+### Fixed
+
+- **A hovered table header or toolbar strip is visibly different from its rest state.** `--u-bg-color-raised-hover`
+  (light) moves from `#EAEAE7` to `#E5E5E2` — the step from `--u-bg-color-raised` was 0.021 in OKLab lightness, below
+  what reads as a change. The token contract now holds state and depth steps to perception floors in both modes
+  (hover ≥ 0.03, press ≥ 0.05, selection ≥ 0.03, a surface step ≥ 0.025, which also carries a hairline edge).
+
+### Guide and reference app
+
+- The guide's prose follows the new document-flow layer and stops at the measure; the theme and deployment pages
+  take the same page layout as the others; the «Component depth» cards say what the house draws (cards stay flat).
+- Both sites follow the system theme (`Theme.init({ default: 'system' })`) and carry a favicon; the reference app
+  has a theme toggle.
+- Reference app order detail: the items are a `u-rich-table` (the guide's «Line items» pattern) — columns line up,
+  quantity edits in place, rows delete from the table — and the add-item line folds in a narrow pane instead of
+  scrolling it sideways.
+
+## [0.2.0] - 2026-10-12
+
+### Changed
+
+- 🔴**No size containment.** `.hs-detail` no longer establishes the `hs-detail` container, and the patterns no
+  longer use `@container` — in Chromium a size container could stay collapsed after a commit that changed layout
+  elsewhere on the page. Each pattern now folds by its own width:
+  - `.hs-grid-2` / `.hs-grid-3` drop to one column below 480px of grid width; `.hs-grid-3` shows two columns between
+    480px and 728px (it went from three straight to one before). Empty trailing cells are kept, as before.
+  - `.hs-stats` stacks when the strip is narrower than 640px — all stats at once, with the dividers turning
+    horizontal. Before, a strip outside a size container never stacked.
+  - `.hs-detail__cols` puts the side panel (340px) next to the main column when the columns are at least 960px wide.
+  If your CSS queried `@container hs-detail`, give that element `container: hs-detail / inline-size` yourself.
+
 ## [0.1.5] - 2026-10-09
 
 ### Fixed

package/README.md

@@ -37,7 +37,7 @@ so its preflight would beat the theme; `tailwind.css` imports the theme into Tai
 | `styles/index.css` (package root) | everything below plus Pretendard — for apps without Tailwind |
 | `styles/theme.css` | the theme without fonts (bring your own face) |
 | `styles/tokens.css` | house values for the `--u-*` token axes, light and dark; brand tokens `--hs-brand*` |
-| `styles/components.css` | sizes and finish for `u-button`, `u-card`, `u-drawer`, `flex-table`, the app shell |
+| `styles/components.css` | the document flow (body text, `h1`–`h6`, block gaps, code spans, native control and scrollbar colours) and sizes and finish for `u-button`, `u-card`, `u-drawer`, `flex-table`, the app shell |
 | `styles/patterns.css` | `hs-*` layout patterns — page head, saved views, filter bar, stat strip, table card, callout, form sections, side-sheet footer |
 | `styles/tailwind.css` | the Tailwind v4 entry: fonts + theme (in Tailwind's `components` layer) + role utilities — `bg-canvas`, `text-ink-weak`, `border-line`, `bg-warning-soft`, `rounded-card` … |
 | `styles/tailwind-neutrals.css` | optional: Tailwind's grey ramps (`gray`, `slate`, `zinc`, `neutral`, `stone`) follow the house neutrals |
@@ -82,6 +82,17 @@ The type ladder is the `--u-text-*-size` steps plus two house steps derived from
 `--hs-text-hero-size` (display + 6px: a headline figure). Every pattern reads a step, so rescaling the
 ladder (a larger mode, a product system) carries the patterns along.
 
+### Text outside components
+
+The theme also sets the text an application writes between components, so a screen's own words match
+the components around them: the body draws at the body step (14px · 1.571), `h1`/`h2`/`h3` at the
+display/title/subtitle steps and `h4`–`h6` at the body step in semibold, and paragraphs, lists and
+headings get one gap below (none above, none after the last block in a box). Code spans use the house
+monospace. A checked native checkbox or radio takes the selection colour (`--u-selection-color`, the
+interaction blue) and scrollbars the strong line colour. Running text that can grow wider than reads
+well opts into the measure: `<div class="hs-prose">` stops its paragraphs and lists at `--hs-measure`
+(70ch). All of it is zero-specificity in the house layer — any rule of yours wins.
+
 ## The guide
 
 **Live**: https://iyulab.github.io/house-style/ — this is the guide. There is no

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@iyulab/house-style",
-  "version": "0.1.5",
+  "version": "0.3.0",
   "description": "The iyulab house theme: a CSS-only theme for @iyulab components — tokens, component recipes, line-of-business layout patterns and a Tailwind CSS v4 preset — plus the guide site that documents it.",
   "license": "MIT",
   "repository": {
@@ -38,6 +38,7 @@
     "check:guide": "node scripts/check-guide.mjs",
     "check:a11y": "node scripts/check-a11y.mjs",
     "check:ladder": "node scripts/check-ladder.mjs",
+    "check:leave": "node scripts/check-leave.mjs",
     "check:start-here": "node scripts/check-start-here.mjs",
     "check:start-here:local": "node scripts/check-start-here.mjs --local",
     "pretest": "node -e \"if(require('fs').existsSync('../../scripts/sibling-dist-check.js'))require('child_process').execFileSync('node',['../../scripts/sibling-dist-check.js'],{stdio:'inherit'})\"",
@@ -70,13 +71,13 @@
     }
   },
   "devDependencies": {
-    "@iyulab/components": "^2.19.0",
-    "@iyulab/data-components": "^0.47.0",
-    "@iyulab/enterprise": "^0.29.0",
-    "@iyulab/flex-table": "^0.64.0",
-    "@iyulab/modern-app": "^0.49.0",
-    "@iyulab/router": "^0.21.0",
-    "@iyulab/u-widgets": "^0.29.0",
+    "@iyulab/components": "^2.20.0",
+    "@iyulab/data-components": "^0.48.0",
+    "@iyulab/enterprise": "^0.32.0",
+    "@iyulab/flex-table": "^0.66.0",
+    "@iyulab/modern-app": "^0.53.0",
+    "@iyulab/router": "^0.24.0",
+    "@iyulab/u-widgets": "^0.31.0",
     "@lit/react": "^1.0.8",
     "@types/node": "^26.1.1",
     "@types/react": "^19.3.0",

package/styles/components.css

@@ -21,6 +21,59 @@
   color: var(--u-txt-color);
   -webkit-font-smoothing: antialiased;
 }
+/* ── Document flow — the text an application writes between components ─────────────────── *
+ * Paragraphs, headings, lists and code spans outside any component would draw at the browser's
+ * defaults — 16px body with `line-height: normal`, an h2 of 1.5em that outranks every component
+ * title, 1em gaps — so a screen's own words looked unlike the components around them. Here they
+ * take the house ladder. Zero specificity inside the house layer: any application rule wins. */
+:where(body) {
+  font-size: var(--u-text-body-size);
+  line-height: var(--u-text-body-leading);
+}
+:where(h1) {
+  font-size: var(--u-text-display-size);
+  font-weight: var(--u-text-display-weight);
+  line-height: var(--u-text-display-leading);
+}
+:where(h2) {
+  font-size: var(--u-text-title-size);
+  font-weight: var(--u-text-title-weight);
+  line-height: var(--u-text-title-leading);
+}
+:where(h3) {
+  font-size: var(--u-text-subtitle-size);
+  font-weight: var(--u-text-subtitle-weight);
+  line-height: var(--u-text-subtitle-leading);
+}
+:where(h4, h5, h6) {
+  font-size: var(--u-text-body-size);
+  font-weight: 600;
+  line-height: var(--u-text-body-leading);
+}
+/* One gap below each block, none above — the gap between two blocks is one step, not two
+ * collapsed margins; the last block in its box adds none. */
+:where(h1, h2, h3, h4, h5, h6) {
+  margin-block: 0 var(--u-space-sm);
+}
+:where(p, ul, ol, dl, blockquote, figure, pre) {
+  margin-block: 0 var(--u-space-md);
+}
+:where(h1, h2, h3, h4, h5, h6, p, ul, ol, dl, blockquote, figure, pre):where(:last-child) {
+  margin-block-end: 0;
+}
+:where(code, kbd, samp, pre) {
+  font-family: var(--u-font-mono);
+}
+/* A measure for running text — opt in where a paragraph can be wider than reads well. */
+:where(.hs-prose) :where(p, ul, ol, dl, blockquote) {
+  max-inline-size: var(--hs-measure);
+}
+/* Native controls (a checkbox in a plain form, a range) and scrollbars take the house colours. */
+:root {
+  accent-color: var(--u-selection-color);
+  scrollbar-color: var(--u-border-color-strong) transparent;
+}
+
 /* A plain link takes the house link colour instead of the browser's — in light and dark alike.
  * Zero specificity: a class on the link (`hs-*`, an app's own) and any application rule win.
  * Visited links keep the same colour (an application, not a document); the underline stays,

package/styles/patterns.css

@@ -147,21 +147,24 @@
 
 /* ── Stat strip — the result's totals as cells, not a sentence ───────────
  * 3–5 cells: label → value → one supporting line. One hero value per screen at most. */
+/* Side by side, or stacked when the strip is narrower than 640px — all or nothing, never a ragged row.
+ * No size container: the threshold is each stat's flex-basis, calc((640px - 100%) * 999) — negative
+ * (so 0) when wide, huge when narrow (the "Holy Albatross"). The dividers are the 1px gap showing the
+ * strip's border-coloured background, so they turn from vertical to horizontal on their own. */
 .hs-stats {
-  display: grid;
-  grid-auto-flow: column;
-  grid-auto-columns: minmax(0, 1fr);
-  background: var(--u-bg-color);
+  display: flex;
+  flex-wrap: wrap;
+  gap: 1px;
+  background: var(--u-border-color);
   border: 1px solid var(--u-border-color);
   border-radius: var(--u-radius-xl, 10px);
+  overflow: hidden;
 }
 .hs-stat {
+  flex: 1 1 calc((640px - 100%) * 999);
   min-width: 0;
   padding: var(--u-space-md, 12px) var(--u-space-lg, 16px);
-  border-inline-start: 1px solid var(--u-border-color);
-}
-.hs-stat:first-child {
-  border-inline-start: 0;
+  background: var(--u-bg-color);
 }
 .hs-stat__label {
   font-size: var(--u-text-label-size, 12px);
@@ -199,11 +202,6 @@
 .hs-stat--warning .hs-stat__value { color: var(--u-warning-color-strong); }
 .hs-stat--danger .hs-stat__value { color: var(--u-danger-color-strong); }
 .hs-stat--success .hs-stat__value { color: var(--u-success-color-strong); }
-@container (max-width: 640px) {
-  .hs-stats { grid-auto-flow: row; }
-  .hs-stat { border-inline-start: 0; border-top: 1px solid var(--u-border-color); }
-  .hs-stat:first-child { border-top: 0; }
-}
 
 /* ── Table card — toolbar · table · pager on one surface ──────────────── */
 .hs-table-card {
@@ -381,18 +379,21 @@ a.hs-card:hover,
 .hs-dl > dt { color: var(--u-txt-color-weak); }
 .hs-dl > dd { margin: 0; min-width: 0; }
 
-/* Two-column detail: main column plus a 340px side panel once the container is wide. */
-.hs-detail {
-  container: hs-detail / inline-size;
-}
+/* Two-column detail: main column plus a 340px side panel once the columns are 960px wide, one column
+ * below that. No size container — the threshold is each column's flex-basis (see .hs-stats). */
 .hs-detail__cols {
-  display: grid;
-  grid-template-columns: minmax(0, 1fr);
+  display: flex;
+  flex-wrap: wrap;
   gap: var(--u-space-lg, 16px);
-  align-items: start;
+  align-items: flex-start;
+}
+.hs-detail__cols > * {
+  flex: 1 1 calc((960px - 100%) * 999);
+  min-width: 0;
 }
-@container hs-detail (min-width: 960px) {
-  .hs-detail__cols { grid-template-columns: minmax(0, 1fr) 340px; }
+.hs-detail__cols > :last-child:not(:first-child) {
+  flex-grow: 0;
+  min-width: min(340px, 100%);
 }
 .hs-grid-cards {
   display: grid;
@@ -493,18 +494,23 @@ a.hs-card:hover,
   --u-input-display: block;
   --u-select-display: block;
 }
-/* Two or three columns — never four or more in a row. */
+/* Two or three columns — never four or more in a row. A column is at least half of a 480px row, so
+ * both grids drop to one column below 480px and .hs-grid-3 shows two between 480px and 728px. No size
+ * container: auto-fill against the grid's own width, capped at the column count. */
 .hs-grid-2,
 .hs-grid-3 {
+  --hs-grid-gap: var(--u-space-lg, 16px);
+  --hs-grid-min: calc((480px - var(--hs-grid-gap)) / 2);
   display: grid;
-  gap: var(--u-space-md, 12px) var(--u-space-lg, 16px);
+  gap: var(--u-space-md, 12px) var(--hs-grid-gap);
 }
-.hs-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
-.hs-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
-.hs-span-all { grid-column: 1 / -1; }
-@container (max-width: 480px) {
-  .hs-grid-2, .hs-grid-3 { grid-template-columns: minmax(0, 1fr); }
+.hs-grid-2 {
+  grid-template-columns: repeat(auto-fill, minmax(min(100%, max(var(--hs-grid-min), (100% - var(--hs-grid-gap)) / 2)), 1fr));
+}
+.hs-grid-3 {
+  grid-template-columns: repeat(auto-fill, minmax(min(100%, max(var(--hs-grid-min), (100% - 2 * var(--hs-grid-gap)) / 3)), 1fr));
 }
+.hs-span-all { grid-column: 1 / -1; }
 
 /* ── Side sheet footer — change summary on the left, Cancel / Save on the right ── */
 .hs-sheet-footer {

package/styles/tokens.css

@@ -47,7 +47,7 @@
   --u-panel-bg-color:        #FFFFFF;
   --u-input-bg-color:        #FFFFFF;
   --u-bg-color-raised:       #F1F1EF;   /* table header, toolbar strip, read-only field */
-  --u-bg-color-raised-hover: #EAEAE7;
+  --u-bg-color-raised-hover: #E5E5E2;
   --u-bg-color-hover:        #F1F1EF;
   --u-bg-color-active:       #EAEAE7;
   --u-bg-color-disabled:     #F1F1EF;
@@ -83,9 +83,25 @@
   --u-primary-txt-color:     #FFFFFF;
   --u-primary-bg-color:      #EEF3FD;   /* selected rows, current item */
 
-  /* Interaction — blue, for links and focus only */
+  /* Interaction — blue, for links, focus and the mark of a chosen option (a checked box or radio) */
   --u-link-txt-color:   #1F5FCC;
   --u-focus-ring-color: #2F6FEB;
+  --u-selection-color:     #2F6FEB;
+  --u-selection-txt-color: #FFFFFF;   /* the check drawn on that fill */
+
+  /* Chart series — eight, in order (slot one first, never cycled). Slot one is the interaction blue, so a
+     one-series chart draws in the colour the rest of the screen uses for "this is the thing"; the other seven
+     are muted, warm-leaning hues chosen as a set: OKLCH L 0.50–0.68, chroma ≥ 0.10, neighbours ΔE ≥ 15 for
+     full colour vision and ≥ 8 under red–green deficiency (Machado 2009), every slot at least ΔE 10 from a
+     status colour. Slot six (light olive) is 2.8:1 on white — six or more series need a legend or labels. */
+  --u-chart-color-1: #2F6FEB;
+  --u-chart-color-2: #B55F40;
+  --u-chart-color-3: #14938D;
+  --u-chart-color-4: #AF8020;
+  --u-chart-color-5: #7D4B92;
+  --u-chart-color-6: #86A645;
+  --u-chart-color-7: #C46E83;
+  --u-chart-color-8: #834B14;
 
   /* Status — `-color-strong` is the text step (on surface and on its own tint), `-bg-color`
      the tint, `-color` the solid fill (with `-txt-color` on top). */
@@ -204,6 +220,20 @@
 
   --u-link-txt-color:   #8DB3F7;
   --u-focus-ring-color: #6E9CF7;
+  --u-selection-color:     #6E9CF7;
+  --u-selection-txt-color: #0E0F10;
+
+  /* Chart series, dark — the same hues stepped into the dark band (L 0.52–0.66), every slot ≥ 3:1 on the
+     surface and the raised surface. Slot one is the dark interaction blue taken to the band's top (#6E9CF7
+     itself is lighter than a filled mark should be on this surface). */
+  --u-chart-color-1: #628FEA;
+  --u-chart-color-2: #C97152;
+  --u-chart-color-3: #04A19B;
+  --u-chart-color-4: #B8892D;
+  --u-chart-color-5: #9760AF;
+  --u-chart-color-6: #57833D;
+  --u-chart-color-7: #CF7188;
+  --u-chart-color-8: #9A5F1A;
 
   --u-info-color-weakest:    #1F3152;
   --u-info-color-weaker:     #2C4A7E;
@@ -311,6 +341,9 @@
   --hs-text-dense-size: calc((var(--u-text-body-size) + var(--u-text-label-size)) / 2);
   --hs-text-hero-size:  calc(var(--u-text-display-size) + 6px);
 
+  /* Prose measure — a running paragraph stops around 70 characters a line (`.hs-prose`). */
+  --hs-measure: 70ch;
+
   /* Field box (`@iyulab/components`) — 32px fields beside 32px buttons; 40px inside form sections. In em, so the box
      follows the control density with the buttons (resolved at the field: 4.5px / 12px at the default 14px). */
   --u-field-padding-block:  calc(4.5em / 14);