@iyulab/house-style 0.8.0 → 0.9.0

package/CHANGELOG.md

@@ -1,5 +1,37 @@
 # Changelog
 
+## [0.9.0] - 2026-10-17
+
+### Added
+
+- The reference app's sidebar foot is an account menu — the signed-in user's name, a role line and initials, with the theme
+  toggle and Sign out inside (`type: 'menu'` with `avatar` and `description`). The route guard that loads the session keeps the
+  user, and the shell reads it when the layout route renders (again after every sign-in), so the config needs no reactive
+  session.
+- `.hs-note` — a collapsible explanation (`<details class="hs-note">`): an accent summary line, the body one step quieter,
+  760px at most. The guide also says that a section heading (`u-group-box` `meta` + `actions`) and a record heading
+  (`u-page-header` `eyebrow` + `status`) are components already — no pattern for them.
+
+### Removed
+
+- `--hs-control-sm` · `--hs-control-md` · `--hs-control-lg` — declared as «read by components.css», read by nothing.
+  Control heights follow from the density (`--u-density`) through the padding formula (32 / 36 / 40 at 14px), so the
+  literals would also have been wrong at any other density. A host control that wants the ladder measures a
+  `u-button` or sets its own height.
+
+## [0.8.1] - 2026-10-17
+
+### Fixed
+
+- A KPI figure (`u-info-field size="xl"`) is the house hero step (`--hs-text-hero-size`, 28px at the 24px display) —
+  0.8.0 defined the step but nothing read it. Needs `@iyulab/modern-app` 0.56 or later (the optional peer floor moves
+  from 0.54 to 0.56).
+
+### Documentation
+
+- The guide's KPI section shows the tile grid (`appearance="tile"`, `size="xl"`, a toned tile with a status icon, a
+  blank figure with its reason) next to the strip, and when to use which.
+
 ## [0.8.0] - 2026-10-17
 
 The palette moves to the application and the house gains presets; controls, rows and the type ladder grow a step.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@iyulab/house-style",
-  "version": "0.8.0",
+  "version": "0.9.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": {
@@ -60,7 +60,7 @@
   "peerDependencies": {
     "@iyulab/components": "^2.29.0",
     "@iyulab/flex-table": ">=0.41.0",
-    "@iyulab/modern-app": ">=0.54.0"
+    "@iyulab/modern-app": ">=0.56.0"
   },
   "peerDependenciesMeta": {
     "@iyulab/flex-table": {
@@ -74,8 +74,8 @@
     "@iyulab/components": "^2.29.0",
     "@iyulab/data-components": "^0.51.0",
     "@iyulab/enterprise": "^0.35.0",
-    "@iyulab/flex-table": "^0.68.0",
-    "@iyulab/modern-app": "^0.55.0",
+    "@iyulab/flex-table": "^0.70.0",
+    "@iyulab/modern-app": "^0.56.0",
     "@iyulab/router": "^0.24.0",
     "@iyulab/u-widgets": "^0.35.0",
     "@lit/react": "^1.0.8",

package/styles/components.css

@@ -325,6 +325,12 @@ u-page-header::part(subtitle) {
   color: var(--u-txt-color-weak);
 }
 
+/* ── Info field (`@iyulab/modern-app`) — a KPI figure (`size="xl"`) is the house hero step, 28 at the 24 display.
+ *    A tile (`appearance="tile"`) is already a card surface — border, card corner, surface — from the shared tokens. ── */
+u-info-field {
+  --info-field-xl-size: var(--hs-text-hero-size);
+}
+
 /* ── Sidebar layout — the sidebar is a surface separated from the canvas by a hairline.
  *    (The page already sits on `--u-canvas-bg-color`; padding is `--app-main-padding`.) ── */
 u-sidebar-layout::part(sidebar) {

package/styles/patterns.css

@@ -160,6 +160,30 @@ tr[aria-selected='true'] .hs-row-actions {
   align-items: start;
 }
 
+/* ── Collapsible note — `<details class="hs-note">`: an accent summary line, the body one step quieter. For the
+ *    explanation a screen can do without; the conclusion still goes in the title (callouts), not in here. ── */
+.hs-note {
+  max-inline-size: 760px;
+  font-size: var(--u-text-label-size);
+  line-height: 1.55;
+  color: var(--u-txt-color-weak);
+}
+.hs-note > summary {
+  cursor: pointer;
+  width: fit-content;
+  font-size: var(--u-text-body-size);
+  font-weight: 600;
+  color: var(--u-primary-color);
+}
+.hs-note > summary:focus-visible {
+  outline: 2px solid var(--u-focus-ring-color, var(--u-primary-color));
+  outline-offset: 2px;
+  border-radius: var(--u-radius-sm);
+}
+.hs-note > :not(summary) {
+  margin: var(--u-space-sm, 8px) 0 0;
+}
+
 /* ── Form — label above, help below; sections instead of one long grid ── */
 .hs-fieldset {
   margin: 0;

package/styles/tokens.css

@@ -530,10 +530,8 @@
   --u-text-overline-leading:  1.273;
   --u-text-overline-tracking: 0.04em;
 
-  /* House-only scale — control heights and table rows (read by components.css · patterns.css) */
-  --hs-control-sm: 32px;
-  --hs-control-md: 36px;
-  --hs-control-lg: 40px;
+  /* House-only scale — table rows (read by components.css · patterns.css). Control heights are not tokens: they
+     follow from the density (`--u-density`) through the padding formula in components.css, 32 / 36 / 40 at 14px. */
   --hs-row:         44px;
   --hs-row-compact: 36px;
   --hs-page-padding: 20px 32px 48px;