@charcuterie/ui 4.0.0 → 4.2.0

package/dist/index.js

@@ -50,7 +50,7 @@ export { ColorSchemeToggle } from "./ColorSchemeToggle/ColorSchemeToggle.js";
 export { Combobox } from "./Combobox/Combobox.js";
 export { CopyButton } from "./CopyButton/CopyButton.js";
 export { copyText } from "./CopyButton/copyText.js";
-export { CATEGORICAL_APPEARANCE_CLASS, CATEGORICAL_CONTENT_CLASS, CATEGORICAL_HOVER_CLASS, CATEGORICAL_SOLID_FILL_CLASS, } from "./categoricalStyles.js";
+export { CATEGORICAL_APPEARANCE_CLASS, CATEGORICAL_CONTENT_CLASS, CATEGORICAL_HOVER_BORDER_CLASS, CATEGORICAL_HOVER_CLASS, CATEGORICAL_RING_CLASS, CATEGORICAL_SOLID_FILL_CLASS, } from "./categoricalStyles.js";
 export { BADGE_SIZE_CLASS, CONTROL_BASE_CLASS, CONTROL_SIZE_CLASS, DOT_SIZE_CLASS, getControlClassName, ICON_CONTROL_SIZE_CLASS, MIN_TOUCH_TARGET_CLASS, SPINNER_SIZE_CLASS, } from "./controlStyles.js";
 export { DataTable } from "./DataTable/DataTable.js";
 export { DatePicker } from "./DatePicker/DatePicker.js";
@@ -88,6 +88,7 @@ export { useNavLayout } from "./Nav/useNavLayout.js";
 export { NavBar } from "./NavBar/NavBar.js";
 export { Picker } from "./Picker/Picker.js";
 export { Popover } from "./Popover/Popover.js";
+export { PortraitTiles } from "./PortraitTiles/PortraitTiles.js";
 export { ProgressBar } from "./ProgressBar/ProgressBar.js";
 export { getProgressIntent, toProgressPercent, toProgressValue, } from "./ProgressBar/progressValue.js";
 export { QueryBuilder } from "./QueryBuilder/QueryBuilder.js";
@@ -98,6 +99,7 @@ export { ReorderList } from "./ReorderList/ReorderList.js";
 export { AnchorLink } from "./RouterLink/AnchorLink.js";
 export { RouterLinkProvider, useRouterLink, } from "./RouterLink/RouterLinkProvider.js";
 export { getIsRoutedHref } from "./RouterLink/routerLink.js";
+export { UnstyledLink } from "./RouterLink/UnstyledLink.js";
 export { SearchInput } from "./SearchInput/SearchInput.js";
 export { SegmentedControl } from "./SegmentedControl/SegmentedControl.js";
 export { Select } from "./Select/Select.js";

package/dist/index.js.map

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

package/dist/tileStyles.d.ts

@@ -31,6 +31,21 @@ import type { ControlSize } from "@charcuterie/tokens";
  * anywhere. QueuePilot's queue-type chooser shipped exactly that.
  */
 export declare const TILE_PADDING_CLASS: Record<ControlSize, string>;
