@charcuterie/ui 4.2.0 → 4.3.0

package/dist/ActionTiles/ActionTiles.d.ts

@@ -9,8 +9,8 @@ export type ActionTileItem = {
      * set — a destination that is red everywhere else in the app, a
      * pair that must not drift apart when a third tile is inserted
      * between them. An overridden tile keeps its hue and the rest go
-     * on walking the palette in order, so naming one does not force
-     * naming all of them.
+     * on walking `CATEGORICAL_SEQUENCE` from their own positions, so
+     * naming one does not force naming all of them.
      *
      * Ignored when the set is `accent="none"`.
      */
@@ -136,8 +136,10 @@ export type ActionTilesProps = {
  * accent-edge pseudo-element so a tile and a card on the same page
  * are the same bar rather than two that nearly match. Its icon takes
  * the same hue, and the box hovers in it too. The hue comes from the
- * ten-wide categorical palette, taken **in order**, which is why a
- * set of eight needs no colour props at all. See
+ * ten-wide categorical palette, walked in `CATEGORICAL_SEQUENCE`
+ * rather than 1..10 — the ring is hue-ordered for the swatch
+ * picker's sake, so taking it in order would hand a two-tile set
+ * red and orange. A set of eight needs no colour props at all. See
  * [the tile paint record](../../../../docs/decisions/2026-09-02-an-action-tile-is-coloured-and-the-icon-sits-beside-the-name.md)
  * for the four other paints that were drawn and rejected.
  *

package/dist/ActionTiles/ActionTiles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ActionTiles.d.ts","sourceRoot":"","sources":["../../src/ActionTiles/ActionTiles.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,gBAAgB,EAChB,WAAW,EACZ,MAAM,qBAAqB,CAAA;AAK5B,OAAO,KAAK,EAAiB,SAAS,EAAE,MAAM,OAAO,CAAA;AAwBrD,MAAM,MAAM,cAAc,GAAG;IAC3B;;;;;;;;;;;;OAYG;IACH,WAAW,CAAC,EAAE,gBAAgB,CAAA;IAC9B;;;;;OAKG;IACH,IAAI,CAAC,EAAE,SAAS,CAAA;IAChB;;;;;;;;;OASG;IACH,IAAI,CAAC,EAAE,MAAM,CAAA;IACb;;;;;;;;;;;OAWG;IACH,IAAI,CAAC,EAAE,SAAS,CAAA;IAChB,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,uEAAuE;IACvE,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,KAAK,EAAE,SAAS,CAAA;IAChB;;;;;;OAMG;IACH,KAAK,EAAE,MAAM,CAAA;CACd,CAAA;AAED;;;;;;;;GAQG;AACH,MAAM,MAAM,iBAAiB,GAAG,MAAM,GAAG,MAAM,CAAA;AAE/C,MAAM,MAAM,gBAAgB,GAAG;IAC7B;;;OAGG;IACH,MAAM,CAAC,EAAE,iBAAiB,CAAA;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,KAAK,EAAE,SAAS,cAAc,EAAE,CAAA;IAChC,2CAA2C;IAC3C,KAAK,EAAE,MAAM,CAAA;IACb;;;;;OAKG;IACH,iBAAiB,CAAC,EAAE,MAAM,CAAA;IAC1B,8CAA8C;IAC9C,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IAClC,8CAA8C;IAC9C,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,IAAI,CAAC,EAAE,WAAW,CAAA;CACnB,CAAA;AA4CD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4EG;AACH,eAAO,MAAM,WAAW,GAAI,sFASzB,gBAAgB,KAAG,SAwMrB,CAAA"}
+{"version":3,"file":"ActionTiles.d.ts","sourceRoot":"","sources":["../../src/ActionTiles/ActionTiles.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,gBAAgB,EAChB,WAAW,EACZ,MAAM,qBAAqB,CAAA;AAK5B,OAAO,KAAK,EAAiB,SAAS,EAAE,MAAM,OAAO,CAAA;AAwBrD,MAAM,MAAM,cAAc,GAAG;IAC3B;;;;;;;;;;;;OAYG;IACH,WAAW,CAAC,EAAE,gBAAgB,CAAA;IAC9B;;;;;OAKG;IACH,IAAI,CAAC,EAAE,SAAS,CAAA;IAChB;;;;;;;;;OASG;IACH,IAAI,CAAC,EAAE,MAAM,CAAA;IACb;;;;;;;;;;;OAWG;IACH,IAAI,CAAC,EAAE,SAAS,CAAA;IAChB,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,uEAAuE;IACvE,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,KAAK,EAAE,SAAS,CAAA;IAChB;;;;;;OAMG;IACH,KAAK,EAAE,MAAM,CAAA;CACd,CAAA;AAED;;;;;;;;GAQG;AACH,MAAM,MAAM,iBAAiB,GAAG,MAAM,GAAG,MAAM,CAAA;AAE/C,MAAM,MAAM,gBAAgB,GAAG;IAC7B;;;OAGG;IACH,MAAM,CAAC,EAAE,iBAAiB,CAAA;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,KAAK,EAAE,SAAS,cAAc,EAAE,CAAA;IAChC,2CAA2C;IAC3C,KAAK,EAAE,MAAM,CAAA;IACb;;;;;OAKG;IACH,iBAAiB,CAAC,EAAE,MAAM,CAAA;IAC1B,8CAA8C;IAC9C,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IAClC,8CAA8C;IAC9C,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,IAAI,CAAC,EAAE,WAAW,CAAA;CACnB,CAAA;AAiDD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8EG;AACH,eAAO,MAAM,WAAW,GAAI,sFASzB,gBAAgB,KAAG,SAwMrB,CAAA"}

package/dist/ActionTiles/ActionTiles.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { CATEGORICAL_INDEX_COUNT, CATEGORICAL_INDEXES, } from "@charcuterie/tokens";
+import { CATEGORICAL_INDEX_COUNT, CATEGORICAL_SEQUENCE, } from "@charcuterie/tokens";
 import { getAccentEdgeClassName } from "../Card/cardAccentEdge.js";
 import { CATEGORICAL_CONTENT_CLASS, CATEGORICAL_HOVER_BORDER_CLASS, CATEGORICAL_HOVER_CLASS, } from "../categoricalStyles.js";
 import { FOCUS_RING_CLASS } from "../intentStyles.js";
@@ -38,9 +38,16 @@ const STACK_GAP_CLASS = {
  * two-tile set the same colour twice. A tile set is short, ordered,
  * and written out in the source; the eye reads it as a row, so the
  * palette is walked as one.
+ *
+ * `CATEGORICAL_SEQUENCE`, not `CATEGORICAL_INDEXES`. The ring is
+ * hue-ordered for the swatch picker's sake, so walking it in order
+ * hands a two-tile set the two hardest colours in the family to
+ * tell apart — 34 degrees, the tightest pair the palette has. The
+ * sequence visits the same ten in an order that keeps every
+ * neighbour 105 degrees or more away.
  */
 const getTileCategorical = (item, position) => item.categorical ??
-    CATEGORICAL_INDEXES[position % CATEGORICAL_INDEX_COUNT];
+    CATEGORICAL_SEQUENCE[position % CATEGORICAL_INDEX_COUNT];
 /**
  * A set of ACTIONS drawn as tiles — a bordered card carrying a
  * colour bar, an icon beside its name, and a line of help, in a
@@ -85,8 +92,10 @@ const getTileCategorical = (item, position) => item.categorical ??
  * accent-edge pseudo-element so a tile and a card on the same page
  * are the same bar rather than two that nearly match. Its icon takes
  * the same hue, and the box hovers in it too. The hue comes from the
- * ten-wide categorical palette, taken **in order**, which is why a
- * set of eight needs no colour props at all. See
+ * ten-wide categorical palette, walked in `CATEGORICAL_SEQUENCE`
+ * rather than 1..10 — the ring is hue-ordered for the swatch
+ * picker's sake, so taking it in order would hand a two-tile set
+ * red and orange. A set of eight needs no colour props at all. See
  * [the tile paint record](../../../../docs/decisions/2026-09-02-an-action-tile-is-coloured-and-the-icon-sits-beside-the-name.md)
  * for the four other paints that were drawn and rejected.
  *

package/dist/ActionTiles/ActionTiles.js.map

@@ -1 +1 @@
-{"version":3,"file":"ActionTiles.js","sourceRoot":"","sources":["../../src/ActionTiles/ActionTiles.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"ActionTiles.js","sourceRoot":"","sources":["../../src/ActionTiles/ActionTiles.tsx"],"names":[],"mappings":"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"}

package/dist/Main/Main.d.ts

@@ -80,6 +80,39 @@ export type MainProps = ComponentPropsWithRef<"main"> & {
  *    an app's own fixed chrome belongs in `Shell`, beside `Main`
  *    rather than in it.
  *
+ * ## `relative` — the scrollport has to be the containing block
+ *
+ * `<main>` is the page's only vertical scrollport, so everything
+ * in it is supposed to scroll *inside* it. An absolutely
+ * positioned descendant does not, unless this element is its
+ * containing block: with `position: static` here, the nearest
+ * positioned ancestor is `Shell`, which is **outside** the
+ * scrollport. The box then resolves against `Shell`, `<main>`'s
+ * `overflow-y` has no authority over it, and its static position —
+ * a couple of thousand pixels down a long document — becomes
+ * scrollable overflow on `documentElement`. The page grows to
+ * reach it and the reader gets a **second scrollbar** beside the
+ * one `<main>` already has.
+ *
+ * The box does not have to be exotic. Tailwind's `sr-only` is
+ * `position: absolute`, so the visually hidden
+ * `<span>(opens in a new tab)</span>` on one link in a document
+ * footer is enough. Measured on Folio at 1440x900: `<main>` was
+ * 835px tall and `document.documentElement.scrollHeight` read
+ * 2085, which is exactly where that span sat.
+ *
+ * `overflow-x: hidden` comes with it and is not decoration.
+ * `relative` moves every absolutely positioned descendant's
+ * containing block from `Shell` to here, which also moves what
+ * clips them **sideways**: `Shell`'s `overflow-x: clip` no longer
+ * reaches them, so a drawer parked at `translateX(110%)` inside
+ * `Main` would draw a horizontal scrollbar on the scrollport
+ * instead of being clipped. `hidden` rather than `clip` because
+ * this element already scrolls on the other axis — a `clip` beside
+ * an `auto` computes to `hidden` anyway, and writing what the
+ * browser will use is the honest spelling. `Shell`'s note on the
+ * clip explains the other half.
+ *
  * ## It remembers where each history entry was scrolled to
  *
  * `Shell` gives this element the page's only vertical scrollport,

package/dist/Main/Main.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Main.d.ts","sourceRoot":"","sources":["../../src/Main/Main.tsx"],"names":[],"mappings":"AAKA,OAAO,EACL,KAAK,qBAAqB,EAC1B,KAAK,SAAS,EAGf,MAAM,OAAO,CAAA;AAEd,OAAO,EACL,KAAK,YAAY,EAGlB,MAAM,0BAA0B,CAAA;AAMjC,MAAM,MAAM,SAAS,GAAG,qBAAqB,CAAC,MAAM,CAAC,GAAG;IACtD,YAAY,CAAC,EAAE,YAAY,CAAA;CAC5B,CAAA;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA0IG;AACH,eAAO,MAAM,IAAI,GAAI,8DAOlB,SAAS,KAAG,SA0Dd,CAAA"}
+{"version":3,"file":"Main.d.ts","sourceRoot":"","sources":["../../src/Main/Main.tsx"],"names":[],"mappings":"AAKA,OAAO,EACL,KAAK,qBAAqB,EAC1B,KAAK,SAAS,EAGf,MAAM,OAAO,CAAA;AAEd,OAAO,EACL,KAAK,YAAY,EAGlB,MAAM,0BAA0B,CAAA;AAMjC,MAAM,MAAM,SAAS,GAAG,qBAAqB,CAAC,MAAM,CAAC,GAAG;IACtD,YAAY,CAAC,EAAE,YAAY,CAAA;CAC5B,CAAA;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2KG;AACH,eAAO,MAAM,IAAI,GAAI,8DAOlB,SAAS,KAAG,SA0Dd,CAAA"}

package/dist/Main/Main.js

@@ -83,6 +83,39 @@ import { useScrollMemory } from "./useScrollMemory.js";
  *    an app's own fixed chrome belongs in `Shell`, beside `Main`
  *    rather than in it.
  *
+ * ## `relative` — the scrollport has to be the containing block
+ *
+ * `<main>` is the page's only vertical scrollport, so everything
+ * in it is supposed to scroll *inside* it. An absolutely
+ * positioned descendant does not, unless this element is its
+ * containing block: with `position: static` here, the nearest
+ * positioned ancestor is `Shell`, which is **outside** the
+ * scrollport. The box then resolves against `Shell`, `<main>`'s
+ * `overflow-y` has no authority over it, and its static position —
+ * a couple of thousand pixels down a long document — becomes
+ * scrollable overflow on `documentElement`. The page grows to
+ * reach it and the reader gets a **second scrollbar** beside the
+ * one `<main>` already has.
+ *
+ * The box does not have to be exotic. Tailwind's `sr-only` is
+ * `position: absolute`, so the visually hidden
+ * `<span>(opens in a new tab)</span>` on one link in a document
+ * footer is enough. Measured on Folio at 1440x900: `<main>` was
+ * 835px tall and `document.documentElement.scrollHeight` read
+ * 2085, which is exactly where that span sat.
+ *
+ * `overflow-x: hidden` comes with it and is not decoration.
+ * `relative` moves every absolutely positioned descendant's
+ * containing block from `Shell` to here, which also moves what
+ * clips them **sideways**: `Shell`'s `overflow-x: clip` no longer
+ * reaches them, so a drawer parked at `translateX(110%)` inside
+ * `Main` would draw a horizontal scrollbar on the scrollport
+ * instead of being clipped. `hidden` rather than `clip` because
+ * this element already scrolls on the other axis — a `clip` beside
+ * an `auto` computes to `hidden` anyway, and writing what the
+ * browser will use is the honest spelling. `Shell`'s note on the
+ * clip explains the other half.
+ *
  * ## It remembers where each history entry was scrolled to
  *
  * `Shell` gives this element the page's only vertical scrollport,
@@ -155,7 +188,7 @@ export const Main = ({ children, className, contentWidth, id, ref, ...mainProps
     const maxInlineSize = toMaxInlineSize(contentWidth ??
         shell?.contentWidth ??
         DEFAULT_CONTENT_WIDTH);
-    return (_jsx("main", { ...mainProps, className: toClassName("charcuterie-scrollbar col-start-1 row-start-3 min-h-0 min-w-0 overflow-y-auto md:col-start-2 md:row-start-2", className), id: id ?? shell?.mainId ?? fallbackId, 
+    return (_jsx("main", { ...mainProps, className: toClassName("charcuterie-scrollbar relative col-start-1 row-start-3 min-h-0 min-w-0 overflow-x-hidden overflow-y-auto md:col-start-2 md:row-start-2", className), id: id ?? shell?.mainId ?? fallbackId, 
         // A caller's `ref` is a subscription, not a value, so the
         // scroll memory composes with it rather than replacing it.
         //

package/dist/Main/Main.js.map

@@ -1 +1 @@
-{"version":3,"file":"Main.js","sourceRoot":"","sources":["../../src/Main/Main.tsx"],"names":[],"mappings":";AAAA,OAAO,EAEL,SAAS,EACT,WAAW,GACZ,MAAM,oBAAoB,CAAA;AAC3B,OAAO,EAIL,UAAU,GACX,MAAM,OAAO,CAAA;AAEd,OAAO,EAEL,qBAAqB,EACrB,eAAe,GAChB,MAAM,0BAA0B,CAAA;AACjC,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAA;AACvD,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAA;AAC/C,OAAO,EAAE,mBAAmB,EAAE,MAAM,0BAA0B,CAAA;AAC9D,OAAO,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAA;AAMtD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA0IG;AACH,MAAM,CAAC,MAAM,IAAI,GAAG,CAAC,EACnB,QAAQ,EACR,SAAS,EACT,YAAY,EACZ,EAAE,EACF,GAAG,EACH,GAAG,SAAS,EACF,EAAa,EAAE;IACzB,MAAM,KAAK,GAAG,UAAU,CAAC,YAAY,CAAC,CAAA;IACtC,MAAM,WAAW,GAAG,UAAU,CAAC,mBAAmB,CAAC,CAAA;IACnD,MAAM,aAAa,GAAG,eAAe,CAAC,WAAW,CAAC,CAAA;IAElD,iEAAiE;IACjE,2DAA2D;IAC3D,MAAM,UAAU,GAAG,WAAW,EAAE,CAAA;IAEhC,MAAM,aAAa,GAAG,eAAe,CACnC,YAAY;QACV,KAAK,EAAE,YAAY;QACnB,qBAAqB,CACxB,CAAA;IAED,OAAO,CACL,kBACM,SAAS,EACb,SAAS,EAAE,WAAW,CACpB,6GAA6G,EAC7G,SAAS,CACV,EACD,EAAE,EAAE,EAAE,IAAI,KAAK,EAAE,MAAM,IAAI,UAAU;QACrC,0DAA0D;QAC1D,2DAA2D;QAC3D,EAAE;QACF,yDAAyD;QACzD,8DAA8D;QAC9D,qBAAqB;QACrB,GAAG,EACD,GAAG;YACD,CAAC,CAAE,SAAS,CACR,GAAmB,EACnB,aAAa,CACe;YAChC,CAAC,CAAC,aAAa,EAEnB,QAAQ,EAAE,CAAC,CAAC,YAaZ,cACE,SAAS,EAAC,uFAAuF,EACjG,KAAK,EAAE,EAAE,aAAa,EAAE,YAEvB,QAAQ,GACL,GACD,CACR,CAAA;AACH,CAAC,CAAA"}
+{"version":3,"file":"Main.js","sourceRoot":"","sources":["../../src/Main/Main.tsx"],"names":[],"mappings":";AAAA,OAAO,EAEL,SAAS,EACT,WAAW,GACZ,MAAM,oBAAoB,CAAA;AAC3B,OAAO,EAIL,UAAU,GACX,MAAM,OAAO,CAAA;AAEd,OAAO,EAEL,qBAAqB,EACrB,eAAe,GAChB,MAAM,0BAA0B,CAAA;AACjC,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAA;AACvD,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAA;AAC/C,OAAO,EAAE,mBAAmB,EAAE,MAAM,0BAA0B,CAAA;AAC9D,OAAO,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAA;AAMtD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2KG;AACH,MAAM,CAAC,MAAM,IAAI,GAAG,CAAC,EACnB,QAAQ,EACR,SAAS,EACT,YAAY,EACZ,EAAE,EACF,GAAG,EACH,GAAG,SAAS,EACF,EAAa,EAAE;IACzB,MAAM,KAAK,GAAG,UAAU,CAAC,YAAY,CAAC,CAAA;IACtC,MAAM,WAAW,GAAG,UAAU,CAAC,mBAAmB,CAAC,CAAA;IACnD,MAAM,aAAa,GAAG,eAAe,CAAC,WAAW,CAAC,CAAA;IAElD,iEAAiE;IACjE,2DAA2D;IAC3D,MAAM,UAAU,GAAG,WAAW,EAAE,CAAA;IAEhC,MAAM,aAAa,GAAG,eAAe,CACnC,YAAY;QACV,KAAK,EAAE,YAAY;QACnB,qBAAqB,CACxB,CAAA;IAED,OAAO,CACL,kBACM,SAAS,EACb,SAAS,EAAE,WAAW,CACpB,wIAAwI,EACxI,SAAS,CACV,EACD,EAAE,EAAE,EAAE,IAAI,KAAK,EAAE,MAAM,IAAI,UAAU;QACrC,0DAA0D;QAC1D,2DAA2D;QAC3D,EAAE;QACF,yDAAyD;QACzD,8DAA8D;QAC9D,qBAAqB;QACrB,GAAG,EACD,GAAG;YACD,CAAC,CAAE,SAAS,CACR,GAAmB,EACnB,aAAa,CACe;YAChC,CAAC,CAAC,aAAa,EAEnB,QAAQ,EAAE,CAAC,CAAC,YAaZ,cACE,SAAS,EAAC,uFAAuF,EACjG,KAAK,EAAE,EAAE,aAAa,EAAE,YAEvB,QAAQ,GACL,GACD,CACR,CAAA;AACH,CAAC,CAAA"}

package/dist/PortraitTiles/PortraitTiles.d.ts

@@ -18,8 +18,10 @@ import type { ReactNode } from "react";
  *    palette hues cannot represent that, and swapping them in would
  *    have made the app disagree with the cards on the fridge.
  *
- * Neither is a default. A portrait that names no colour takes the
- * next `categorical` hue by position.
+ * Neither is a default. A portrait that names no colour takes its
+ * position's entry in `CATEGORICAL_SEQUENCE` — the palette walked so
+ * neighbours contrast, rather than the hue-ordered ring, which would
+ * put red beside orange.
  */
 type PortraitTileColour = {
     categorical?: CategoricalIndex;

package/dist/PortraitTiles/PortraitTiles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PortraitTiles.d.ts","sourceRoot":"","sources":["../../src/PortraitTiles/PortraitTiles.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,gBAAgB,EAChB,WAAW,EACZ,MAAM,qBAAqB,CAAA;AAK5B,OAAO,KAAK,EAAiB,SAAS,EAAE,MAAM,OAAO,CAAA;AAqBrD;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,KAAK,kBAAkB,GACnB;IAAE,WAAW,CAAC,EAAE,gBAAgB,CAAC;IAAC,KAAK,CAAC,EAAE,KAAK,CAAA;CAAE,GACjD;IAAE,WAAW,CAAC,EAAE,KAAK,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAE,CAAA;AAE1C,MAAM,MAAM,gBAAgB,GAAG,kBAAkB,GAAG;IAClD;;;;;;OAMG;IACH,IAAI,CAAC,EAAE,SAAS,CAAA;IAChB,yEAAyE;IACzE,IAAI,CAAC,EAAE,MAAM,CAAA;IACb;;;;OAIG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB;;;;;;OAMG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,uEAAuE;IACvE,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,gBAAgB;IAChB,KAAK,EAAE,SAAS,CAAA;IAChB;;;;OAIG;IACH,IAAI,CAAC,EAAE,SAAS,CAAA;IAChB,8DAA8D;IAC9D,KAAK,EAAE,MAAM,CAAA;CACd,CAAA;AAED;;;;;;;;;GASG;AACH,MAAM,MAAM,mBAAmB,GAAG,MAAM,GAAG,QAAQ,GAAG,KAAK,CAAA;AAE3D,MAAM,MAAM,kBAAkB,GAAG;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,KAAK,EAAE,SAAS,gBAAgB,EAAE,CAAA;IAClC,2CAA2C;IAC3C,KAAK,EAAE,MAAM,CAAA;IACb,MAAM,CAAC,EAAE,mBAAmB,CAAA;IAC5B,wDAAwD;IACxD,iBAAiB,CAAC,EAAE,MAAM,CAAA;IAC1B,8CAA8C;IAC9C,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,kDAAkD;IAClD,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IAClC,IAAI,CAAC,EAAE,WAAW,CAAA;CACnB,CAAA;AAiLD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgEG;AACH,eAAO,MAAM,aAAa,GAAI,sFAS3B,kBAAkB,KAAG,SA8MvB,CAAA"}
+{"version":3,"file":"PortraitTiles.d.ts","sourceRoot":"","sources":["../../src/PortraitTiles/PortraitTiles.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,gBAAgB,EAChB,WAAW,EACZ,MAAM,qBAAqB,CAAA;AAK5B,OAAO,KAAK,EAAiB,SAAS,EAAE,MAAM,OAAO,CAAA;AAqBrD;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,KAAK,kBAAkB,GACnB;IAAE,WAAW,CAAC,EAAE,gBAAgB,CAAC;IAAC,KAAK,CAAC,EAAE,KAAK,CAAA;CAAE,GACjD;IAAE,WAAW,CAAC,EAAE,KAAK,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAE,CAAA;AAE1C,MAAM,MAAM,gBAAgB,GAAG,kBAAkB,GAAG;IAClD;;;;;;OAMG;IACH,IAAI,CAAC,EAAE,SAAS,CAAA;IAChB,yEAAyE;IACzE,IAAI,CAAC,EAAE,MAAM,CAAA;IACb;;;;OAIG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB;;;;;;OAMG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,uEAAuE;IACvE,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,gBAAgB;IAChB,KAAK,EAAE,SAAS,CAAA;IAChB;;;;OAIG;IACH,IAAI,CAAC,EAAE,SAAS,CAAA;IAChB,8DAA8D;IAC9D,KAAK,EAAE,MAAM,CAAA;CACd,CAAA;AAED;;;;;;;;;GASG;AACH,MAAM,MAAM,mBAAmB,GAAG,MAAM,GAAG,QAAQ,GAAG,KAAK,CAAA;AAE3D,MAAM,MAAM,kBAAkB,GAAG;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,KAAK,EAAE,SAAS,gBAAgB,EAAE,CAAA;IAClC,2CAA2C;IAC3C,KAAK,EAAE,MAAM,CAAA;IACb,MAAM,CAAC,EAAE,mBAAmB,CAAA;IAC5B,wDAAwD;IACxD,iBAAiB,CAAC,EAAE,MAAM,CAAA;IAC1B,8CAA8C;IAC9C,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,kDAAkD;IAClD,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IAClC,IAAI,CAAC,EAAE,WAAW,CAAA;CACnB,CAAA;AAiLD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgEG;AACH,eAAO,MAAM,aAAa,GAAI,sFAS3B,kBAAkB,KAAG,SA8MvB,CAAA"}

package/dist/PortraitTiles/PortraitTiles.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { CATEGORICAL_INDEX_COUNT, CATEGORICAL_INDEXES, } from "@charcuterie/tokens";
+import { CATEGORICAL_INDEX_COUNT, CATEGORICAL_SEQUENCE, } from "@charcuterie/tokens";
 import { CATEGORICAL_APPEARANCE_CLASS, CATEGORICAL_CONTENT_CLASS, CATEGORICAL_HOVER_BORDER_CLASS, CATEGORICAL_RING_CLASS, } from "../categoricalStyles.js";
 import { FOCUS_RING_CLASS } from "../intentStyles.js";
 import { useRouterLink } from "../RouterLink/RouterLinkProvider.js";
@@ -133,7 +133,7 @@ const GAP_CLASS = {
  */
 const getPortraitCategorical = (item, position) => item.color === undefined
     ? (item.categorical ??
-        CATEGORICAL_INDEXES[position % CATEGORICAL_INDEX_COUNT])
+        CATEGORICAL_SEQUENCE[position % CATEGORICAL_INDEX_COUNT])
     : null;
 /**
  * The classes that read the four custom properties, spelled whole.

package/dist/PortraitTiles/PortraitTiles.js.map

@@ -1 +1 @@
-{"version":3,"file":"PortraitTiles.js","sourceRoot":"","sources":["../../src/PortraitTiles/PortraitTiles.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"PortraitTiles.js","sourceRoot":"","sources":["../../src/PortraitTiles/PortraitTiles.tsx"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@charcuterie/ui",
-  "version": "4.2.0",
+  "version": "4.3.0",
   "description": "The Charcuterie components. Tokens for look, @charcuterie/logic for state, ARIA that agents can actually drive.",
   "license": "MIT",
   "type": "module",
@@ -54,7 +54,7 @@
   },
   "dependencies": {
     "@charcuterie/logic": "2.3.0",
-    "@charcuterie/tokens": "1.7.0",
+    "@charcuterie/tokens": "1.8.0",
     "@floating-ui/react": "^0.27.20",
     "@tanstack/react-virtual": "^3.13.12",
     "tailwind-merge": "^3.6.0"

package/src/ActionTiles/ActionTiles.mdx

@@ -30,8 +30,14 @@ the library's and every one of them can stop.
 
 A tile wears a **bar down its leading edge**, its icon takes the same hue, and the box hovers
 in it. The hue comes from the ten-wide
-[categorical palette](/docs/foundations-colour--docs) taken **in order**, which is why a set
-of five needs no colour props at all.
+[categorical palette](/docs/foundations-colour--docs), which is why a set of five needs no
+colour props at all.
+
+It is walked in **`CATEGORICAL_SEQUENCE`**, not `1..10`. The ring itself is hue-ordered
+because a swatch picker wants a spectrum to scan, and that is exactly what makes walking it in
+order the worst assignment for a set: ring neighbours are 34–41° apart, the tightest pair the
+palette has, so a two-tile set got red and orange every time. The sequence visits the same ten
+and holds every neighbour 105° or more away.
 
 <Canvas of={ActionTilesStories.AutoHues} />
 

package/src/ActionTiles/ActionTiles.stories.tsx

@@ -59,8 +59,9 @@ const START_ITEMS: ActionTileItem[] = [
 ]
 
 /**
- * Enough tiles to see the palette walk. Ten hues, taken in order,
- * and not one colour prop between them.
+ * Enough tiles to see the palette walk. Ten hues in
+ * `CATEGORICAL_SEQUENCE` order — every neighbouring pair a third of
+ * the wheel apart — and not one colour prop between them.
  */
 const LIBRARY_ITEMS: ActionTileItem[] = [
   {

package/src/ActionTiles/ActionTiles.test.tsx

@@ -358,8 +358,8 @@ test("a coloured tile makes room for its bar, and only on the leading side", asy
 })
 
 /**
- * Ten hues taken in order, which is what makes a five-tile set need
- * no colour props at all.
+ * Ten hues walked in `CATEGORICAL_SEQUENCE`, which is what makes a
+ * five-tile set need no colour props at all.
  *
  * Asserted through the pseudo-element's own `box-shadow`, because
  * that is where the bar actually lives — a class-name assertion
@@ -416,9 +416,10 @@ test("a named hue survives a tile being inserted above it", async () => {
     throw new Error("the auto-hue set drew no second tile")
   }
 
-  // In the auto set this tile is position 1 and wears hue 2. Naming
-  // `categorical: 7` has to change it, or the prop does nothing and
-  // every test above still passes.
+  // In the auto set this tile is position 1, so it wears the second
+  // entry of `CATEGORICAL_SEQUENCE`. Naming `categorical: 7` has to
+  // change it, or the prop does nothing and every test above still
+  // passes.
   await expect(
     getAccentEdgeLayer(
       getComputedStyle(pinned, "::before").boxShadow,

package/src/ActionTiles/ActionTiles.tsx

@@ -4,7 +4,7 @@ import type {
 } from "@charcuterie/tokens"
 import {
   CATEGORICAL_INDEX_COUNT,
-  CATEGORICAL_INDEXES,
+  CATEGORICAL_SEQUENCE,
 } from "@charcuterie/tokens"
 import type { CSSProperties, ReactNode } from "react"
 
@@ -39,8 +39,8 @@ export type ActionTileItem = {
    * set — a destination that is red everywhere else in the app, a
    * pair that must not drift apart when a third tile is inserted
    * between them. An overridden tile keeps its hue and the rest go
-   * on walking the palette in order, so naming one does not force
-   * naming all of them.
+   * on walking `CATEGORICAL_SEQUENCE` from their own positions, so
+   * naming one does not force naming all of them.
    *
    * Ignored when the set is `accent="none"`.
    */
@@ -157,15 +157,20 @@ const STACK_GAP_CLASS: Record<ControlSize, string> = {
  * two-tile set the same colour twice. A tile set is short, ordered,
  * and written out in the source; the eye reads it as a row, so the
  * palette is walked as one.
+ *
+ * `CATEGORICAL_SEQUENCE`, not `CATEGORICAL_INDEXES`. The ring is
+ * hue-ordered for the swatch picker's sake, so walking it in order
+ * hands a two-tile set the two hardest colours in the family to
+ * tell apart — 34 degrees, the tightest pair the palette has. The
+ * sequence visits the same ten in an order that keeps every
+ * neighbour 105 degrees or more away.
  */
 const getTileCategorical = (
   item: ActionTileItem,
   position: number,
 ): CategoricalIndex =>
   item.categorical ??
-  (CATEGORICAL_INDEXES[
-    position % CATEGORICAL_INDEX_COUNT
-  ] as CategoricalIndex)
+  CATEGORICAL_SEQUENCE[position % CATEGORICAL_INDEX_COUNT]
 
 /**
  * A set of ACTIONS drawn as tiles — a bordered card carrying a
@@ -211,8 +216,10 @@ const getTileCategorical = (
  * accent-edge pseudo-element so a tile and a card on the same page
  * are the same bar rather than two that nearly match. Its icon takes
  * the same hue, and the box hovers in it too. The hue comes from the
- * ten-wide categorical palette, taken **in order**, which is why a
- * set of eight needs no colour props at all. See
+ * ten-wide categorical palette, walked in `CATEGORICAL_SEQUENCE`
+ * rather than 1..10 — the ring is hue-ordered for the swatch
+ * picker's sake, so taking it in order would hand a two-tile set
+ * red and orange. A set of eight needs no colour props at all. See
  * [the tile paint record](../../../../docs/decisions/2026-09-02-an-action-tile-is-coloured-and-the-icon-sits-beside-the-name.md)
  * for the four other paints that were drawn and rejected.
  *

package/src/Main/Main.mdx

@@ -109,7 +109,9 @@ for a `getBoundingClientRect()` assertion to catch. That is why the gate asserts
 `document.documentElement.scrollWidth`, and why `Main.test.tsx` pins the computed value.
 
 That is the cheap half of the horizontal-scroll fix; the other halves are `minmax(0, 1fr)`
-and `overflow-x: clip` on `Shell`.
+and `overflow-x: clip` on `Shell`, plus `overflow-x: hidden` here for anything absolutely
+positioned **inside** the scrollport — the next section says why that one cannot be left to
+the frame.
 
 A `<table>` is the one thing neither can save. Table columns have min-content widths that no
 `overflow-wrap` reaches, so a wide table goes in a scroll container:
@@ -140,6 +142,33 @@ satisfy it and the choice is not a matter of taste:
 `aria-label` on the container is worth it either way: it turns the scroller into a named
 region, so the table is announced as a thing rather than as loose content.
 
+## `relative`, and the second scrollbar
+
+`<main>` is the page's only vertical scrollport, so the document itself must never scroll.
+An absolutely positioned descendant breaks that unless `<main>` is its **containing block**.
+With `position: static` the nearest positioned ancestor is `Shell`, which sits *outside* the
+scrollport: the box resolves against the frame, `<main>`'s `overflow-y` has no authority over
+it, and its static position — a couple of thousand pixels down a long document — lands as
+scrollable overflow on `documentElement`. The page grows to reach it, and the reader gets a
+**second scrollbar** beside the one `<main>` already has.
+
+The box does not have to be exotic, which is what makes this hard to spot. Tailwind's
+`sr-only` is `position: absolute`, so one visually hidden `(opens in a new tab)` span in a
+document footer is enough. Measured on Folio at 1440x900 before this: `<main>` 835px tall,
+`document.documentElement.scrollHeight` 2085 — the span's offset, exactly. Nothing on the
+page looked wrong; there were simply two scrollbars.
+
+`overflow-x: hidden` comes with the `relative` and is not decoration. Moving every
+absolutely positioned descendant's containing block from `Shell` to `<main>` also moves what
+clips them sideways, so `Shell`'s `overflow-x: clip` no longer reaches them — a drawer parked
+at `translateX(110%)` **inside** `Main` would draw a horizontal scrollbar on the scrollport
+instead of being clipped. `hidden` rather than `clip` because this element already scrolls on
+the other axis: `clip` beside an `auto` computes to `hidden` anyway, so writing `hidden` is
+writing what the browser will use.
+
+An app's own parked chrome still belongs in `Shell`, beside `Main` rather than in it. That is
+what `Shell`'s clip is for, and it is the arrangement `Shell.stories.tsx` demonstrates.
+
 ## `tabIndex={-1}`
 
 <Canvas of={MainStories.Interactive} />

package/src/Main/Main.stories.tsx

@@ -10,10 +10,13 @@ import { toMaxInlineSize } from "../Shell/contentWidth.ts"
 import { Shell } from "../Shell/Shell.tsx"
 import { Spinner } from "../Spinner/Spinner.tsx"
 import {
+  ExternalLinkFooter,
   HeaderSchemeToggle,
   OverflowingContent,
   PageContent,
+  ParkedDrawer,
   RailNavigation,
+  ScrollFiller,
 } from "../shell.storyHelpers.tsx"
 import { Main } from "./Main.tsx"
 import { ScrollMemoryProvider } from "./ScrollMemoryProvider.tsx"
@@ -124,14 +127,29 @@ export const AllVariants: Story = {
 }
 
 /**
- * The 390px fixture. An unbroken 130-character path and a table
- * wider than the phone it is on, in one column.
+ * The 390px fixture: everything that tries to make the **page**
+ * scroll when only `<main>` should, in one column.
  *
- * The path wraps because `Main` sets `overflow-wrap: break-word`;
- * the table cannot wrap at all and lives in a labelled,
- * keyboard-reachable scroll container. Neither widens the page,
- * which is the assertion `Main.test.tsx` makes at a real 390px
- * viewport.
+ * Sideways, three ways. The path wraps because `Main` sets
+ * `overflow-wrap: anywhere`; the table cannot wrap at all and
+ * lives in a labelled, keyboard-reachable scroll container; and
+ * the drawer parked at `translateX(110%)` is clipped. The drawer
+ * is **inside** `Main` here, unlike `Shell.stories.tsx`, so the
+ * element clipping it is `Main` — `position: relative` moved that
+ * job in from the frame, and `overflow-x: hidden` is `Main`
+ * taking it.
+ *
+ * Downwards, once, and it is the shape nobody looks for: the
+ * footer link's `sr-only` "(opens in a new tab)" span is
+ * `position: absolute`, so it resolves against the nearest
+ * positioned ancestor. Before `Main` was one that was `Shell`,
+ * outside the scrollport, and the span's static position past the
+ * fold became scrollable overflow on the page. `ScrollFiller` is
+ * what puts it past the fold; without the height there is nothing
+ * to escape.
+ *
+ * The assertions are in `Main.test.tsx` at a real 390px viewport
+ * — a story is a demo.
  */
 export const Responsive: Story = {
   render: (mainProps) => (
@@ -139,7 +157,21 @@ export const Responsive: Story = {
       <Header heading="Transfers" />
 
       <Main {...mainProps}>
+        <ParkedDrawer />
+
         <OverflowingContent />
+
+        {/*
+          Twice. One is a few dozen pixels short of filling an
+          844px phone, and the footer below has to sit past the
+          fold or there is nothing for its hidden span to escape
+          to.
+        */}
+        <ScrollFiller />
+
+        <ScrollFiller />
+
+        <ExternalLinkFooter />
       </Main>
     </Shell>
   ),

package/src/Main/Main.test.tsx

@@ -89,7 +89,7 @@ test("main is the query container its content responds to", async () => {
   ).toHaveLength(2)
 })
 
-test("neither an unbroken path nor a wide table widens the page at 390px", async () => {
+test("nothing in the fixture widens the page at 390px", async () => {
   await setViewport(PHONE)
 
   const { canvas, canvasElement } =
@@ -131,6 +131,30 @@ test("neither an unbroken path nor a wide table widens the page at 390px", async
     scroller.clientWidth,
   )
 
+  // The drawer parked at `translateX(110%)`, which is inside
+  // `Main` in this story rather than beside it. `Shell`'s
+  // `overflow-x: clip` cannot reach it any more — `Main` is
+  // `position: relative`, so `Main` is its containing block and
+  // `Main`'s own `overflow-x` is the only thing between it and a
+  // horizontal scrollbar on the scrollport.
+  const parkedDrawer = canvasElement.querySelector(
+    "#parked-drawer",
+  ) as HTMLElement
+
+  const main = canvas.getByRole("main")
+
+  await expect(parkedDrawer.offsetParent).toBe(main)
+
+  // `hidden` rather than `clip`, and the browser decides that:
+  // `overflow-x: clip` beside an `overflow-y: auto` computes to
+  // `hidden`, so `Main` writes what will actually be used. It is
+  // also why the assertion is on the *page* below rather than on
+  // `main.scrollWidth` — a `hidden` box still reports the
+  // overflow it is refusing to scroll to.
+  await expect(
+    globalThis.getComputedStyle(main).overflowX,
+  ).toBe("hidden")
+
   const { documentElement } = document
 
   await expect(
@@ -140,6 +164,65 @@ test("neither an unbroken path nor a wide table widens the page at 390px", async
   await expectNoAxeViolations(canvasElement)
 })
 
+/**
+ * The second scrollbar, and how cheaply it is bought.
+ *
+ * `<main>` is the page's only vertical scrollport, so the document
+ * itself must not scroll. An absolutely positioned descendant
+ * breaks that unless `<main>` is its containing block: resolve it
+ * against `Shell` instead — which is what `position: static` here
+ * used to mean — and the box keeps its static position, deep down
+ * a long document, while sitting outside the scrollport. The page
+ * grows to reach it.
+ *
+ * The box in this fixture is Tailwind's `sr-only`, one pixel of
+ * nothing on an "opens in a new tab" hint. Measured on Folio
+ * before this: `<main>` 835px tall,
+ * `document.documentElement.scrollHeight` 2085 — the span's
+ * offset, exactly.
+ */
+test("a visually hidden span past the fold does not give the page a second scrollbar", async () => {
+  await setViewport(PHONE)
+
+  const { canvas, canvasElement } =
+    await mountStory(Responsive)
+
+  const main = canvas.getByRole("main")
+
+  // The fixture is only a fixture if `<main>` genuinely scrolls
+  // and the span genuinely sits past the fold. Without the
+  // height there is nothing for it to escape to, and every
+  // assertion below would pass against a short page.
+  await expect(main.scrollHeight).toBeGreaterThan(
+    main.clientHeight,
+  )
+
+  // By id rather than by text: the hint's words are part of the
+  // link's accessible name too, so a text query matches both the
+  // span and the anchor around it.
+  const hint = canvasElement.querySelector(
+    "#new-tab-hint",
+  ) as HTMLElement
+
+  await expect(
+    globalThis.getComputedStyle(hint).position,
+  ).toBe("absolute")
+
+  await expect(
+    hint.getBoundingClientRect().top,
+  ).toBeGreaterThan(main.getBoundingClientRect().bottom)
+
+  await expect(hint.offsetParent).toBe(main)
+
+  const { documentElement } = document
+
+  await expect(
+    documentElement.scrollHeight,
+  ).toBeLessThanOrEqual(documentElement.clientHeight)
+
+  await expectNoAxeViolations(canvasElement)
+})
+
 /**
  * `tabIndex={-1}` is the difference between a skip link that
  * works and one that only scrolls. It must not put `<main>` in

package/src/Main/Main.tsx

@@ -101,6 +101,39 @@ export type MainProps = ComponentPropsWithRef<"main"> & {
  *    an app's own fixed chrome belongs in `Shell`, beside `Main`
  *    rather than in it.
  *
+ * ## `relative` — the scrollport has to be the containing block
+ *
+ * `<main>` is the page's only vertical scrollport, so everything
+ * in it is supposed to scroll *inside* it. An absolutely
+ * positioned descendant does not, unless this element is its
+ * containing block: with `position: static` here, the nearest
+ * positioned ancestor is `Shell`, which is **outside** the
+ * scrollport. The box then resolves against `Shell`, `<main>`'s
+ * `overflow-y` has no authority over it, and its static position —
+ * a couple of thousand pixels down a long document — becomes
+ * scrollable overflow on `documentElement`. The page grows to
+ * reach it and the reader gets a **second scrollbar** beside the
+ * one `<main>` already has.
+ *
+ * The box does not have to be exotic. Tailwind's `sr-only` is
+ * `position: absolute`, so the visually hidden
+ * `<span>(opens in a new tab)</span>` on one link in a document
+ * footer is enough. Measured on Folio at 1440x900: `<main>` was
+ * 835px tall and `document.documentElement.scrollHeight` read
+ * 2085, which is exactly where that span sat.
+ *
+ * `overflow-x: hidden` comes with it and is not decoration.
+ * `relative` moves every absolutely positioned descendant's
+ * containing block from `Shell` to here, which also moves what
+ * clips them **sideways**: `Shell`'s `overflow-x: clip` no longer
+ * reaches them, so a drawer parked at `translateX(110%)` inside
+ * `Main` would draw a horizontal scrollbar on the scrollport
+ * instead of being clipped. `hidden` rather than `clip` because
+ * this element already scrolls on the other axis — a `clip` beside
+ * an `auto` computes to `hidden` anyway, and writing what the
+ * browser will use is the honest spelling. `Shell`'s note on the
+ * clip explains the other half.
+ *
  * ## It remembers where each history entry was scrolled to
  *
  * `Shell` gives this element the page's only vertical scrollport,
@@ -189,7 +222,7 @@ export const Main = ({
     <main
       {...mainProps}
       className={toClassName(
-        "charcuterie-scrollbar col-start-1 row-start-3 min-h-0 min-w-0 overflow-y-auto md:col-start-2 md:row-start-2",
+        "charcuterie-scrollbar relative col-start-1 row-start-3 min-h-0 min-w-0 overflow-x-hidden overflow-y-auto md:col-start-2 md:row-start-2",
         className,
       )}
       id={id ?? shell?.mainId ?? fallbackId}

package/src/PortraitTiles/PortraitTiles.tsx

@@ -4,7 +4,7 @@ import type {
 } from "@charcuterie/tokens"
 import {
   CATEGORICAL_INDEX_COUNT,
-  CATEGORICAL_INDEXES,
+  CATEGORICAL_SEQUENCE,
 } from "@charcuterie/tokens"
 import type { CSSProperties, ReactNode } from "react"
 
@@ -45,8 +45,10 @@ import { getPortraitColourProperties } from "./portraitColour.ts"
  *    palette hues cannot represent that, and swapping them in would
  *    have made the app disagree with the cards on the fridge.
  *
- * Neither is a default. A portrait that names no colour takes the
- * next `categorical` hue by position.
+ * Neither is a default. A portrait that names no colour takes its
+ * position's entry in `CATEGORICAL_SEQUENCE` — the palette walked so
+ * neighbours contrast, rather than the hue-ordered ring, which would
+ * put red beside orange.
  */
 type PortraitTileColour =
   | { categorical?: CategoricalIndex; color?: never }
@@ -273,9 +275,9 @@ const getPortraitCategorical = (
 ): CategoricalIndex | null =>
   item.color === undefined
     ? (item.categorical ??
-      (CATEGORICAL_INDEXES[
+      CATEGORICAL_SEQUENCE[
         position % CATEGORICAL_INDEX_COUNT
-      ] as CategoricalIndex))
+      ])
     : null
 
 /**

package/src/Shell/Shell.stories.tsx

@@ -8,6 +8,7 @@ import {
   HeaderSchemeToggle,
   OverflowingContent,
   PageContent,
+  ParkedDrawer,
   RailDetail,
   RailNavigation,
   ScrollFiller,
@@ -130,6 +131,14 @@ export const WithBothRails: Story = {
  * scrolls left and right today for the first reason; the second
  * is what an `overflow-wrap` alone cannot save.
  *
+ * The third shape is `ParkedDrawer`, and it sits **beside**
+ * `Main` rather than in it — an app's parked chrome is parked
+ * against the frame, which is the arrangement `Shell`'s
+ * `overflow-x: clip` exists for. Absolutely positioned children
+ * of a grid container take no track, so it costs the layout
+ * nothing. `Main.stories.tsx` renders the same drawer *inside*
+ * `Main`, where the clip that answers it is `Main`'s own.
+ *
  * `document.documentElement.scrollWidth <= clientWidth` at 390px
  * is the assertion, and it is in `Shell.test.tsx` rather than
  * here — a story is a demo.
@@ -150,6 +159,8 @@ export const Responsive: Story = {
         <OverflowingContent />
       </Main>
 
+      <ParkedDrawer />
+
       <Rail label="Job detail" side="end">
         <RailDetail />
       </Rail>

package/src/shell.storyHelpers.tsx

@@ -140,8 +140,73 @@ export const ScrollFiller = (): ReactNode => (
 )
 
 /**
- * The three things that actually make a page scroll sideways, and
- * each needs a different answer.
+ * A closed drawer parked off the inline edge by a transform — the
+ * third shape that makes a page scroll sideways, and the one that
+ * broke plex-channels.
+ *
+ * It is still laid out, still painted, and still part of the
+ * scrollable overflow region of whatever it resolves against: a
+ * transform does not remove a box from that region, and neither
+ * does `visibility: hidden`. So the page scrolls sideways to reach
+ * a panel nobody can see, and every `min-width: 0` in the tree is
+ * irrelevant. Only a clip on the box's containing block answers
+ * it.
+ *
+ * **Which element that is depends on where the drawer is
+ * rendered, and the two stories place it differently on purpose.**
+ * Beside `Main` it is `Shell`'s to clip, which is where an app's
+ * parked chrome belongs. Inside `Main` it is `Main`'s, because
+ * `Main` is `position: relative` — and that is why `Main` carries
+ * an `overflow-x: hidden` of its own rather than leaning on the
+ * frame's.
+ */
+export const ParkedDrawer = (): ReactNode => (
+  <div
+    aria-hidden="true"
+    className="pointer-events-none absolute top-0 end-0 h-40 w-80 translate-x-[110%] rounded-lg border border-border-subtle bg-surface-raised"
+    id="parked-drawer"
+  />
+)
+
+/**
+ * The shape that makes a page scroll **down** when only `<main>`
+ * was supposed to: an ordinary external link whose "opens in a new
+ * tab" hint is visually hidden.
+ *
+ * `sr-only` is `position: absolute`. Nothing here looks like
+ * layout at all — the span is one pixel and paints nothing — and
+ * that is the point: whatever it resolves against inherits its
+ * static position, which is wherever the link happens to sit in a
+ * long document. Resolve it outside the scrollport and the page
+ * grows to reach it, which is a second scrollbar beside `Main`'s.
+ * Folio drew both.
+ *
+ * It goes at the END of a fixture, past the fold, or the escape it
+ * demonstrates has nowhere to escape to.
+ */
+export const ExternalLinkFooter = (): ReactNode => (
+  <p className="text-content-secondary text-sm">
+    <a
+      className="text-intent-accent-content underline"
+      href="#runbook"
+      id="runbook-link"
+      rel="noreferrer"
+      target="_blank"
+    >
+      The transfer runbook
+      <span className="sr-only" id="new-tab-hint">
+        {" "}
+        (opens in a new tab)
+      </span>
+    </a>
+  </p>
+)
+
+/**
+ * The two shapes of *content* that make a page scroll sideways,
+ * and each needs a different answer. The third shape is a box
+ * rather than content and lives in `ParkedDrawer`, because where
+ * it is rendered is half of what it demonstrates.
  *
  * The **path** is content that *can* wrap and does not, because
  * nothing in it is a break opportunity. `Main`'s `wrap-anywhere`
@@ -166,23 +231,6 @@ export const ScrollFiller = (): ReactNode => (
  */
 export const OverflowingContent = (): ReactNode => (
   <>
-    {/*
-      The third shape, and the one that broke plex-channels: a
-      closed drawer parked off the inline edge by a transform.
-
-      It is still laid out, still painted, and still part of the
-      document's scrollable overflow region — a transform does not
-      remove a box from it, and neither does `visibility: hidden`.
-      So the page scrolls sideways to reach a panel nobody can see,
-      and every `min-width: 0` in the tree is irrelevant. `Shell`'s
-      `overflow-x: clip` is what actually answers it.
-    */}
-    <div
-      aria-hidden="true"
-      className="pointer-events-none absolute top-0 end-0 h-40 w-80 translate-x-[110%] rounded-lg border border-border-subtle bg-surface-raised"
-      id="parked-drawer"
-    />
-
     <p className="text-content-secondary text-sm">
       /mnt/Bunnies/Family/Media/Television/Some-Very-Long-Show-Name/Season-01/Some-Very-Long-Show-Name-S01E01-Pilot-2160p-HDR-DTS-HD-MA.mkv
     </p>