@iyulab/house-style 0.1.2 → 0.1.4

package/CHANGELOG.md

@@ -1,5 +1,32 @@
 # Changelog
 
+## [0.1.4] - 2026-10-07
+
+### Fixed
+
+- **The control ladder follows the control density** (`--u-density`). Button font sizes were literal (md 13px, lg
+  14px) and so were the field and button paddings, so a host that raised the density grew only some steps: with
+  `@iyulab/components` 2.13 (sm follows the density) a small button became larger than a default one (13.7 > 13px),
+  and buttons stopped lining up with fields. Font sizes are now steps of the density and paddings are em. At the
+  default 14px nothing changes — 12 / 13 / 14px and 28 / 32 / 40px; at 16px all three steps grow in order and
+  buttons and fields stay level.
+
+## [0.1.3] - 2026-10-06
+
+### Fixed
+
+- **A sidebar group holding the current page keeps a readable header.** `@iyulab/modern-app` derived that header's
+  text from the active background, which this theme makes light (`--hs-brand-soft`), so the text sank into the
+  panel (about 1.6:1 light, 1.1:1 dark). The theme now sets `--app-sidebar-group-active-fg` to `--hs-brand-ink`, the
+  color it already uses for text on that background (`@iyulab/modern-app` 0.39 reads it).
+- **Patterns follow the type ladder.** `patterns.css` set font sizes in px (11, 12, 13, 28 — 19 places) and flex-table
+  cells and headers did too, so a consumer who rescaled `--u-text-*-size` saw components and body text change while
+  tables, pagers, definition lists and stats stayed put. They now read the steps — label, caption and overline, plus
+  two house steps derived from the ladder: `--hs-text-dense-size` (between body and label — the 13px of table cells,
+  definition lists, callouts) and `--hs-text-hero-size` (display + 6px — the 28px headline figure). Each read keeps
+  the current px as its fallback, so nothing changes at the house ladder. Button and field font sizes stay literal:
+  they are terms of the 28/32/40 control-height formula.
+
 ## [0.1.2] - 2026-10-06
 
 ### Fixed

package/README.md

@@ -77,6 +77,11 @@ Everything else — warm-grey neutrals, the ink primary action, blue for links a
 tints, the 22/18/15/14/13/12/11 type ladder, 28/32/40 controls, 40px table rows — comes from the
 theme and can be overridden token by token.
 
