@kolkrabbi/kol-theme 0.155.0 → 0.157.0

package/kol-base-tokens.css

@@ -31,7 +31,7 @@
    *             range. Use when a step has to go past the theme's own ink:
    *             "applying a percentage of primary on top of primary won't make
    *             it darker, but applying a percentage of 000000 will."
-   *   absolute  THE THEME'S OWN near-black / near-white, FROZEN. Same colour in
+   *   absolute  THE THEME'S OWN near-black / near-white, FROZEN. Same color in
    *             light and dark — the original meaning of the word here, before
    *             the 2026-08-28 rename collapsed it into an alias of `ab`.
    *
@@ -196,3 +196,31 @@
   --kol-surface-absolute-split: var(--kol-surface-ab-split);
   --kol-surface-absolute-split-inverse: var(--kol-surface-ab-split-inverse);
 }
+
+/* ═══════════════════════════════════════════════════════════════
+ * THE CONTROL LADDER, AS TOKENS — and its TOUCH RUNG (ruling D5, apps review 2026-09-29)
+ *
+ * 22 · 26 · 32 · 40 (01-foundations/09-sizes.md). Every PINNED control height — an icon-only
+ * square, a dropdown trigger, a segmented strip, an IconFrame, a menu trigger — reads these, so the
+ * pinned boxes and the derived ones (padding + line-height + ring) move together.
+ *
+ * On a coarse pointer every text field must type at 16px or iOS zooms the page into it
+ * (OverlaySearchFieldZoomsIOS, 2026-09-01) — which put 16px text in a 26px `sm` box beside 12px
+ * buttons (the user: "bigger text than its relative height"). So on touch the WHOLE ladder takes
+ * 16 / 22 type and every box grows with it: xs 32 · sm 32 · md 36 · lg 40. One row, one height,
+ * on a phone as at a desk. The type rule lives with the controls (kol-components-atoms.css).
+ * ═══════════════════════════════════════════════════════════════ */
+:root {
+  --kol-ctl-xs: 22px;
+  --kol-ctl-sm: 26px;
+  --kol-ctl-md: 32px;
+  --kol-ctl-lg: 40px;
+}
+@media (pointer: coarse) {
+  :root {
+    --kol-ctl-xs: 32px;
+    --kol-ctl-sm: 32px;
+    --kol-ctl-md: 36px;
+    --kol-ctl-lg: 40px;
+  }
+}

package/kol-color.css

@@ -108,7 +108,7 @@
 /* SURFACE-DERIVED chrome tokens live on the THEME selectors, not `:root` alone
  * (0.52.0, nested-theme-scope) — same reason as the fg ramp in kol-opacity.css:
  * a var() resolves where the property is declared, so a themed SUBTREE that
- * flips --kol-surface-on-primary kept the root's border colour (a white 8%
+ * flips --kol-surface-on-primary kept the root's border color (a white 8%
  * hairline on white paper). The accent family stays in the :root block above
  * on purpose: kol-brand-color.css rebinds it at :root only, and a themed
  * re-declaration here would hand a branded app's nested pane the neutral

package/kol-components-atoms.css

@@ -179,7 +179,7 @@
 }
 
 /* POSITION ONLY. The control is a DS Button (quiet, icon-only) as of
- * 2026-08-01 — it brings its own box, border, colour set and states, so this
+ * 2026-08-01 — it brings its own box, border, color set and states, so this
  * class stopped painting one. It used to hand-draw a bordered square around a
  * literal `×` CHARACTER, which is why the button had no hover, no focus ring
  * and no glyph.
@@ -296,10 +296,10 @@
  * shorter, at `xs` 2px shorter. Three families (control shell, text button,
  * segmented) already agreed on 22/26/32/40, so the squares conform to them, not
  * the other way round. Glyphs are untouched — SOLO still resolves 16/20/24. */
