@iyulab/house-style 0.1.4 → 0.2.0

package/CHANGELOG.md

@@ -1,5 +1,28 @@
 # Changelog
 
+## [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
+
+- **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

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.4",
+  "version": "0.2.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": {
@@ -37,11 +37,19 @@
     "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"
   },
@@ -51,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": {
@@ -62,16 +70,17 @@
     }
   },
   "devDependencies": {
-    "@iyulab/components": "^2.0.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",
+    "@iyulab/components": "^2.20.0",
+    "@iyulab/data-components": "^0.47.0",
+    "@iyulab/enterprise": "^0.32.0",
+    "@iyulab/flex-table": "^0.64.0",
+    "@iyulab/modern-app": "^0.52.0",
+    "@iyulab/router": "^0.23.0",
+    "@iyulab/u-widgets": "^0.30.1",
     "@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",

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 {