@orkestrel/scaffold 0.0.65 → 0.0.67

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

@@ -3,6 +3,9 @@
 Pick an affordance from what the person is asked for, not from the name a schema gives the field.
 Where one category draws several ways, let the density and the list size decide.
 
+Each **Default** and **Alternate** names the styling rung it sits on. Take the rung names and their
+order from [SKILL.md](../SKILL.md) → The styling ladder.
+
 Read [The fixed state set](#the-fixed-state-set) before the catalog: every affordance handles that
 same set, and each category names only what it adds or changes. Take the data states a whole surface
 ships — ideal, empty, loading, partial, error — from
@@ -52,13 +55,14 @@ value is a set.
   switches without shrinking the text. Emulated viewport tests do not prove soft-keyboard behavior.
 
 - **Keep a read-only field on the same affordance the edit state uses.** Take `readonly`, or
-  `disabled` plus a carrier, and neutralize the chrome with one transparent combination declared
-  once by name — the combination is a class contract, so declare it and reuse it rather than
-  retyping the utilities. Never swap to `form-control-plaintext`: it drops the horizontal padding,
+  `disabled` plus a carrier, and neutralize the chrome with one transparent combination the project
+  declares by name in its own stylesheet and token layer. The project chooses that combination; this
+  skill prescribes none. Reuse the declared name rather than retyping the utilities at each site.
+  Never swap to `form-control-plaintext`: it drops the horizontal padding,
   so the read view and the edit view reflow against each other.
 - **Give a locked select `disabled` and a hidden input beside it.** A native select cannot be
   read-only, so `disabled` stops its value submitting and the hidden input carries that value.
-- **Verify a chosen filter in light and dark.** Keep its native checked/pressed state and a
+- **Verify a chosen filter in every declared theme.** Keep its native checked/pressed state and a
   distinguishable visual treatment; take selection rules from [components.md](components.md) →
   Selection fills. Do not prescribe an accent color as a substitute for that check.
 - **Keep native control foregrounds and states.** For quiet chip or group backgrounds, inherit
@@ -78,7 +82,9 @@ value is a set.
 
 ### One line of text
 
-**Default.** An `input.form-control` under its own `label.form-label`, at rung 1.
+**Default.** An `input.form-control` under its own `label.form-label`, at the component rung.
+
+The stock control border is `var(--bs-border-color)` — 1.3:1 on the light body and 1.9:1 on the dark one — so it is decorative; the label, the field's fill against the page, and the focus ring carry recognition. Where the boundary is the only cue (a field on a same-color surface), set `--bs-border-color: var(--bs-secondary-color)` on the form scope — adaptive, about 5.6:1 light and 7:1 dark — and re-measure; never a fixed `border-dark`.
 
 ```html
 <label for="account-name" class="form-label">Account name</label>
@@ -97,7 +103,7 @@ declared transparent combination rather than dropping the control.
 ### Text over many lines
 
 **Default.** A `textarea.form-control` with a `rows` attribute sized to the expected answer, at
-rung 1.
+the component rung.
 
 ```html
 <label for="incident-notes" class="form-label">Notes</label>
@@ -114,7 +120,7 @@ count in the `.form-text`, and keep it out of a live region unless the cap is cl
 
 ### A secret
 
-**Default.** An `input[type=password].form-control` under a visible label, at rung 1.
+**Default.** An `input[type=password].form-control` under a visible label, at the component rung.
 
 ```html
 <label for="passphrase" class="form-label">Passphrase</label>
@@ -133,8 +139,8 @@ one-time code the person must read back.
 
 ### A number
 
-**Default.** An `input[type=number].form-control`, at rung 1. In a column of figures add
-`text-end font-monospace` so the digits align, at rung 2.
+**Default.** An `input[type=number].form-control`, at the component rung. In a column of figures add
+`text-end font-monospace` so the digits align, at the utility rung.
 
 ```html
 <label for="unit-count" class="form-label">Units</label>
@@ -149,7 +155,7 @@ than a quantity, take the one-line-of-text category instead.
 
 ### A number in a bounded range
 
-**Default.** An `input.form-range`, at rung 1, and only when a minimum, a maximum, and a step are all
+**Default.** An `input.form-range`, at the component rung, and only when a minimum, a maximum, and a step are all
 fixed.
 
 ```html
@@ -168,7 +174,7 @@ hand-roll: Bootstrap ships one thumb per input.
 
 ### A date
 
-**Default.** An `input[type=date].form-control`, at rung 1. Take the calendar, the keyboard model,
+**Default.** An `input[type=date].form-control`, at the component rung. Take the calendar, the keyboard model,
 and the locale format from the platform rather than authoring any of them.
 
 ```html
@@ -184,7 +190,7 @@ help text, because a native picker takes no per-day exclusion.
 
 ### A time
 
-**Default.** An `input[type=time].form-control`, at rung 1, with `step` set to the granularity the
+**Default.** An `input[type=time].form-control`, at the component rung, with `step` set to the granularity the
 value actually carries.
 
 ```html
@@ -200,7 +206,7 @@ select is the lighter control.
 
 ### A date and time
 
-**Default.** An `input[type=datetime-local].form-control`, at rung 1.
+**Default.** An `input[type=datetime-local].form-control`, at the component rung.
 
 ```html
 <label for="window-opens" class="form-label">Window opens</label>
@@ -215,7 +221,7 @@ stored in; a local datetime carries none.
 
 ### A color
 
-**Default.** An `input.form-control-color[type=color]`, at rung 1.
+**Default.** An `input.form-control-color[type=color]`, at the component rung.
 
 ```html
 <label for="brand-tint" class="form-label">Brand tint</label>
@@ -223,7 +229,8 @@ stored in; a local datetime carries none.
 ```
 
 **Alternates.** Pair the swatch with a text field when the value is copied, pasted, or read aloud
-between people. Keep the swatch at a 24×24px target or larger.
+between people. Hold the swatch to the target floor in
+[bootstrap-reference.md](bootstrap-reference.md) → WCAG 2.2 requirements for app UI.
 
 **States.** The fixed set. A color input has no empty value, so give the field a default and say what
 it is.
@@ -231,7 +238,7 @@ it is.
 ### One on/off answer
 
 **Default.** A `.form-check` holding one `input.form-check-input[type=checkbox]` and its
-`label.form-check-label`, at rung 1.
+`label.form-check-label`, at the component rung.
 
 ```html
 <div class="form-check">
@@ -250,7 +257,7 @@ flight, and reverts visibly when it fails.
 
 ### One of a few
 
-**Default.** A radio group: `fieldset` and `legend` around `.form-check` rows, at rung 1.
+**Default.** A radio group: `fieldset` and `legend` around `.form-check` rows, at the component rung.
 
 ```html
 <fieldset>
@@ -266,7 +273,7 @@ flight, and reverts visibly when it fails.
 </fieldset>
 ```
 
-**Alternates.** Take a segmented `.btn-group` of `.btn-check` radios, at rung 2, when the choice
+**Alternates.** Take a segmented `.btn-group` of `.btn-check` radios, at the utility rung, when the choice
 sits in a toolbar or a filter bar and every option fits on one row without wrapping; give the group
 `role="radiogroup"` and one accessible name. A radio group and a segmented group draw the same
 question, and the list size decides between them. Verify the chosen-state contract rather than
@@ -277,7 +284,7 @@ name it in the message, and keep the error under the last row.
 
 ### One of many
 
-**Default.** A `select.form-select`, at rung 1.
+**Default.** A `select.form-select`, at the component rung.
 
 ```html
 <label for="territory" class="form-label">Territory</label>
@@ -297,7 +304,7 @@ hidden input. A select whose options are loading is `busy`.
 
 ### One of many with an unlisted value admitted
 
-**Default.** An `input.form-control` bound to a `<datalist>`, at rung 1. The list suggests; the
+**Default.** An `input.form-control` bound to a `<datalist>`, at the component rung. The list suggests; the
 person can still submit a value it does not hold.
 
 ```html
@@ -316,7 +323,7 @@ re-target every test and journey that finds this field by role.
 
 ### Any of a few
 
-**Default.** `fieldset` and `legend` around `.form-check` checkbox rows sharing one name, at rung 1.
+**Default.** `fieldset` and `legend` around `.form-check` checkbox rows sharing one name, at the component rung.
 
 ```html
 <fieldset>
@@ -338,7 +345,7 @@ text and validate it on the group.
 
 ### Any of many
 
-**Default.** A bounded, scrollable list of `.form-check` rows inside a bordered box, at rung 2, with
+**Default.** A bounded, scrollable list of `.form-check` rows inside a bordered box, at the utility rung, with
 a filter field preceding it so the person can narrow the list before choosing.
 
 ```html
@@ -362,7 +369,7 @@ one-action way to clear it.
 
 ### A value picked from a searched list
 
-**Default.** A combobox composed from shipped classes at rung 2, with the keyboard model
+**Default.** A combobox composed from shipped classes at the utility rung, with the keyboard model
 hand-rolled against the APG combobox pattern: an `input.form-control` carrying `role="combobox"`,
 `aria-expanded`, `aria-controls`, `aria-autocomplete="list"`, and `aria-activedescendant`, over a
 `ul.dropdown-menu[role=listbox]` of `.dropdown-item` buttons.
@@ -395,7 +402,7 @@ the input stays operable throughout.
 
 ### Files
 
-**Default.** An `input[type=file].form-control`, at rung 1.
+**Default.** An `input[type=file].form-control`, at the component rung.
 
 ```html
 <label for="statement" class="form-label">Statement</label>
@@ -413,7 +420,7 @@ toast.
 
 ### An ordered set of tags
 
-**Default.** Bootstrap ships no tags input. Compose one at rung 2 from a text field that commits on
+**Default.** Bootstrap ships no tags input. Compose one at the utility rung from a text field that commits on
 Enter plus a row of quiet chips, each carrying a `btn-close` with its own accessible name.
 Use a utility-composed span so text inherits and the close control retains its normal font size.
 
@@ -432,7 +439,8 @@ Use a utility-composed span so text inherits and the close control retains its n
 ```
 
 Keep tag text inherited and let the close icon follow the active mode. Measure the close button
-against the chip and its hit area against the package target floor. Take a retained `.badge`
+against the chip and its hit area against the target floor in
+[bootstrap-reference.md](bootstrap-reference.md) → WCAG 2.2 requirements for app UI. Take a retained `.badge`
 through [color-modes.md](color-modes.md) → Badges and removable tags.
 
 **Alternates.** Where the tags come from a fixed vocabulary, this is the any-of-many category and the
@@ -444,10 +452,10 @@ control per chip.
 
 ### A rating
 
-**Default.** Bootstrap ships no rating. Draw the interactive form as a radio group at rung 2 — one
+**Default.** Bootstrap ships no rating. Draw the interactive form as a radio group at the utility rung — one
 radio per value, restyled through `.btn-check` — so the keyboard model, the name, and the submitted
 value come from the platform. Star chrome over that structure is an authored class contract at
-rung 4.
+the authored rung.
 
 ```html
 <fieldset>
@@ -467,7 +475,7 @@ per [components.md](components.md) → Status glyph marks; it is not a control.
 
 ### A step in a sequence
 
-**Default.** Draw a step indicator from shipped parts at rung 1 — a `nav` or `.list-group-numbered`
+**Default.** Draw a step indicator from shipped parts at the component rung — a `nav` or `.list-group-numbered`
 whose current item carries `aria-current="step"`, with a `.progress` bar over a long sequence. A step
 indicator reports where the person is and holds no value, so it is not a field.
 

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

@@ -30,8 +30,9 @@ a pass label alone.
 - [Declared design scales](#declared-design-scales)
 - [Custom rule doing a utility's job](#custom-rule-doing-a-utilitys-job)
 - [Color-mode inheritance](#color-mode-inheritance)
-- [Composited contrast in both themes](#composited-contrast-in-both-themes)
+- [Composited contrast in every declared theme](#composited-contrast-in-every-declared-theme)
 - [One glyph, one meaning](#one-glyph-one-meaning)
+- [Fixed and adaptive pairing](#fixed-and-adaptive-pairing)
 - [Responsive task and reflow](#responsive-task-and-reflow)
 - [Responsive interaction continuity](#responsive-interaction-continuity)
 - [Rendered design review](#rendered-design-review)
@@ -48,7 +49,7 @@ a pass label alone.
   in the mounted tree separately; an unreachable stylesheet is an open dependency, not an empty one.
 - **Negative control.** Feed an undefined styling token to the reader, then append a harness SVG
   carrying that token through the same tree extractor. Both must be reported.
-- **Coverage.** The two controls cover set comparison and extraction, including SVG's non-string
+- **Coverage.** The controls cover set comparison and extraction, including SVG's non-string
   `className`. Use `getAttribute('class')` or an equivalent safe reader. Resolution does not prove
   the rule wins the cascade, paints the intended result, or covers a state never enumerated.
 
@@ -68,14 +69,22 @@ a pass label alone.
 
 ## Style escapes
 
-- **Property.** Authored markup carries no `style` attribute or `<style>` element.
+- **Property.** Authored markup carries no `style` attribute, and the surface's only `<style>`
+  element is the standalone-HTML project stylesheet in `<head>` that
+  [SKILL.md](../SKILL.md) → The styling ladder permits. A component-scoped `<style>` block fails.
 - **Population.** Authored templates and the freshly mounted, undriven tree. Keep source and mounted
   readings distinct so generated framework styles are not mistaken for authored declarations.
-- **Reading.** Report inline declarations and embedded style elements with their source or element.
-  Record framework/runtime exemptions by producer and purpose, never a blanket component exemption.
-  Bootstrap overlay positioning and conditional-visibility directives may write runtime styles.
+- **Reading.** Report inline declarations and non-permitted style elements with their source or
+  element. Record each runtime exemption by producer, element, and the property it writes — never a
+  blanket component exemption, and never a producer that writes a property outside its purpose.
+  Bootstrap overlay positioning and conditional-visibility directives write runtime styles. The host
+  script for progress owns the `width` declaration on the elements specified in
+  [components.md](components.md) → Progress.
 - **Negative control.** Feed an element with an inline declaration, then append an inline-styled
-  element and a `<style>` element to the harness tree. Every non-exempt fixture must be reported.
+  element and a component-scoped `<style>` element to the harness tree. Every non-exempt fixture
+  must be reported. Add a permitted fixture the reader must leave alone — the project stylesheet's
+  own `<head>` block, and a recorded runtime producer writing only its declared property — so the
+  reader cannot pass by rejecting every style element.
 - **Coverage.** This covers authored and mount-time escapes, not later interactions or third-party
   internals outside the declared scope. Drive later states separately when making claims about them.
 
@@ -134,7 +143,7 @@ a pass label alone.
 - **Population.** Rendered text, status marks, badges, tags, links, fields, selected controls, table
   cells, and overlays in the actual loaded build. Include supported nested modes, skin overrides,
   and portal mount points; name the boundaries that own an explicit foreground.
-- **Reading.** Drive the existing mounted tree from light to dark and back. Read computed text,
+- **Reading.** Drive the existing mounted tree through every declared mode and back. Read computed text,
   painted backgrounds, relevant custom properties, and winning declarations after each transition.
   Confirm quiet ordinary text matches its intended inherited foreground; identify the owner when
   a component legitimately differs. Check supported system preference and reload behavior when the
@@ -144,14 +153,15 @@ a pass label alone.
   foreground/background pair. Require the reader to detect each violated contract. For projects
   using aliases, add a root-resolved foreground alias inherited into an opposite-mode scope.
   Verify each control is invalid in that build; a class name alone does not establish the defect.
-- **Coverage.** Pair the cascade reading with Composited contrast; correct inheritance can still
+- **Coverage.** Pair the cascade reading with Composited contrast in every declared theme; correct inheritance can still
   produce insufficient contrast on a changed surface. An isolated stock fixture establishes only
   that fixture's behavior, not the host skin or application. Unreached states and mounts stay open.
 
-## Composited contrast in both themes
+## Composited contrast in every declared theme
 
-- **Property.** Every measured pairing meets the package bar: 4.5:1 for information-bearing text,
-  3:1 for meaningful textless marks and state/focus chrome, in each declared theme and reached state.
+- **Property.** Every measured pairing meets the bars in [SKILL.md](../SKILL.md) → Surfaces, color,
+  contrast, in each declared theme and reached state. That section owns the bars; read them there
+  rather than from a copy here.
 - **Population.** Rendered text and meaningful graphics, their actual surfaces, and all paint layers
   affecting contrast. Name exemptions for disabled controls; do not exempt readable metadata.
 - **Reading.** Composite translucent backgrounds onto the opaque base and translucent foregrounds
@@ -178,6 +188,31 @@ a pass label alone.
 - **Coverage.** This proves registry consistency, not that the markup uses the correct glyph or that
   its optical size and contrast work. Capture the states that use the marks and inspect their names.
 
+## Fixed and adaptive pairing
+
+- **Property.** Every text, icon, and border color resolves against the surface it sits on with
+  tokens of the same kind: adaptive on adaptive, or fixed on a fixed fill that names its own
+  foreground or carries a `data-bs-theme` scope.
+- **Population.** Every element with a color class, and every component with a fixed foreground
+  or fill (`btn-outline-*`, `table-*`, `badge`, `progress-bar`), including template branches,
+  portals, and inline SVG with literal fills.
+- **Reading.** For each element, resolve the nearest ancestor that paints a background — class,
+  component, or scope — and classify both sides from
+  [color-modes.md](color-modes.md#fixed-and-adaptive-classes). Report mixed pairs, fixed fills
+  with inherited text — including a `data-bs-theme` scope on a fixed fill that does not carry
+  `text-body` on the same element — fixed neutrals on adaptive surfaces (`bg-light`, `bg-white`,
+  `text-dark`), `text-dark-emphasis` inside a dark scope, and outline buttons outside a measured
+  scope. Report `text-muted`, `navbar-light`, `navbar-dark`, and `btn-close-white` under a separate
+  deprecation finding: they are 5.3 deprecations rather than pairing defects, and `text-muted` pairs
+  correctly. The scan predicts a pairing failure; the contrast instrument in each declared theme
+  establishes it.
+- **Negative control.** Append `bg-light` with inherited text, `text-white` on `bg-body`,
+  `text-primary` inside a `data-bs-theme="dark"` region, and a `bg-dark` region with
+  `data-bs-theme="dark"` and plain text but no `text-body`, in a harness; each must be reported by
+  the same reader.
+- **Coverage.** Mechanical class analysis only; it does not see custom CSS, `currentColor`
+  resolution, image content, or composited opacity. Measure those in the render.
+
 ## Responsive task and reflow
 
 - **Property.** The declared task remains readable and operable without unintended page overflow,
@@ -230,7 +265,7 @@ requested review round or campaign, use `orkestrel-polish-surface` rather than c
   right control after wrapping. Width serves the content; rails, forms, and tables use it deliberately.
 - **Type and reflow:** line length, baseline alignment, line-height, numeric comparison, and fallback
   text work at the declared widths and enlarged text. No essential content is clipped or hidden.
-- **Color, depth, and imagery:** light/dark transitions preserve hierarchy without gratuitous text overrides; color has a second encoding;
+- **Color, depth, and imagery:** transitions between declared themes preserve hierarchy without gratuitous text overrides; color has a second encoding;
   elevation describes layers; crops and icon sizes preserve useful detail; the frame stays quiet.
 - **States and restraint:** first-use, filtered-empty, loading, partial, and error retain a useful
   next step. Long or missing content holds up. The signature belongs to the brief; accessories do not
@@ -241,13 +276,13 @@ Pair each such claim with the relevant instrument or interaction test and its ac
 
 ## When an authored rule is already earned
 
-Leave rung 4 to the developer, per [SKILL.md](../SKILL.md) → When custom CSS is justified. Write a
-rule without asking only when every condition holds:
+Leave the authored rung to the developer, per [SKILL.md](../SKILL.md) → When custom CSS is
+justified. Write a rule without asking only when every condition holds:
 
 - an instrument reports a vendor failure against a stated requirement, such as a focus ring below
   3:1 or information-bearing status text below 4.5:1;
 - the rule cites the instrument, failing reading, and required bar beside it;
-- rungs 1–3 cannot restore the requirement, and the rule repairs that failure without unrelated polish;
+- the component, utility, and extension rungs cannot restore the requirement, and the rule repairs that failure without unrelated polish;
 - the rule uses `--bs-*` paint tokens and declared scales, and the repaired result is re-measured in
   every affected theme and state.
 

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

@@ -1,12 +1,13 @@
 # Responsive layout
 
-> Part of the `enterprise-bootstrap` package. Use before composing a screen, shell, toolbar,
+> Part of the `enterprise-bootstrap` skill. Use before composing a screen, shell, toolbar,
 > form, overlay, or data view. Operate layer: [SKILL.md](../SKILL.md).
 
 ## Contents
 
 - [Declare the contract](#declare-the-contract)
 - [Build the base](#build-the-base)
+- [Bootstrap's responsive surface](#bootstraps-responsive-surface)
 - [Expand by available space](#expand-by-available-space)
 - [Keep the task intact](#keep-the-task-intact)
 - [Handle navigation and overlays](#handle-navigation-and-overlays)
@@ -78,6 +79,55 @@ ship breakpoint variants. Do not invent `w-md-auto`, `overflow-lg-auto`, `positi
 `min-w-0`. Responsive sticky helpers are a separate shipped family. Take missing roles through
 [Layout and type extensions](bootstrap-reference.md#layout-and-type-extensions).
 
+## Bootstrap's responsive surface
+
+Stock 5.3.8 thresholds are `min-width` breakpoints: `sm` 576, `md` 768, `lg` 992, `xl` 1200,
+`xxl` 1400 px; `xs` has no infix, so an unprefixed class is the base and `sm-*` applies from
+576 px up. `.container` caps at 540 / 720 / 960 / 1140 / 1320 px; `container-{bp}` stays fluid
+until its breakpoint; `container-fluid` always. Gutter and container padding are 1.5 rem, so a
+320 px viewport leaves 296 px of content and a 390 px viewport 366 px. Offcanvas panels are
+400 px wide (`w-100` on narrow viewports); modals are 300 / 500 / 800 / 1140 px.
+
+Families that ship breakpoint infixes, read from the utilities map: `d-*`, `flex-*`,
+`justify-content-*`, `align-items-*`, `align-self-*`, `align-content-*`, `order-*`, `float-*`,
+`gap-*`, `row-gap-*`, `column-gap-*`, every `m*`/`p*` spacing class, `text-{bp}-start/center/end`,
+`object-fit-*`; plus the grid (`col-*`, `row-cols-*`, `g-*`, `offset-*`), `container-*`,
+`sticky-{bp}-top/bottom`, and the component thresholds `navbar-expand-*`, `offcanvas-*`,
+`table-responsive-*`, `modal-fullscreen-*-down`, `dropdown-menu-{bp}-end/start`,
+`list-group-horizontal-*`.
+
+Families with no infix: `w-*`, `h-*`, `mw-*`, `vh-*`, `position-*`, `top/bottom/start/end-*`,
+`overflow-*`, `border-*`, `rounded-*`, `shadow-*`, `fs-*`, `fw-*`, `lh-*`, `text-nowrap`,
+`text-truncate`, `text-uppercase`, `opacity-*`, `hstack`/`vstack`, `btn-group-vertical`. Write
+`d-flex flex-column flex-md-row gap-3` where a stack must become a row, and generate `w-md-auto`
+or `overflow-lg-visible` through the utilities API with `responsive: true` when a role needs it.
+That key reaches a `$utilities` entry and nothing else, so it generates `w-*` and `overflow-*`
+infixes but cannot reach a component threshold, a grid class, or a helper such as `hstack`; change
+the component's own breakpoint class instead
+([bootstrap-reference.md](bootstrap-reference.md) → Utilities API).
+
+Recipes:
+
+- **Table scroller.** `<div class="table-responsive" role="region" aria-label="Invoices"
+tabindex="0">` — the shipped class is `overflow-x: auto` only; the name and `tabindex` make it
+  keyboard-reachable. `table-responsive-{bp}` scrolls only below the breakpoint.
+- **Menus in a scroller.** A scroller clips its `dropdown-menu`. Add
+  `data-bs-popper-config='{"strategy":"fixed"}'` to the toggle, or open row actions in a
+  root-mounted dialog.
+- **Dual representations.** Render the narrow list and the wide table from one data array and one
+  selection set keyed by record id. Hide the inactive view with `d-none d-lg-block` /
+  `d-lg-none` so only one is in the accessibility tree; keep every `id` unique per view; re-sync
+  selection, sort, and filter state into whichever view is active. A view that resolves is not a
+  second store.
+- **Toolbar base.** `d-grid gap-2 d-sm-flex flex-sm-wrap` stretches controls at the base and
+  releases them from `sm`; give search its own `col-12 col-md` row.
+- **Touch.** `btn` is 38 px tall at the default size, `btn-sm` 31 px, `btn-lg` 48 px. Primary
+  mobile controls take `btn` or `btn-lg`, never a scaled-up icon inside `btn-sm`.
+- **Pager.** Keep previous/next and the current page at every width; hide other numbers with
+  `d-none d-sm-block` on the `page-item` before shrinking targets.
+- **Joined groups.** A `btn-group` bent over two rows loses its shared corners; below the width
+  where its labels fit, use a `form-select` or independent wrapping buttons.
+
 ## Expand by available space
 
 Measure the content container after rails, gutters, and panel padding. A wide viewport can contain
@@ -131,10 +181,10 @@ Keep record actions outside a clipped table wrapper when necessary. Popper place
 not guarantee escape from an overflow ancestor. Prefer a root-mounted dialog or an existing
 portal implementation over z-index escalation.
 
-Make touch targets comfortable without making text larger: prefer 44×44 CSS px for primary mobile
-controls; retain the package's 24×24 minimum for every applicable target. Enlarge the actual button
-or associated label, not merely the icon's surrounding decoration. Keep action affordances visible
-without hover. Measure effective label hit areas for native checkboxes and switches.
+Make touch targets comfortable without making text larger; take every dimension from
+[bootstrap-reference.md](bootstrap-reference.md) → WCAG 2.2 requirements for app UI, which owns the target floor and
+the mobile preference. Keep action affordances visible without hover. Measure effective label hit
+areas for native checkboxes and switches.
 
 ## Handle navigation and overlays
 
@@ -168,7 +218,7 @@ Run [Responsive task and reflow](inspection.md#responsive-task-and-reflow) and
 [Responsive interaction continuity](inspection.md#responsive-interaction-continuity). Check 320 and
 390 CSS px, one wide view, and `b−1`, `b`, `b+1` for each used breakpoint; deduplicate overlaps.
 Check narrow/short landscape, long unbroken identifiers, expanded copy, enlarged text, and the
-states actually used. Cross light/dark with the important narrow/wide states.
+states actually used. Cross every declared mode with the important narrow/wide states.
 
 Require both geometry and task evidence. A page with no horizontal overflow can still hide its
 primary action, clip a menu, or push decision fields into an undiscoverable scroller. Conversely,
@@ -182,6 +232,6 @@ viewport, device-pixel-ratio change, or emulated touch a real-device or complete
 Take upstream behavior from Bootstrap's [breakpoints](https://getbootstrap.com/docs/5.3/layout/breakpoints/),
 [grid](https://getbootstrap.com/docs/5.3/layout/grid/), [flex](https://getbootstrap.com/docs/5.3/utilities/flex/),
 [offcanvas](https://getbootstrap.com/docs/5.3/components/offcanvas/), and
-[tables](https://getbootstrap.com/docs/5.3/content/tables/). Distinguish this package's test matrix
+[tables](https://getbootstrap.com/docs/5.3/content/tables/). Distinguish this skill's test matrix
 from the requirements and two-dimensional-content exception in
 [WCAG reflow](https://www.w3.org/WAI/WCAG22/Understanding/reflow.html).

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

@@ -1,6 +1,6 @@
 # Bootstrap 5 Utilities Reference
 
-> Part of the `enterprise-bootstrap` package. Bootstrap **5.3.x** class index +
+> Part of the `enterprise-bootstrap` skill. Bootstrap **5.3.x** class index +
 > composition notes. Component markup: [components.md](components.md).
 > Theming, patterns, a11y: [bootstrap-reference.md](bootstrap-reference.md).
 
@@ -24,6 +24,8 @@
 .bg-opacity-10, .bg-opacity-25, .bg-opacity-50, .bg-opacity-75, .bg-opacity-100
 ```
 
+`bg-body`, `bg-body-secondary`, `bg-body-tertiary`, and `bg-*-subtle` adapt; `bg-{theme}`, `bg-light`, `bg-dark`, `bg-white`, `bg-black`, and `bg-gradient` are fixed. Inherited text on a fixed fill is never a pair — measure it in each declared mode (stock `bg-light` measures 1.2:1 in dark); a fixed fill takes `text-bg-*`, its component's foreground, or a `data-bs-theme` scope with `text-body` on the same element (the scope changes variables only; plain text inherits the outer mode's painted color).
+
 Prefer `bg-body`, `bg-body-secondary`, `bg-body-tertiary`, and `bg-*-subtle` for quiet surfaces; inherit text without an added foreground class. Treat original contextual `bg-*`, including `bg-light` and `bg-dark`, as non-adaptive in stock 5.3. Take ownership and exceptions from [color-modes.md](color-modes.md).
 
 ### Borders
@@ -43,7 +45,7 @@ Use adaptive border roles for quiet separation. Measure boundaries needed to ide
 
 - **`border-{1..5}` sets `border-width` on every side.** On a component that already has a border (`.card`, `.alert`) it thickens the whole box. For a one-side accent, zero first, restore one side, then widen — `card border-0 border-top border-4 border-primary` — utility source order (`border` → `border-{side}` → `border-width`) makes it hold, and the cleared sides have no border style so their width never paints.
 - Strengthen a rule that reads too faint with `border-2` on its soft color, not with a darker color; heavier width keeps the softness.
-- `border-{color}` is the fixed brand color in both modes; check an accent against a dark `bg-*-subtle` before shipping it.
+- `border-{color}` is the fixed brand color in light and dark; check an accent against a dark `bg-*-subtle` before shipping it.
 
 ### Colors (Text)
 
@@ -57,7 +59,7 @@ Use adaptive border roles for quiet separation. Measure boundaries needed to ide
 .text-opacity-25, .text-opacity-50, .text-opacity-75, .text-opacity-100
 ```
 
-Default ordinary text to inheritance. Original contextual `text-*` colors do not adapt in stock 5.3; body-role and `text-*-emphasis` colors do. `text-body-secondary` (body color at .75 alpha) clears 4.5:1 on every stock body surface in both modes; `text-body-tertiary` (.5 alpha) measures 3.0–4.1:1 and is decoration or disabled only. Neither, nor `text-white-50`, is a quiet tier on a colored fill — take the same-hue token from [color-modes.md](color-modes.md) → Text tiers. Do not add emphasis text automatically to subtle fills, and do not replace a component's native foreground without inspecting its state contract.
+Default ordinary text to inheritance. `text-{theme}`, `text-white`, `text-black`, `text-light`, `text-dark`, and their `-50` variants are fixed in light and dark; `text-body*`, `text-muted` (alias), and `text-*-emphasis` adapt — pair them with adaptive surfaces only ([color-modes.md](color-modes.md) → Fixed and adaptive classes). Classification and deprecation are separate axes: `text-muted` adapts and pairs correctly, and 5.3 deprecates it, so replace it with `text-body-secondary` on the deprecation rather than on a contrast reading. `text-body-secondary` (body color at .75 alpha) clears 4.5:1 on every stock body surface in light and dark; `text-body-tertiary` (.5 alpha) measures 3.0–4.1:1 there and is decoration or disabled only. Those readings bound stock 5.3.8 — re-measure under a declared theme or skin. Neither, nor `text-white-50`, is a quiet tier on a colored fill — take the same-hue token from [color-modes.md](color-modes.md) → Text tiers. Do not add emphasis text automatically to subtle fills, and do not replace a component's native foreground without inspecting its state contract.
 
 ### Display
 
@@ -165,13 +167,15 @@ Opacity is not a text tier: it reads as disabled and lets the surface show throu
 .translate-middle, .translate-middle-x, .translate-middle-y
 ```
 
+Responsive infixes: `d`, `flex`, `justify-content`, `align-*`, `order`, `float`, `gap`, spacing, `text-{bp}-start/center/end`, and `object-fit` ship them; `w`, `h`, `position`, `overflow`, `border`, `rounded`, `shadow`, `fs`, `fw`, `lh`, `text-nowrap`, `text-truncate`, `hstack`/`vstack` do not ([responsive-layout.md](responsive-layout.md) → Bootstrap's responsive surface). Generate a missing infix only where a `$utilities` entry owns the property; `hstack` and `vstack` are helpers with no entry, so no key makes them responsive ([bootstrap-reference.md](bootstrap-reference.md) → Utilities API).
+
 ### Shadows
 
 ```css
 .shadow-none, .shadow-sm, .shadow, .shadow-lg
 ```
 
-Three elevation steps: `shadow-sm` (`0 .125rem .25rem` at .075) for slightly raised cards and controls, `shadow` (`0 .5rem 1rem` at .15) for floating menus and a dragged item, `shadow-lg` (`0 1rem 3rem` at .175) for dialogs. Stock dropdowns, popovers, toasts, and modals all sit on `--bs-box-shadow`; lift a modal to the top step through `--bs-modal-box-shadow` ([bootstrap-reference.md](bootstrap-reference.md) → Elevation and depth). No shadow is a valid role.
+Assign the shipped elevation steps by layer role: `shadow-sm` (`0 .125rem .25rem` at .075) for slightly raised cards and controls, `shadow` (`0 .5rem 1rem` at .15) for floating menus and a dragged item, `shadow-lg` (`0 1rem 3rem` at .175) for dialogs. Stock dropdowns, popovers, toasts, and modals all sit on `--bs-box-shadow`; lift a modal to the top step through `--bs-modal-box-shadow` ([bootstrap-reference.md](bootstrap-reference.md) → Elevation and depth). No shadow is a valid role.
 
 ### Sizing
 
@@ -370,7 +374,8 @@ flex-sm-wrap` or `col-md-auto` only when the container fits. Do not default to a
 - **RTL:** use `ms-*`/`me-*`/`ps-*`/`pe-*`, `text-start`/`text-end`, and logical custom properties;
   verify the matching RTL build and the content's writing direction.
 - **Density:** drive compact/comfortable variants from shared tokens or a wrapper, not scattered
-  per-element tweaks. Dense data retains readable text and ≥24px control targets.
+  per-element tweaks. Dense data retains readable text and control targets at the floor in
+  [bootstrap-reference.md](bootstrap-reference.md) → WCAG 2.2 requirements for app UI.
 - **Boundaries and depth:** separate with spacing first, then a surface change, then a shadow, then
   a line: `bg-body-tertiary` panels instead of bordered ones; `card border-0 shadow-sm` on a page
   surface that differs from the card; `list-group-flush`, `accordion-flush`, `table-borderless`,
@@ -379,7 +384,7 @@ flex-sm-wrap` or `col-md-auto` only when the container fits. Do not default to a
   recognition survive. Assign `shadow-sm`, `shadow`, and `shadow-lg` by layer role; do not shadow
   every panel or replace the focus indicator with depth. A `bg-body` panel on `bg-body-tertiary`
   reads raised and `bg-body-secondary` inside `bg-body` reads inset — depth with no shadow, in
-  both modes.
+  light and dark.
 - **Accents and decoration:** one accent border per region (see [Borders](#borders)); the shipped
   `nav-underline` is the active-item accent. Alternate `bg-body` and `bg-body-tertiary` sections
   before decorating; a `bg-primary-subtle` band emphasizes one panel. `bg-gradient` is a