-.kol-btn-icon.kol-btn-xs { width: 22px; height: 22px; padding: 0; }
-.kol-btn-icon.kol-btn-sm { width: 26px; height: 26px; padding: 0; }
-.kol-btn-icon.kol-btn-md { width: 32px; height: 32px; padding: 0; }
-.kol-btn-icon.kol-btn-lg { width: 40px; height: 40px; padding: 0; }
+.kol-btn-icon.kol-btn-xs { width: var(--kol-ctl-xs); height: var(--kol-ctl-xs); padding: 0; }
+.kol-btn-icon.kol-btn-sm { width: var(--kol-ctl-sm); height: var(--kol-ctl-sm); padding: 0; }
+.kol-btn-icon.kol-btn-md { width: var(--kol-ctl-md); height: var(--kol-ctl-md); padding: 0; }
+.kol-btn-icon.kol-btn-lg { width: var(--kol-ctl-lg); height: var(--kol-ctl-lg); padding: 0; }
 
 /* ─── Variants — the ground ones are TONES now (2026-09-03) ───
  * `.kol-btn-primary` · `-secondary` · `-outline` · `-ghost` · `-grey` are
@@ -332,7 +332,7 @@
  * Outside the hover guard: :active fires on touch too. */
 /* NO HOVER, NO PRESS ON A DROPDOWN TRIGGER (user ruling 2026-08-28). Every
  * variant excludes `.kol-dd-trigger` at the SOURCE. It used to be cancelled
- * downstream — kol-components-molecules re-stated each variant's rest colours
+ * downstream — kol-components-molecules re-stated each variant's rest colors
  * on :hover — and that restatement was specificity (0,4,0) against the sunken
  * tone's (0,2,0), so hovering a SUNKEN trigger repainted it in the untoned
  * fill: a light box beside two icon controls that stayed dark. */
@@ -639,7 +639,7 @@
    * element, and an element's own declaration beats anything it would inherit —
    * so the override the component's docstring promised was unreachable from any
    * ancestor. Consumers were reaching into `.slider-black` by specificity from
-   * their own stylesheets to get a track colour. `.kol-slider-dual-playhead`
+   * their own stylesheets to get a track color. `.kol-slider-dual-playhead`
    * below had it right from the start; this now matches it. */
   -webkit-appearance: none;
   appearance: none;
@@ -702,7 +702,7 @@
  * grabbed. In-mark is hollow (surface fill, ink ring), out-mark is solid, which
  * is the treatment mirror's local copy proved over months.
  *
- * The playhead colour is a TOKEN. Mirror hardcoded `#2dd4bf`, which is the
+ * The playhead color is a TOKEN. Mirror hardcoded `#2dd4bf`, which is the
  * defect this move exists to end: a literal cannot follow a theme or a
  * consumer's brand. `--kol-slider-playhead` defaults to the accent and is
  * overridable per instance. */
@@ -1132,6 +1132,17 @@ a:hover .icon-hover,
   border: 1px solid var(--kol-tone-border, transparent);
 }
 
+/* THE KOL RING ON AN ACTIONABLE FRAME (2026-09-30 — the header's icon buttons drew the browser's
+ * blue ring: IconFrame renders a bare <button>/<a>, not `.kol-btn`, so it had no focus rule). The
+ * same ring as every Button: `--kol-focus-ring`, keyboard focus only. */
+a.kol-icon-frame:focus-visible,
+button.kol-icon-frame:focus-visible {
+  outline: 2px solid var(--kol-focus-ring);
+  outline-offset: 2px;
+}
+a.kol-icon-frame:focus:not(:focus-visible),
+button.kol-icon-frame:focus:not(:focus-visible) { outline: none; }
+
 /* An ACTIONABLE frame — `onClick`/`href` (user ruling 2026-08-01: *"you dont
  * use a button… you use the ICON COMPONENT… it has no interactive states"*).
  *
@@ -1170,10 +1181,10 @@ a.kol-icon-frame {
 /* pinned squares — the box never moves with glyph size (user law 2026-07-28),
  * on the size's HEIGHT so a frame lines up with the Button, Input and Dropdown
  * beside it (user ruling 2026-09-02 — see .kol-btn-icon above). 22/26/32/40. */