+The type ladder is the `--u-text-*-size` steps plus two house steps derived from them —
+`--hs-text-dense-size` (between body and label: table cells, definition lists, callouts) and
+`--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.
+
 ## The guide
 
 **Live**: https://iyulab.github.io/house-style/ — this is the guide. There is no
@@ -130,6 +135,15 @@ npm run check:start-here -w @iyulab/house-style
 packed in place of the registry's — run it before tagging a release. The deploy workflow runs
 both on every push to `main`.
 
+The guide itself is checked too: after a build, every page (the landing page and each category)
+must draw its section in a browser, with no page errors — a build can drop the section modules and
+still succeed. The deploy workflow runs it before uploading the site:
+
+```bash
+npm run build -w @iyulab/house-style
+npm run check:guide -w @iyulab/house-style
+```
+
 ## License
 
 MIT

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@iyulab/house-style",
-  "version": "0.1.2",
+  "version": "0.1.4",
   "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": {
@@ -25,7 +25,9 @@
     "LICENSE"
   ],
   "sideEffects": [
-    "**/*.css"
+    "**/*.css",
+    "./src/**",
+    "./src-app/**"
   ],
   "scripts": {
     "preversion": "node -e \"if(require('fs').existsSync('../../scripts/preversion-check.mjs'))require('child_process').execFileSync('node',['../../scripts/preversion-check.mjs'],{stdio:'inherit'})\"",
@@ -33,6 +35,8 @@
     "build": "npm run typecheck && vite build",
     "preview": "vite preview",
     "typecheck": "tsc --noEmit",
+    "check:guide": "node scripts/check-guide.mjs",
+    "check:a11y": "node scripts/check-a11y.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'})\"",
@@ -59,15 +63,16 @@
   },
   "devDependencies": {
     "@iyulab/components": "^2.0.0",
-    "@iyulab/data-components": "^0.35.0",
-    "@iyulab/enterprise": "^0.24.0",
-    "@iyulab/modern-app": "^0.34.0",
-    "@iyulab/router": "^0.19.0",
-    "@iyulab/u-widgets": "^0.24.0",
+    "@iyulab/data-components": "^0.43.0",
+    "@iyulab/enterprise": "^0.26.0",
+    "@iyulab/modern-app": "^0.43.0",
+    "@iyulab/router": "^0.20.0",
+    "@iyulab/u-widgets": "^0.26.0",
     "@lit/react": "^1.0.8",
     "@types/node": "^26.1.1",
     "@types/react": "^19.2.14",
     "@types/react-dom": "^19.2.3",
+    "axe-core": "^4.14.0",
     "echarts": "^6.1.0",
     "lit": "^3.3.2",
     "msw": "^3.0.0",

package/styles/components.css

@@ -31,21 +31,28 @@
 
 /* ── Button — 28 / 32 / 40, medium weight ─────────────────────────────── *
  * Height follows the components' own formula (1.5em line + 2 × padding + 2px border), so
- * these are padding values, not fixed heights: text and icon-only buttons stay equal.     */
+ * these are padding values, not fixed heights: text and icon-only buttons stay equal.
+ * The font sizes are terms of that height formula (the control ladder 28/32/40), not steps of
+ * the text ladder — tying them to `--u-text-*` would change control heights whenever the text
+ * ladder is rescaled. They are steps of the control density instead (`--u-density`, the
+ * components' size axis): at the default 14px they are 12 / 13 / 14 and the heights 28/32/40;
+ * a host that raises the density (a field or touch mode) grows all three together and in order.
+ * Padding is in em for the same reason — the n/13, n/12, n/14 factors give the px values at the
+ * default density exactly. (sm takes the components' own size: density × 6/7.)            */
 u-button:not([size]),
 u-button[size='md'] {
-  font-size: 13px;
-  --btn-padding-block: 5.25px;   /* 19.5 + 10.5 + 2 = 32 */
-  --btn-padding-inline: 12px;
+  font-size: calc(var(--u-density, 14px) * 13 / 14);
+  --btn-padding-block: calc(5.25em / 13);   /* 13px: 19.5 + 10.5 + 2 = 32 */
+  --btn-padding-inline: calc(12em / 13);
 }
 u-button[size='sm'] {
-  --btn-padding-block: 4px;      /* 12px → 18 + 8 + 2 = 28 */
-  --btn-padding-inline: 8px;
+  --btn-padding-block: calc(4em / 12);      /* 12px: 18 + 8 + 2 = 28 */
+  --btn-padding-inline: calc(8em / 12);
 }
 u-button[size='lg'] {
-  font-size: 14px;
-  --btn-padding-block: 8.5px;    /* 21 + 17 + 2 = 40 */
-  --btn-padding-inline: 16px;
+  font-size: var(--u-density, 14px);
+  --btn-padding-block: calc(8.5em / 14);    /* 14px: 21 + 17 + 2 = 40 */
+  --btn-padding-inline: calc(16em / 14);
 }
 u-button[appearance='link'] {
   --btn-padding-inline: 0;
@@ -55,11 +62,11 @@ u-button[appearance='link'] {
  *    (Components 2.0 renders fields at 14px by default, so a field no longer grows with the
  *    surrounding text; the house sets the box padding per size.) ── */
 :is(u-input, u-select, u-textarea, u-date-picker, u-date-range-picker)[size='sm'] {
-  --u-field-padding-block: 4px;     /* 12px → 18 + 8 + 2 = 28 */
+  --u-field-padding-block: calc(4em / 12);     /* 12px: 18 + 8 + 2 = 28 */
 }
 :is(u-input, u-select, u-textarea, u-date-picker, u-date-range-picker)[size='lg'] {
-  font-size: 14px;
-  --u-field-padding-block: 8.5px;   /* 21 + 17 + 2 = 40 */
+  font-size: var(--u-density, 14px);           /* with the density, like md — the step is the padding */
+  --u-field-padding-block: calc(8.5em / 14);   /* 14px: 21 + 17 + 2 = 40 */
 }
 
 /* ── Tag — 22px labels (12px text · 1px block padding · hairline) to sit inside 40px rows.
@@ -90,10 +97,10 @@ u-drawer::part(body) {
  *    no zebra (hover and selection carry the row), tabular figures. ──────── */
 flex-table {
   --ft-font-family: var(--u-font-base);
-  --ft-font-size: 13px;
+  --ft-font-size: var(--hs-text-dense-size, 13px);
   --ft-row-height: var(--hs-row);
   --ft-cell-padding-inline: 12px;
-  --ft-header-font-size: 12px;
+  --ft-header-font-size: var(--u-text-label-size, 12px);
   --ft-header-font-weight: 500;
   --ft-header-text-color: var(--u-txt-color-weak);
   --ft-header-bg: var(--u-bg-color-raised);

package/styles/patterns.css

@@ -87,7 +87,7 @@
   border-bottom: 2px solid transparent;
   background: none;
   font: inherit;
-  font-size: 13px;
+  font-size: var(--hs-text-dense-size, 13px);
   line-height: 20px;
   color: var(--u-txt-color-weak);
   text-decoration: none;   /* a tab may be a link (`aria-current="page"`) */
@@ -114,7 +114,7 @@
   border-radius: var(--u-radius-pill, 9999px);
   background: var(--u-bg-color-raised);
   color: var(--u-txt-color-weak);
-  font-size: 11px;
+  font-size: var(--u-text-overline-size, 11px);
   line-height: 16px;
   font-weight: 500;
   text-align: center;
@@ -182,17 +182,17 @@
 }
 .hs-stat__unit {
   margin-inline-start: 2px;
-  font-size: 12px;
+  font-size: var(--u-text-caption-size, 12px);
   font-weight: 500;
   color: var(--u-txt-color-weak);
 }
 .hs-stat__sub {
-  font-size: 12px;
+  font-size: var(--u-text-caption-size, 12px);
   line-height: 18px;
   color: var(--u-txt-color-weaker);
 }
 .hs-stat--hero .hs-stat__value {
-  font-size: 28px;
+  font-size: var(--hs-text-hero-size, 28px);
   line-height: 34px;
   letter-spacing: -0.01em;
 }
@@ -232,7 +232,7 @@
   background: var(--u-primary-bg-color);
 }
 .hs-table-toolbar__title {
-  font-size: 13px;
+  font-size: var(--hs-text-dense-size, 13px);
   font-weight: 600;
 }
 .hs-pager {
@@ -242,7 +242,7 @@
   gap: var(--u-space-sm, 8px);
   padding: var(--u-space-sm, 8px) var(--u-space-md, 12px);
   border-top: 1px solid var(--u-border-color);
-  font-size: 12px;
+  font-size: var(--u-text-label-size, 12px);
   color: var(--u-txt-color-weak);
   font-variant-numeric: tabular-nums;
 }
@@ -251,7 +251,7 @@
 .hs-table {
   width: 100%;
   border-collapse: collapse;
-  font-size: 13px;
+  font-size: var(--hs-text-dense-size, 13px);
   line-height: 20px;
   color: var(--u-txt-color);
 }
@@ -259,7 +259,7 @@
   padding: var(--u-space-sm, 8px) var(--u-space-md, 12px);
   text-align: start;
   white-space: nowrap;
-  font-size: 12px;
+  font-size: var(--u-text-label-size, 12px);
   line-height: 16px;
   font-weight: 500;
   color: var(--u-txt-color-weak);
@@ -309,7 +309,7 @@ a.hs-id:hover,
 .hs-table .hs-group td {
   height: 32px;
   background: var(--u-bg-color-raised);
-  font-size: 12px;
+  font-size: var(--u-text-label-size, 12px);
   font-weight: 600;
   color: var(--u-txt-color-weak);
 }
@@ -353,7 +353,7 @@ tr[aria-selected='true'] .hs-row-actions {
   font-weight: 600;
 }
 .hs-card__link {
-  font-size: 12px;
+  font-size: var(--u-text-label-size, 12px);
   font-weight: 500;
   color: var(--u-link-txt-color);
   text-decoration: none;
@@ -375,7 +375,7 @@ a.hs-card:hover,
   grid-template-columns: max-content minmax(0, 1fr);
   gap: 6px var(--u-space-lg, 16px);
   margin: 0;
-  font-size: 13px;
+  font-size: var(--hs-text-dense-size, 13px);
   line-height: 20px;
 }
 .hs-dl > dt { color: var(--u-txt-color-weak); }
@@ -412,7 +412,7 @@ a.hs-card:hover,
   padding: var(--u-space-md, 12px) var(--u-space-lg, 16px);
   border-radius: var(--u-radius-xl, 10px);
   background: var(--u-bg-color-raised);
-  font-size: 13px;
+  font-size: var(--hs-text-dense-size, 13px);
   line-height: 20px;
 }
 .hs-callout__icon { color: var(--u-txt-color-weak); line-height: 20px; }
@@ -450,7 +450,7 @@ a.hs-card:hover,
   width: 100%;
   margin: 0 0 var(--u-space-md, 12px);
   padding: 0;
-  font-size: 13px;
+  font-size: var(--hs-text-dense-size, 13px);
   font-weight: 600;
   color: var(--u-txt-color);
 }
@@ -475,18 +475,18 @@ a.hs-card:hover,
   color: var(--u-danger-color-strong);
 }
 .hs-field__help {
-  font-size: 12px;
+  font-size: var(--u-text-caption-size, 12px);
   line-height: 18px;
   color: var(--u-txt-color-weaker);
 }
 .hs-field__error {
-  font-size: 12px;
+  font-size: var(--u-text-caption-size, 12px);
   line-height: 18px;
   color: var(--u-danger-color-strong);
 }
 /* Form fields are 40px (the side-sheet and edit-form size); toolbars keep 32px. */
 .hs-field {
-  --u-field-padding-block: 8.5px;
+  --u-field-padding-block: calc(8.5em / 14);   /* 14px: 21 + 17 + 2 = 40 — and with the density */
 }
 .hs-field :is(u-input, u-select, u-textarea, u-date-picker, u-date-range-picker) {
   width: 100%;
@@ -517,7 +517,7 @@ a.hs-card:hover,
   background: var(--u-bg-color);
 }
 .hs-sheet-footer__summary {
-  font-size: 12px;
+  font-size: var(--u-text-caption-size, 12px);
   color: var(--u-txt-color-weak);
 }
 .hs-sheet-footer__actions {
@@ -534,7 +534,7 @@ a.hs-card:hover,
   padding: 0 5px;
   border: 1px solid var(--u-border-color);
   border-radius: var(--u-radius-md, 4px);
-  font-size: 11px;
+  font-size: var(--u-text-overline-size, 11px);
   line-height: 16px;
   font-weight: 500;
   color: var(--u-txt-color-weak);
@@ -548,7 +548,7 @@ a.hs-card:hover,
   height: 18px;
   padding: 0 6px;
   border-radius: var(--u-radius-pill, 9999px);
-  font-size: 11px;
+  font-size: var(--u-text-overline-size, 11px);
   font-weight: 600;
   font-variant-numeric: tabular-nums;
   background: var(--u-bg-color-raised);

package/styles/tokens.css

@@ -140,6 +140,7 @@
   --app-sidebar-width:       232px;
   --app-sidebar-active-bg:   var(--hs-brand-soft);
   --app-sidebar-active-fg:   var(--hs-brand-ink);
+  --app-sidebar-group-active-fg: var(--hs-brand-ink);
 
   /* Brand — the application's identity colour. The house default is neutral, so an
      unbranded app looks finished; an application sets these three and nothing else. */
@@ -304,9 +305,16 @@
   --hs-row-compact: 32px;
   --hs-page-padding: 24px;
 
-  /* Field box (`@iyulab/components`) — 32px fields beside 32px buttons; 40px inside form sections */
-  --u-field-padding-block:  4.5px;
-  --u-field-padding-inline: 12px;
+  /* House type steps beyond the shared ladder — derived from it, so a rescaled ladder (density, a product system)
+     carries them along. Dense = the step between body and label (13 at 14/12): table cells, definition lists,
+     callouts. Hero = a headline figure, display + 6 (28 at 22). */
+  --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);
+
+  /* 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);
+  --u-field-padding-inline: calc(12em / 14);
   --u-field-radius:         6px;
 
   /* Shell (`@iyulab/modern-app`) — 32px navigation rows, 16px icons, a flat current item */