+/**
+ * What a tile with an accent edge adds to its LEADING padding.
+ *
+ * The bar is drawn by `Card`'s accent-edge pseudo-element, which is
+ * an overlay rather than a border — so it takes no space in the box
+ * model and lands on top of the text unless the tile makes room for
+ * it. `Card` has the same arrangement and the same answer.
+ *
+ * A separate map rather than a second full padding scale, because
+ * only the leading side changes and the shared box is the promise
+ * the 2026-09-01 record made. It is applied ONLY when an edge is
+ * drawn: a radio tile has no bar, and giving it this padding would
+ * be dead space on the side its own control sits on.
+ */
+export declare const TILE_ACCENT_EDGE_PADDING_CLASS: Record<ControlSize, string>;
 /**
  * The box, and only the box. Every state layered over it is a
  * **border and a surface**, never colour alone — the same reason

package/dist/tileStyles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tileStyles.d.ts","sourceRoot":"","sources":["../src/tileStyles.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;GAkBG;AAEH,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAA;AAEtD;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,kBAAkB,EAAE,MAAM,CACrC,WAAW,EACX,MAAM,CAKP,CAAA;AAED;;;;GAIG;AACH,eAAO,MAAM,cAAc,6DACiC,CAAA;AAE5D,eAAO,MAAM,oBAAoB,EAAE,MAAM,CACvC,WAAW,EACX,MAAM,CAKP,CAAA;AAED;;;;GAIG;AACH,eAAO,MAAM,oBAAoB,EAAE,MAAM,CACvC,WAAW,EACX,MAAM,CAKP,CAAA;AAED;;;;GAIG;AACH,eAAO,MAAM,cAAc,EAAE,MAAM,CAAC,WAAW,EAAE,MAAM,CAItD,CAAA;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,eAAO,MAAM,kBAAkB,gGACgE,CAAA;AAE/F,8DAA8D;AAC9D,eAAO,MAAM,6BAA6B,uCACJ,CAAA"}
+{"version":3,"file":"tileStyles.d.ts","sourceRoot":"","sources":["../src/tileStyles.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;GAkBG;AAEH,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAA;AAEtD;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,kBAAkB,EAAE,MAAM,CACrC,WAAW,EACX,MAAM,CAWP,CAAA;AAED;;;;;;;;;;;;;GAaG;AACH,eAAO,MAAM,8BAA8B,EAAE,MAAM,CACjD,WAAW,EACX,MAAM,CAKP,CAAA;AAED;;;;GAIG;AACH,eAAO,MAAM,cAAc,6DACiC,CAAA;AAE5D,eAAO,MAAM,oBAAoB,EAAE,MAAM,CACvC,WAAW,EACX,MAAM,CAKP,CAAA;AAED;;;;GAIG;AACH,eAAO,MAAM,oBAAoB,EAAE,MAAM,CACvC,WAAW,EACX,MAAM,CAKP,CAAA;AAED;;;;GAIG;AACH,eAAO,MAAM,cAAc,EAAE,MAAM,CAAC,WAAW,EAAE,MAAM,CAItD,CAAA;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,eAAO,MAAM,kBAAkB,gGACgE,CAAA;AAE/F,8DAA8D;AAC9D,eAAO,MAAM,6BAA6B,uCACJ,CAAA"}

package/dist/tileStyles.js

@@ -32,7 +32,32 @@
 export const TILE_PADDING_CLASS = {
     sm: "px-3 py-2.5",
     md: "px-3.5 py-3",
-    lg: "px-4 py-3.5",
+    // `lg` is the landing-page tile — mux-magic's "Pick a tool",
+    // Gallery Downloader's two cards — where the tile is the only
+    // thing on the page and reads as a panel rather than as a row.
+    // It was `px-4 py-3.5`, which is a control's padding wearing a
+    // card's name, and the owner called the result "very boring"
+    // when it shipped in QueuePilot.
+    lg: "px-6 py-5",
+};
+/**
+ * What a tile with an accent edge adds to its LEADING padding.
+ *
+ * The bar is drawn by `Card`'s accent-edge pseudo-element, which is
+ * an overlay rather than a border — so it takes no space in the box
+ * model and lands on top of the text unless the tile makes room for
+ * it. `Card` has the same arrangement and the same answer.
+ *
+ * A separate map rather than a second full padding scale, because
+ * only the leading side changes and the shared box is the promise
+ * the 2026-09-01 record made. It is applied ONLY when an edge is
+ * drawn: a radio tile has no bar, and giving it this padding would
+ * be dead space on the side its own control sits on.
+ */
+export const TILE_ACCENT_EDGE_PADDING_CLASS = {
+    sm: "ps-4",
+    md: "ps-4.5",
+    lg: "ps-7",
 };
 /**
  * The box, and only the box. Every state layered over it is a

package/dist/tileStyles.js.map

@@ -1 +1 @@
-{"version":3,"file":"tileStyles.js","sourceRoot":"","sources":["../src/tileStyles.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;GAkBG;AAIH;;;;;;;;;;;GAWG;AACH,MAAM,CAAC,MAAM,kBAAkB,GAG3B;IACF,EAAE,EAAE,aAAa;IACjB,EAAE,EAAE,aAAa;IACjB,EAAE,EAAE,aAAa;CAClB,CAAA;AAED;;;;GAIG;AACH,MAAM,CAAC,MAAM,cAAc,GACzB,0DAA0D,CAAA;AAE5D,MAAM,CAAC,MAAM,oBAAoB,GAG7B;IACF,EAAE,EAAE,SAAS;IACb,EAAE,EAAE,SAAS;IACb,EAAE,EAAE,SAAS;CACd,CAAA;AAED;;;;GAIG;AACH,MAAM,CAAC,MAAM,oBAAoB,GAG7B;IACF,EAAE,EAAE,SAAS;IACb,EAAE,EAAE,SAAS;IACb,EAAE,EAAE,SAAS;CACd,CAAA;AAED;;;;GAIG;AACH,MAAM,CAAC,MAAM,cAAc,GAAgC;IACzD,EAAE,EAAE,SAAS;IACb,EAAE,EAAE,OAAO;IACX,EAAE,EAAE,OAAO;CACZ,CAAA;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,MAAM,CAAC,MAAM,kBAAkB,GAC7B,6FAA6F,CAAA;AAE/F,8DAA8D;AAC9D,MAAM,CAAC,MAAM,6BAA6B,GACxC,oCAAoC,CAAA"}
+{"version":3,"file":"tileStyles.js","sourceRoot":"","sources":["../src/tileStyles.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;GAkBG;AAIH;;;;;;;;;;;GAWG;AACH,MAAM,CAAC,MAAM,kBAAkB,GAG3B;IACF,EAAE,EAAE,aAAa;IACjB,EAAE,EAAE,aAAa;IACjB,6DAA6D;IAC7D,8DAA8D;IAC9D,+DAA+D;IAC/D,+DAA+D;IAC/D,6DAA6D;IAC7D,iCAAiC;IACjC,EAAE,EAAE,WAAW;CAChB,CAAA;AAED;;;;;;;;;;;;;GAaG;AACH,MAAM,CAAC,MAAM,8BAA8B,GAGvC;IACF,EAAE,EAAE,MAAM;IACV,EAAE,EAAE,QAAQ;IACZ,EAAE,EAAE,MAAM;CACX,CAAA;AAED;;;;GAIG;AACH,MAAM,CAAC,MAAM,cAAc,GACzB,0DAA0D,CAAA;AAE5D,MAAM,CAAC,MAAM,oBAAoB,GAG7B;IACF,EAAE,EAAE,SAAS;IACb,EAAE,EAAE,SAAS;IACb,EAAE,EAAE,SAAS;CACd,CAAA;AAED;;;;GAIG;AACH,MAAM,CAAC,MAAM,oBAAoB,GAG7B;IACF,EAAE,EAAE,SAAS;IACb,EAAE,EAAE,SAAS;IACb,EAAE,EAAE,SAAS;CACd,CAAA;AAED;;;;GAIG;AACH,MAAM,CAAC,MAAM,cAAc,GAAgC;IACzD,EAAE,EAAE,SAAS;IACb,EAAE,EAAE,OAAO;IACX,EAAE,EAAE,OAAO;CACZ,CAAA;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,MAAM,CAAC,MAAM,kBAAkB,GAC7B,6FAA6F,CAAA;AAE/F,8DAA8D;AAC9D,MAAM,CAAC,MAAM,6BAA6B,GACxC,oCAAoC,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@charcuterie/ui",
-  "version": "4.0.0",
+  "version": "4.2.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.6.0",
+    "@charcuterie/tokens": "1.7.0",
     "@floating-ui/react": "^0.27.20",
     "@tanstack/react-virtual": "^3.13.12",
     "tailwind-merge": "^3.6.0"

package/src/ActionTiles/ActionTiles.mdx

@@ -6,8 +6,8 @@ import * as ActionTilesStories from "./ActionTiles.stories";
 
 # ActionTiles
 
-A set of **actions** drawn as tiles — a bordered card carrying a name and a line of help, in
-a grid that gains columns with its container.
+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 grid that gains columns with its container.
 
 This is [`RadioGroup`](/docs/components-controls-radiogroup--docs)'s `itemShape="tile"` with
 the radio taken away. The 2026-08-25 record that made the choice tile a `RadioGroup` shape
@@ -21,6 +21,49 @@ giving one `aria-checked` would be worse than the paint it replaced"*.
 
 <Controls />
 
+## The colour is the point, and it is not decoration
+
+The first version of this component was neutral, and the owner's verdict on it was *"very
+boring, not colorful"*. Three apps had already answered the question themselves — mux-magic,
+Gallery Downloader and points-market all coloured their tiles by hand — so the paint is now
+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.
+
+<Canvas of={ActionTilesStories.AutoHues} />
+
+The bar is `Card`'s accent-edge pseudo-element rather than a second copy of one, so a tile and
+a [`Card`](/docs/components-layout-card--docs) on the same page draw the same bar. That also
+buys the corner: a border is painted on the border box and cannot follow a curve, which is why
+all three hand-rolled versions in the fleet ran past the radius and stopped square.
+
+Because it is an **overlay**, it occupies nothing in the box model — so the tile widens its
+leading padding to make room. Without that the bar draws straight through the first letter of
+the name, and nothing reports it: a pseudo-element is not in the DOM, so no query can miss it
+and axe has nothing to say about a glyph with a stripe on it.
+
+`categorical` and not `intent`, for the reason `cardAccentEdge.ts` gives: an intent is a
+*claim* — `danger` says what happens if you press the thing — and "Builder" beside "Jobs" is
+making no claim about either. Ten numbered hues say only "these are different from each
+other", which is what a tile set means.
+
+### Naming a hue, and turning them off
+
+An item's `categorical` overrides the one its position would have given it, and the rest go on
+walking the palette from their own positions — so naming one does not force naming all of
+them. Worth doing when the colour belongs to the **thing** rather than to the list.
+
+<Canvas of={ActionTilesStories.NamedHues} />
+
+`accent="none"` is the paint this component shipped with, kept as an opt-out. Reach for it
+when the tiles sit inside something already carrying a colour of its own, where a second
+palette is noise rather than information.
+
+<Canvas of={ActionTilesStories.Neutral} />
+
 ## Which of the two you want
 
 Ask what a press does.
@@ -66,6 +109,14 @@ between `Button` and `ButtonLink`.
 The test compares **computed** styles of an action tile and a resting radio tile, not class
 names. A class-name assertion passes while the paint is wrong.
 
+There is exactly one difference, and it is asserted rather than waived: a coloured action tile
+has more **leading** padding than a radio tile, by the room its bar takes. Every other side
+matches, and `accent="none"` matches on all four — so "the boxes match" cannot quietly come to
+mean "the boxes match apart from whatever changed last". A radio tile draws no bar at all: a
+checked one says so by turning its whole border `intent-accent-solid`, and a coloured stripe
+on the same box would be one card carrying two claims — *this one is selected* and *this one
+is the blue one* — in the same place.
+
 ## `href` makes the tile a real anchor
 
 Middle-click, ctrl-click, "open in a new tab", "copy link address" and the status bar all
@@ -93,11 +144,18 @@ cost a keyboard user the ability to Tab to the second tile.
 The group takes a required `label`, which names the set — "Queue type", "Pick a tool" — the
 way a `radiogroup` is named. A set of unnamed tiles is a pile of buttons.
 
-## A tile may lead with an icon
+## A tile may lead with an icon, beside the name
+
+The icon sits **to the left of the title**, with the hint below both — which is how all three
+apps that had grown this card by hand drew it, and how the owner asked for it back: *"I like
+how Mux-Magic looks today with the icon to the left of the title."*
+
+It takes the tile's hue, so an app passes a `stroke="currentColor"` path and states no colour
+of its own. Size is the app's; around 22px at `md` and 30px at `lg` reads the way those
+hand-rolled cards did. The library still ships no icons.
 
-`icon` is `aria-hidden` by construction, because the name it sits above is inside the same
-tile — an announced icon is the label read twice. The library still ships no icons; apps
-bring their own.
+`icon` is `aria-hidden` by construction, because the name it sits beside is inside the same
+tile — an announced icon is the label read twice.
 
 <Canvas of={ActionTilesStories.WithIcons} />
 
@@ -115,12 +173,28 @@ same constant `RadioGroup`'s tile shape uses, and each of its three parts is loa
   class strings, so `` `grid-cols-[…${n}px…]` `` generates nothing, paints nothing and
   reports nothing.
 
+### The floor sizes the CONTAINER's tracks, not the tiles
+
+`minTileInlineSize` is the narrowest a **track** may be, and `auto-fill` lays as many of
+them as fit whether or not there are tiles to put in them. So the number to pick comes from
+the width of the box the set is in, divided by how many tiles you want across it — not from
+how many tiles you have.
+
+Leave it at the 200px default in a 1024px container and the grid cuts four tracks. Two
+tiles take the first two, the other half of the row is empty background, and the set reads
+as a layout bug.
+
+⚠️ **Nothing reports this.** It type-checks, it lints, it passes every unit and e2e test,
+and the DOM is correct — the tiles really are in a grid, and the grid really has the columns
+it was asked for. Three apps shipped a half-empty row on the day they adopted this
+component, and each one was caught by a screenshot. If a set has few tiles, look at it.
+
+<Canvas of={ActionTilesStories.Responsive} />
+
 This is **not** `useAdaptiveColumns`. That hook buys a column with **height**, for an
 unbounded gallery that is going to scroll; a tile set is a bounded group inside a form section
 or a first step, where the only question is how many fit across the box it was given.
 
-<Canvas of={ActionTilesStories.Responsive} />
-
 ## What this deliberately does not do
 
 - **Hold a selection.** That is `RadioGroup itemShape="tile"`, and giving these tiles

package/src/ActionTiles/ActionTiles.stories.tsx

@@ -8,9 +8,11 @@ import {
   StorySection,
 } from "../board.storyHelpers.tsx"
 import {
+  ImageIcon,
   InboxIcon,
   PlayIcon,
   SearchIcon,
+  SettingsIcon,
 } from "../icons.storyHelpers.tsx"
 import { RadioGroup } from "../RadioGroup/RadioGroup.tsx"
 import type { ActionTileItem } from "./ActionTiles.tsx"
@@ -56,6 +58,43 @@ const START_ITEMS: ActionTileItem[] = [
   },
 ]
 
+/**
+ * Enough tiles to see the palette walk. Ten hues, taken in order,
+ * and not one colour prop between them.
+ */
+const LIBRARY_ITEMS: ActionTileItem[] = [
+  {
+    hint: "Feature films.",
+    icon: <PlayIcon />,
+    label: "Movies",
+    value: "movies",
+  },
+  {
+    hint: "Episodic television.",
+    icon: <InboxIcon />,
+    label: "Shows",
+    value: "shows",
+  },
+  {
+    hint: "Albums and tracks.",
+    icon: <SearchIcon />,
+    label: "Music",
+    value: "music",
+  },
+  {
+    hint: "Scanned pages by series.",
+    icon: <ImageIcon />,
+    label: "Comics",
+    value: "comics",
+  },
+  {
+    hint: "Cores and ROMs.",
+    icon: <SettingsIcon />,
+    label: "Games",
+    value: "games",
+  },
+]
+
 /**
  * A tile that carries an `href` is a real `<a href>`, so
  * middle-click, ctrl-click and "copy link address" all work. The
@@ -92,6 +131,7 @@ const meta = {
   // `args` from docgen, so an unstated default shows in the props
   // table with nothing selected in its control.
   args: {
+    accent: "auto",
     minTileInlineSize: 200,
     size: "md",
   },
@@ -243,8 +283,8 @@ export const AllStates: Story = {
 export const BesideTheRadioTile: Story = {
   args: { items: QUEUE_TYPE_ITEMS, label: "Queue type" },
   render: (controlProps) => (
-    <StorySection title="One box, two controls. Only the resting radio tile matches — a checked one wears the accent edge, which is the state ActionTiles has none of.">
-      <StoryGrid columns={2}>
+    <StorySection title="One box, two controls. The neutral action tile matches the resting radio tile on every side; the coloured one differs only on the leading edge, by the room its bar takes.">
+      <StoryGrid columns={3}>
         <StoryCell
           align="stretch"
           label="ActionTiles — presses and is done"
@@ -252,6 +292,17 @@ export const BesideTheRadioTile: Story = {
           <ActionTiles {...controlProps} />
         </StoryCell>
 
+        <StoryCell
+          align="stretch"
+          label="ActionTiles accent='none' — the same box exactly"
+        >
+          <ActionTiles
+            {...controlProps}
+            accent="none"
+            label="Queue type, uncoloured"
+          />
+        </StoryCell>
+
         <StoryCell
           align="stretch"
           label="RadioGroup itemShape='tile' — holds a value"
@@ -309,3 +360,57 @@ export const Responsive: Story = {
 export const Interactive: Story = {
   args: { items: QUEUE_TYPE_ITEMS, label: "Queue type" },
 }
+
+/**
+ * The default: the set walks the ten-hue categorical palette in
+ * order, so ten tiles get ten colours and the call site passes no
+ * colour at all.
+ *
+ * The bar is `Card`'s accent-edge pseudo-element, which is why a
+ * tile and a card on one page are the same bar rather than two that
+ * nearly match, and why it follows the tile's corner instead of
+ * running past it and stopping square.
+ */
+export const AutoHues: Story = {
+  args: { items: LIBRARY_ITEMS, label: "Pick a library" },
+}
+
+/**
+ * A tile that names its own `categorical` keeps that hue, and the
+ * rest go on walking the palette from their own positions — so
+ * naming one does not force naming all of them.
+ *
+ * Worth doing when the colour belongs to the THING rather than to
+ * the list: a destination that is hue 7 everywhere else in the app
+ * should not become hue 2 because a tile was inserted above it.
+ */
+export const NamedHues: Story = {
+  args: {
+    items: [
+      { ...(LIBRARY_ITEMS[0] as ActionTileItem) },
+      {
+        ...(LIBRARY_ITEMS[1] as ActionTileItem),
+        categorical: 7,
+      },
+      { ...(LIBRARY_ITEMS[2] as ActionTileItem) },
+    ],
+    label: "Pick a library, with Shows pinned to hue 7",
+  },
+}
+
+/**
+ * `accent="none"` is the paint this component shipped with, kept as
+ * an opt-out rather than deleted.
+ *
+ * Reach for it when the tiles sit inside something already carrying
+ * a colour of its own — a coloured panel, a lane header — where a
+ * second palette is noise rather than information. Everything else
+ * about the tile is unchanged.
+ */
+export const Neutral: Story = {
+  args: {
+    accent: "none",
+    items: START_ITEMS,
+    label: "Where to start",
+  },
+}