-.kol-icon-frame-xs { width: 22px; height: 22px; }
-.kol-icon-frame-sm { width: 26px; height: 26px; }
-.kol-icon-frame-md { width: 32px; height: 32px; }
-.kol-icon-frame-lg { width: 40px; height: 40px; }
+.kol-icon-frame-xs { width: var(--kol-ctl-xs); height: var(--kol-ctl-xs); }
+.kol-icon-frame-sm { width: var(--kol-ctl-sm); height: var(--kol-ctl-sm); }
+.kol-icon-frame-md { width: var(--kol-ctl-md); height: var(--kol-ctl-md); }
+.kol-icon-frame-lg { width: var(--kol-ctl-lg); height: var(--kol-ctl-lg); }
 
 /* `.kol-icon-frame-{primary,secondary,accent,outline,ghost,nav,grey,danger}` — tone aliases, see TONE */
 .kol-icon-frame-plate {
@@ -1199,7 +1210,7 @@ a.kol-icon-frame {
  * at rest, shown on hover of the tile (`.kol-media-tile`) or on focus, over
  * full-bleed artwork. Declared AFTER the variants so it wins in-layer — the
  * consumer no longer restates bg-fg-inverse-64 / border-fg-96 beside the
- * variant. Absolute colours: it sits on artwork, not on the theme. NO
+ * variant. Absolute colors: it sits on artwork, not on the theme. NO
  * backdrop-filter — it flips the tile onto a composited layer on hover and the
  * artwork's saturation jumps (Chrome). */
 .kol-play-disc {
@@ -1310,6 +1321,15 @@ a.kol-icon-frame {
  * own; it exists so the floor below keys on every body plan the DS ships,
  * including the chrome-less one. */
 @media (pointer: coarse) {
+  /* THE TOUCH RUNG (D5, 2026-09-29 — see kol-base-tokens.css): every text control types 16 / 22 on
+   * touch, so a derived box grows exactly as the pinned tokens do — xs/sm 4+4+22+2 = 32, md
+   * 6+6+22+2 = 36, lg 40. Two classes, so it outranks the size's own kol-mono-* class. */
+  .kol-btn.kol-btn-xs, .kol-btn.kol-btn-sm, .kol-btn.kol-btn-md, .kol-btn.kol-btn-lg,
+  .kol-control.kol-control-xs, .kol-control.kol-control-sm, .kol-control.kol-control-md, .kol-control.kol-control-lg,
+  .kol-seg .kol-seg-cell, .kol-menu-btn.kol-menu-btn {
+    font-size: 16px;
+    line-height: 22px;
+  }
   .kol-control input,
   .kol-control--bare input,
   .kol-expand input {

package/kol-components-controls.css

@@ -11,7 +11,7 @@
  * LEDs are the set's own emitters, deliberately NOT `--kol-palette-*` (user
  * ruling: "leds and the colors should stay, they are unique to this set").
  *
- * `JackSocket` appends a hex alpha to its role colour for the glow, so the two
+ * `JackSocket` appends a hex alpha to its role color for the glow, so the two
  * jack roles must resolve to HEX on :root — a consumer overriding them binds a
  * hex, never a var().
  * --------------------------------------------------------------------------- */

package/kol-components-foundry.css

@@ -3,7 +3,7 @@
  * =============================================================================
  * Component CSS for the type-specimen apparatus. Recreated 2026-07-09 when the
  * type-specimen kit + live-font effects (TypeSample, TypeSpecCard, TextPressure,
- * ColorLoader) moved from @kolkrabbi/kol-component into @kolkrabbi/kol-foundry;
+ * IntroLoader, then ColorLoader) moved from @kolkrabbi/kol-component into @kolkrabbi/kol-foundry;
  * their rules moved here from kol-components-atoms.css with them. CSS always
  * lives in kol-theme — the foundry package ships JS only.
  *
@@ -32,7 +32,7 @@
    Everything else (layout, sizing, weight) is Tailwind utilities / inline vars
    on the JSX. Stroke color comes in through the inline `--kol-text-pressure-
    stroke` custom property (defaulted here so the rule is standalone-safe).
-   ColorLoader composes TextPressure and needs no rules of its own. */
+   IntroLoader composes TextPressure and needs no rules of its own. */
 .kol-text-pressure--stroke .kol-text-pressure-char {
   position: relative;
 }

package/kol-components-molecules.css

@@ -59,15 +59,15 @@
   gap: 0;
   position: relative;
 }
-.kol-dd-trigger.kol-btn-xs { height: 22px; padding-block: 0; }
-.kol-dd-trigger.kol-btn-sm { height: 26px; padding-block: 0; }
-.kol-dd-trigger.kol-btn-md { height: 32px; padding-block: 0; }
-.kol-dd-trigger.kol-btn-lg { height: 40px; padding-block: 0; }
+.kol-dd-trigger.kol-btn-xs { height: var(--kol-ctl-xs); padding-block: 0; }
+.kol-dd-trigger.kol-btn-sm { height: var(--kol-ctl-sm); padding-block: 0; }
+.kol-dd-trigger.kol-btn-md { height: var(--kol-ctl-md); padding-block: 0; }
+.kol-dd-trigger.kol-btn-lg { height: var(--kol-ctl-lg); padding-block: 0; }
 /* REST AND OPEN ARE THE ONLY STATES (2026-07-15, re-called 2026-08-09 and
  * 2026-08-28). No :hover or :active rules for the trigger live here any more —
  * kol-components-atoms.css excludes `.kol-dd-trigger` from every variant's
  * hover and press instead. The pin-backs that stood here restated each
- * variant's REST colours to cancel the button's, and that failed twice: one
+ * variant's REST colors to cancel the button's, and that failed twice: one
  * went stale when `.kol-btn-outline`'s rest border moved (2026-08-26), and a
  * pin-back out-specifies the tone, so a sunken trigger hovered into the
  * untoned fill. "No state" is an absence now, not a mirror. */
@@ -440,9 +440,9 @@
 }
 .kol-tag-dismiss:hover { opacity: 1; }
 
-/* The per-colour tag palette was DELETED 2026-08-01 with the `color` prop.
+/* The per-color tag palette was DELETED 2026-08-01 with the `color` prop.
  * A chip's look is its variant now (kol-tag--primary|secondary|inverse), the
- * same vocabulary Pill and Button use. Tag colour BY TAXONOMY returns later
+ * same vocabulary Pill and Button use. Tag color BY TAXONOMY returns later
  * as its own decision, layered ON the variants rather than replacing them. */
 
 .control-unified-inverse {
@@ -581,14 +581,14 @@
    * forced the pin). Same principle as .kol-btn-icon's pinned square:
    * the box never moves. */
   box-sizing: border-box;
-  height: 32px; /* md — .kol-btn-md */
+  height: var(--kol-ctl-md); /* md — .kol-btn-md */
 }
 
 /* Sizes mirror .kol-btn-{sm,md,lg} exactly: pinned height above + cell
  * padding per size (below) + mono type (12/14/16) applied in JSX. */
-.kol-seg--xs { height: 22px; }
-.kol-seg--sm { height: 26px; }
-.kol-seg--lg { height: 40px; }
+.kol-seg--xs { height: var(--kol-ctl-xs); }
+.kol-seg--sm { height: var(--kol-ctl-sm); }
+.kol-seg--lg { height: var(--kol-ctl-lg); }
 .kol-seg--xs .kol-seg-cell { padding: 4px 8px; }
 .kol-seg--sm .kol-seg-cell { padding: 4px 12px; }
 .kol-seg--lg .kol-seg-cell { padding: 8px 20px; }
@@ -632,7 +632,7 @@
 
 /* Reads the quiet ring token so the segmented strip is part of the system-wide
  * focus off switch (FocusRingsInConsumers, 2026-08-15). This is the LAST
- * hardcoded focus colour in the theme — with it, `--kol-focus-ring` +
+ * hardcoded focus color in the theme — with it, `--kol-focus-ring` +
  * `--kol-focus-ring-quiet` set to transparent turns every ring off, which is
  * the whole point of the pair. Offset stays -2px: the cell's own inset, not
  * the rails' -1px. */
@@ -1043,7 +1043,7 @@
   /* the FALLBACK is not optional. A variant with no frame publishes no
    * `--kol-row-border`, and `border-color: var(--undefined)` is invalid at
    * computed-value time — it resolves to `unset`, which INHERITS, which is
-   * currentColor, which is the text colour. That is how `default`'s hairline
+   * currentColor, which is the text color. That is how `default`'s hairline
    * divider rendered as a solid white rule. */
   border-color: var(--kol-row-border, transparent);
   transition: background-color 300ms var(--kol-ease-house),
@@ -1238,7 +1238,7 @@
   }
 }
 
