@charcuterie/ui 3.15.0 → 3.17.0

package/src/RadioGroup/RadioGroup.test.tsx

@@ -7,8 +7,14 @@ import { mountStory } from "../mountStory.testHelpers.ts"
 import { expectAgentDrivable } from "../testing/index.ts"
 import * as stories from "./RadioGroup.stories.tsx"
 
-const { AllStates, Default, Interactive } =
-  composeStories(stories)
+const {
+  AllStates,
+  Default,
+  Interactive,
+  Responsive,
+  Tiles,
+  TilesWithIcons,
+} = composeStories(stories)
 
 /**
  * `querySelectorAll` rather than `getAllByRole("radio")`: a board
@@ -230,3 +236,174 @@ test("a read-only group is announced and its choice cannot move", async () => {
 
   await expectNoAxeViolations(canvasElement)
 })
+
+/**
+ * The tile shape is the same control in a box, so what these assert
+ * is that **nothing about the control changed** — role, exclusivity,
+ * the roving tab stop and selection-follows-focus are the ones
+ * already proven above, driven through the tile story.
+ */
+test("a tile group is still a radiogroup of radios", async () => {
+  const { canvas, canvasElement } = await mountStory(Tiles)
+
+  const group = expectAgentDrivable(canvas, {
+    name: "On import",
+    role: "radiogroup",
+  })
+
+  const options = getOptions(group)
+
+  await expect(options).toHaveLength(4)
+
+  await waitFor(() => {
+    expect(
+      options.filter(
+        (one) =>
+          one.getAttribute("aria-checked") === "true",
+      ),
+    ).toHaveLength(1)
+  })
+
+  // Exactly one tab stop — the roving rule survives the layout
+  // change, because the layout is all that changed.
+  await expect(
+    options.filter((one) => one.tabIndex === 0),
+  ).toHaveLength(1)
+
+  await expectNoAxeViolations(canvasElement)
+})
+
+test("a tile's hint is part of the option's accessible name", async () => {
+  const { canvas } = await mountStory(Tiles)
+
+  // The reason the hint is rendered inside the button rather than
+  // beside it: a hint a screen reader never reads is a hint half the
+  // audience does not have. `getByRole` computes the name from
+  // contents, so this query only passes if it is in there.
+  expectAgentDrivable(canvas, {
+    name: "Hard link One copy on disk, two names for it. Same volume only.",
+    role: "radio",
+  })
+})
+
+test("a tile icon is decoration and stays out of the name", async () => {
+  const { canvas, canvasElement } =
+    await mountStory(TilesWithIcons)
+
+  // Named by its words alone. An icon that joined the name would
+  // make this query fail, which is the whole reason it is
+  // `aria-hidden`.
+  expectAgentDrivable(canvas, {
+    name: "New arrivals Everything that arrived since the last run.",
+    role: "radio",
+  })
+
+  await expectNoAxeViolations(canvasElement)
+})
+
+test("the arrow keys still move and check inside a tile grid", async () => {
+  const { canvas } = await mountStory(Tiles)
+
+  const options = getOptions(
+    expectAgentDrivable(canvas, {
+      name: "On import",
+      role: "radiogroup",
+    }),
+  )
+
+  options[0]?.focus()
+
+  // ArrowRight in a grid is `focus.next`, exactly as ArrowDown is in
+  // a stack. APG gives a radio group one traversal order, and a grid
+  // does not earn a second one.
+  await userEvent.keyboard("{ArrowRight}")
+
+  await waitFor(() => {
+    expect(options[1]).toHaveAttribute(
+      "aria-checked",
+      "true",
+    )
+  })
+})
+
+/**
+ * The three things about the box that fail *silently*, so all three
+ * are read off `getComputedStyle` in a real browser rather than off
+ * a class name. A class-name assertion would have passed while the
+ * grid was one column, because the class really was in the DOM.
+ */
+test("a tile carries a border, and the chosen one carries the accent", async () => {
+  const { canvas } = await mountStory(Tiles)
+
+  const options = getOptions(
+    expectAgentDrivable(canvas, {
+      name: "On import",
+      role: "radiogroup",
+    }),
+  )
+
+  const [first, second] = options as [
+    HTMLButtonElement,
+    HTMLButtonElement,
+  ]
+
+  await waitFor(() => {
+    expect(first).toHaveAttribute("aria-checked", "true")
+  })
+
+  const chosen = getComputedStyle(first)
+
+  const other = getComputedStyle(second)
+
+  await expect(
+    Number.parseFloat(chosen.borderTopWidth),
+  ).toBeGreaterThan(0)
+
+  // A border and a surface, never colour alone — but the two tiles
+  // must still differ, or "chosen" is told by the radio dot only.
+  await expect(chosen.borderTopColor).not.toBe(
+    other.borderTopColor,
+  )
+
+  await expect(chosen.backgroundColor).not.toBe(
+    other.backgroundColor,
+  )
+})
+
+test("the column count comes from the container, not the window", async () => {
+  const { canvas } = await mountStory(Responsive)
+
+  const getColumnCount = (name: string) =>
+    getComputedStyle(
+      expectAgentDrivable(canvas, {
+        name,
+        role: "radiogroup",
+      }),
+    ).gridTemplateColumns.split(" ").length
+
+  // One viewport, three container widths, and the answer changes
+  // with the container. Every panel is the same window.
+  await expect(getColumnCount("On import at 15rem")).toBe(1)
+
+  await expect(getColumnCount("On import at 34rem")).toBe(2)
+})
+
+test("a tile grid never overflows a container narrower than one tile", async () => {
+  const { canvas } = await mountStory(Responsive)
+
+  const group = expectAgentDrivable(canvas, {
+    name: "On import at 15rem",
+    role: "radiogroup",
+  })
+
+  // 15rem is 240px and the tile floor is 200px, so this passes
+  // either way — the case that matters is the `min(…, 100%)`, which
+  // is what stops a 200px floor from becoming a horizontal
+  // scrollbar in the Narrow View.
+  await expect(
+    group.getBoundingClientRect().width,
+  ).toBeLessThanOrEqual(
+    (group.parentElement?.getBoundingClientRect().width ??
+      0) + 1,
+  )
+})

