@iyulab/house-style 0.5.0 → 0.6.1

package/CHANGELOG.md

@@ -1,5 +1,75 @@
 # Changelog
 
+## [0.6.1] - 2026-10-14
+
+### Fixed
+
+- Requires `@iyulab/modern-app` 0.54.0 or later when it is installed (optional peer range `>=0.54.0`, was `>=0.39.0`).
+  The 0.6.0 table toolbar recipe pads the card list page's `u-action-bar` through `--action-bar-padding-inline`, which
+  `u-action-bar` reads from 0.54.0 — with an older modern-app the toolbar row lost its side padding without a
+  warning.
+
+### Guide
+
+- The reference app's orders list is a card list page: the toolbar says how many orders are selected and turns into
+  the bulk-action bar while they are, and the table draws no selection bar of its own (`hide-toolbar`,
+  `@iyulab/data-components` 0.51). «Cancel selected» acts only on the table view's selection.
+
+## [0.6.0] - 2026-10-14
+
+### Added
+
+- **`u-field` as the house form row** — 40px controls (the edit-form size, with the density), the label at the label
+  step in the weak colour, the help line in the weaker colour and the error in the danger colour. Needs
+  `@iyulab/components` 2.26 (the `header` · `label` · `footer` parts).
+
+- **`u-list-page` as the house list screen** — the filters row centred with an 8px gap, a search field
+  (`type="search"`) at 240–360px, and with `appearance="card"` a flat surface (10px radius) with a 48px toolbar and a
+  quiet pager line (12px, weak, tabular). Needs `@iyulab/enterprise` 0.33.
+
+- **The table toolbar as the bulk-action bar** — a 48px band above the rows; while rows are selected it takes the
+  primary tint, and its title (the count, or what the list holds) sits at the dense step, semibold, in ink. On a card
+  list page the toolbar row is a `u-action-bar` with the title in `slot="summary"`, and the tint follows the page's
+  `:state(selected)` (`@iyulab/enterprise` 0.34.1); `u-rich-table` gets the same look on its own toolbar and selection
+  bar (`@iyulab/data-components` 0.50).
+
+### Changed
+
+- Requires `@iyulab/components` 2.26.0 or later (peer range `^2.26.0`) — the `u-field` recipe styles its `header`,
+  `label` and `footer` parts.
+
+### Deprecated
+
+- **`.hs-filter-bar` (and `__search` · `__end`) and `.hs-chips` — use `u-list-page`** (`@iyulab/enterprise` 0.33): the
+  search and filters in `slot="filters"`, the applied chips in `slot="applied"` (it folds when empty), `__end` →
+  `margin-inline-start: auto` on the last filter. Removed in 0.7.0.
+- **`.hs-table-card` and `.hs-pager` — use `<u-list-page appearance="card">`** with `u-pagination` in `slot="pager"`.
+  Removed in 0.7.0.
+- **`.hs-table-toolbar` (`--selected` · `__title` · `__actions`) — use `<u-action-bar slot="toolbar">`** on a card list
+  page, the title in `slot="summary"`; the selected tint follows the page's `:state(selected)`. `u-rich-table` styles
+  its own toolbar. Removed in 0.7.0.
+- **`.hs-field` and its parts — use `<u-field label>`** (`@iyulab/components` 2.26): `__label` → `label`, `__required`
+  → `required`, `__help` → `description`, `__error` → `invalid` with `validation-message`. The component also names the
+  control it wraps (the class pattern relied on a wrapping `<label>`). Removed in 0.7.0.
+- **`.hs-card` (`__head` · `__title` · `__link`) — a titled card is `<u-group-box title>`** (`@iyulab/modern-app`) with
+  the link in `slot="actions"`; an untitled surface is `<u-card>`, or `<u-group-box flush>` when the content runs to
+  the edge and holds a sticky footer (`u-card` clips its overflow). Removed in 0.7.0.
+
+### Removed
+
+- The 0.5.0 deprecations: `.hs-callout` and its parts (use `<u-alert inline open>`), `.hs-views` / `.hs-views__tab`
+  and `.hs-count` (use `<u-tab-nav>` with `<u-tab href count>`), a whole card as a link — `a.hs-card` and
+  `.hs-card--link` (use `<u-card href>`) — and `.hs-attr` (use `<u-tag size="sm" appearance="outlined">`).
+
+### Guide
+
+- The edit form's fields are `u-field`.
+- The table toolbar is a `u-action-bar` with the title in `slot="summary"`; the raw table speaks `selection-change`, so
+  the toolbar turns into the bulk-action bar while a row is selected.
+- The brand swatches are `u-card`s and the edit form sits in a `u-group-box flush`.
+- The list screen is a `u-list-page appearance="card"` — filters, an applied chip, the toolbar, the table and a
+  `u-pagination`.
+
 ## [0.5.0] - 2026-10-14
 
 ### Added

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@iyulab/house-style",
-  "version": "0.5.0",
+  "version": "0.6.1",
   "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,9 +58,9 @@
     "pretendard": "^1.3.9"
   },
   "peerDependencies": {
-    "@iyulab/components": "^2.25.0",
+    "@iyulab/components": "^2.26.0",
     "@iyulab/flex-table": ">=0.41.0",
-    "@iyulab/modern-app": ">=0.39.0"
+    "@iyulab/modern-app": ">=0.54.0"
   },
   "peerDependenciesMeta": {
     "@iyulab/flex-table": {
@@ -71,9 +71,9 @@
     }
   },
   "devDependencies": {
-    "@iyulab/components": "^2.25.0",
-    "@iyulab/data-components": "^0.49.0",
-    "@iyulab/enterprise": "^0.32.0",
+    "@iyulab/components": "^2.26.0",
+    "@iyulab/data-components": "^0.51.0",
+    "@iyulab/enterprise": "^0.34.1",
     "@iyulab/flex-table": "^0.67.0",
     "@iyulab/modern-app": "^0.54.0",
     "@iyulab/router": "^0.24.0",

package/styles/components.css

@@ -147,6 +147,84 @@ u-tag[size='sm'] {
   --tag-gap: 4px;
 }
 
+/* ── Field — a labelled field is a form row: 40px controls (the side-sheet and edit-form size; toolbars keep 32px
+ *    with unlabelled controls), the label at the label step in the weak colour, the help line in the weaker colour.
+ *    A control's own size wins (`size="sm"` / `"lg"` set the padding on the control itself). ── */
+u-field {
+  --u-field-padding-block: calc(8.5em / 14);   /* 14px: 21 + 17 + 2 = 40 — and with the density */
+}
+u-field::part(header) {
+  margin-bottom: 6px;
+  font-size: var(--u-text-label-size, 12px);
+}
+u-field::part(label) {
+  line-height: 16px;
+  font-weight: 500;
+  color: var(--u-txt-color-weak);
+}
+u-field::part(footer) {
+  margin-top: 6px;
+  font-size: var(--u-text-caption-size, 12px);
+  line-height: 18px;
+  color: var(--u-txt-color-weaker);
+}
+u-field[invalid]::part(footer) {
+  color: var(--u-danger-color-strong);
+}
+
+/* ── List page (`@iyulab/enterprise`) — the list screen: filters on one centred row with an 8px gap and a search field
+ *    that takes 240–360px, applied chips below, and with `appearance="card"` toolbar · table · pager on one flat
+ *    surface (the toolbar row draws its own 48px band, a quiet pager line). ── */
+u-list-page::part(filters) {
+  align-items: center;
+  gap: var(--u-space-sm, 8px);
+}
+u-list-page > u-input[slot='filters'][type='search'] {
+  flex: 0 1 360px;
+  min-width: 240px;
+}
+u-list-page[appearance='card']::part(surface) {
+  border-radius: var(--u-radius-xl, 10px);
+  background-color: var(--u-bg-color);
+}
+u-list-page[appearance='card']::part(pager) {
+  font-size: var(--u-text-label-size, 12px);
+  color: var(--u-txt-color-weak);
+  font-variant-numeric: tabular-nums;
+}
+
+/* ── Table toolbar — a 48px band above the rows; while rows are selected it is the bulk-action bar: the primary tint,
+ *    and its title (the count, or what the list holds) at the dense step, semibold, in ink. On a card list page the
+ *    toolbar row is a `u-action-bar` with its title in `slot="summary"`; the tint follows the page's
+ *    `:state(selected)` (the visible view's selection, `@iyulab/enterprise` 0.34). `u-rich-table` draws its own
+ *    toolbar and selection bar (`@iyulab/data-components` 0.50). ── */
+u-list-page[appearance='card'] > u-action-bar[slot='toolbar'] {
+  --action-bar-padding-inline: var(--u-space-md, 12px);
+  box-sizing: border-box;
+  min-height: 48px;
+  padding-block: var(--u-space-sm, 8px);
+}
+u-list-page[appearance='card'] > u-action-bar[slot='toolbar']::part(summary) {
+  font-size: var(--hs-text-dense-size, 13px);
+  font-weight: 600;
+  color: var(--u-txt-color);
+}
+u-list-page[appearance='card']:state(selected)::part(toolbar),
+u-rich-table:state(selected)::part(toolbar),
+u-rich-table:state(selected)::part(selection-bar) {
+  background-color: var(--u-primary-bg-color);
+}
+u-rich-table::part(toolbar),
+u-rich-table::part(selection-bar) {
+  box-sizing: border-box;
+  min-height: 48px;
+}
+u-rich-table::part(selection-info) {
+  font-size: var(--hs-text-dense-size, 13px);
+  font-weight: 600;
+  color: var(--u-txt-color);
+}
+
 /* ── Tab strip of links (saved views) — ink, not blue: the current view is ink text with an ink underline,
  *    at the dense text step. ── */
 u-tab-nav {

package/styles/patterns.css

@@ -35,64 +35,11 @@
 }
 
 
-/* ── Saved views — tabs above the filter bar, each with a count ─────────── */
-/* @deprecated Use `<u-tab-nav label>` with `<u-tab href count>` (`@iyulab/components` 2.25) — the same strip as a
-   navigation landmark of links: the current view is `aria-current="page"` (these tabs are URLs, so they are links,
-   not a tablist), each link is a Tab stop, and `count` is the quiet count. The house draws it this way
-   (`components.css`). `.hs-count` goes with it. remove: 0.6.0 */
-.hs-views {
-  display: flex;
-  gap: var(--u-space-2xs, 4px);
-  /* 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 {
-  display: inline-flex;
-  align-items: center;
-  gap: 6px;
-  padding: var(--u-space-sm, 8px) var(--u-space-md, 12px);
-  border: 0;
-  border-bottom: 2px solid transparent;
-  background: none;
-  font: inherit;
-  font-size: var(--hs-text-dense-size, 13px);
-  line-height: 20px;
-  color: var(--u-txt-color-weak);
-  text-decoration: none;   /* a tab may be a link (`aria-current="page"`) */
-  white-space: nowrap;
-  cursor: pointer;
-}
-.hs-views__tab:hover {
-  color: var(--u-txt-color);
-}
-.hs-views__tab[aria-selected='true'],
-.hs-views__tab[aria-current='page'] {
-  color: var(--u-txt-color);
-  border-bottom-color: var(--u-txt-color);
-  font-weight: 600;
-}
-.hs-views__tab:focus-visible {
-  outline: 2px solid var(--u-focus-ring-color);
-  outline-offset: -2px;
-}
-.hs-count {
-  display: inline-block;
-  min-width: 20px;
-  padding: 0 6px;
-  border-radius: var(--u-radius-pill, 9999px);
-  background: var(--u-bg-color-raised);
-  color: var(--u-txt-color-weak);
-  font-size: var(--u-text-overline-size, 11px);
-  line-height: 16px;
-  font-weight: 500;
-  text-align: center;
-  font-variant-numeric: tabular-nums;
-}
-
-/* ── Filter bar — search · up to three key filters · "Filters" panel · applied chips ── */
+/* ── Filter bar — search · up to three key filters · "Filters" panel · applied chips ──
+ * @deprecated Use `u-list-page` (`@iyulab/enterprise` 0.33): the search and filters in `slot="filters"` (the house
+ * gives a search field 240–360px and centres the row — `components.css`), the applied chips (`u-chip removable`) in
+ * `slot="applied"`, which folds when empty. `__end` → `style="margin-inline-start: auto"` on the last filter.
+ * `.hs-chips` goes with it. remove: 0.7.0 */
 .hs-filter-bar {
   display: flex;
   flex-wrap: wrap;
@@ -117,7 +64,13 @@
 }
 
 
-/* ── Table card — toolbar · table · pager on one surface ──────────────── */
+/* ── Table card — toolbar · table · pager on one surface ────────────────
+ * @deprecated `.hs-table-card` and `.hs-pager`: use `<u-list-page appearance="card">` (`@iyulab/enterprise` 0.33) —
+ * the toolbar, view and pager regions on one surface with lines between them, and `u-pagination` in `slot="pager"`.
+ * @deprecated `.hs-table-toolbar` (`--selected` · `__title` · `__actions`): on a card list page use
+ * `<u-action-bar slot="toolbar">` with the title in `slot="summary"` — the house recipe gives it the 48px band and the
+ * selected tint follows the page's `:state(selected)` (`@iyulab/enterprise` 0.34); `u-rich-table` styles its own toolbar
+ * (`@iyulab/data-components` 0.50). remove: 0.7.0 */
 .hs-table-card {
   background: var(--u-bg-color);
   border: 1px solid var(--u-border-color);
@@ -143,6 +96,10 @@
 .hs-table-toolbar--selected {
   background: var(--u-primary-bg-color);
 }
+/* In a `u-list-page appearance="card"` toolbar the region draws the line below. */
+u-list-page > .hs-table-toolbar {
+  border-bottom: 0;
+}
 .hs-table-toolbar__title {
   font-size: var(--hs-text-dense-size, 13px);
   font-weight: 600;
@@ -251,7 +208,10 @@ tr[aria-selected='true'] .hs-row-actions {
   .hs-row-actions { display: none; }
 }
 
-/* ── Card — a titled surface for detail panels and dashboards ─────────── */
+/* ── Card — a titled surface for detail panels and dashboards ───────────
+ * @deprecated `.hs-card` (`__head` · `__title` · `__link`): a titled card is `<u-group-box title>` (`@iyulab/modern-app`)
+ * with the link in `slot="actions"`; an untitled surface is `<u-card>` (`@iyulab/components`), or `<u-group-box flush>`
+ * when its content runs to the edge and holds a sticky footer (`u-card` clips its overflow). remove: 0.7.0 */
 .hs-card {
   background: var(--u-bg-color);
   border: 1px solid var(--u-border-color);
@@ -279,17 +239,6 @@ tr[aria-selected='true'] .hs-row-actions {
   text-decoration: none;
 }
 .hs-card__link:hover { text-decoration: underline; }
-/* @deprecated A whole card as a link: use `<u-card href>` (`@iyulab/components` 2.25) — the outer box is the link,
-   the border carries hover and the card does not lift. remove: 0.6.0 */
-a.hs-card,
-.hs-card--link { cursor: pointer; transition: border-color 0.12s ease-out; }
-/* A whole card as a link reads as a card: ink text, no underline — the border carries hover. */
-a.hs-card { color: inherit; text-decoration: none; }
-a.hs-card:hover,
-.hs-card--link:hover { border-color: var(--u-border-color-strong); }
-@media (prefers-reduced-motion: reduce) {
-  a.hs-card, .hs-card--link { transition: none; }
-}
 
 /* Description list — label / value pairs inside a card. */
 .hs-dl {
@@ -327,38 +276,6 @@ a.hs-card:hover,
   align-items: start;
 }
 
-/* ── Callout — a conclusion in the title, two lines of body at most ──────
- * @deprecated Use `<u-alert inline open>` (`@iyulab/components` 2.25) — `status` for the tone, `title` for the
- * conclusion, the body as content, actions in `slot="footer"`, and `slot="icon"` for a note's pencil; a note is a
- * neutral alert with `role="note"`. The house lays the footer out as the right-hand action column
- * (`components.css`). remove: 0.6.0
- * No thick coloured edge: an icon and a tint carry the tone. `--note` is a person's note
- * (a remark on a record), not a warning — it is neutral on purpose. */
-.hs-callout {
-  display: grid;
-  grid-template-columns: auto minmax(0, 1fr) auto;
-  gap: var(--u-space-md, 12px);
-  align-items: start;
-  padding: var(--u-space-md, 12px) var(--u-space-lg, 16px);
-  border-radius: var(--u-radius-xl, 10px);
-  background: var(--u-bg-color-raised);
-  font-size: var(--hs-text-dense-size, 13px);
-  line-height: 20px;
-}
-.hs-callout__icon { color: var(--u-txt-color-weak); line-height: 20px; }
-.hs-callout__title { font-weight: 600; color: var(--u-txt-color); }
-.hs-callout__body { color: var(--u-txt-color-weak); }
-.hs-callout__actions { display: flex; gap: var(--u-space-sm, 8px); align-items: center; }
-.hs-callout--info { background: var(--u-info-bg-color); }
-.hs-callout--info .hs-callout__icon { color: var(--u-info-color-strong); }
-.hs-callout--success { background: var(--u-success-bg-color); }
-.hs-callout--success .hs-callout__icon { color: var(--u-success-color-strong); }
-.hs-callout--warning { background: var(--u-warning-bg-color); }
-.hs-callout--warning .hs-callout__icon { color: var(--u-warning-color-strong); }
-.hs-callout--danger { background: var(--u-danger-bg-color); }
-.hs-callout--danger .hs-callout__icon { color: var(--u-danger-color-strong); }
-.hs-callout--note { background: var(--u-bg-color-raised); }
-
 /* ── Form — label above, help below; sections instead of one long grid ── */
 .hs-fieldset {
   margin: 0;
@@ -388,6 +305,10 @@ a.hs-card:hover,
   clear: both;
   margin-top: 0;
 }
+/* @deprecated Use `<u-field label>` (`@iyulab/components` 2.26) — `label`, `required`, `description` for the help line
+   and `invalid` + `validation-message` for the error; it names the control it wraps and fills the cell. The house
+   draws it this way (`components.css`: 40px controls, label and help steps). `.hs-field__label` · `__required` ·
+   `__help` · `__error` go with it. remove: 0.7.0 */
 .hs-field {
   display: grid;
   gap: 6px;
@@ -443,22 +364,6 @@ a.hs-card:hover,
 
 
 /* ── Small marks ───────────────────────────────────────────────────────── */
-/* A quiet attribute label next to an identifier (not a status — no colour).
-   @deprecated Use `<u-tag size="sm" appearance="outlined">` (`@iyulab/components` 2.25). remove: 0.6.0 */
-.hs-attr {
-  display: inline-flex;
-  align-items: center;
-  height: 18px;
-  padding: 0 5px;
-  border: 1px solid var(--u-border-color);
-  border-radius: var(--u-radius-md, 4px);
-  font-size: var(--u-text-overline-size, 11px);
-  line-height: 16px;
-  font-weight: 500;
-  color: var(--u-txt-color-weak);
-  white-space: nowrap;
-  vertical-align: middle;
-}
 /* Days left: neutral, soon (warning), overdue (danger). */
 .hs-due {
   display: inline-flex;