-/* The card's rest colours, for the same reason as .kol-row — an inline
+/* The card's rest colors, for the same reason as .kol-row — an inline
  * background/borderColor outranks .kol-content-hover:hover, so the step
  * silently never rendered.
  * `background-clip: padding-box` (CardCornerLeak, kol-monitor 2026-08-28,
@@ -1612,7 +1612,7 @@
 
 /* THE QUICKTIME BAR (PlaybackBarAndAudioSheet, kol-r2b2 2026-08-27 — ruled
  * against the reference). White glyphs on the frosted strip whatever the theme:
- * the ghost IconFrame paints --kol-oq-48, a theme colour, and the bar sits on
+ * the ghost IconFrame paints --kol-oq-48, a theme color, and the bar sits on
  * media, not on the theme. The scrubber is a native range — a 2px track at 40 %
  * white, a tall 4 × 28 white pill for the knob — pseudo-elements, so CSS. */
 .kol-playback-bar .kol-icon-frame { color: var(--kol-color-ab-white); opacity: 0.8; }
@@ -1850,7 +1850,7 @@
  * layer (user: *"we are talking about components, wash affects background"*):
  * a control has no business reproducing a page-level film, and portalling
  * proved it — `.kol-dd-panel` renders at document.body, could not inherit the
- * property, and drew a different colour from its own trigger. Reverted.
+ * property, and drew a different color from its own trigger. Reverted.
  * The collision is a PAGE/token question and belongs there.
  *
  * THE SUNKEN TONE IS `surface-tertiary`, NOT `oq-inverse-96` (measured on
@@ -1882,7 +1882,7 @@
  * `.kol-control` and `.kol-dd-panel` each re-invented it with paints that
  * drifted (`primary` painting `surface-secondary`; the panel's outline
  * hardcoding `surface-primary`, so a dropdown opened over any other ground
- * changed the colour under it).
+ * changed the color under it).
  *
  * SIX TONES, ONE MECHANISM. A tone is a bundle of `--kol-tone-*` custom
  * properties — rest, hover, press, pressed, and what a FLOATING surface of
