@momoi-labs/kiso 0.10.0 → 0.12.0

package/kiso/docs/evolution.md

@@ -13,7 +13,7 @@ the system needs them. This is the honest roadmap for those choices.
 | **Figma Tokens Studio integration** | [Epic #2](https://github.com/momoi-labs/blueprint/issues/2) kept the token pipeline focused on its committed outputs. Tokens Studio is a Figma plugin workflow built through Style Dictionary and `@tokens-studio/sd-transforms`, not a standalone emitter. | When design-to-code synchronization through Figma becomes a real team workflow rather than a hypothetical integration. |
 | **DTCG 2025.10 Resolver module** | The multiple-context and theme Resolver considered in [epic #2](https://github.com/momoi-labs/blueprint/issues/2) is a preview draft marked “do not implement.” V1 uses an explicit, stable theme model instead. | When the Resolver module reaches stable status and Kiso has a concrete context or theme problem it would solve. |
 | **`--shadow-lg`** | The elevation scale intentionally stops at `--shadow-sm` and `--shadow-md`; [#25](https://github.com/momoi-labs/blueprint/issues/25) fixed component references without inventing a larger elevation. | When a real overlay or hierarchy cannot be expressed clearly with `--shadow-md`. Propose the token in the source, then regenerate its outputs. |
-| **A dedicated multi-step-flow pattern** | [#26](https://github.com/momoi-labs/blueprint/issues/26) added step indication as a Pagination variant, which satisfies the current bounded-flow need without another pattern. | When recurring multi-step flows need behavior, composition, or guidance beyond Pagination's scope. |
+| **A dedicated multi-step-flow pattern** | [#26](https://github.com/momoi-labs/blueprint/issues/26) added step indication as a Pagination variant, which satisfies the current bounded-flow need without another pattern. [#98](https://github.com/momoi-labs/blueprint/issues/98) added StepList for the other case, a run a machine walks and a person reads; person-driven flows still use Pagination. | When recurring person-driven flows need behavior, composition, or guidance beyond Pagination's scope. |
 | **Additional patterns** | The pattern set from [epic #4](https://github.com/momoi-labs/blueprint/issues/4) is an intentionally lean cut of roughly 21 recurring product structures. Speculative completeness would encode guesses. | When a real product exposes a repeated structure that the current patterns cannot express without an ad-hoc solution. |
 | **Additional components** | The roughly 28-component cut from [epic #3](https://github.com/momoi-labs/blueprint/issues/3) covers the intended v1 product surface. Adding primitives in anticipation would enlarge the interface before their contracts are understood. | When a need recurs across products. Propose a component and its contract; do not invent one locally or copy one in unchanged. |
 | **Heavy governance** | A two-person lab does not need a contribution bureaucracy or design-review board. For v1, the propose-don't-copy rule in [`kiso/AGENTS.md`](../AGENTS.md) is the governance mechanism, as scoped by [epic #5](https://github.com/momoi-labs/blueprint/issues/5). | When more contributors, products, or incompatible proposals make ownership and decision-making unclear. Add only the process needed to resolve an observed coordination problem. |
@@ -31,6 +31,7 @@ The growth model below is not theory. What it has produced so far:
 | What | Evidence | Where |
 | --- | --- | --- |
 | **[ChipInput](components/chip-input.md)** | A self-hosted console had to collect a development image's dependencies: a list a person types, where every entry carries a backend, a version, and installer options. One form section per entry grew without limit and buried the list. | Added as a component contract with the segmented chip, the in-place value, and one segment per option. |
+| **[StepList](components/step-list.md) and [StepBar](components/step-bar.md)** | The self-host console's Last run tab walks a machine through eleven lifecycle steps over several minutes and wrote its own list of steps with a state each, replacing a progress bar and a two-thousand-line log to search. An image build and the Host's own bootstrap were about to copy it. [#98](https://github.com/momoi-labs/blueprint/issues/98) records the evidence. | Added as two contracts: the list inside a Split with the step's LogView beside it, and the bar for a summary, a table cell, or a toast. |
 | **[Sparkline](components/sparkline.md)** | The self-host console collects metrics in-process, one sample per tick on an evenly spaced window, and needed the same shape three times over: a trend cell per application row, context under a KPI value, and one series per container. [#84](https://github.com/momoi-labs/blueprint/issues/84) records the evidence. | Added as a component contract and a Recharts-based component, single series, neutral by default, primary only for the series a tile is about. |
 
 ## Growth model: grow with real products

package/kiso/docs/patterns/crud.md

@@ -21,7 +21,7 @@ specified separately and must still run before destruction.
 | Page framing | [PageHeader](../components/page-header.md) | Title ("New connection", "Edit connection"); optional cancel secondary action |
 | Fields | [FormField](../components/form-field.md) | Each field = [Label](../components/label.md) + control ([Input](../components/input.md), [Textarea](../components/textarea.md), [Select](../components/select.md), [Checkbox](../components/checkbox.md), …) + optional [HelperText](../components/helper-text.md) + [ValidationMessage](../components/validation-message.md) |
 | Grouping | [Card](../components/card.md) or section headings | Related field groups (connection, credentials, advanced) |
-| Primary actions | [Button](../components/button.md) | Save / Create (primary); Cancel (secondary/ghost) |
+| Primary actions | [FormActions](../components/form-actions.md) + [Button](../components/button.md) | Save / Create (primary); Cancel (secondary/ghost) |
 | Overlays | [Modal / Dialog](../components/modal-dialog.md) or [Drawer](../components/drawer.md) | Compact create/edit; Drawer preferred on small viewports for the same task |
 | Inline errors | [ValidationMessage](../components/validation-message.md) on FormField | Field-level recovery; page [Alert](../components/alert.md) is for non-field failures |
 | Form / load errors | [Alert](../components/alert.md) | Submit or load failures that are not field-local (what / why / now) |
@@ -36,6 +36,19 @@ invalid fields and ValidationMessage use `--color-danger`, focus
 `--color-focus`, destructive Buttons use `--color-danger` per the Button
 contract.
 
+## Form actions
+
+Every explicit-submit form composes [Form](../components/form.md) and
+[FormActions](../components/form-actions.md). Place one primary submit action
+and any secondary actions after the fields. Use sticky actions when the form
+extends beyond the page or panel viewport. Follow the FormActions contract for
+scroll ownership, optional messages, and responsive layout.
+
+The product owns dirty tracking, validation, submission, and navigation.
+Discard restores the last saved values; Cancel leaves the task. Keep entries
+on failure. Announce feedback in the message region, not around the buttons.
+Immediate preferences and automatic filters do not require FormActions.
+
 ## Flow
 
 ### Create
@@ -87,7 +100,7 @@ Full-page create/edit:
 
 ```text
 ┌──────────────────────────────────────────────────────────────────────┐
-│ PageHeader: Edit connection                         [Cancel] [Save]  │
+│ PageHeader: Edit connection                                          │
 ├──────────────────────────────────────────────────────────────────────┤
 │ Alert (only if submit/load error — what / why / now)                 │
 │                                                                      │

package/kiso/docs/patterns/settings.md

@@ -15,13 +15,13 @@ immediate vs deferred persistence, and unambiguous save feedback.
 
 | Region | Compose with | Role |
 | --- | --- | --- |
-| Page framing | [PageHeader](../components/page-header.md) | "Settings" or section title; optional save actions when the page uses explicit save |
+| Page framing | [PageHeader](../components/page-header.md) | "Settings" or section title; section context; submit actions belong in FormActions |
 | Section nav | [Tabs](../components/tabs.md) or Sidebar sub-nav [Link](../components/link.md)s | Split General / Notifications / API, etc. |
 | Groups | [Card](../components/card.md) | One settings group per Card |
 | Text / choice fields | [FormField](../components/form-field.md) | [Label](../components/label.md) + [Input](../components/input.md) / [Select](../components/select.md) / [Textarea](../components/textarea.md) + [HelperText](../components/helper-text.md) + [ValidationMessage](../components/validation-message.md) |
 | Repeated values with their own options | [ChipInput](../components/chip-input.md) | One field for a list a person types, such as dependencies or scopes, instead of a form section per entry |
 | Booleans | [Switch](../components/switch.md) (immediate) or [Checkbox](../components/checkbox.md) inside FormField (part of a saved form) | Switch for single immediate preferences; Checkbox when the value submits with Save |
-| Actions | [Button](../components/button.md) | Save (primary), Reset/Cancel (secondary) for explicit-save sections |
+| Actions | [FormActions](../components/form-actions.md) + [Button](../components/button.md) | Save (primary), Reset/Cancel (secondary) for explicit-save sections |
 | Feedback | [Toast](../components/toast.md), [Alert](../components/alert.md), [ValidationMessage](../components/validation-message.md) | Saved confirmation; section errors; field errors |
 | Shell | [Application shell](application-shell.md) | Authenticated framing |
 
@@ -50,8 +50,27 @@ Three points bind here rather than there:
 ```text
 Card: Appearance
   Theme                                   [ ▣ ][ ☀ ][ ☾ ]
+  Accent                                  [ ● ][ ● ][ ● ][ ● ]
 ```
 
+The accent is the second row of the same card, with
+[AccentSelector](../components/accent-selector.md). It follows the same three
+points: `violet` is the default, the choice is local and instant, and it
+persists under `kiso-accent` outside the section's Save button.
+
+## Form actions
+
+Every explicit-submit form composes [Form](../components/form.md) and
+[FormActions](../components/form-actions.md). Place one primary submit action
+and any secondary actions after the fields. Use sticky actions when the form
+extends beyond the page or panel viewport. Follow the FormActions contract for
+scroll ownership, optional messages, and responsive layout.
+
+The product owns dirty tracking, validation, submission, and navigation.
+Discard restores the last saved values; Cancel leaves the task. Keep entries
+on failure. Announce feedback in the message region, not around the buttons.
+Immediate preferences and automatic filters do not require FormActions.
+
 ## Flow
 
 ### Explicit save (default for multi-field sections)

package/kiso/docs/tokens.md

@@ -157,10 +157,68 @@ dark because `dark.500` misses the 3:1 non-text and large-text gates on
 `dark.800` and `dark.700`; they share a step on dark exactly as they share
 `neutral.500` on light.
 
+## Accents
+
+The accent is a second axis over the same custom properties, orthogonal to the
+theme. Five accents ship: `violet` (the default), `terracotta`, `teal`,
+`cobalt`, and `nocturne`. The first four are hue turns: each is a primitive
+ramp (`color.violet.*`, `color.terracotta.*`, and so on) with the same
+lightness per step, so every role keeps the contrast it was gated at.
+`color.accent.*` is the *active* ramp: an alias layer that points at violet by
+default.
+
+`nocturne` is different in kind. It is the marketing site's palette: the
+violet ramp and ink over cool slate neutrals (hue 278) instead of the warm
+ones. It is the one accent that restates the neutral roles, surfaces, text,
+borders, and neutral fills alike, because the slate is the palette, not a
+tint on it. A hue accent nested inside a nocturne container keeps the slate
+and changes only the accent. Its surface, text, and accent values are the
+site's own, gated like every other accent; the roles the site never named are
+Kiso's lightness in the slate hue.
+
+An accent is chosen with `data-accent` on `<html>`, or on any container:
+
+```html
+<html data-accent="teal">
+```
+
+No attribute means violet. The build emits one `[data-accent="<name>"]` block
+per accent from the `accent.<name>` group in `tokens/tokens.json`. That block
+restates only the roles that follow the hue:
+
+- the active ramp, `--color-accent-50` to `--color-accent-950` and
+  `--color-accent-base`, remapped to the named ramp. `link`, `focus`, `ring`,
+  `accent`, and the light-theme tints alias the ramp, so they follow without
+  being restated;
+- the raw-hex dark fills: `primary`, `primary-hover`, `primary-foreground`,
+  `accent-surface`, `accent-surface-hover`, and `selected`.
+
+The neutral roles are not restated. The warm grey carries the interface under
+every hue accent, and only the accent changes: a teal product and a violet
+product share the same canvas, text, and borders. Tinting the neutrals toward
+the hue was tried and rejected; at any visible strength it reads as a filter
+over the screen rather than as a colour choice.
+
+Values inside the block still use `light-dark()`, so accent and theme compose
+without a cross product: five accents and two themes are five blocks, not
+ten. Nesting resets cleanly: a `data-accent="violet"` container inside a
+teal page is violet again.
+
+Chart series do not follow the accent. `chart-1` is pinned to the violet ink
+because a terracotta, teal, or cobalt series collapses into the warning, success,
+or info series; see [Categorical chart colors](#categorical-chart-colors).
+Status roles do not follow it either. Red, amber, and green were rejected as
+accents for the same reason: a primary button in the danger hue reads as
+destructive.
+
+Applications own the choice and its persistence, exactly as with the theme.
+Use [AccentSelector](components/accent-selector.md) for the control.
+
 ## AA gate
 
 `scripts/check-contrast.mjs` is the build-time AA gate. In both dark and light
-themes it resolves the semantic aliases and checks:
+themes, for the default and for every accent, it resolves the semantic aliases
+and checks:
 
 - `foreground`, `muted-foreground`, `link`, `accent`, `success`, `warning`,
   `danger`, and `info` at **4.5:1** or better against `background`, `surface`,
@@ -219,9 +277,9 @@ Layout sizes: `--size-sidebar` (248px) is the shell navigation column;
 `--size-icon-sm` (14px), `--size-icon-md` (16px, the default), and
 `--size-icon-lg` (20px).
 
-## Corners: marks, not radius
+## Corners and appearance
 
-Panels are square. `--radius-surface` is `0px`, and a panel's corner treatment
+Panels are square by default. `--radius-surface` is `0px`, and a panel's corner treatment
 is a **corner mark** instead: two 1px ticks per corner, each lying along the
 frame line it extends and stopping `--corner-mark-gap` short of it, so the mark
 points at the corner without touching it.
@@ -238,8 +296,8 @@ the paint and makes the hollow centre explicit rather than accidental.
 
 The gap **is** the mark. Close it and this is just a thicker border.
 
-Marks appear on every panel, without exception. There is no rounded mode and no
-`data-corners` attribute — the choice was made once, here.
+Marks appear on panels by default. Applications can select another treatment
+with the appearance attributes below.
 
 The remaining radii only take the bite off controls:
 
@@ -250,7 +308,38 @@ The remaining radii only take the bite off controls:
 | `--radius-md` | 4px | **Buttons, inputs, menu items** — the control default. |
 | `--radius-lg` | 5px | Segmented tracks and other control groups. |
 | `--radius-full` | 9999px | Pills, dots, switches, avatars. |
-| `--radius-surface` | 0px | **Panels, cards, tables, dialogs** — always. |
+| `--radius-surface` | 0px | **Panels, cards, tables, dialogs** by default. |
+
+### Appearance attributes
+
+Set these attributes on `<html>` so they also reach portalled dialogs and menus.
+They ship in `@momoi-labs/kiso/ui.css`, which React's stylesheet imports.
+No gallery CSS or JavaScript is required.
+
+| Attribute | Values | Default when omitted |
+| --- | --- | --- |
+| `data-border-style` | `square`, `soft`, `round`, `asym`, `rail`, `dash`, `bevel`, `double`, `base`, `offset` | Square panels and existing control radii |
+| `data-corner-size` | `off`, `small`, `medium`, `large` | `medium` |
+| `data-corner-marks` | `none`, `ticks`, `brackets`, `arcs`, `dots` | `ticks` |
+| `data-mark-size` | `small`, `medium`, `large` | `medium` |
+
+`data-corner-size` scales the radii selected by `data-border-style`: `off`
+sets them to zero; `small`, `medium`, and `large` use 0.5, 1, and 1.5 times
+that style's radii. Square panels stay square and their control radii stay
+unchanged unless the size is `off`. Size does not hide marks; use
+`data-corner-marks="none"` for that.
+
+Mark sizes set `--corner-mark-tick` and `--corner-mark-gap` to 2px/1px,
+4px/2px, or 8px/4px. Border styles override the existing radius tokens.
+The generated token defaults remain unchanged.
+
+```html
+<html lang="en" data-accent="terracotta" data-border-style="soft"
+  data-corner-size="small" data-corner-marks="arcs" data-mark-size="medium">
+```
+
+Keep scrolling on `.log-scroll`, `.table-scroll`, dialog bodies, and
+`pre > code`. The outer frame owns the marks, which extend outside it.
 
 ## Hatch
 
@@ -315,8 +404,10 @@ tokens to the same version.
 ## Categorical chart colors
 
 Issue #93 adds `--color-chart-1` through `--color-chart-5` for series identity.
-The roles derive from accent.base, status.success, status.warning, status.info,
-and status.danger, in that order. Their meaning inside a chart is categorical,
+The roles derive from violet.base, status.success, status.warning, status.info,
+and status.danger, in that order. `chart-1` is the violet ink under every
+accent, not the active accent: a series must stay distinguishable from the
+status series whatever the product's accent is. Their meaning inside a chart is categorical,
 never health or severity. Existing status roles keep their meaning elsewhere.
 
 Each slot meets 3:1 on background, surface, and elevated-surface in both
@@ -335,5 +426,5 @@ Keep the canonical slot order in stacks; changing adjacency needs review.
 
 The calculation uses [Oklab](https://bottosson.github.io/posts/oklab/) and
 [Machado's simulation model](https://pubmed.ncbi.nlm.nih.gov/19834201/).
-Run `node scripts/check-chart-palette.mjs` for both themes. Numbered labels,
+Run `node scripts/check-chart-palette.mjs` for both themes and every accent. Numbered labels,
 highlighting, and tables remain required even when these checks pass.

package/kiso/ui.css

@@ -298,6 +298,36 @@ a:hover, .link:hover { text-decoration: underline; }
 /* ===========================================================================
    Form controls
    =========================================================================== */
+/* Forms own composition; consumers own values, validation and submission. */
+.form { display: flex; flex-direction: column; min-inline-size: 0; min-block-size: 100%; }
+.form-body { display: grid; gap: var(--spacing-xl); padding: var(--spacing-lg); min-inline-size: 0; }
+fieldset.form-body { border: 0; margin: 0; }
+.form-actions {
+  display: flex; flex-wrap: wrap; align-items: center; gap: var(--spacing-md) var(--spacing-lg);
+  margin-block-start: auto;
+  padding: var(--spacing-md) var(--spacing-lg);
+  border-block-start: 1px solid var(--color-border);
+  background: var(--color-card);
+  color: var(--color-card-foreground);
+  border-end-start-radius: inherit; border-end-end-radius: inherit;
+}
+.form-actions[data-sticky="true"] { position: sticky; inset-block-end: 0; z-index: 1; }
+.form-actions[data-tone="warning"] {
+  background: linear-gradient(var(--color-warning-surface), var(--color-warning-surface)), var(--color-card);
+  border-block-start-color: var(--color-warning-border);
+}
+.form-actions[data-tone="danger"] {
+  background: linear-gradient(var(--color-danger-surface), var(--color-danger-surface)), var(--color-card);
+  border-block-start-color: var(--color-danger-border);
+}
+.form-actions-message { flex: 1 1 12rem; min-inline-size: 0; overflow-wrap: anywhere; font-size: var(--type-size-label); }
+/* Keep the live region mounted and available to assistive technology. */
+.form-actions-message:empty { flex: 0 0 0; }
+.form-actions-message strong { font-weight: var(--type-weight-semibold); }
+.form-actions-buttons { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--spacing-sm); margin-inline-start: auto; }
+.form-scroll { min-block-size: 0; overflow: auto; scroll-padding-block-end: calc(var(--spacing-4xl) * 2); }
+.form :is(input, textarea, select, button, [tabindex]) { scroll-margin-block: var(--spacing-lg) calc(var(--spacing-4xl) * 2); }
+
 .field { display: grid; gap: var(--spacing-xs); }
 .field > label, .label {
   font-size: var(--type-size-label);
@@ -593,6 +623,12 @@ a:hover, .link:hover { text-decoration: underline; }
 }
 .stat-foot { font-size: var(--type-size-label); color: var(--color-muted-foreground); margin-block-start: var(--spacing-sm); }
 .stat-delta { display: inline-flex; align-items: center; gap: var(--spacing-xs); font-size: var(--type-size-metadata); font-weight: var(--type-weight-medium); }
+/* The delta keeps the outline treatment: only text and frame take the status
+   colour. Declared after .badge-outline so the variant wins the cascade. */
+.stat-delta.info    { color: var(--color-info);    border-color: var(--color-info-border); }
+.stat-delta.success { color: var(--color-success); border-color: var(--color-success-border); }
+.stat-delta.warning { color: var(--color-warning); border-color: var(--color-warning-border); }
+.stat-delta.danger  { color: var(--color-danger);  border-color: var(--color-danger-border); }
 
 /* ===========================================================================
    Table
@@ -762,6 +798,7 @@ table.table { width: 100%; border-collapse: collapse; font-size: var(--type-size
 }
 
 .palette {
+  position: relative;
   width: 100%; max-width: 560px;
   background: var(--color-popover);
   border: 1px solid var(--color-border);
@@ -1036,59 +1073,171 @@ pre code { display: block; overflow-x: auto; padding: 0; background: none; borde
 }
 
 
-/* ===========================================================================
-   Corner marks — the "blueprint" corner treatment
-   ---------------------------------------------------------------------------
-   An open registration mark on each corner: two 1px ticks, each lying along
-   the frame line it extends and stopping `--corner-mark-gap` short of it, so
-   the mark points at the corner without touching it.
-
-   Deliberately two ticks and not four. A full cross puts its other two arms
-   directly on top of the panel border, where they are invisible — the mark
-   read as a bracket anyway. Dropping them halves the paint and makes the
-   hollow centre explicit instead of accidental.
+/* Appearance attributes. Set these on html to include portalled content. */
+:root {
+  --appearance-scale: 1;
+  --appearance-square-scale: 1;
+  --appearance-panel-shadow: 0 0 transparent;
+  --appearance-panel-border: solid;
+}
+[data-corner-size="off"] { --appearance-scale: 0; --appearance-square-scale: 0; }
+[data-corner-size="small"] { --appearance-scale: .5; }
+[data-corner-size="medium"] { --appearance-scale: 1; }
+[data-corner-size="large"] { --appearance-scale: 1.5; }
+[data-border-style] {
+  --appearance-base-radius: 8px;
+  --appearance-control-base: 4px;
+  --appearance-panel-border: solid;
+  --appearance-panel-shadow: 0 0 transparent;
+  --appearance-overlay-content: none;
+  --appearance-footer-start: var(--radius-surface);
+  --appearance-overlay-inset: 0;
+  --appearance-overlay-border: 0;
+  --appearance-overlay-radius: var(--appearance-corners);
+  --radius-surface: calc(var(--appearance-base-radius) * var(--appearance-scale));
+  --radius-md: calc(var(--appearance-control-base) * var(--appearance-scale));
+  --radius-xs: calc(var(--radius-md) / 2);
+  --radius-sm: calc(var(--radius-md) * .75);
+  --radius-lg: calc(var(--radius-md) * 1.25);
+  --appearance-corners: var(--radius-surface);
+  --appearance-control-corners: var(--radius-md);
+}
+[data-border-style="square"] {
+  --appearance-base-radius: 0px;
+  --radius-xs: calc(2px * var(--appearance-square-scale));
+  --radius-sm: calc(3px * var(--appearance-square-scale));
+  --radius-md: calc(4px * var(--appearance-square-scale));
+  --radius-lg: calc(5px * var(--appearance-square-scale));
+}
+[data-border-style="soft"] { --appearance-base-radius: 8px; }
+[data-border-style="round"] { --appearance-base-radius: 16px; --appearance-control-base: 8px; }
+[data-border-style="asym"] {
+  --appearance-footer-start: calc(3px * var(--appearance-scale));
+  --appearance-base-radius: 12px;
+  --appearance-control-base: 6px;
+  --appearance-corners: var(--radius-surface) calc(3px * var(--appearance-scale));
+  --appearance-control-corners: var(--radius-md) calc(2px * var(--appearance-scale));
+}
+[data-border-style="rail"] { --appearance-overlay-content: ""; --appearance-base-radius: 6px; --appearance-control-base: 3px; --appearance-panel-shadow: inset 3px 0 var(--color-border-strong); }
+[data-border-style="dash"] { --appearance-panel-border: dashed; }
+[data-border-style="bevel"] { --appearance-overlay-content: ""; --appearance-panel-shadow: inset 1px 1px 1px var(--color-shadow-contact), inset -1px -1px var(--color-border-strong); }
+[data-border-style="double"] { --appearance-overlay-content: ""; --appearance-overlay-inset: 3px; --appearance-overlay-border: 1px solid var(--color-border); --appearance-overlay-radius: max(0px, calc(var(--radius-surface) - 3px)); }
+[data-border-style="base"] { --appearance-overlay-content: "";
+  /* Match the outer frame so the thick base covers its bottom hairline. */
+  --appearance-overlay-inset: -1px;
+  --appearance-panel-shadow: inset 0 -3px var(--color-border-strong);
+}
+[data-border-style="offset"] { --appearance-overlay-content: "";
+  --appearance-overlay-inset: -1px;
+  /* An opaque, hard shadow keeps underlying content out of the offset. */
+  --appearance-panel-shadow: 3px 3px 0 0 var(--color-border-strong);
+}
+
+:where([data-border-style]) :is(.card, .dialog, .table-wrap, .logview, .marked, .palette, pre) {
+  border-radius: var(--appearance-corners);
+  border-style: var(--appearance-panel-border);
+}
+/* Paint decorative edges above table headers and panel footers. */
+:is(.card, .dialog, .table-wrap, .logview, .marked, .palette, pre)::before {
+  content: var(--appearance-overlay-content, none);
+  position: absolute;
+  inset: var(--appearance-overlay-inset);
+  border: var(--appearance-overlay-border);
+  border-radius: var(--appearance-overlay-radius);
+  box-shadow: var(--appearance-panel-shadow);
+  pointer-events: none;
+  z-index: 1;
+}
+:where([data-border-style]) .palette { overflow: visible; }
+:where([data-border-style]) .palette-list { border-end-start-radius: var(--radius-surface); border-end-end-radius: var(--radius-surface); }
+:where([data-border-style]) :is(.card-footer, .dialog-footer) {
+  border-end-start-radius: var(--appearance-footer-start);
+  border-end-end-radius: var(--radius-surface);
+}
+:where([data-border-style]) :is(.btn:not(.btn-xs), .input, .select, .textarea, .nav-item, .menu-item) {
+  border-radius: var(--appearance-control-corners);
+}
 
-   Eight 1px gradient bars on one pseudo-element. No markup, no images, and
-   `--corner-mark: 0` removes them entirely.
-   =========================================================================== */
-.card::after,
-.dialog::after,
-.table-wrap::after,
-.logview::after,
-.marked::after,
-pre::after {
+[data-mark-size="small"] { --corner-mark-tick: 2px; --corner-mark-gap: 1px; }
+[data-mark-size="medium"] { --corner-mark-tick: 4px; --corner-mark-gap: 2px; }
+[data-mark-size="large"] { --corner-mark-tick: 8px; --corner-mark-gap: 4px; }
+[data-corner-marks] {
+  --corner-mark: 1;
+  --appearance-palette-marks: "";
+  --appearance-mark-mask: none;
+  --appearance-mark-bg: transparent;
+  --appearance-mark-inset: initial;
+  --appearance-mark-images: initial;
+}
+[data-corner-marks="none"] { --corner-mark: 0; }
+:is(.card, .dialog, .table-wrap, .logview, .marked, .palette, pre)::after {
   content: "";
   position: absolute;
-  /* Reach far enough out that a tick clears the frame by the gap. */
-  inset: calc(-1 * (var(--corner-mark-tick) + var(--corner-mark-gap)));
   pointer-events: none;
   opacity: var(--corner-mark);
   background-repeat: no-repeat;
-  background-image:
-    linear-gradient(var(--color-corner-mark), var(--color-corner-mark)),
-    linear-gradient(var(--color-corner-mark), var(--color-corner-mark)),
-    linear-gradient(var(--color-corner-mark), var(--color-corner-mark)),
-    linear-gradient(var(--color-corner-mark), var(--color-corner-mark)),
-    linear-gradient(var(--color-corner-mark), var(--color-corner-mark)),
-    linear-gradient(var(--color-corner-mark), var(--color-corner-mark)),
-    linear-gradient(var(--color-corner-mark), var(--color-corner-mark)),
-    linear-gradient(var(--color-corner-mark), var(--color-corner-mark));
   background-size:
     var(--corner-mark-tick) 1px, 1px var(--corner-mark-tick),
     var(--corner-mark-tick) 1px, 1px var(--corner-mark-tick),
     var(--corner-mark-tick) 1px, 1px var(--corner-mark-tick),
     var(--corner-mark-tick) 1px, 1px var(--corner-mark-tick);
-  /* The offset lands each tick exactly on the 1px frame line it extends. */
   background-position:
-    left 0 top    calc(var(--corner-mark-tick) + var(--corner-mark-gap)),
-    left  calc(var(--corner-mark-tick) + var(--corner-mark-gap)) top 0,
-    right 0 top    calc(var(--corner-mark-tick) + var(--corner-mark-gap)),
+    left 0 top calc(var(--corner-mark-tick) + var(--corner-mark-gap)),
+    left calc(var(--corner-mark-tick) + var(--corner-mark-gap)) top 0,
+    right 0 top calc(var(--corner-mark-tick) + var(--corner-mark-gap)),
     right calc(var(--corner-mark-tick) + var(--corner-mark-gap)) top 0,
-    left 0 bottom  calc(var(--corner-mark-tick) + var(--corner-mark-gap)),
-    left  calc(var(--corner-mark-tick) + var(--corner-mark-gap)) bottom 0,
+    left 0 bottom calc(var(--corner-mark-tick) + var(--corner-mark-gap)),
+    left calc(var(--corner-mark-tick) + var(--corner-mark-gap)) bottom 0,
     right 0 bottom calc(var(--corner-mark-tick) + var(--corner-mark-gap)),
     right calc(var(--corner-mark-tick) + var(--corner-mark-gap)) bottom 0;
-}
+  inset: var(--appearance-mark-inset, calc(-1 * (var(--corner-mark-tick) + var(--corner-mark-gap))));
+  background-image: var(--appearance-mark-images,
+    linear-gradient(var(--color-corner-mark), var(--color-corner-mark)),
+    linear-gradient(var(--color-corner-mark), var(--color-corner-mark)),
+    linear-gradient(var(--color-corner-mark), var(--color-corner-mark)),
+    linear-gradient(var(--color-corner-mark), var(--color-corner-mark)),
+    linear-gradient(var(--color-corner-mark), var(--color-corner-mark)),
+    linear-gradient(var(--color-corner-mark), var(--color-corner-mark)),
+    linear-gradient(var(--color-corner-mark), var(--color-corner-mark)),
+    linear-gradient(var(--color-corner-mark), var(--color-corner-mark)));
+  background-color: var(--appearance-mark-bg, transparent);
+  mask-image: var(--appearance-mark-mask, none);
+  mask-size: calc(var(--corner-mark-tick) + 1px) calc(var(--corner-mark-tick) + 1px);
+  mask-position: left top, right top, left bottom, right bottom;
+  mask-repeat: no-repeat;
+}
+
+[data-corner-marks="brackets"] {
+  --appearance-mark-images: none;
+  --appearance-mark-bg: var(--color-corner-mark);
+  --appearance-mark-inset: calc(-1 * (var(--corner-mark-gap) + 1px));
+  --appearance-mark-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2010%2010%22%3E%3Cg%20transform%3D%22%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20%3E%3Cpath%20d%3D%22M.5%209.5V.5H9.5%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"),
+    url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2010%2010%22%3E%3Cg%20transform%3D%22translate%2810%200%29%20scale%28-1%201%29%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20%3E%3Cpath%20d%3D%22M.5%209.5V.5H9.5%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"),
+    url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2010%2010%22%3E%3Cg%20transform%3D%22translate%280%2010%29%20scale%281%20-1%29%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20%3E%3Cpath%20d%3D%22M.5%209.5V.5H9.5%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"),
+    url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2010%2010%22%3E%3Cg%20transform%3D%22translate%2810%2010%29%20scale%28-1%20-1%29%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20%3E%3Cpath%20d%3D%22M.5%209.5V.5H9.5%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
+}
+
+[data-corner-marks="arcs"] {
+  --appearance-mark-images: none;
+  --appearance-mark-bg: var(--color-corner-mark);
+  --appearance-mark-inset: calc(-1 * (var(--corner-mark-gap) + 1px));
+  --appearance-mark-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2010%2010%22%3E%3Cg%20transform%3D%22%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20%3E%3Cpath%20d%3D%22M.5%209.5Q.5%20.5%209.5%20.5%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"),
+    url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2010%2010%22%3E%3Cg%20transform%3D%22translate%2810%200%29%20scale%28-1%201%29%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20%3E%3Cpath%20d%3D%22M.5%209.5Q.5%20.5%209.5%20.5%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"),
+    url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2010%2010%22%3E%3Cg%20transform%3D%22translate%280%2010%29%20scale%281%20-1%29%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20%3E%3Cpath%20d%3D%22M.5%209.5Q.5%20.5%209.5%20.5%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"),
+    url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2010%2010%22%3E%3Cg%20transform%3D%22translate%2810%2010%29%20scale%28-1%20-1%29%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20%3E%3Cpath%20d%3D%22M.5%209.5Q.5%20.5%209.5%20.5%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
+}
+
+[data-corner-marks="dots"] {
+  --appearance-mark-images: none;
+  --appearance-mark-bg: var(--color-corner-mark);
+  --appearance-mark-inset: calc(-1 * (var(--corner-mark-gap) + 1px));
+  --appearance-mark-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2010%2010%22%3E%3Cg%20transform%3D%22%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20%3E%3Ccircle%20cx%3D%225%22%20cy%3D%225%22%20r%3D%223%22%20fill%3D%22black%22%20stroke%3D%22none%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"),
+    url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2010%2010%22%3E%3Cg%20transform%3D%22translate%2810%200%29%20scale%28-1%201%29%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20%3E%3Ccircle%20cx%3D%225%22%20cy%3D%225%22%20r%3D%223%22%20fill%3D%22black%22%20stroke%3D%22none%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"),
+    url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2010%2010%22%3E%3Cg%20transform%3D%22translate%280%2010%29%20scale%281%20-1%29%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20%3E%3Ccircle%20cx%3D%225%22%20cy%3D%225%22%20r%3D%223%22%20fill%3D%22black%22%20stroke%3D%22none%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"),
+    url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2010%2010%22%3E%3Cg%20transform%3D%22translate%2810%2010%29%20scale%28-1%20-1%29%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20%3E%3Ccircle%20cx%3D%225%22%20cy%3D%225%22%20r%3D%223%22%20fill%3D%22black%22%20stroke%3D%22none%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
+}
+
+.palette::after { content: var(--appearance-palette-marks, none); }
 .marked { position: relative; }
 
 /* ===========================================================================
@@ -1185,7 +1334,7 @@ pre::after {
 .time-range-presets small { color: var(--color-muted-foreground); font-weight: var(--type-weight-regular); }
 .meter[data-slot="progress"] .meter-track > span { background: var(--color-chart-1); }
 .dashboard-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--spacing-lg); }
-.dashboard-panel { grid-column: span var(--dashboard-span, 6); min-width: 0; }
+.dashboard-panel { grid-column: span var(--dashboard-span, 6); min-width: 0; display: grid; } /* the panel is a grid so its single child stretches to the row */
 @media (max-width: 1024px) {
   .dashboard-panel { grid-column: span 6; }
   .dashboard-panel[data-span="12"] { grid-column: span 12; }
@@ -1198,6 +1347,52 @@ pre::after {
   .disclosure > summary { min-height: var(--size-touch-min); display: list-item; align-content: center; }
 }
 
+/* StepList and StepBar, issue #98. A run's steps, walked by a machine and
+   read by a person. The rail is the progress: each connector takes the state
+   of the step below it, so the line fills as the run advances. Running is the
+   success colour because it is alive; neutral is what is not happening. */
+.step-list { list-style: none; margin: 0; padding: 0; display: grid; }
+.step { display: grid; grid-template-columns: var(--spacing-xl) minmax(0, 1fr); column-gap: var(--spacing-sm); }
+.step-rail { position: relative; display: grid; justify-items: center; }
+.step-rail::before { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 3px; translate: -50% 0; background: var(--color-secondary); }
+.step:first-child .step-rail::before { top: 12px; }
+.step:last-child .step-rail::before { bottom: auto; height: 12px; }
+.step[data-state="done"] .step-rail::before, .step[data-state="skipped"] .step-rail::before { background: var(--color-success); }
+.step[data-state="running"] .step-rail::before { background: linear-gradient(var(--color-success) 0 12px, var(--color-secondary) 12px 100%); }
+.step[data-state="failed"] .step-rail::before { background: linear-gradient(var(--color-success) 0 12px, var(--color-danger) 12px 100%); }
+.step-mark { position: relative; z-index: 1; width: 12px; height: 12px; margin-top: 6px; border-radius: var(--radius-full); background: var(--color-card); border: 3px solid var(--color-border-strong); }
+.step[data-state="done"] .step-mark { background: var(--color-success); border-color: var(--color-success); }
+.step[data-state="skipped"] .step-mark { border-color: var(--color-success); }
+.step[data-state="running"] .step-mark { border-color: var(--color-success); box-shadow: 0 0 0 4px var(--color-success-surface); animation: step-pulse 1.4s var(--motion-easing-standard) infinite; }
+.step[data-state="failed"] .step-mark { background: var(--color-danger); border-color: var(--color-danger); }
+/* 12px dot plus 6px of glow fits the 24px rail column, which a Pane clips at its edge. */
+@keyframes step-pulse { 50% { box-shadow: 0 0 0 6px transparent; } }
+.step-body { min-width: 0; padding-bottom: var(--spacing-sm); }
+.step-row { display: flex; justify-content: space-between; align-items: baseline; gap: var(--spacing-md); width: 100%; min-height: 24px; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: start; }
+button.step-row { cursor: pointer; }
+button.step-row:hover .step-label { text-decoration: underline; text-underline-offset: var(--spacing-2xs); }
+button.step-row:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; border-radius: var(--radius-sm); }
+.step-label { font-size: var(--type-size-label); font-weight: var(--type-weight-medium); }
+.step[data-state="pending"] .step-label, .step[data-state="skipped"] .step-label { color: var(--color-muted-foreground); font-weight: var(--type-weight-regular); }
+.step[data-state="running"] .step-label, .step[data-state="failed"] .step-label { font-weight: var(--type-weight-semibold); }
+.step[data-state="failed"] .step-label { color: var(--color-danger); }
+.step-row[aria-pressed="true"] .step-label { text-decoration: underline; text-underline-offset: var(--spacing-2xs); }
+.step-meta { font-family: var(--font-mono); font-size: var(--type-size-label); color: var(--color-muted-foreground); white-space: nowrap; font-variant-numeric: tabular-nums; }
+.step-detail { margin-top: var(--spacing-sm); }
+@media (pointer: coarse) {
+  button.step-row { min-height: var(--size-touch-min); }
+}
+@media (prefers-reduced-motion: reduce) {
+  .step[data-state="running"] .step-mark { animation: none; }
+}
+
+.step-bar { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: var(--spacing-2xs); height: var(--spacing-xs); min-width: 0; }
+.step-bar > span { border-radius: var(--radius-xs); background: var(--color-secondary); }
+.step-bar > span[data-state="done"] { background: var(--color-success); }
+.step-bar > span[data-state="running"] { background: linear-gradient(90deg, var(--color-success) 0 var(--step-progress, 100%), var(--color-success-surface) var(--step-progress, 100%) 100%); }
+.step-bar > span[data-state="skipped"] { background: repeating-linear-gradient(45deg, var(--color-success) 0 2px, transparent 2px 5px); }
+.step-bar > span[data-state="failed"] { background: var(--color-danger); }
+
 /* Chart presentation options. Exact values remain available in every layout. */
 .chart-body, .chart-plots { min-width: 0; }
 .framed-chart[data-legend="sidebar"] .chart-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(140px, 180px); gap: var(--spacing-lg); }
@@ -1223,3 +1418,13 @@ pre::after {
 @media (pointer: coarse) {
   .chart-series-button { min-height: var(--size-touch-min); min-width: var(--size-touch-min); }
 }
+
+/* Respect reduced motion in every consumer, including React controls. */
+@media (prefers-reduced-motion: reduce) {
+  *,
+  *::before,
+  *::after {
+    animation: none !important;
+    transition: none !important;
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@momoi-labs/kiso",
-  "version": "0.10.0",
+  "version": "0.12.0",
   "description": "Kiso design-system contracts and generated design tokens",
   "license": "MIT",
   "repository": {