@iyulab/house-style 0.1.3 → 0.1.5

package/CHANGELOG.md

@@ -1,5 +1,25 @@
 # Changelog
 
+## [0.1.5] - 2026-10-09
+
+### Fixed
+
+- **The `@iyulab/modern-app` peer range now starts where the theme takes effect: `>=0.39.0`** (was `>=0.34.0`). The
+  theme sets `--app-sidebar-group-active-fg` so a sidebar group header that holds the current page stays readable on
+  the theme's light active surface; modern-app reads that property from 0.39.0. With 0.34–0.38 the range allowed it,
+  and the header text was derived from the surface instead — about 1.6:1 contrast in light mode.
+
+## [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

package/README.md

@@ -100,9 +100,14 @@ The live page is organized into sections:
 ## The reference app
 
 The guide has a second half: a small but working line-of-business app, assembled only from
-these libraries, at **https://iyulab.github.io/house-style/app/** (sign in with `demo` / `demo`
-— the backend is mocked in the browser, there are no real accounts). It is reachable from the
-guide's sidebar under "Open the reference app".
+these libraries, at **https://iyulab.github.io/house-style/app/** (sign in with `demo` / `demo`,
+or `viewer` / `viewer` for a read-only account — the backend is mocked in the browser, there are
+no real accounts). It is reachable from the guide's sidebar under "Open the reference app".
+
+The two accounts show permissions end to end: one permission decides both whether a link or
+action is shown and whether its route lets the user in. The read-only account sees no create or
+cancel actions, and opening the new-order screen by its address shows the blocked state
+(`<u-empty-state variant="no-access">`) inside the shell.
 
 Where the guide shows each pattern on its own, the app shows them load-bearing: a sidebar shell,
 a list screen with filtering, selection and bulk actions, a master-detail order screen with an

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@iyulab/house-style",
-  "version": "0.1.3",
+  "version": "0.1.5",
   "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": {
@@ -36,11 +36,20 @@
     "preview": "vite preview",
     "typecheck": "tsc --noEmit",
     "check:guide": "node scripts/check-guide.mjs",
+    "check:a11y": "node scripts/check-a11y.mjs",
+    "check:ladder": "node scripts/check-ladder.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'})\"",
     "test": "node --test \"tests/*.test.mjs\""
   },
+  "iyulab": {
+    "upstreamChecks": {
+      "@iyulab/components": [
+        "check:ladder"
+      ]
+    }
+  },
   "engines": {
     "node": ">=20"
   },
@@ -50,7 +59,7 @@
   "peerDependencies": {
     "@iyulab/components": "^2.0.0",
     "@iyulab/flex-table": ">=0.41.0",
-    "@iyulab/modern-app": ">=0.34.0"
+    "@iyulab/modern-app": ">=0.39.0"
   },
   "peerDependenciesMeta": {
     "@iyulab/flex-table": {
@@ -61,16 +70,18 @@
     }
   },
   "devDependencies": {
-    "@iyulab/components": "^2.0.0",
-    "@iyulab/data-components": "^0.39.0",
-    "@iyulab/enterprise": "^0.25.0",
-    "@iyulab/modern-app": "^0.39.0",
-    "@iyulab/router": "^0.20.0",
-    "@iyulab/u-widgets": "^0.25.0",
+    "@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",
     "@lit/react": "^1.0.8",
     "@types/node": "^26.1.1",
-    "@types/react": "^19.2.14",
-    "@types/react-dom": "^19.2.3",
+    "@types/react": "^19.3.0",
+    "@types/react-dom": "^19.3.0",
+    "axe-core": "^4.14.0",
     "echarts": "^6.1.0",
     "lit": "^3.3.2",
     "msw": "^3.0.0",

package/styles/components.css

@@ -32,23 +32,27 @@
 /* ── 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.
- * The font sizes here are literal on purpose: they 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.                            */
+ * 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;
@@ -58,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.

package/styles/patterns.css

@@ -486,7 +486,7 @@ a.hs-card:hover,
 }
 /* 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%;

package/styles/tokens.css

@@ -311,9 +311,10 @@
   --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 */
-  --u-field-padding-block:  4.5px;
-  --u-field-padding-inline: 12px;
+  /* 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 */