@@ -1975,9 +1975,9 @@
  * 2026-09-03; user: "I told you I wanted primary surface as a tone … that tone
  * should be called secondary. What is currently secondary should be called
  * inverted."). 0.134.0 lifted the name from Button's `secondary` VARIANT, which
- * was already an inverse, and the page's own colour had no tone at all. The
+ * was already an inverse, and the page's own color had no tone at all. The
  * variant keeps its pixels — it aliases `inverted` below — only the tone word
- * moved. Hover / press are primary's rungs over the page colour. */
+ * moved. Hover / press are primary's rungs over the page color. */
 .kol-tone-secondary {
   --kol-tone-bg: var(--kol-surface-primary);
   --kol-tone-image: none;
@@ -1996,7 +1996,7 @@
   --kol-tone-panel-border-w: 0;
   --kol-tone-panel-border: transparent;
 }
-/* `inverted` — the text colour as fill: Button's / IconFrame's `secondary`
+/* `inverted` — the text color as fill: Button's / IconFrame's `secondary`
  * variant and the panel's `--secondary`, under the name the user gave it.
  * (`inverse` is NOT this: it is sunken's alias from 0.117.0, still on one
  * kol-website call, and stays that until it is dropped — the two words were
@@ -2201,7 +2201,7 @@
  * vanishes on secondary's near-black well. It takes SUNKEN'S RUNG, `fg-08` (the 2026-08-28 ruling, down
  * from fg-16): the tones' own `--kol-tone-active-bg` was tried first and secondary's `oq-16` read
  * "too bright" (user, same day) — that rung is a button's press, not a chip in a well. `inverted` is
- * the exception: its well is the ink colour, where an ink wash disappears, so it keeps its own active
+ * the exception: its well is the ink color, where an ink wash disappears, so it keeps its own active
  * paint. No tone = the fixed chip, as before. */
 :is(.kol-tone-primary, .kol-tone-secondary, .kol-tone-outline, .kol-tone-ghost, .kol-tone-grey) .kol-view-toggle button[aria-pressed="true"],
 .kol-view-toggle:is(.kol-tone-primary, .kol-tone-secondary, .kol-tone-outline, .kol-tone-ghost, .kol-tone-grey) button[aria-pressed="true"] {

package/kol-components-organisms.css

@@ -166,7 +166,7 @@
 .kol-table-token {
   /* THE LOOK LIVES IN ONE PLACE (2026-08-09) — the shared chip recipe in
    * kol-type-roles.css (`.kol-prose code, .kol-doc-code-inline,
-   * .kol-table-token`): font, size, weight, colour, fill, padding, radius.
+   * .kol-table-token`): font, size, weight, color, fill, padding, radius.
    * This rule keeps only the CELL mechanics the prose chip must not have. */
   display: inline-flex;
   align-items: center;

package/kol-components-shell.css

@@ -41,7 +41,9 @@
 .kol-shell-page {
   display: flex;
   flex-direction: column;
-  min-height: 100vh;
+  /* less the phone bar (`--kol-shell-bar-h`, set by AppShell `touch="bar"`): the content column
+   * already pads for it, so a full-height page ends above the bar, not under it (2026-09-29) */
+  min-height: calc(100vh - var(--kol-shell-bar-h, 0px));
   padding: var(--kol-shell-page-pad);
   /* PageShellScrollbarGutter (kol-monitor 2026-08-28): in `fixed` mode this
    * element IS the scroll container and reserves the gutter; in `scroll` mode
@@ -58,7 +60,7 @@
 }
 /* `mode="fixed"` — the element is the scroll container; pair with a
  * `flex:1 overflow:auto` body (the settings idiom) */
-.kol-shell-page--fixed { min-height: 0; height: 100vh; overflow: hidden; }
+.kol-shell-page--fixed { min-height: 0; height: calc(100vh - var(--kol-shell-bar-h, 0px)); overflow: hidden; }
 /* `width="capped"` — the SITE tier: the framework container ladder, centred.
  * `bleed` (the default, unclassed) fills the window — the app tier. The one
  * real difference between a shell page and a `.kol-page`, and it is a prop
@@ -202,6 +204,34 @@
   background: color-mix(in srgb, var(--kol-color-ab-black) 48%, transparent);
 }
 
+/* ── THE PHONE BAR (AppShell `touch="bar"`, apps review 2026-09-29) — the rail as kol-component's
+ * MobileTabBar below 768; past five destinations the fifth tab is More, and More is this sheet,
+ * floated just above the bar. The scrim sits under the bar, so More stays tappable to close. */
+.kol-phone-nav-scrim {
+  position: fixed;
+  inset: 0;
+  z-index: calc(var(--kol-z-sticky) - 1);
+  border: 0;
+  padding: 0;
+  cursor: default;
+}
+.kol-phone-nav-more {
+  position: fixed;
+  left: 12px;
+  right: 12px;
+  bottom: calc(56px + env(safe-area-inset-bottom, 0px) + 8px);
+  z-index: var(--kol-z-sticky);
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  max-height: 60dvh;
+  overflow-y: auto;
+  padding: 8px;
+  border-radius: var(--kol-radius-sm);
+  background: var(--kol-surface-primary);
+  border: 1px solid var(--kol-oq-08);
+}
+
 /* ── THE TAP OPENER IS THE LINE (ShellRailCollapsedWithTapOpen, kol-mirror
  * 2026-09-01; corrected by RailGrabTapIsALine, kol-monitor 2026-09-02 — user:
  * "it was a thicker line" · "who decided it should be a chevron?"). `touch=

package/kol-components-styleguide.css

@@ -2,14 +2,14 @@
  * KOL components — style-guide / brand-guide set
  * =============================================================================
  * Chrome for the @kolkrabbi/kol-styleguide component set: the combination lab,
- * colour anatomy, mood tiles, logo construction/scaling, type blocks, asset
+ * color anatomy, mood tiles, logo construction/scaling, type blocks, asset
  * tables. Raided from the monorepo apps/brand styleguide (2026-07).
  *
  * Layer: ships unlayered; kol-theme.css assigns the layer at import —
  *   @import "./kol-components-styleguide.css" layer(components);
  *
- * KOL conformance: resting type + colour live INLINE on the JSX (kol-* type
- * classes + kol colour utilities); only structural props Tailwind can't express
+ * KOL conformance: resting type + color live INLINE on the JSX (kol-* type
+ * classes + kol color utilities); only structural props Tailwind can't express
  * (grid templates, absolute positioning, transitions, pseudo-elements) live here.
  *
  * Rules are consolidated here as each component lands. Some were relocated from

package/kol-components-workshop.css

@@ -269,7 +269,7 @@
  *   SECTION   the right rail's rows (same PAGE row idiom)
  *
  * CHAPTER and PAGE were indistinguishable: both `kol-mono-14`, and the only
- * difference was `.text-default` — which is a COLOUR utility, not type. A parent
+ * difference was `.text-default` — which is a COLOR utility, not type. A parent
  * and its children reading identically is not a hierarchy.
  *
  * The weight is the difference, and it stays INSIDE the one ramp: 700 here
@@ -285,7 +285,7 @@
   /* MEDIUM + SHOUT (user ruling 2026-08-01, the settled pair). 700 was tried
    * for one turn and reverted: with the page rows at Thin 100 the weight gap
    * already carries, so the CHAPTER buys its prominence from INK instead —
-   * `shout` (88) against the rows' `fg-64`. Weight and colour each doing half
+   * `shout` (88) against the rows' `fg-64`. Weight and color each doing half
    * the work beats either doing all of it, and 500 keeps the chapter inside
    * the ramp's normal range. */
   font-weight: 500;
@@ -371,7 +371,7 @@
  * locked the TYPE class and nothing locked the stack: the eyebrow-box failure,
  * one rung down.
  *
- * Layout, colour, hover, transition and focus live HERE now. Markup comes from
+ * Layout, color, hover, transition and focus live HERE now. Markup comes from
  * `RailRow`; `validate:rails` R4 fails a hand-written `shell-nav-item`.
  *
  * WEIGHT IS THIN (user ruling 2026-08-01, asked five times).
@@ -443,8 +443,8 @@
  * 2026-08-01, twice). The first attempt put `text-emphasis` on the row from the
  * JSX and nothing happened: `.text-emphasis` and `.shell-nav-item` are both
  * single-class selectors in the same cascade layer, and this file loads AFTER
- * kol-opacity.css, so the rail's resting `--kol-fg-64` won every time. A colour
- * utility cannot brighten a row whose own rule sets colour — the modifier has
+ * kol-opacity.css, so the rail's resting `--kol-fg-64` won every time. A color
+ * utility cannot brighten a row whose own rule sets color — the modifier has
  * to live beside that rule. Same file, same specificity, declared later. */
 .shell-nav-item--own {
   color: var(--kol-fg-emphasis);

package/kol-design-tokens.css

@@ -107,7 +107,7 @@
   /* Border radius (4px increments) */
   --kol-radius-none: 0;
   /* xs (2026-08-01) — the hairline rung. Claimed out loud: 2px had SIX
-     hand-written `rounded-[2px]` call sites (swatches, colour rows, the
+     hand-written `rounded-[2px]` call sites (swatches, color rows, the
      glass panel) and no token, so the scale's 4px floor was simply being
      ignored rather than followed. A value used six times is a rung. */
   --kol-radius-xs: 2px;

package/kol-opacity.css

@@ -491,7 +491,7 @@
  * `mute` (32%) was retired 2026-04-30 with zero consumers and does not return.
  *
  * Tokens chain through the fg ramp — single source of truth is preserved;
- * descriptors are aliases, never their own colour values.
+ * descriptors are aliases, never their own color values.
  * ============================================================================== */
 
 /* Theme selectors, same reason as the ramp above — the roles chain through
@@ -509,7 +509,7 @@
   --kol-fg-emphasis:  var(--kol-surface-on-primary);
 
   /* DEPRECATED ALIAS — `default` is the old name for `body`, kept pointing at
-   * the same stop so a consumer mid-sweep cannot render colourless. Remove once
+   * the same stop so a consumer mid-sweep cannot render colorless. Remove once
    * no source references it. */
   --kol-fg-default:   var(--kol-fg-body);
 }

package/kol-type-roles.css

@@ -115,7 +115,7 @@
  *                          only shares the word "token".
  *
  * The two chips had drifted on every value that makes them look alike: fg-04
- * against fg-08, radius-sm against a bare literal, no colour against fg-80.
+ * against fg-08, radius-sm against a bare literal, no color against fg-80.
  * Same concept, two spellings — the `.text-fg-*` vs `--kol-fg-*` lesson again.
  * ONE RECIPE NOW, size and padding included (user ruling 2026-08-09: "it's
  * basically the same style, so why are they so different"). The earlier
@@ -276,7 +276,7 @@
  * uppercase · fg-64; the slot is `eyebrow` on ContentText and SectionText.
  * `kol-card-kicker` is the alias below, on the retirement ledger. */
 /* NO ink on the role (ShellHomeSystem, 2026-08-27): type roles set type, not
- * colour — a baked fg-64 outranked every ink utility beside it. Consumers that
+ * color — a baked fg-64 outranked every ink utility beside it. Consumers that
  * relied on the 64 pass `text-body`; the `kol-card-kicker` alias keeps it. */
 .kol-eyebrow {
   font-family: var(--kol-font-family-mono);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kolkrabbi/kol-theme",
-  "version": "0.155.0",
+  "version": "0.157.0",
   "description": "KOL (Kolkrabbi) design-system tokens + base CSS — brand-neutral. The canonical token/cascade layer every other KOL package and consumer builds on.",
   "license": "MIT",
   "type": "module",