@iyulab/house-style 0.3.0 → 0.4.0

package/CHANGELOG.md

@@ -1,5 +1,44 @@
 # Changelog
 
+## [0.4.0] - 2026-10-14
+
+### Added
+
+- `<kbd>` outside a component takes the keyboard-hint look (border, canvas background, overline size).
+- `.hs-table-toolbar__actions` — the action group at the end of a table toolbar.
+
+### Changed
+
+- Requires `@iyulab/components` 2.24.0 or later (peer range `^2.24.0`). The house sets the selection role
+  (`--u-selection-color`), which components reads from 2.24.0 — with an older components a checked box, a selected
+  radio and an on switch keep the primary colour.
+
+
+### Deprecated
+
+- **`.hs-page-head` and its parts (`__eyebrow` · `__title` · `__description` · `__actions`) — use `u-page-header`**
+  from `@iyulab/modern-app`. The house already draws that component the same way (label-size eyebrow and
+  description, display-size title), and it carries the page's `h1`, a back link and a status slot the class pattern
+  does not. Move the eyebrow, title and description to its `eyebrow`, `title` and `subtitle` attributes and put each
+  scope picker and action in `slot="actions"`. Removed in 0.5.0.
+- **`.hs-kbd` — use a plain `<kbd>`.** The house now draws `<kbd>` as the same small outlined cap, in the monospace
+  face. Removed in 0.5.0.
+- **`.hs-stats` / `.hs-stat` and its parts — use `u-info-section layout="strip"`** with `u-info-field size="lg"`
+  (`@iyulab/modern-app` 0.54): `__label` → `label`, `__value` → `value`, `__unit` → `unit`, `__sub` → `description`,
+  `--warning` / `--danger` / `--success` → `tone="warning"` / `"negative"` / `"positive"`. The same strip — one surface,
+  hairline dividers, all side by side or all stacked below 640px. `.hs-stat--hero` has no counterpart (nothing used it)
+  and goes with it. Removed in 0.5.0.
+- **`.hs-sheet-footer` and its parts — use `<u-action-bar sticky>`** (`@iyulab/modern-app` 0.54): the change summary in
+  `slot="summary"`, Cancel and Save as its children, the sheet's inset as `--action-bar-padding-inline`. It also keeps
+  a destructive action apart at the leading edge and puts the main actions on top when narrow. Removed in 0.5.0.
+
+### Fixed
+
+- `.hs-views` no longer draws a vertical scrollbar beside its tabs. The selected tab's underline reached 1px
+  past the scrolling strip (a `-1px` margin over the strip's bottom border); the base line is now an inset shadow the
+  underline paints over.
+- `.hs-table--compact` totals rows take the compact height too. `.hs-table tfoot td` set 40px with a higher
+  specificity, so a compact table's subtotal, tax and total rows stood taller than its body rows.
 ## [0.3.0] - 2026-10-13
 
 ### Changed

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@iyulab/house-style",
-  "version": "0.3.0",
+  "version": "0.4.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": {
@@ -58,7 +58,7 @@
     "pretendard": "^1.3.9"
   },
   "peerDependencies": {
-    "@iyulab/components": "^2.0.0",
+    "@iyulab/components": "^2.24.0",
     "@iyulab/flex-table": ">=0.41.0",
     "@iyulab/modern-app": ">=0.39.0"
   },
@@ -71,11 +71,11 @@
     }
   },
   "devDependencies": {
-    "@iyulab/components": "^2.20.0",
-    "@iyulab/data-components": "^0.48.0",
+    "@iyulab/components": "^2.24.0",
+    "@iyulab/data-components": "^0.49.0",
     "@iyulab/enterprise": "^0.32.0",
-    "@iyulab/flex-table": "^0.66.0",
-    "@iyulab/modern-app": "^0.53.0",
+    "@iyulab/flex-table": "^0.67.0",
+    "@iyulab/modern-app": "^0.54.0",
     "@iyulab/router": "^0.24.0",
     "@iyulab/u-widgets": "^0.31.0",
     "@lit/react": "^1.0.8",

package/styles/components.css

@@ -64,6 +64,17 @@
 :where(code, kbd, samp, pre) {
   font-family: var(--u-font-mono);
 }
+/* A key the reader presses — a small outlined cap, quieter than the text around it. */
+:where(kbd) {
+  padding: 0 4px;
+  border: 1px solid var(--u-border-color);
+  border-radius: var(--u-radius-md, 4px);
+  background: var(--u-canvas-bg-color);
+  font-size: var(--u-text-overline-size, 11px);
+  font-weight: 500;
+  line-height: 16px;
+  color: var(--u-txt-color-weak);
+}
 /* A measure for running text — opt in where a paragraph can be wider than reads well. */
 :where(.hs-prose) :where(p, ul, ol, dl, blockquote) {
   max-inline-size: var(--hs-measure);

package/styles/patterns.css

@@ -9,9 +9,9 @@
  * Prefix `hs-`. Everything sits in `@layer iyu.house`; an application rule always wins.
  *
  * Screen recipes (the guide shows each one):
- *   list   = .hs-page-head → .hs-filter-bar → .hs-stats → .hs-table-card (toolbar · table · pager)
- *   detail = side sheet: head (id · status · one primary action) → steps → .hs-stats → tabs → cards
- *   edit   = side sheet with .hs-fieldset sections and a pinned .hs-sheet-footer
+ *   list   = u-page-header → .hs-filter-bar → u-info-section layout="strip" → .hs-table-card (toolbar · table · pager)
+ *   detail = side sheet: head (id · status · one primary action) → steps → stat strip → tabs → cards
+ *   edit   = side sheet with .hs-fieldset sections and a pinned u-action-bar (summary slot)
  *
  * Rules the patterns encode:
  *   · one ink (primary) button per view — the rest are outlined, plain or in a menu
@@ -35,7 +35,10 @@
 
 /* Page head — eyebrow · title · one-line description on the left; on the right a scope
    picker (data-wide filters such as a season or period), up to two secondary actions and
-   the single primary action, in that order. */
+   the single primary action, in that order.
+   @deprecated Use `u-page-header` (`@iyulab/modern-app`) — `eyebrow` · `title` · `subtitle`, and the
+   scope picker and actions in its `actions` slot. The house already draws it this way
+   (`components.css`), and it carries the page's h1 and a back link. remove: 0.5.0 */
 .hs-page-head {
   display: flex;
   align-items: flex-end;
@@ -74,7 +77,10 @@
 .hs-views {
   display: flex;
   gap: var(--u-space-2xs, 4px);
-  border-bottom: 1px solid var(--u-border-color);
+  /* The base line is an inset shadow, not a border: a tab's 2px underline paints over it without the tab
+     reaching past the box — with a border and a -1px tab margin the scroll container overflowed by 1px and
+     drew a vertical scrollbar beside the tabs. */
+  box-shadow: inset 0 -1px 0 var(--u-border-color);
   overflow-x: auto;
 }
 .hs-views__tab {
@@ -82,7 +88,6 @@
   align-items: center;
   gap: 6px;
   padding: var(--u-space-sm, 8px) var(--u-space-md, 12px);
-  margin-bottom: -1px;
   border: 0;
   border-bottom: 2px solid transparent;
   background: none;
@@ -150,7 +155,10 @@
 /* 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. */
+ * strip's border-coloured background, so they turn from vertical to horizontal on their own.
+ * @deprecated Use `u-info-section layout="strip"` with `u-info-field size="lg"` (`@iyulab/modern-app` 0.54) — the
+ * same strip as a component: `label` · `value` · `unit` · `description` (the supporting line) and `tone` for the
+ * warning, danger and success values. `.hs-stat--hero` has no counterpart and goes with it. remove: 0.5.0 */
 .hs-stats {
   display: flex;
   flex-wrap: wrap;
@@ -233,6 +241,12 @@
   font-size: var(--hs-text-dense-size, 13px);
   font-weight: 600;
 }
+.hs-table-toolbar__actions {
+  display: flex;
+  align-items: center;
+  gap: var(--u-space-sm, 8px);
+  flex-wrap: wrap;
+}
 .hs-pager {
   display: flex;
   align-items: center;
@@ -279,7 +293,9 @@
 }
 /* One line separates the totals from the body — not one per totals row (subtotal · tax · total). */
 .hs-table tfoot tr:first-child td { border-top: 1px solid var(--u-border-color); }
-.hs-table--compact td { height: var(--hs-row-compact, 32px); }
+/* Totals rows follow the compact height too (`tfoot td` would otherwise win on specificity). */
+.hs-table--compact td,
+.hs-table--compact tfoot td { height: var(--hs-row-compact, 32px); }
 .hs-table--top td { vertical-align: top; padding-block: var(--u-space-sm, 8px); height: auto; }
 /* Cells (`th` too — header text aligns with its values) */
 .hs-num,
@@ -512,7 +528,10 @@ a.hs-card:hover,
 }
 .hs-span-all { grid-column: 1 / -1; }
 
-/* ── Side sheet footer — change summary on the left, Cancel / Save on the right ── */
+/* ── Side sheet footer — change summary on the left, Cancel / Save on the right ──
+ * @deprecated Use `<u-action-bar sticky>` (`@iyulab/modern-app` 0.54): the summary in `slot="summary"`, Cancel and
+ * Save as its children, the sheet's inset as `--action-bar-padding-inline`. It also keeps a destructive action
+ * apart at the leading edge and puts the main actions on top when narrow. remove: 0.5.0 */
 .hs-sheet-footer {
   display: flex;
   align-items: center;
@@ -563,7 +582,9 @@ a.hs-card:hover,
 }
 .hs-due--soon { background: var(--u-warning-bg-color); color: var(--u-warning-color-strong); }
 .hs-due--over { background: var(--u-danger-bg-color); color: var(--u-danger-color-strong); }
-/* A keyboard hint. */
+/* A keyboard hint.
+   @deprecated Use a plain `<kbd>` — the house draws it the same way (`components.css`), in the
+   monospace face. remove: 0.5.0 */
 .hs-kbd {
   padding: 0 4px;
   border: 1px solid var(--u-border-color);