@orkestrel/scaffold 0.0.65 → 0.0.67

package/dist/host/agents/skills/enterprise-bootstrap/references/color-modes.md

@@ -1,11 +1,12 @@
 # Color modes and inheritance
 
-> Part of the `enterprise-bootstrap` package. Use for foreground ownership, adaptive surfaces,
+> Part of the `enterprise-bootstrap` skill. Use for foreground ownership, adaptive surfaces,
 > nested themes, and color-mode repairs. Take the contrast bars from [SKILL.md](../SKILL.md).
 
 ## Contents
 
 - [Choose the surface](#choose-the-surface)
+- [Fixed and adaptive classes](#fixed-and-adaptive-classes)
 - [Text tiers](#text-tiers)
 - [Preserve the cascade](#preserve-the-cascade)
 - [Scope the mode](#scope-the-mode)
@@ -17,7 +18,7 @@
 
 Default to inherited text. When ordinary content owns no background, add no foreground override.
 For quiet containers and status, prefer adaptive backgrounds without an added text-color class.
-Treat this as the package default, not a claim that Bootstrap forbids its documented emphasis pairs.
+Treat this as the skill's default, not a claim that Bootstrap forbids its documented emphasis pairs.
 
 | Context                                | Use                                                                                               | Refuse by default                                                              |
 | -------------------------------------- | ------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------ |
@@ -42,12 +43,115 @@ Measure the inherited result on its actual background. A subtle fill changes onl
 it cannot repair a fixed, translucent, or inverse foreground inherited from an ancestor. Remove
 that conflict or establish an owned surface boundary before adding a leaf override.
 
+## Fixed and adaptive classes
+
+Every Bootstrap color class resolves through one of two kinds of variable. **Adaptive** classes
+read a variable the `[data-bs-theme=dark]` block redefines — `--bs-body-color`/`-bg`,
+`--bs-emphasis-color`, `--bs-secondary-color`/`-bg`, `--bs-tertiary-color`/`-bg`,
+`--bs-*-text-emphasis`, `--bs-*-bg-subtle`, `--bs-*-border-subtle`, `--bs-border-color`,
+`--bs-link-color` — and change with the mode. **Fixed** classes read `--bs-{theme}-rgb`,
+`--bs-white-rgb`, `--bs-black-rgb`, `--bs-light-rgb`, or `--bs-dark-rgb`, which no mode
+redefines, and paint the same value in light and dark.
+
+This table classifies a class by the variable it reads, and nothing else. Deprecation is a separate
+axis: `text-muted` reads the adaptive secondary color and is deprecated, so it classifies as
+adaptive here and still gives way to `text-body-secondary` on its deprecation.
+
+| Family     | Adaptive                                                                                                                | Fixed                                                                                                                   |
+| ---------- | ----------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------- |
+| Text       | `text-body`, `text-body-emphasis`, `text-body-secondary`, `text-body-tertiary`, `text-muted` (alias), `text-*-emphasis` | `text-primary` … `text-danger`, `text-light`, `text-dark`, `text-white`, `text-black`, `text-white-50`, `text-black-50` |
+| Background | `bg-body`, `bg-body-secondary`, `bg-body-tertiary`, `bg-*-subtle`                                                       | `bg-primary` … `bg-danger`, `bg-light`, `bg-dark`, `bg-white`, `bg-black`, `bg-gradient`                                |
+| Border     | `border` (default color, decorative at 1.3:1), `border-*-subtle`                                                        | `border-primary` … `border-dark`, `border-white`, `border-black`                                                        |
+| Links      | plain `<a>`, `btn-link`, `link-body-emphasis`                                                                           | `link-primary` … `link-dark`, `link-light`                                                                              |
+| Own pairs  | `.alert-*`, `.list-group-item-*`, `.form-control`, `.card`, `.dropdown-menu`, `.modal-content`, `.toast`, `.btn-close`  | `text-bg-*`, solid `btn-*`, `btn-light`/`btn-dark`, `table-*` row variants, `progress-bar`, active nav/list/page states |
+| No pair    | —                                                                                                                       | `btn-outline-*`: a fixed label and border on whatever surface the page has                                              |
+
+**Pair like with like.** Adaptive text on an adaptive surface; fixed text on a fixed fill. Treat
+every mixed pair as unproven until measured: some clear one mode and fail the other, and some fail
+light and dark alike. Read the outcome from the measurement, never from the mixture.
+
+The following readings bound stock Bootstrap 5.3.8 and nothing else. A declared theme, a skin, or an
+overridden token re-points every value in the table, so measure that theme yourself rather than
+carrying a stock number into it. Light | dark:
+
+| Mixed pair                                              | Light         | Dark          |
+| ------------------------------------------------------- | ------------- | ------------- |
+| `text-primary` / `-success` / `-danger` on `bg-body`    | 4.5           | 3.4 ✗         |
+| `text-secondary` on `bg-body`                           | 4.7           | 3.3 ✗         |
+| `text-warning` / `text-info` on `bg-body`               | 1.6 ✗ / 2.0 ✗ | 9.5 / 7.9     |
+| `text-dark`, `text-black` on `bg-body`                  | 15.4 / 21.0   | 1.0 ✗ / 1.4 ✗ |
+| `text-white`, `text-light` on `bg-body`                 | 1.0 ✗ / 1.1 ✗ | 15.4 / 14.6   |
+| Inherited text on `bg-light` / `bg-white`               | 14.6 / 15.4   | 1.2 ✗ / 1.3 ✗ |
+| Inherited text on `bg-dark` / `bg-black`                | 1.0 ✗ / 1.4 ✗ | 11.8 / 16.1   |
+| Inherited text on `bg-primary` / `-danger` / `-success` | 3.4 ✗         | 3.5 ✗         |
+| `btn-outline-secondary` label on `bg-body`              | 4.7           | 3.3 ✗         |
+| `btn-outline-primary` label on `bg-body`                | 4.5           | 3.4 ✗         |
+| `link-primary` (`--bs-primary-rgb`) on `bg-body`        | 4.5           | 3.4 ✗         |
+
+The adaptive pairs hold: `text-*-emphasis` on `bg-body` is 6.1–13.6 in light and dark and on
+`bg-*-subtle` 7.2–10.8, with one exception — `text-dark-emphasis` is 3.7 on the dark body; use
+`text-body-emphasis` for neutral emphasis. A plain link is 4.5 light and 6.4 dark because
+`--bs-link-color` is redefined; `text-primary` and `link-primary` are not.
+
+Rules:
+
+- Default to adaptive on adaptive: inherited text on `bg-body*` or `bg-*-subtle`; status text as
+  `text-*-emphasis`; links as plain links or `link-body-emphasis`.
+- A fixed fill needs a fixed foreground you can name: `text-bg-*` (white on primary, secondary,
+  success, and danger at 4.5–4.7; black on warning, info, and light; white on dark), the
+  component's own foreground, or a `data-bs-theme` scope that carries `text-body` on the same
+  element. Inherited text on a fixed fill is never a pair.
+- A `data-bs-theme` scope redefines variables only. Text color is painted once, on `<body>`, from
+  the outer mode, and plain descendants inherit that computed color — not the variable. Inside
+  the scope only rules that resolve `color` through a variable re-align: `text-body*`,
+  `text-*-emphasis`, buttons, links, `list-group-item`, form controls, `btn-close`. A paragraph,
+  a `span`, a heading without a text class, and `.card` (its `--bs-card-color` is empty, so it
+  inherits) keep the outer mode's color. The symptom is a headline in `text-body-emphasis`
+  reading correctly beside a paragraph that vanishes. Restate the surface and the foreground on
+  the scope element: take `bg-body text-body` where the fill must follow the mode, and a fixed
+  `bg-*` plus `text-body` where it must not
+  (`<section class="bg-dark text-body" data-bs-theme="dark">`).
+  Check components that leave the scope: dropdown menus, and dialogs mounted at the root.
+- Outline buttons carry a fixed label. Lift the neutral one once at the theme root —
+  `.btn-outline-secondary { --bs-btn-color: var(--bs-emphasis-color); }` — its `#6c757d` border
+  still clears the 3:1 boundary bar in light and dark (4.7 | 3.3). For an adaptive primary outline set
+  `--bs-btn-color` and `--bs-btn-border-color` to `var(--bs-link-color)`; `btn-link` already adapts.
+  `btn-outline-light` and `btn-outline-dark` belong only inside a fixed fill of the opposite tone.
+- Shadows are fixed black alphas and nearly vanish on dark surfaces; carry depth with the
+  `bg-body*` steps in dark mode.
+- Icon fonts and `fill="currentColor"` follow the text; a literal hex in an inline SVG or an
+  `<img>` is fixed. Give logos and illustrations a scoped variant or a `currentColor` path.
+
+| Legacy or mixed                                  | Adaptive replacement                                                      |
+| ------------------------------------------------ | ------------------------------------------------------------------------- |
+| `bg-light` panel                                 | `bg-body-tertiary`                                                        |
+| `bg-white`                                       | `bg-body`                                                                 |
+| Neutral `bg-dark` region                         | `bg-dark` with `data-bs-theme="dark"`, or `bg-body` inside a dark scope   |
+| `text-dark`, `text-black`                        | `text-body-emphasis`, or inherit                                          |
+| `text-white` on an adaptive surface              | inherit                                                                   |
+| `text-muted`, `text-black-50`, `text-white-50`   | `text-body-secondary`                                                     |
+| `text-primary` … `text-danger` as running text   | `text-*-emphasis`, measured                                               |
+| `border-light`, `border-dark`                    | `border`, or `border-*-subtle`                                            |
+| `navbar-light`, `navbar-dark`, `btn-close-white` | `data-bs-theme` on the navbar or region                                   |
+| `badge bg-primary` with inherited text           | `badge text-bg-primary`, or `badge bg-primary-subtle` with inherited text |
+| `link-primary` … `link-dark`                     | plain link, or `link-body-emphasis`                                       |
+
+Read that table as a replacement map, not as a classification. Replace `bg-light`, `bg-white`,
+`bg-dark`, `text-dark`, `text-black`, `text-white`, `text-black-50`, `text-white-50`,
+`border-light`, `border-dark`, and the colored `text-*` and `link-*` families because they are
+fixed. Replace `text-muted`, `navbar-light`, `navbar-dark`, and `btn-close-white` because 5.3
+deprecates them — `text-muted` already adapts, so its replacement closes a deprecation rather than
+a contrast defect.
+
 ## Text tiers
 
-Stock Bootstrap ships two readable text tiers, not three. `--bs-secondary-color` is the body color
-at 75 % alpha and `--bs-tertiary-color` at 50 % alpha, so both composite against whatever sits
-beneath them. Measured on the three stock body surfaces (`bg-body` / `bg-body-tertiary` /
-`bg-body-secondary`) in 5.3.8:
+Stock Bootstrap ships the inherited body color and `text-body-secondary` as its readable tiers;
+`text-body-tertiary` is not readable text. `--bs-secondary-color` is the body color at 75 % alpha
+and `--bs-tertiary-color` at 50 % alpha, so each composites against whatever sits beneath it.
+
+The following readings bound stock 5.3.8 on its own body surfaces (`bg-body` / `bg-body-tertiary` /
+`bg-body-secondary`). Measure a declared theme or a skin yourself; its tokens re-point every value
+here.
 
 | Tier                  | Light              | Dark              | 4.5:1 bar        |
 | --------------------- | ------------------ | ----------------- | ---------------- |
@@ -57,19 +161,19 @@ beneath them. Measured on the three stock body surfaces (`bg-body` / `bg-body-te
 
 - Use `text-body-secondary` as the one shipped quiet tier. Use `text-body-tertiary` for decoration
   or disabled chrome only; it never carries a caption, timestamp, or count someone reads.
-- Declare a third readable tier as an opaque token — override `$body-tertiary-color` and
+- Declare any further readable tier as an opaque token — override `$body-tertiary-color` and
   `$body-tertiary-color-dark`, or add a semantic token — and measure it on each surface it sits on.
   The opaque `text-secondary` (`$gray-600`) clears 4.5:1 only on pure white and does not adapt.
-- More than a dozen component variables consume the translucent secondary color — placeholders,
+- Component variables consume the translucent secondary color — placeholders,
   `.form-text`, table captions, breadcrumb dividers and the active crumb, toast headers, figure
-  captions, list-group action text, several disabled states — and inherit this table.
+  captions, list-group action text, and disabled states — and inherit this table.
 - On a colored fill, `text-body-secondary` composites the body color over the hue — grey on color —
   and `text-white-50` or `text-opacity-*` let the fill show through the glyphs. The quiet tone on a
   fill is the same hue at lower contrast: keep the owning component's foreground and quiet a line
   with weight or size, or declare a same-hue token (for the stock blue, the `$blue-200`–`$blue-300`
   region in light mode) through the component's own variable and measure it.
 - For a tinted region, use the shipped same-hue pair: `text-*-emphasis` on `bg-*-subtle` (about
-  10:1 for primary in the stock light theme), adapting in both modes. Keep `text-bg-*` solids for
+  10:1 for primary in the stock light theme), adapting in light and dark. Keep `text-bg-*` solids for
   the primary element.
 
 When checking utility behavior, see Bootstrap's [Background](https://getbootstrap.com/docs/5.3/utilities/background/)
@@ -119,13 +223,22 @@ Use the host's mode controller. With Bootstrap's attribute strategy, set the res
 `dark` value on `<html>`; scope an intentional exception with `data-bs-theme` on its boundary.
 Do not pin components to dark merely because the page happens to be dark during development.
 
-On a generic nested region, establish its surface as well as its variables:
+A nested scope changes variables, not painted colors: `color` is set on `<body>` by the outer
+mode and inherited as a computed value, so plain text inside the scope stays the outer color
+until the boundary restates it. Establish both the surface and the foreground on the scope
+element — never rely on the attribute alone, and never fix the symptom by sprinkling `text-white`
+on individual descendants:
 
 ```html
 <section data-bs-theme="dark" class="bg-body text-body p-3" aria-labelledby="preview-heading">
 	<h2 id="preview-heading" class="h6">Preview</h2>
 	<div class="bg-primary-subtle rounded p-3">This text inherits from the preview.</div>
 </section>
+
+<!-- Fixed fill or image that must not follow the page mode: keep bg-*, still restate text-body. -->
+<section data-bs-theme="dark" class="bg-dark text-body py-5" aria-labelledby="hero-heading">
+	…
+</section>
 ```
 
 Keep the body foreground at that owned boundary; add no text-color classes to its ordinary
@@ -166,7 +279,8 @@ Do not use `.badge bg-success-subtle` alone: stock `.badge` supplies a white for
 inherited body text. Do not mistake the absence of a `text-*` class for the absence of a color
 rule. Confirm the skin's badge rule; see [Badges](https://getbootstrap.com/docs/5.3/components/badge/).
 Keep a removable tag's close button in the same mode and measure its hit area; a badge's small
-font must not shrink the control below the package target floor.
+font must not shrink the control below the target floor in
+[bootstrap-reference.md](bootstrap-reference.md) → WCAG 2.2 requirements for app UI.
 
 ### Alerts, buttons, and selection
 
@@ -214,12 +328,12 @@ Stock ramps are mechanical: `$blue-100…400` are `tint-color` mixes with white
 are `shade-color` mixes with black, and the `-text-emphasis` / `-bg-subtle` / `-border-subtle`
 triads are the same mixes. Hue stays fixed and saturation can only fall, so any brand base short
 of full saturation washes out at the light end and goes muddy at the dark end; stock blue survives
-only because its base is 98 % saturated. For a brand color, override the nine `$brand-100…900`
-variables and the six triad variables (`$brand-text-emphasis`, `-bg-subtle`, `-border-subtle`,
+only because its base is 98 % saturated. For a brand color, override the `$brand-100…900` shade
+variables and the triad variables (`$brand-text-emphasis`, `-bg-subtle`, `-border-subtle`,
 each with its `-dark` twin) with hand-picked values before `variables` is imported; every
 `.alert-brand`, `bg-brand-subtle`, `text-brand-emphasis`, and `table-brand` then consumes them.
 Stock greys sit at hue 210° with 7–17 % saturation — cool, matched to the stock blue. For a warm
-brand, override `$gray-100…900` as a complete set of nine with one hue and temperature; never drop
+brand, override `$gray-100…900` as a complete set at one hue and temperature; never drop
 one warm grey into the cool set. Take the picking method from
 [frontend-design.md](frontend-design.md) → Color as a constrained system.
 
@@ -237,5 +351,6 @@ Do not infer their foregrounds from a desktop capture or from the theme attribut
 
 Run [Color-mode inheritance](inspection.md#color-mode-inheritance) and the applicable contrast,
 target, and rendered-review checks against the loaded Bootstrap build and skin. Exercise the
-existing mounted UI through light, dark, and back, including supported local scopes and overlays.
+existing mounted UI through every declared mode and back, including supported local scopes and
+overlays.
 Report actual coverage; do not claim a host application pass from documentation or a stock fixture.

package/dist/host/agents/skills/enterprise-bootstrap/references/components.md

@@ -1,6 +1,6 @@
 # Bootstrap 5 Component Reference
 
-> Part of the `enterprise-bootstrap` package. Bootstrap **5.3.x** component
+> Part of the `enterprise-bootstrap` skill. Bootstrap **5.3.x** component
 > markup + enterprise selection notes. Utility classes: [utilities.md](utilities.md).
 > Theming, forms deep-dive, JS lifecycle, patterns: [bootstrap-reference.md](bootstrap-reference.md).
 
@@ -158,9 +158,9 @@ Reserve the solid variants for intentional prominence or a counter with its own
 
 For an intentional solid badge, use a measured `text-bg-*` pair rather than a solid background alone. Its foreground is selected at Sass build time, not recalculated on a runtime theme change. Never make color the only carrier of meaning; keep visible text or an accessible label.
 
-**A badge is never a textless mark.** Stock Bootstrap ships `.badge:empty { display: none }`, so an empty `<span class="badge">` used as a status dot renders nothing at all — the surface silently loses the state it claimed to show, and source review never sees it. A textless status mark is an **icon glyph** (see [Icons](#icons) → Status glyph marks), not a stripped badge.
+**A badge is never a textless mark.** Stock Bootstrap ships `.badge:empty { display: none }`, so an empty `<span class="badge">` used as a status dot renders nothing. Draw a textless status mark as an **icon glyph** (see [Icons](#icons) → Status glyph marks), never as a stripped badge, and confirm the mark in a capture — source review cannot see the missing paint.
 
-State a badge's intended fill and inspect the skin. For a quiet badge use `bg-*-subtle text-reset`; for an unfilled badge use `bg-transparent text-reset`. Verify the inherited foreground on that actual surface in light and dark. A fill-only utility does not remove `.badge`'s white text; see [color-modes.md](color-modes.md) → Badges and removable tags.
+State a badge's intended fill and inspect the skin. For a quiet badge use `bg-*-subtle text-reset`; for an unfilled badge use `bg-transparent text-reset`. Verify the inherited foreground on that actual surface in every declared theme. A fill-only utility does not remove `.badge`'s white text; see [color-modes.md](color-modes.md) → Badges and removable tags.
 
 A badge reporting an in-flight request is a live region: `role="status"` on the badge (or on the small wrapper that holds it) announces the settled state politely without stealing focus. Reserve `role="alert"` for urgent results ([Alerts](#alerts)).
 
@@ -180,6 +180,8 @@ The current page is `aria-current="page"` and not a link. Use breadcrumbs only f
 
 ### Buttons
 
+Solid variants own a fixed foreground/background pair and read the same in light and dark (primary and danger at 4.5:1, on the line). Outline variants paint a fixed label on the adaptive page surface: `btn-outline-secondary` is 4.7:1 on the light body and 3.3:1 on the dark one, `btn-outline-primary` 4.5 | 3.4. Lift the neutral once at the theme root — `.btn-outline-secondary { --bs-btn-color: var(--bs-emphasis-color); }` — and give an adaptive primary outline `--bs-btn-color`/`--bs-btn-border-color: var(--bs-link-color)`; `btn-link` adapts already. `btn-light`/`btn-dark` and `btn-outline-light`/`-dark` belong inside fixed fills of the opposite tone ([color-modes.md](color-modes.md) → Fixed and adaptive classes).
+
 ```html
 <button type="button" class="btn btn-primary">Primary</button>
 <button type="button" class="btn btn-secondary">Secondary</button>
@@ -203,9 +205,9 @@ The current page is `aria-current="page"` and not a link. Use breadcrumbs only f
 <button type="button" class="btn btn-primary" data-bs-toggle="button">Toggle</button>
 ```
 
-Icon-only buttons need `aria-label` and a ≥24×24 px target (WCAG 2.2) — `btn-sm` icon clusters in toolbars are the common violation; pad rather than shrink.
+Icon-only buttons need `aria-label` and a target meeting the floor in [bootstrap-reference.md](bootstrap-reference.md) → WCAG 2.2 requirements for app UI — `btn-sm` icon clusters in toolbars are the common violation; pad rather than shrink.
 
-The three sizes scale padding faster than font — `btn-sm` 4/8 px at 14 px, `btn` 6/12 at 16 px, `btn-lg` 8/16 at 20 px — so a large button reads as larger, not zoomed. Use them as shipped; do not derive a fourth size with `em` padding. Weight is `$font-weight-normal`; `fw-semibold` on a button is a deliberate emphasis choice, not a default.
+The shipped sizes scale padding faster than font — `btn-sm` 4/8 px at 14 px, `btn` 6/12 at 16 px, `btn-lg` 8/16 at 20 px — so a large button reads as larger, not zoomed. Use them as shipped; do not derive another size with `em` padding. Weight is `$font-weight-normal`; `fw-semibold` on a button is a deliberate emphasis choice, not a default.
 
 Choose action rank, then a variant whose rest, hover, focus, active/checked, and disabled treatment works on its actual surface ([SKILL.md](../SKILL.md) → Hierarchy & actions). Do not override native button states with background or text utilities.
 
@@ -504,6 +506,8 @@ Bootstrap's modal enforces focus, adds `role="dialog"`/`aria-modal="true"`, clos
 
 ### Navbar
 
+Stock 5.3 navbars are adaptive on `bg-body-tertiary`. `navbar-light` and `navbar-dark` are deprecated: a dark brand bar is `navbar bg-dark` with `data-bs-theme="dark"` plus `text-body` on the same element — the scope re-aligns the toggler icon, links, and form controls, which resolve their own color variables, while plain text inherits the outer mode's painted color — never `bg-dark` alone with inherited text. Match `navbar-expand-{bp}` to where the full destination set fits; the toggler must remain a named `navbar-toggler` with `aria-controls` and `aria-expanded`.
+
 ```html
 <nav class="navbar navbar-expand-lg bg-body-tertiary">
 	<div class="container-fluid">
@@ -704,7 +708,7 @@ when the presentation changes.
 <p aria-hidden="true">
 	<span class="placeholder col-6"></span>
 	<span class="placeholder w-75"></span>
-	<span class="placeholder" style="width: 25%;"></span>
+	<span class="placeholder w-25"></span>
 </p>
 
 <span class="placeholder col-12 placeholder-lg">Large</span>
@@ -717,7 +721,7 @@ when the presentation changes.
 <button class="btn btn-primary disabled placeholder col-4" aria-hidden="true"></button>
 ```
 
-Always wrap skeletons in `aria-hidden="true"` — they are visual scaffolding, not content. Skeleton-vs-spinner decision rules: [bootstrap-reference.md](bootstrap-reference.md) → The data states.
+Always wrap skeletons in `aria-hidden="true"` — they are visual scaffolding, not content. Size a placeholder with `col-*` or a shipped width utility; a skeleton width is a layout decision, not a runtime value, so it never takes a `style` attribute. Skeleton-vs-spinner decision rules: [bootstrap-reference.md](bootstrap-reference.md) → The data states.
 
 ### Popover (Requires Popper.js)
 
@@ -748,6 +752,8 @@ Popovers are **opt-in**: they do nothing until initialized in JS (see [JavaScrip
 
 ### Progress
 
+For dynamic progress, have the host script set `width` on `.progress-bar` in a standalone `.progress`, or on each `.progress` segment in `.progress-stacked`. Derive the painted width and the matching `aria-valuenow` from the same progress value. Record that script by name and purpose under [inspection.md](inspection.md) → Style escapes. Exempt only those elements' producer-written `width` declarations. Keep all other widths in shipped utilities or the project stylesheet.
+
 5.3 markup — `role="progressbar"` and the `aria-value*` attributes go on the **outer `.progress`**, not the inner bar:
 
 ```html
@@ -873,6 +879,8 @@ Gotcha: the spied element must be a scroll container (height/overflow, or focusa
 
 ### Tables
 
+`table-*` row variants are fixed pairs (`--bs-table-bg` tint with `--bs-table-color: #000`) and read as light rows inside a dark table; prefer a `bg-*-subtle` status mark in a cell. `table-responsive` is `overflow-x: auto` only — give the wrapper `role="region"`, an `aria-label`, and `tabindex="0"` so keyboard users can reach its far edge, and add `data-bs-popper-config='{"strategy":"fixed"}'` to any dropdown toggle inside it ([responsive-layout.md](responsive-layout.md) → Bootstrap's responsive surface).
+
 ```html
 <table class="table">
 	<caption class="visually-hidden">
@@ -972,7 +980,7 @@ Toasts are **opt-in** — hidden until `.show()` is called (or shown through a t
 </button>
 ```
 
-Tooltips are **opt-in** (JS init required, below). Only attach to focusable elements so keyboard users can trigger them; never put essential information _only_ in a tooltip, and never report form errors through a tooltip. `data-bs-html` with untrusted content is an XSS vector.
+Tooltips are **opt-in** (JS init required; see [JavaScript initialization](#javascript-initialization)). Only attach to focusable elements so keyboard users can trigger them; never put essential information _only_ in a tooltip, and never report form errors through a tooltip. `data-bs-html` with untrusted content is an XSS vector.
 
 ## JavaScript Initialization
 
@@ -1003,14 +1011,14 @@ Bootstrap's core CSS ships **no icons**. The `.bi` SVGs in examples come from th
 
 ### Status glyph marks
 
-The textless mark that survives both themes — dots, ticks, rings, pulses — is a glyph, not a badge ([Badge](#badge)). Inline SVG or icon font, the composition rules are the same:
+For a textless status mark — a dot, tick, ring, or pulse — use a glyph rather than a badge ([Badge](#badge)). Apply the following composition rules to inline SVG and icon fonts:
 
 ```html
 <span class="bi bi-circle-fill fs-6 lh-1" role="img" aria-label="Healthy"></span>
 <span class="bi bi-circle fs-6 lh-1" role="img" aria-label="Not started"></span>
 ```
 
-- **Inherit the owning foreground.** Keep ordinary glyphs on body or component text, including selected fills. Add `text-*-emphasis` only for a deliberate semantic tint on a known, measured surface; never apply it to every mark on a subtle fill. Measure meaningful marks at **≥ 3:1** in light and dark. Take cascade exceptions from [color-modes.md](color-modes.md).
+- **Inherit the owning foreground.** Keep ordinary glyphs on body or component text, including selected fills. Add `text-*-emphasis` only for a deliberate semantic tint on a known, measured surface; never apply it to every mark on a subtle fill. Measure meaningful marks against the bar in [SKILL.md](../SKILL.md) → Surfaces, color, contrast, in every declared theme and reached state. Take cascade exceptions from [color-modes.md](color-modes.md).
 - **Filled and hollow say different things** — done vs pending, live vs idle — so pair glyphs that share one advance width (a filled/hollow pair from the same icon family). Mixed widths make a column of marks jitter row to row.
 - **Size with `fs-*` _and_ `lh-1`.** A glyph inherits the row's line-height, so an `fs-*` bump without `lh-1` grows the line box and pushes the row taller than its neighbors.
 - Give the mark an accessible name (`role="img"` + `aria-label`, or a `.visually-hidden` word next to an `aria-hidden` glyph) — a mark whose only meaning is its color and shape is color-only status.
@@ -1040,7 +1048,7 @@ The textless mark that survives both themes — dots, ticks, rings, pulses — i
 - Prefer visible labels or `.form-floating` — placeholder-only labels fail accessibility and disappear on input.
 - Pair help and errors with `aria-describedby`; use `.invalid-feedback` with `.is-invalid` and mark the field `aria-invalid="true"`.
 - Money/units: `.input-group` + `.input-group-text`; add `.has-validation` on groups with validation feedback.
-- Show progress with `spinner-border spinner-border-sm` inside the submit button while waiting; keep submit enabled and validate on submit rather than disabling it ([bootstrap-reference.md](bootstrap-reference.md) → Forms in production).
+- Keep submit enabled while fields are invalid and validate on submit. Mark the button busy while a submit is in flight — `spinner-border spinner-border-sm` inside it, `aria-busy="true"` on it — and refuse a second submit; take the full rule from [bootstrap-reference.md](bootstrap-reference.md) → Forms in production.
 
 ### Selection fills
 
@@ -1048,7 +1056,7 @@ Keep the component's selected foreground on ordinary labels and glyphs. Remove a
 semantic tint before changing its active fill; handle an independently filled badge through
 [color-modes.md](color-modes.md) → Alerts, buttons, and selection.
 
-Verify that chosen and unchosen filters remain distinguishable in light and dark. Do not assume
+Verify that chosen and unchosen filters remain distinguishable in every declared theme. Do not assume
 that a neutral outline always inverts meaning or that an accent hue repairs it. Preserve the
 checked/pressed state and add a visible non-color cue when the fill alone is ambiguous.
 
@@ -1060,7 +1068,7 @@ to every selection widget.
 
 - Active nav items need `aria-current="page"` (or `aria-selected="true"` for tabs).
 - Modals and offcanvas: set `aria-labelledby`; Bootstrap traps focus and restores it on close — do not fight it; `dispose()` instances when the host unmounts in SPAs.
-- Icon-only controls always need an accessible name (`aria-label` or visually-hidden text) and a ≥24px target.
+- Icon-only controls always need an accessible name (`aria-label` or visually-hidden text) and a target meeting the floor in [bootstrap-reference.md](bootstrap-reference.md) → WCAG 2.2 requirements for app UI.
 
 ### Theming
 

package/dist/host/agents/skills/enterprise-bootstrap/references/frontend-design.md

@@ -1,7 +1,8 @@
 # Frontend Design
 
-> Part of the `enterprise-bootstrap` package. Aesthetic, hierarchy, spacing,
-> typography, color, depth, imagery, process, and copy — use when setting visual direction.
+> Part of the `enterprise-bootstrap` skill. Aesthetic, hierarchy, spacing,
+> typography, color, depth, imagery, signature, and copy — use when setting visual direction.
+> The pass order lives in [SKILL.md](../SKILL.md) → Process.
 > Operate layer: [SKILL.md](../SKILL.md).
 
 Give the surface a point of view rooted in its subject. Make the person's task clear before making
@@ -15,13 +16,17 @@ content, and its design system before choosing a direction. Use prior designs an
 hints, not templates. Draw character from the subject's materials, instruments, artifacts, and
 vernacular rather than an unrelated visual trend.
 
-Set personality through four levers — typeface, primary color, corner-radius family, and copy
-register — chosen from the audience and subject, then held on every screen. A neutral sans-serif
-and a small radius are deliberate neutrals, not missing decisions; a serif reads classic, a
-rounded sans or large radius playful, no radius formal. Keep one radius family per product: pill
-buttons beside square cards read as two products. Take the register from what the audience
-already uses, not from a competitor's interface. In an existing product these levers are set;
-carry them forward.
+Set personality through these levers — typeface, primary color, corner-radius family, and copy
+register. Choose each from the audience and subject, then hold it on every screen. In an existing
+product the levers are already set: carry them forward and move none without a brief that asks for
+it.
+
+Pick the typeface and radius against the register the brief names: take a serif for a classic
+register, a rounded sans or a large radius for a playful one, and no radius for a formal one. Take a
+neutral sans-serif and a small radius for a neutral register as a deliberate choice, never as a
+skipped one. Use one radius family per product; pill buttons beside square cards read as two
+products. Take the copy register from what the audience already uses, not from a competitor's
+interface.
 
 Start with the smallest useful feature: what the person needs to see, enter, decide, and do next.
 Compose that interaction with realistic content before choosing its navigation shell. Reuse a shell
@@ -36,7 +41,7 @@ Name the primary information, supporting context, and ancillary detail in each t
 that order readable without color: use placement, grouping, weight, and spacing before adding
 paint. When the primary element does not stand out, quiet its competitors before enlarging it.
 
-Carry hierarchy with two or three foreground tiers and two weights before reaching for size;
+Carry hierarchy with a short set of foreground tiers and a weight pair before reaching for size;
 size alone produces oversized primary text and unreadable secondary text. Use a regular body
 weight (400) and one emphasis weight (600–700); weights under 400 belong only at display sizes.
 Quiet a heavy element by lowering its contrast — an icon beside a label takes the secondary tier
@@ -105,14 +110,15 @@ to make it fit.
 Assign display, body, and utility roles; they need not be different font families. Reuse the
 product's typefaces. For a new system, take a legible UI face for repeated reading and data, and add
 a display face only where its character earns the payload. A neutral sans-serif or system stack is
-a deliberate choice, not a failure of distinctiveness. Prefer families offered in five or more
-weights; avoid condensed or short-x-height faces for UI text; keep a display face at display size,
+a deliberate choice, not a failure of distinctiveness. Prefer a family shipping the `300`–`700`
+range so display, body, and emphasis roles draw from one family; avoid condensed or
+short-x-height faces for UI text; keep a display face at display size,
 where it was drawn to work. Test the actual glyphs, numerals, weights, languages, and fallback the
 surface needs.
 
 Hand-pick a finite type scale in `rem`, with smaller jumps for UI text and larger jumps for
 display; a modular ratio yields fractional pixels and too few reading sizes. Avoid nested `em`
-font sizes that compound off-scale. Start with two working weights — regular and emphasis — and
+font sizes that compound off-scale. Start with a regular weight and an emphasis weight, and
 add another only for a distinct role. Keep captions and metadata at the smallest readable step in
 the secondary tier, not smaller in body color. Never shrink text merely to avoid fixing a cramped
 layout.
@@ -140,10 +146,11 @@ on touch or keyboard.
 
 ### Color as a constrained system
 
-Define roles, not a handful of unrelated swatches. Reuse or establish a neutral ramp, one or two
-brand families, and only the status or categorical families the feature needs. A working neutral
-ramp often needs 8–10 shades; brand and status families need enough steps for text, borders, fills,
-and interaction states. Those are starting ranges, not quotas to fill on every task.
+Define roles, not a handful of unrelated swatches. Reuse or establish a neutral ramp, the brand
+families the identity needs, and only the status or categorical families the feature needs. Build
+the neutral ramp across the shipped `100…900` steps, and give each brand and status family enough
+steps for text, borders, fills, and interaction states. Declare a step because a role consumes it,
+never to fill the ramp.
 
 Choose a family's base in a real control, its dark edge in text, and its light edge in a subtle
 surface; fill the gaps with visibly distinct steps, middle first. Define every shade up front;
@@ -167,7 +174,7 @@ the color without the weight of a dark fill, and reserves the solid pair for the
 element. Reserve explicit foreground/background pairs for intentional solid, inverse, or
 image-backed regions. Keep a secondary foreground within that region's tested contract; do not apply neutral
 grey or reduced opacity by habit. When no quieter foreground passes, separate by weight or spacing.
-Review hierarchy in light and dark independently. Preserve relative prominence and useful
+Review hierarchy in every declared mode independently. Preserve relative prominence and useful
 separation rather than mechanically inverting shades or adding a border to every dark panel.
 
 Use color to reinforce a word, glyph, position, or pattern, never to carry meaning alone. Give
@@ -196,9 +203,10 @@ Give overlapping images a ring in the background color so they never clash. Keep
 weights in one family.
 
 Spend polish on the content already present before adding another accessory — icon bullets that mean something, a brand-colored check, a
-promoted quotation mark, a link underline that completes on hover. One accent border per region
-— top of a card, side of a callout, under a heading or the active nav item — is the cheapest
-"designed" cue; five accents are a pattern. Change a section's surface before decorating it; keep
+promoted quotation mark, a link underline that completes on hover. Use one accent border per region
+— top of a card, side of a callout, under a heading, or the active nav item. Repeating that accent
+across neighboring regions turns it into a pattern and it stops reading as an accent. Change a
+section's surface before decorating it; keep
 any gradient within about 30° of hue and any pattern low-contrast and away from text. An accent,
 pattern, or background treatment supports grouping, state, or the subject; never add one to
 compensate for weak hierarchy. Take the class recipes from [utilities.md](utilities.md) →
@@ -253,36 +261,23 @@ matters. Give richer components richer content without replacing their semantics
 in a menu, related non-comparable details in one table cell, native radios inside selectable cards.
 Preserve keyboard behavior, sorting, and the comparisons the task depends on.
 
-## Process: brainstorm, explore, plan, critique, build, critique again
+## Hold the direction against defaults
+
+Run the pass order in [SKILL.md](../SKILL.md) → Process. That section owns the sequence; this file
+owns the visual decisions each pass makes.
 
 Calibrate against recurring defaults: cream with serif and terracotta; near-black with
 acid green or vermilion; broadsheet hairlines, square corners, and dense columns. These can fit a
 brief; they are not evidence that a direction fits this one. Follow a pinned direction exactly and
 use free axes deliberately, not as an excuse to rebrand an existing product.
 
-Work in small passes:
-
-1. **Ground the feature.** State its job, real content, primary action, and existing constraints.
-2. **Explore the hierarchy.** Compare compact low-fidelity arrangements of that feature. Hold
-   color: body surfaces, inherited text, weight, and spacing only, until a grayscale capture
-   reads; add brand and status hue last to reinforce what already reads. Settle the reading
-   order, grouping, and narrow layout before fine styling. Discard the sketches after selecting
-   a workable arrangement.
-3. **Plan the system.** Name palette families and surface ownership; type roles, sizes, and weights; spacing
-   and width roles; radius and elevation; the signature the brief calls for or the existing identity to preserve. Reuse existing
-   tokens and record only the additions or changes. State the layout in prose or a small wireframe.
-4. **Critique, then build.** Reject a plan that obscures the task, implies unbuilt behavior, or reads
-   as interchangeable. Implement the smallest working flow, map shared tokens at their owning scope, and refine its states
-   before extending the next feature. Revise the shared plan when the render disproves it.
-5. **Critique the render.** Read task, hierarchy, grouping, type, contrast, state, and signature in
-   that order. Fix the earliest failure before decorating later layers. Recheck after the fix.
-
-Keep CSS specificity deliberate. Utilities may use `!important`; inspect the winning declaration
-instead of stacking overrides. Remove conflicting classes before escalating selector specificity.
-A class selector remains a class selector regardless of its name.
-
-Keep exploratory drafts private. Show the selected direction, relevant decisions, and verification
-limits, not every discarded variation. Do not claim a rendered result from source inspection.
+Reject a direction that obscures the task, implies unbuilt behavior, or reads as interchangeable
+with any other product. Keep exploratory drafts private: show the selected direction, the decisions
+behind it, and the verification limits, not every discarded variation. Never claim a rendered result
+from source inspection.
+
+Keep specificity deliberate through [SKILL.md](../SKILL.md) → The styling ladder, which owns that
+rule.
 
 ## Restraint and self-critique
 
@@ -302,7 +297,7 @@ Review captures at the declared widths, themes, and states, with keyboard focus
 content. Switch modes on the mounted interface; inspect inherited text, quiet fills, and selected
 controls before polishing decoration. Compare against the named design criteria; do not invent a numeric beauty score. Use
 [inspection.md](inspection.md) for measurable claims and its rendered design review for visual
-ones. Record untested coverage as open. Route a requested review campaign to `orkestrel-polish-surface`.
+ones. Record untested coverage as open.
 
 ## Writing in design