@iyulab/house-style 0.1.5 → 0.2.0

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # 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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@iyulab/house-style",
-  "version": "0.1.5",
+  "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": {
@@ -70,13 +70,13 @@
     }
   },
   "devDependencies": {
-    "@iyulab/components": "^2.19.0",
+    "@iyulab/components": "^2.20.0",
     "@iyulab/data-components": "^0.47.0",
-    "@iyulab/enterprise": "^0.29.0",
+    "@iyulab/enterprise": "^0.32.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/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.3.0",

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 {