package/src/RadioGroup/RadioGroup.tsx

@@ -4,13 +4,40 @@ import {
   useSinglePicker,
 } from "@charcuterie/logic"
 import type { ControlSize } from "@charcuterie/tokens"
-import type { ReactNode } from "react"
+import type { CSSProperties, ReactNode } from "react"
 import { useCallback, useEffect, useRef } from "react"
 
 import { toClassName } from "../toClassName.ts"
 import { RadioGroupOption } from "./RadioGroupOption.tsx"
 
+/**
+ * Which shape the options are drawn in. The control is the same
+ * `radiogroup` either way — this is layout, and it is a prop rather
+ * than a second component because nothing about the semantics, the
+ * keyboard model or the element changes with it.
+ *
+ *  - `row` — the default. Each option is a line of prose beside its
+ *    radio, stacked down the page. The form-length list.
+ *  - `tile` — each option is a bordered card carrying a name, an
+ *    optional line of help and a selected surface, and the group is
+ *    a grid that gains columns with the CONTAINER's width.
+ */
+export type RadioItemShape = "row" | "tile"
+
 export type RadioItem = {
+  /**
+   * A line of help under the label. Drawn one step down the type
+   * ramp in `content-muted`, inside the option's accessible name —
+   * a hint a screen reader never reads is a hint half the audience
+   * does not have.
+   */
+  hint?: ReactNode
+  /**
+   * Leading content, before the name. A `Badge`, an app's own icon,
+   * a count. `tile` only: a row already leads with its radio, and a
+   * second leading mark either side of it has nowhere to sit.
+   */
+  icon?: ReactNode
   /**
    * A disabled option is simply **not registered** with the roving
    * group, so the arrow keys skip it without any command in
@@ -24,6 +51,11 @@ export type RadioItem = {
 
 export type RadioGroupProps = {
   className?: string
+  /**
+   * Draws each option as a card in a grid instead of a row in a
+   * stack. Defaults to `row`.
+   */
+  itemShape?: RadioItemShape
   items: readonly RadioItem[]
   /**
    * Shows which option is chosen at full contrast but refuses to move
@@ -34,6 +66,13 @@ export type RadioGroupProps = {
   isReadOnly?: boolean
   /** The group's accessible name. Required. */
   label: string
+  /**
+   * The narrowest a tile track may be, in CSS px. `tile` only.
+   *
+   * It is the grid's floor and not the tile's width: tracks below it
+   * are not created, and the ones that are share the row evenly.
+   */
+  minTileInlineSize?: number
   onChange?: (selectedValue: string | null) => void
   /** **Initial** only. Charcuterie owns it from then on. */
   selectedValue?: string
@@ -46,6 +85,47 @@ const GAP_CLASS: Record<ControlSize, string> = {
   lg: "gap-2",
 }
 
+/**
+ * Wider than the row gaps: rows are separated by their leading, and
+ * tiles by nothing but the gap, so the same 6px that reads as a list
+ * reads as a seam between two cards.
+ */
+const TILE_GAP_CLASS: Record<ControlSize, string> = {
+  sm: "gap-1.5",
+  md: "gap-2",
+  lg: "gap-3",
+}
+
+/**
+ * `auto-fill`, and deliberately not `auto-fit`.
+ *
+ * `auto-fit` collapses the empty tracks and lets the ones that
+ * remain share the whole row, so six tiles in a 2560px container
+ * become six 420px slabs — the full-width-row shape in a new
+ * costume. `auto-fill` keeps the empty tracks, so a tile stays a
+ * tile and the grid simply has room to spare.
+ *
+ * `min(…, 100%)` is what stops the floor overflowing a container
+ * narrower than one tile, which is the Narrow View and is otherwise
+ * a horizontal scrollbar on a phone.
+ *
+ * The floor arrives as a custom property rather than an interpolated
+ * class because Tailwind scans source *text* for complete class
+ * strings: `` `grid-cols-[…${n}px…]` `` generates nothing, paints
+ * nothing and reports nothing. One written-out literal reading
+ * `var(--charcuterie-tile-min-inline-size)` covers every width an
+ * app can ask for — the same reason `Card`'s accent edge goes
+ * through one property.
+ *
+ * This is **not** `useAdaptiveColumns`, and the difference is the
+ * question being asked. That hook buys a column with height, for an
+ * unbounded gallery that will scroll; a radio group is a bounded set
+ * of options inside a form section, where the only question is how
+ * many fit across the box it was given.
+ */
+const TILE_COLUMNS_CLASS =
+  "grid-cols-[repeat(auto-fill,minmax(min(var(--charcuterie-tile-min-inline-size),100%),1fr))]"
+
 /**
  * One choice out of many, each on its own row with a label the size
  * of prose — the stacked sibling of `SegmentedControl`.
@@ -67,12 +147,24 @@ const GAP_CLASS: Record<ControlSize, string> = {
  * choice from a named set is a radio group, and its arrow keys both
  * move focus and check — APG's one activation mode, the same reason
  * `SegmentedControl` has no `manual` prop.
+ *
+ * ### `itemShape="tile"` is the choice tile
+ *
+ * A bordered card carrying a name, a line of help and a selected
+ * surface, in a grid that gains columns with its container. It is a
+ * prop and not a third component because **only the box changes**:
+ * the element, the role, the roving tabindex, selection-follows-focus
+ * and `isReadOnly` are the ones already tested here. `SegmentedControl`
+ * earns its own file by being a different control — one connected
+ * strip, no radio affordance; a tile is this control with a border.
  */
 export const RadioGroup = ({
   className,
+  itemShape = "row",
   items,
   isReadOnly = false,
   label,
+  minTileInlineSize = 200,
   onChange,
   selectedValue,
   size = "md",
@@ -83,6 +175,8 @@ export const RadioGroup = ({
     new Map<string, HTMLButtonElement>(),
   )
 
+  const isTile = itemShape === "tile"
+
   const initialValue =
     selectedValue ??
     items.find((one) => !one.isDisabled)?.value ??
@@ -152,8 +246,10 @@ export const RadioGroup = ({
       aria-label={label}
       aria-readonly={isReadOnly || undefined}
       className={toClassName(
-        "flex flex-col",
-        GAP_CLASS[size],
+        isTile
+          ? toClassName("grid", TILE_COLUMNS_CLASS)
+          : "flex flex-col",
+        isTile ? TILE_GAP_CLASS[size] : GAP_CLASS[size],
         className,
       )}
       onKeyDown={(keyEvent) => {
@@ -193,6 +289,13 @@ export const RadioGroup = ({
         }
       }}
       ref={groupRef}
+      style={
+        isTile
+          ? ({
+              "--charcuterie-tile-min-inline-size": `${minTileInlineSize}px`,
+            } as CSSProperties)
+          : undefined
+      }
       role="radiogroup"
     >
       {items.map((item) => (
@@ -200,6 +303,7 @@ export const RadioGroup = ({
           isChecked={checkedValue === item.value}
           isReadOnly={isReadOnly}
           item={item}
+          itemShape={itemShape}
           key={item.value}
           onChoose={chooseOption}
           registerFocus={focus.register}

package/src/RadioGroup/RadioGroupOption.tsx

@@ -4,12 +4,16 @@ import { useEffect } from "react"
 
 import { FOCUS_RING_CLASS } from "../intentStyles.ts"
 import { toClassName } from "../toClassName.ts"
-import type { RadioItem } from "./RadioGroup.tsx"
+import type {
+  RadioItem,
+  RadioItemShape,
+} from "./RadioGroup.tsx"
 
 export type RadioGroupOptionProps = {
   isChecked: boolean
   isReadOnly: boolean
   item: RadioItem
+  itemShape: RadioItemShape
   onChoose: (value: string) => void
   /** `RovingFocus.register` — membership of the arrow-key group. */
   registerFocus: (value: string) => () => void
@@ -44,6 +48,36 @@ const TEXT_SIZE_CLASS: Record<ControlSize, string> = {
   lg: "text-lg",
 }
 
+/**
+ * One step down from the option's own text, and never below `xs`:
+ * a hint that keeps shrinking with the density axis is the 11px
+ * caption the 2026-08-10 ramp rebuild exists to have removed.
+ */
+const HINT_TEXT_CLASS: Record<ControlSize, string> = {
+  sm: "text-xs",
+  md: "text-xs",
+  lg: "text-sm",
+}
+
+/**
+ * A tile is a card, so its padding is a card's rather than a
+ * control's — enough that the border reads as a box around content
+ * and not as an outline on a line of text.
+ */
+const TILE_PADDING_CLASS: Record<ControlSize, string> = {
+  sm: "px-3 py-2.5",
+  md: "px-3.5 py-3",
+  lg: "px-4 py-3.5",
+}
+
+/**
+ * The box, and only the box. Every state below it is a **border and
+ * a surface**, never colour alone — the same reason `Stepper`
+ * refuses to say "done" with a hue.
+ */
+const TILE_BOX_CLASS =
+  "rounded-lg border border-border-subtle bg-surface-raised"
+
 /**
  * Its own file for the same reason `SegmentedOption` is: **both
  * registrations are effects**, and an effect cannot run in a loop.
@@ -52,11 +86,22 @@ const TEXT_SIZE_CLASS: Record<ControlSize, string> = {
  * with a background, so the checked dot can be centred by the grid
  * and sized independently of the ring — a filled `bg-intent-accent`
  * ring with no inner dot reads as a checkbox, not a radio.
+ *
+ * ### The tile shape is the same element with a border
+ *
+ * `itemShape="tile"` swaps `inline-flex` for `flex` — a grid item
+ * stretches to its track, and an inline box would sit at
+ * max-content inside it — adds the card's padding and border, and
+ * moves the ring to the top of a two-line label. The radio dot is
+ * still there and is still the thing a screen reader reads: a tile
+ * with its border taken away is this row, which is why the two are
+ * one component.
  */
 export const RadioGroupOption = ({
   isChecked,
   isReadOnly,
   item,
+  itemShape,
   onChoose,
   registerFocus,
   registerSelection,
@@ -64,7 +109,15 @@ export const RadioGroupOption = ({
   tabIndex,
   trackElement,
 }: RadioGroupOptionProps): ReactNode => {
-  const { isDisabled = false, label, value } = item
+  const {
+    hint,
+    icon,
+    isDisabled = false,
+    label,
+    value,
+  } = item
+
+  const isTile = itemShape === "tile"
 
   useEffect(
     () => registerSelection(value),
@@ -84,7 +137,21 @@ export const RadioGroupOption = ({
     <button
       aria-checked={isChecked}
       className={toClassName(
-        "inline-flex items-center gap-2 rounded-sm text-content-secondary text-start transition-colors duration-(--duration-fast) ease-standard",
+        "gap-2 text-content-secondary text-start transition-colors duration-(--duration-fast) ease-standard",
+        isTile
+          ? toClassName(
+              "flex min-w-0 items-start",
+              TILE_BOX_CLASS,
+              TILE_PADDING_CLASS[size],
+            )
+          : toClassName(
+              "inline-flex rounded-sm",
+              // A hint puts a second line under the label, and a ring
+              // centred against both sits beside neither.
+              hint === undefined
+                ? "items-center"
+                : "items-start",
+            ),
         TEXT_SIZE_CLASS[size],
         // Disabled turns the whole option down with `opacity-60`, the
         // same family treatment as `Checkbox` and `Switch`, rather than
@@ -95,7 +162,18 @@ export const RadioGroupOption = ({
           ? "cursor-not-allowed opacity-60"
           : isReadOnly
             ? "cursor-default"
-            : "cursor-pointer hover:text-content-primary",
+            : isTile
+              ? "cursor-pointer hover:border-border-strong"
+              : "cursor-pointer hover:text-content-primary",
+        // The selected tile carries the accent on its EDGE and lifts
+        // its surface. A tile that said "chosen" with a background
+        // alone would be the one state a monochrome ePaper build
+        // cannot show at all.
+        isTile && isChecked
+          ? isReadOnly
+            ? "border-intent-neutral-solid bg-surface-overlay"
+            : "border-intent-accent-solid bg-surface-overlay"
+          : "",
         FOCUS_RING_CLASS,
       )}
       disabled={isDisabled}
@@ -142,7 +220,46 @@ export const RadioGroupOption = ({
         />
       </span>
 
-      <span>{label}</span>
+      {hint === undefined && !isTile ? (
+        <span>{label}</span>
+      ) : (
+        // `min-w-0` and `wrap-anywhere` together, because a grid
+        // item's automatic minimum is its min-content width: one
+        // unbroken token — a path, a URL, a title with no spaces —
+        // otherwise sets the track's floor and shoves the grid out
+        // of its container.
+        <span className="flex min-w-0 flex-col gap-0.5 wrap-anywhere">
+          {icon !== undefined && isTile ? (
+            // Decorative by construction: the name it sits beside is
+            // in the same button, so an announced icon is the label
+            // read twice.
+            <span aria-hidden className="flex">
+              {icon}
+            </span>
+          ) : null}
+
+          <span
+            className={
+              isTile
+                ? "font-semibold text-content-primary"
+                : undefined
+            }
+          >
+            {label}
+          </span>
+
+          {hint === undefined ? null : (
+            <span
+              className={toClassName(
+                "font-normal text-content-muted",
+                HINT_TEXT_CLASS[size],
+              )}
+            >
+              {hint}
+            </span>
+          )}
+        </span>
+      )}
     </button>
   )
 }

package/src/icons.storyHelpers.tsx

@@ -191,3 +191,111 @@ export const MoreIcon = (): ReactNode => (
     <circle cx="12" cy="19" r="1.75" />
   </svg>
 )
+
+/**
+ * The markdown toolbar's nine, plus the bar's own overflow above.
+ *
+ * They are here rather than in the editor's story file because the
+ * two editors — the textarea one and the CodeMirror one — take the
+ * same `icons` bag and both boards want it. `MARKDOWN_ICONS` below
+ * is the whole bag, so a story passes one object instead of nine
+ * props and cannot demonstrate a half-iconed bar by accident.
+ */
+export const BoldIcon = (): ReactNode => (
+  <svg {...iconProps} aria-hidden="true">
+    <path d="M7 5h6.5a3.5 3.5 0 0 1 0 7H7z" />
+
+    <path d="M7 12h7.5a3.5 3.5 0 0 1 0 7H7z" />
+  </svg>
+)
+
+export const ItalicIcon = (): ReactNode => (
+  <svg {...iconProps} aria-hidden="true">
+    <path d="M19 5h-8M13 19H5M15 5l-4 14" />
+  </svg>
+)
+
+export const HeadingIcon = (): ReactNode => (
+  <svg {...iconProps} aria-hidden="true">
+    <path d="M6 5v14M18 5v14M6 12h12" />
+  </svg>
+)
+
+export const BulletedListIcon = (): ReactNode => (
+  <svg {...iconProps} aria-hidden="true">
+    <path d="M9 6h12M9 12h12M9 18h12" />
+
+    <path d="M4.5 6h.01M4.5 12h.01M4.5 18h.01" />
+  </svg>
+)
+
+export const TaskListIcon = (): ReactNode => (
+  <svg {...iconProps} aria-hidden="true">
+    <path d="M3 6.5l1.8 1.8L8 5M3 16.5l1.8 1.8L8 15" />
+
+    <path d="M12 7h9M12 17h9" />
+  </svg>
+)
+
+export const NumberedListIcon = (): ReactNode => (
+  <svg {...iconProps} aria-hidden="true">
+    <path d="M11 6h10M11 12h10M11 18h10" />
+
+    <path d="M4 5.5l1.5-.5V10M4 10h3" />
+
+    <path d="M4 15.2a1.6 1.6 0 1 1 2.6 1.3L4 19h3" />
+  </svg>
+)
+
+/**
+ * Two quote marks, not an indented bar. An indent bar is what the
+ * *result* looks like; the marks are what the button does.
+ *
+ * Filled, and closed rather than an open stroke. The stroked
+ * version of this shape drew as a pair of `s` characters at
+ * `size-[1.15em]` — a curve that reads as a letter is worse than
+ * no icon, because the eye stops to read it.
+ */
+export const QuoteIcon = (): ReactNode => (
+  <svg
+    {...iconProps}
+    aria-hidden="true"
+    fill="currentColor"
+    stroke="none"
+  >
+    <path d="M10 6.2a6.6 6.6 0 0 0-4.7 6.2c0 2.1 1.3 3.6 3.2 3.6 1.7 0 2.9-1.2 2.9-2.8 0-1.6-1.1-2.7-2.6-2.7h-.5c.4-1.4 1.4-2.5 2.8-3.1z" />
+
+    <path d="M19 6.2a6.6 6.6 0 0 0-4.7 6.2c0 2.1 1.3 3.6 3.2 3.6 1.7 0 2.9-1.2 2.9-2.8 0-1.6-1.1-2.7-2.6-2.7h-.5c.4-1.4 1.4-2.5 2.8-3.1z" />
+  </svg>
+)
+
+export const CodeIcon = (): ReactNode => (
+  <svg {...iconProps} aria-hidden="true">
+    <path d="M16 18l6-6-6-6M8 6l-6 6 6 6" />
+  </svg>
+)
+
+export const LinkIcon = (): ReactNode => (
+  <svg {...iconProps} aria-hidden="true">
+    <path d="M10.5 13.5a4.5 4.5 0 0 0 6.8.5l2.5-2.5a4.5 4.5 0 0 0-6.4-6.4l-1.4 1.4" />
+
+    <path d="M13.5 10.5a4.5 4.5 0 0 0-6.8-.5l-2.5 2.5a4.5 4.5 0 0 0 6.4 6.4l1.4-1.4" />
+  </svg>
+)
+
+/**
+ * The whole `MarkdownEditorIcons` bag, ready to spread into either
+ * editor's `icons` prop.
+ */
+export const MARKDOWN_ICONS = {
+  bold: <BoldIcon />,
+  bulletedList: <BulletedListIcon />,
+  code: <CodeIcon />,
+  heading: <HeadingIcon />,
+  italic: <ItalicIcon />,
+  link: <LinkIcon />,
+  numberedList: <NumberedListIcon />,
+  overflow: <MoreIcon />,
+  quote: <QuoteIcon />,
+  taskList: <TaskListIcon />,
+}

package/src/markdownEditorCodeMirror/MarkdownEditorCodeMirror.mdx

@@ -155,6 +155,22 @@ from either edge, or flip the Markdown source toggle, which is exactly what it i
   a literal paste is worse than not linkifying one.
 - **Anything else** is left to the browser.
 
+## The toolbar is words until you bring icons
+
+This package ships **no icons**, so the bar defaults to ten word buttons — which is a bar
+that has already collapsed most of itself into "More actions" at the width a description
+field actually gets. Pass an `icons` bag and the whole row fits, with the words kept as the
+accessible names.
+
+<Canvas of={MarkdownEditorCodeMirrorStories.IconsVersusWords} />
+
+`icons.overflow` is the tenth key and the odd one out — it is the **bar's own** trigger,
+not a markdown command. It is in the same bag because an app that passes the nine and not
+the tenth gets nine glyphs followed by the words "More actions", and until now there was no
+prop to fix that with.
+
+<Canvas of={MarkdownEditorCodeMirrorStories.IconToolbar} />
+
 ## Accessibility, and the honest cost
 
 The `<textarea>` sibling gets caret movement, IME composition, spellcheck, the platform undo