package/src/ActionTiles/ActionTiles.test.tsx

@@ -9,14 +9,36 @@ import * as stories from "./ActionTiles.stories.tsx"
 
 const {
   AllStates,
+  AutoHues,
   BesideTheRadioTile,
   Default,
   Interactive,
   Links,
+  NamedHues,
+  Neutral,
   Responsive,
   WithIcons,
 } = composeStories(stories)
 
+/**
+ * The accent-edge layer out of a computed `box-shadow`.
+ *
+ * Reading the whole string does not work: Tailwind's shadow chain
+ * always emits four EMPTY `rgba(0, 0, 0, 0) 0px 0px 0px 0px` layers
+ * for the ring and shadow slots nothing filled, so a naive
+ * "contains no transparent colour" assertion fails on a bar that is
+ * painted perfectly. The bar is the `inset` layer, and it is the
+ * only one.
+ *
+ * Returns `"none"` when there is no inset layer at all, which is
+ * what `accent="none"` must produce.
+ */
+const getAccentEdgeLayer = (boxShadow: string) =>
+  boxShadow
+    .split(/,(?![^(]*\))/)
+    .map((layer) => layer.trim())
+    .find((layer) => layer.endsWith("inset")) ?? "none"
+
 test("it is a named group of pressable tiles", async () => {
   const { canvas, canvasElement } =
     await mountStory(Default)
@@ -187,14 +209,33 @@ test("a disabled link drops its href and stays announced as a link", async () =>
  * rather than trusted — the same discipline `ButtonLink.test.tsx`
  * applies to `Button`. Two copies of one string is a promise that
  * survives exactly one edit.
+ *
+ * The UNCOLOURED action tile is the one held to an exact match. A
+ * coloured one carries a bar its neighbour does not, and the room
+ * for that bar is a real difference on one side — asserted
+ * separately below, so "the boxes match" cannot quietly come to mean
+ * "the boxes match apart from whatever changed last".
  */
-test("an action tile is the same box as a resting radio tile", async () => {
+test("an uncoloured action tile is the same box as a resting radio tile", async () => {
   const { canvas } = await mountStory(BesideTheRadioTile)
 
-  const actionTile = expectAgentDrivable(canvas, {
-    name: "Picks Choose titles yourself, then arrange them in priority and random lanes.",
-    role: "button",
-  })
+  // Scoped to the group rather than fetched by accessible name:
+  // the board draws the same two tiles three times, so a bare
+  // `getByRole("button", { name: "Picks …" })` is ambiguous.
+  const getFirstTile = (name: string) => {
+    const tile = expectAgentDrivable(canvas, {
+      name,
+      role: "group",
+    }).querySelector<HTMLElement>("button")
+
+    if (!tile) {
+      throw new Error(`${name} drew no tile`)
+    }
+
+    return tile
+  }
+
+  const actionTile = getFirstTile("Queue type, uncoloured")
 
   const radioGroup = expectAgentDrivable(canvas, {
     name: "Queue type, as radios",
@@ -227,6 +268,10 @@ test("an action tile is the same box as a resting radio tile", async () => {
     radio.paddingInlineStart,
   )
 
+  await expect(action.paddingInlineEnd).toBe(
+    radio.paddingInlineEnd,
+  )
+
   await expect(action.borderTopWidth).toBe(
     radio.borderTopWidth,
   )
@@ -253,6 +298,161 @@ test("an action tile is the same box as a resting radio tile", async () => {
   ).toBeGreaterThan(0)
 })
 
+/**
+ * The bar is an OVERLAY — `Card`'s accent-edge pseudo-element, which
+ * is painted over the box and occupies nothing in it. A tile that
+ * did not widen its leading padding would draw the bar straight
+ * through the first letter of its own name, and nothing would report
+ * that: the pseudo-element is not in the DOM, so no query can miss
+ * it and axe has nothing to say about a glyph with a stripe on it.
+ *
+ * So the assertion is the difference itself, in computed pixels.
+ */
+test("a coloured tile makes room for its bar, and only on the leading side", async () => {
+  const { canvas } = await mountStory(BesideTheRadioTile)
+
+  const getFirstTile = (name: string) => {
+    const tile = expectAgentDrivable(canvas, {
+      name,
+      role: "group",
+    }).querySelector<HTMLElement>("button")
+
+    if (!tile) {
+      throw new Error(`${name} drew no tile`)
+    }
+
+    return tile
+  }
+
+  const coloured = getComputedStyle(
+    getFirstTile("Queue type"),
+  )
+
+  const uncoloured = getComputedStyle(
+    getFirstTile("Queue type, uncoloured"),
+  )
+
+  await expect(
+    Number.parseFloat(coloured.paddingInlineStart),
+  ).toBeGreaterThan(
+    Number.parseFloat(uncoloured.paddingInlineStart),
+  )
+
+  // Every other side is untouched. The colour is a bar and a hue,
+  // not a second set of metrics.
+  await expect(coloured.paddingInlineEnd).toBe(
+    uncoloured.paddingInlineEnd,
+  )
+
+  await expect(coloured.paddingTop).toBe(
+    uncoloured.paddingTop,
+  )
+
+  await expect(coloured.paddingBottom).toBe(
+    uncoloured.paddingBottom,
+  )
+
+  await expect(coloured.borderTopLeftRadius).toBe(
+    uncoloured.borderTopLeftRadius,
+  )
+})
+
+/**
+ * Ten hues taken in order, 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
+ * passes while the paint is wrong, and a `--color-categorical-*`
+ * that had never existed would resolve to nothing, paint
+ * transparent, and satisfy every check that the element rendered.
+ */
+test("a set walks the palette, and a named hue holds its place", async () => {
+  const { canvas } = await mountStory(AutoHues)
+
+  const group = expectAgentDrivable(canvas, {
+    name: "Pick a library",
+    role: "group",
+  })
+
+  const bars = Array.from(
+    group.querySelectorAll<HTMLElement>("button"),
+  ).map((tile) =>
+    getAccentEdgeLayer(
+      getComputedStyle(tile, "::before").boxShadow,
+    ),
+  )
+
+  await expect(bars).toHaveLength(5)
+
+  for (const bar of bars) {
+    // A token that resolved to nothing paints a transparent bar and
+    // passes every "did it render" check ever written.
+    await expect(bar).toMatch(/^rgb\(\d+, \d+, \d+\) /)
+  }
+
+  // Five tiles, five different colours.
+  await expect(new Set(bars).size).toBe(5)
+})
+
+test("a named hue survives a tile being inserted above it", async () => {
+  const { canvas } = await mountStory(NamedHues)
+
+  const pinned = expectAgentDrivable(canvas, {
+    name: "Shows Episodic television.",
+    role: "button",
+  })
+
+  const { canvas: autoCanvas } = await mountStory(AutoHues)
+
+  const seventh = Array.from(
+    expectAgentDrivable(autoCanvas, {
+      name: "Pick a library",
+      role: "group",
+    }).querySelectorAll<HTMLElement>("button"),
+  )[1]
+
+  if (!seventh) {
+    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.
+  await expect(
+    getAccentEdgeLayer(
+      getComputedStyle(pinned, "::before").boxShadow,
+    ),
+  ).not.toBe(
+    getAccentEdgeLayer(
+      getComputedStyle(seventh, "::before").boxShadow,
+    ),
+  )
+})
+
+/**
+ * `accent="none"` is an opt-out, so it has to actually draw no bar
+ * — not a bar in a neutral colour, which would still be a stripe on
+ * a page that asked for none.
+ */
+test("accent='none' draws no bar at all", async () => {
+  const { canvas, canvasElement } =
+    await mountStory(Neutral)
+
+  const tile = expectAgentDrivable(canvas, {
+    name: "New arrivals Everything that arrived since the last run.",
+    role: "button",
+  })
+
+  await expect(
+    getAccentEdgeLayer(
+      getComputedStyle(tile, "::before").boxShadow,
+    ),
+  ).toBe("none")
+
+  await expectNoAxeViolations(canvasElement)
+})
+
 test("the column count comes from the container, not the window", async () => {
   const { canvas } = await mountStory(Responsive)