gbs-add-block 1.2.19 → 2.0.0

package/source/beta-components/avatar/__tests__/core.test.ts

@@ -0,0 +1,88 @@
+import { describe, expect, it } from "vitest";
+import { colorIndex, initials, splitGroup } from "../core/identity";
+
+describe("initials", () => {
+  it("takes the first and last part of a name", () => {
+    expect(initials("Ada Lovelace")).toBe("AL");
+    expect(initials("Ada Byron King Lovelace")).toBe("AL");
+  });
+
+  it("takes one letter from a single name, not two", () => {
+    // "MA" out of "Madonna" reads as a mistake.
+    expect(initials("Madonna")).toBe("M");
+  });
+
+  it("splits on the punctuation that joins parts of a name", () => {
+    expect(initials("jean-luc picard")).toBe("JP");
+    expect(initials("ada.lovelace")).toBe("AL");
+    expect(initials("ada_lovelace")).toBe("AL");
+    expect(initials("Ada Lovelace")).toBe("AL");
+  });
+
+  it("reads an email as the part before the at sign", () => {
+    // Nothing in "example.com" is this person's name.
+    expect(initials("ada@example.com")).toBe("A");
+    expect(initials("ada.lovelace@example.com")).toBe("AL");
+  });
+
+  it("keeps a whole character, not half a surrogate pair", () => {
+    expect(initials("\u{1F680} Launch")).toBe("\u{1F680}L");
+    expect(Array.from(initials("\u{1F680}")).length).toBe(1);
+  });
+
+  it("leaves scripts without letter case alone", () => {
+    // Uppercasing means nothing here, and can change the character.
+    expect(initials("山田 太郎")).toBe("山太");
+  });
+
+  it("does not turn one letter into two", () => {
+    // Uppercase ß is SS, which would be two letters in a one-letter slot.
+    expect(initials("ßrian")).toBe("ß");
+  });
+
+  it("has nothing for nothing", () => {
+    expect(initials("")).toBe("");
+    expect(initials("   ")).toBe("");
+    expect(initials("@example.com")).toBe("");
+  });
+});
+
+describe("colorIndex", () => {
+  it("gives the same person the same colour every time", () => {
+    expect(colorIndex("Ada Lovelace", 8)).toBe(colorIndex("Ada Lovelace", 8));
+  });
+
+  it("stays inside the palette", () => {
+    for (const name of ["", "a", "Ada Lovelace", "\u{1F680}", "x".repeat(500)]) {
+      const index = colorIndex(name, 8);
+      expect(index).toBeGreaterThanOrEqual(0);
+      expect(index).toBeLessThan(8);
+    }
+    expect(colorIndex("Ada", 0)).toBe(0);
+  });
+
+  it("spreads names across the palette rather than piling them up", () => {
+    const names = ["Ada", "Grace", "Alan", "Katherine", "Edsger", "Barbara", "Tim", "Linus"];
+    const used = new Set(names.map((name) => colorIndex(name, 8)));
+    expect(used.size).toBeGreaterThanOrEqual(5);
+  });
+});
+
+describe("splitGroup", () => {
+  const people = ["a", "b", "c", "d", "e"];
+
+  it("shows everyone when they fit", () => {
+    expect(splitGroup(people, 5)).toEqual({ shown: people, overflow: 0 });
+    expect(splitGroup(people, 9).overflow).toBe(0);
+  });
+
+  it("counts the overflow bubble as one of the slots", () => {
+    // Four slots: three faces and a "+2", so the group stays four wide.
+    expect(splitGroup(people, 4)).toEqual({ shown: ["a", "b", "c"], overflow: 2 });
+  });
+
+  it("handles a group with no room for faces", () => {
+    expect(splitGroup(people, 1)).toEqual({ shown: [], overflow: 5 });
+    expect(splitGroup(people, 0)).toEqual({ shown: [], overflow: 5 });
+  });
+});

package/source/beta-components/avatar/core/identity.ts

@@ -0,0 +1,103 @@
+/**
+ * Turning a name into the two things an avatar needs when there is no picture:
+ * a couple of letters, and a colour that is always the same for that person.
+ *
+ * Both are harder than they look, and both are wrong in a way that is hard to
+ * notice from an English-speaking desk — which is why they are here, pure and
+ * under test, rather than inline in the component.
+ */
+
+/**
+ * Names are split on whitespace — `\s` covers the no-break space a copied name
+ * often carries — and on the punctuation that joins parts of one.
+ */
+const SEPARATORS = /[\s._\-–—/\\|,]+/u;
+
+/**
+ * Letters from a name: two for a name with parts, one otherwise.
+ *
+ * `"Ada Lovelace"` gives `AL`, `"ada"` gives `A`, `"ada@example.com"` gives
+ * `A` — an email is not a name, so only the part before the `@` is looked at
+ * and never the domain.
+ *
+ * Two deliberate decisions:
+ *
+ * Characters are taken with `Intl.Segmenter` where it exists, so a name
+ * beginning with an emoji, a surrogate pair or a letter carrying a combining
+ * mark yields that whole character rather than half of it — `slice(0, 1)` on a
+ * string is a byte operation wearing a costume.
+ *
+ * Scripts without letter case are left alone: uppercasing is meaningless for
+ * CJK and can change the character. A Japanese name gives its first character,
+ * not a mangled one.
+ */
+export function initials(name: string, max = 2): string {
+  const source = name.trim().split("@")[0] ?? "";
+  if (source === "") return "";
+
+  const parts = source.split(SEPARATORS).filter(Boolean);
+  if (parts.length === 0) return "";
+
+  // One part is a single name or a handle: one letter is enough, and taking
+  // two from "Madonna" gives "MA", which looks like a mistake.
+  const chosen = parts.length === 1 ? [parts[0]] : [parts[0], parts[parts.length - 1]];
+
+  return chosen
+    .slice(0, max)
+    .map((part) => firstCharacter(part))
+    .join("");
+}
+
+function firstCharacter(part: string): string {
+  const character = segmentFirst(part);
+  // `toLocaleUpperCase` on a script with no case returns it unchanged, which is
+  // the behaviour we want; it is the two-character mappings (ß → SS) that have
+  // to be cut back to one.
+  const upper = character.toLocaleUpperCase();
+  return upper.length > character.length ? character : upper;
+}
+
+let segmenter: Intl.Segmenter | null | undefined;
+
+function segmentFirst(text: string): string {
+  if (segmenter === undefined) {
+    segmenter = typeof Intl !== "undefined" && "Segmenter" in Intl ? new Intl.Segmenter() : null;
+  }
+  if (segmenter) {
+    for (const { segment } of segmenter.segment(text)) return segment;
+    return "";
+  }
+  // Without Segmenter, code points at least keep surrogate pairs whole.
+  return Array.from(text)[0] ?? "";
+}
+
+/**
+ * A stable index into a palette, from any string.
+ *
+ * The same person keeps the same colour on every page and in every session,
+ * without anything being stored, because the hash is a pure function of their
+ * name. FNV-1a: small, well spread for short strings, and not a security
+ * decision — nothing here is a secret.
+ */
+export function colorIndex(seed: string, count: number): number {
+  if (count <= 0) return 0;
+  let hash = 0x811c9dc5;
+  for (let index = 0; index < seed.length; index++) {
+    hash ^= seed.charCodeAt(index);
+    hash = Math.imul(hash, 0x01000193);
+  }
+  return Math.abs(hash) % count;
+}
+
+/**
+ * How an avatar group splits: the faces shown, and how many are left over.
+ *
+ * The overflow counter takes one of the slots, so showing "+2" out of five
+ * faces with `max: 3` means two faces and a counter, not three and a counter.
+ */
+export function splitGroup<T>(items: readonly T[], max: number): { shown: T[]; overflow: number } {
+  if (max <= 0) return { shown: [], overflow: items.length };
+  if (items.length <= max) return { shown: [...items], overflow: 0 };
+  const shown = items.slice(0, max - 1);
+  return { shown, overflow: items.length - shown.length };
+}

package/source/beta-components/avatar/core/index.ts

@@ -0,0 +1,2 @@
+export { colorIndex, initials, splitGroup } from "./identity";
+export type * from "./types";

package/source/beta-components/avatar/core/types.ts

@@ -0,0 +1,12 @@
+export type AvatarSize = "xs" | "sm" | "md" | "lg" | "xl";
+
+export type AvatarShape = "circle" | "square";
+
+/** Who is on the other side of a presence dot. */
+export type AvatarStatus = "online" | "away" | "busy" | "offline";
+
+export interface AvatarLocaleText {
+  /** The overflow bubble in a group. */
+  more(count: number): string;
+  status: Record<AvatarStatus, string>;
+}

package/source/beta-components/avatar/index.ts

@@ -0,0 +1,7 @@
+export { Avatar } from "./react/Avatar";
+export type { AvatarProps } from "./react/Avatar";
+export { AvatarGroup } from "./react/AvatarGroup";
+export type { AvatarGroupProps } from "./react/AvatarGroup";
+export { defaultAvatarText } from "./react/locale";
+export type { AvatarGroupSlot, AvatarSlot } from "./react/props";
+export * from "./core";

package/source/beta-components/avatar/react/Avatar.tsx

@@ -0,0 +1,118 @@
+"use client";
+
+import {
+  useMemo,
+  useState,
+  type CSSProperties,
+  type HTMLAttributes,
+  type ReactNode,
+  type Ref,
+} from "react";
+import { colorIndex, initials as toInitials } from "../core/identity";
+import type { AvatarLocaleText, AvatarShape, AvatarSize, AvatarStatus } from "../core/types";
+import { defaultAvatarText } from "./locale";
+import { cx, type AvatarSlot } from "./props";
+
+/** Hues spread around the wheel; the fill and text are mixed from one of these. */
+const PALETTE = 8;
+
+export interface AvatarProps extends Omit<HTMLAttributes<HTMLSpanElement>, "children"> {
+  /**
+   * The person or thing. Used for the alternative text, for the initials and
+   * for the colour, so the same person is always the same colour.
+   */
+  name?: string;
+  src?: string;
+  /** Overrides the text derived from `name`. */
+  initials?: string;
+  /** An icon or anything else to show instead of initials. */
+  children?: ReactNode;
+  /** Default `md` (32px). */
+  size?: AvatarSize;
+  /** Default `circle`. */
+  shape?: AvatarShape;
+  /** A presence dot in the corner. */
+  status?: AvatarStatus;
+  /** Marks the avatar as decoration, for a name printed next to it. */
+  decorative?: boolean;
+  className?: string;
+  classNames?: Partial<Record<AvatarSlot, string>>;
+  style?: CSSProperties;
+  localeText?: Partial<AvatarLocaleText>;
+  ref?: Ref<HTMLSpanElement>;
+}
+
+/**
+ * A person in a small square or circle: their picture, or the letters of their
+ * name on a colour derived from it.
+ *
+ * An image that fails to load falls back to the initials rather than leaving a
+ * broken frame — which happens more than it should with avatar URLs that have
+ * expired or come from a third party.
+ */
+export function Avatar(props: AvatarProps) {
+  const {
+    ref,
+    name = "",
+    src,
+    initials: initialsProp,
+    children,
+    size = "md",
+    shape = "circle",
+    status,
+    decorative = false,
+    className,
+    classNames,
+    style,
+    localeText,
+    ...rest
+  } = props;
+
+  const text = useMemo(() => ({ ...defaultAvatarText, ...localeText }), [localeText]);
+  const [failed, setFailed] = useState(false);
+  const letters = initialsProp ?? toInitials(name);
+  const showImage = Boolean(src) && !failed;
+
+  return (
+    <span
+      {...rest}
+      ref={ref}
+      className={cx("av-root", classNames?.root, className)}
+      style={{ ...style, "--av-hue-index": colorIndex(name || letters, PALETTE) } as CSSProperties}
+      data-size={size}
+      data-shape={shape}
+      data-status={status}
+      // Decoration when the name is printed beside it; otherwise the name is
+      // the alternative text, and there is no point repeating it.
+      role={decorative ? "presentation" : "img"}
+      aria-label={decorative ? undefined : name || undefined}
+      aria-hidden={decorative && !name ? "true" : undefined}
+    >
+      {showImage ? (
+        <img
+          className={cx("av-image", classNames?.image)}
+          src={src}
+          alt=""
+          loading="lazy"
+          decoding="async"
+          onError={() => setFailed(true)}
+        />
+      ) : (
+        <span className={cx("av-fallback", classNames?.fallback)} aria-hidden="true">
+          {children ?? letters}
+        </span>
+      )}
+
+      {status && (
+        <span
+          className={cx("av-status", classNames?.status)}
+          data-status={status}
+          // The dot is a fact about the person, so it is named rather than
+          // hidden — colour on its own tells a colour-blind user nothing.
+          role="img"
+          aria-label={text.status[status]}
+        />
+      )}
+    </span>
+  );
+}

package/source/beta-components/avatar/react/AvatarGroup.tsx

@@ -0,0 +1,74 @@
+"use client";
+
+import { Children, useMemo, type CSSProperties, type ReactNode, type Ref } from "react";
+import { splitGroup } from "../core/identity";
+import type { AvatarLocaleText, AvatarShape, AvatarSize } from "../core/types";
+import { defaultAvatarText } from "./locale";
+import { cx, type AvatarGroupSlot } from "./props";
+
+export interface AvatarGroupProps {
+  children: ReactNode;
+  /** How many slots there are, the overflow bubble included. Default 4. */
+  max?: number;
+  /** Applied to the group; each Avatar keeps its own if it sets one. */
+  size?: AvatarSize;
+  shape?: AvatarShape;
+  /** Names the set, e.g. "Assigned to". A list of faces with no name says nothing. */
+  label?: string;
+  className?: string;
+  classNames?: Partial<Record<AvatarGroupSlot, string>>;
+  style?: CSSProperties;
+  localeText?: Partial<AvatarLocaleText>;
+  ref?: Ref<HTMLDivElement>;
+}
+
+/**
+ * Overlapping avatars with a "+3" at the end.
+ *
+ * The overflow bubble takes one of the `max` slots, so five people with
+ * `max={4}` show three faces and a "+2" — the alternative, four faces and a
+ * "+2", is five slots wide and quietly breaks a layout built for four.
+ */
+export function AvatarGroup(props: AvatarGroupProps) {
+  const {
+    ref,
+    children,
+    max = 4,
+    size,
+    shape,
+    label,
+    className,
+    classNames,
+    style,
+    localeText,
+  } = props;
+
+  const text = useMemo(() => ({ ...defaultAvatarText, ...localeText }), [localeText]);
+  const items = Children.toArray(children);
+  const { shown, overflow } = splitGroup(items, max);
+
+  return (
+    <div
+      ref={ref}
+      className={cx("av-group", classNames?.root, className)}
+      style={style}
+      data-size={size}
+      data-shape={shape}
+      role="group"
+      aria-label={label}
+    >
+      {shown}
+      {overflow > 0 && (
+        <span
+          className={cx("av-overflow", classNames?.overflow)}
+          data-size={size}
+          data-shape={shape}
+          role="img"
+          aria-label={text.more(overflow)}
+        >
+          +{overflow}
+        </span>
+      )}
+    </div>
+  );
+}

package/source/beta-components/avatar/react/locale.ts

@@ -0,0 +1,11 @@
+import type { AvatarLocaleText } from "../core/types";
+
+export const defaultAvatarText: AvatarLocaleText = {
+  more: (count: number) => `${count} more`,
+  status: {
+    online: "Online",
+    away: "Away",
+    busy: "Busy",
+    offline: "Offline",
+  },
+};

package/source/beta-components/avatar/react/props.ts

@@ -0,0 +1,6 @@
+export type AvatarSlot = "root" | "image" | "fallback" | "status";
+
+export type AvatarGroupSlot = "root" | "overflow";
+
+// Shared with every other component, so class handling cannot drift.
+export { cx } from "../../shared/core/cx";

package/source/beta-components/avatar/styles.css

@@ -0,0 +1,227 @@
+/*
+ * Avatar and AvatarGroup styles.
+ *
+ * The fallback colour comes from --av-hue-index, which the component sets from
+ * a hash of the name: the same person is the same colour everywhere, and the
+ * palette is generated rather than listed, so it follows a themed hue. Tokens
+ * read the shared --gbs-* variables when they are set on an ancestor (set them
+ * on :root to theme every component at once). Rules live in the `components`
+ * layer, so utility classes passed through `className` / `classNames` override
+ * them.
+ */
+@layer theme, base, components, utilities;
+
+@layer components {
+  .av-root,
+  .av-group,
+  .av-overflow {
+    --av-fg: var(--gbs-fg, var(--dg-fg, light-dark(#18181b, #f4f4f5)));
+    --av-muted: var(--gbs-muted, var(--dg-muted, light-dark(#71717a, #a1a1aa)));
+    --av-bg: var(--gbs-bg, var(--dg-bg, light-dark(#ffffff, #0b0b0e)));
+    --av-subtle: var(--gbs-subtle, light-dark(#f4f4f5, #1c1c20));
+    --av-border: var(--gbs-border, var(--dg-border, light-dark(#e4e4e7, #27272a)));
+    --av-success: var(--gbs-success, light-dark(#15803d, #4ade80));
+    --av-warning: var(--gbs-warning, light-dark(#b45309, #fbbf24));
+    --av-danger: var(--gbs-danger, var(--dg-danger, light-dark(#dc2626, #f87171)));
+    --av-radius: var(--gbs-radius, var(--dg-radius, 8px));
+    --av-size: 32px;
+    --av-font-size: 13px;
+    --av-hue-index: 0;
+    /* Eight hues, 45° apart, starting at the blue end. */
+    --av-hue: calc(210 + var(--av-hue-index) * 45);
+
+    color-scheme: inherit;
+  }
+
+  :where(.dark, [data-theme="dark"]) :is(.av-root, .av-group, .av-overflow) {
+    color-scheme: dark;
+  }
+  :where(.light, [data-theme="light"]) :is(.av-root, .av-group, .av-overflow) {
+    color-scheme: light;
+  }
+
+  :where(.av-root, .av-group) *,
+  :where(.av-root, .av-group) *::before,
+  :where(.av-root, .av-group) *::after {
+    box-sizing: border-box;
+  }
+
+  .av-root {
+    position: relative;
+    display: inline-flex;
+    flex: none;
+    align-items: center;
+    justify-content: center;
+    width: var(--av-size);
+    height: var(--av-size);
+    border-radius: 50%;
+    background: var(--av-subtle);
+    font-size: var(--av-font-size);
+    font-weight: 600;
+    line-height: 1;
+    overflow: hidden;
+    user-select: none;
+    vertical-align: middle;
+  }
+  .av-root[data-shape="square"] {
+    border-radius: var(--av-radius);
+    overflow: visible;
+  }
+  .av-root[data-shape="square"] .av-image,
+  .av-root[data-shape="square"] .av-fallback {
+    border-radius: var(--av-radius);
+  }
+
+  .av-root[data-size="xs"] {
+    --av-size: 20px;
+    --av-font-size: 10px;
+  }
+  .av-root[data-size="sm"] {
+    --av-size: 24px;
+    --av-font-size: 11px;
+  }
+  .av-root[data-size="lg"] {
+    --av-size: 40px;
+    --av-font-size: 15px;
+  }
+  .av-root[data-size="xl"] {
+    --av-size: 56px;
+    --av-font-size: 20px;
+  }
+
+  .av-image {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+
+  /* `oklch` keeps every hue at the same lightness, so no one person's initials
+     come out harder to read than another's — which is what a list of hand-picked
+     hex pairs always ends up doing. */
+  .av-fallback {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    height: 100%;
+    background: oklch(from light-dark(oklch(0.93 0.05 0), oklch(0.32 0.06 0)) l c var(--av-hue));
+    color: oklch(from light-dark(oklch(0.42 0.13 0), oklch(0.88 0.1 0)) l c var(--av-hue));
+    text-transform: uppercase;
+  }
+  .av-fallback > svg {
+    width: 60%;
+    height: 60%;
+  }
+
+  .av-status {
+    position: absolute;
+    right: 0;
+    bottom: 0;
+    width: 30%;
+    height: 30%;
+    min-width: 8px;
+    min-height: 8px;
+    border: 2px solid var(--av-bg);
+    border-radius: 50%;
+    background: var(--av-muted);
+  }
+  .av-root[data-shape="square"] .av-status {
+    right: -2px;
+    bottom: -2px;
+  }
+  .av-status[data-status="online"] {
+    background: var(--av-success);
+  }
+  .av-status[data-status="away"] {
+    background: var(--av-warning);
+  }
+  .av-status[data-status="busy"] {
+    background: var(--av-danger);
+  }
+
+  /* ---------------------------------------------------------------- group */
+
+  .av-group {
+    display: inline-flex;
+    align-items: center;
+    vertical-align: middle;
+  }
+  /* Each face overlaps the one before and is ringed in the page colour, so the
+     stack reads as separate people rather than one smear. */
+  .av-group > * {
+    margin-inline-start: calc(var(--av-size) / -4);
+    box-shadow: 0 0 0 2px var(--av-bg);
+  }
+  .av-group > *:first-child {
+    margin-inline-start: 0;
+  }
+
+  .av-overflow {
+    position: relative;
+    display: inline-flex;
+    flex: none;
+    align-items: center;
+    justify-content: center;
+    width: var(--av-size);
+    height: var(--av-size);
+    border-radius: 50%;
+    background: var(--av-subtle);
+    /* Muted grey clears 4.5:1 on the page background but only reaches 4.39:1
+       on this one, so the count moves a step towards the text colour. */
+    color: color-mix(in oklab, var(--av-muted) 65%, var(--av-fg));
+    font-size: calc(var(--av-font-size) - 1px);
+    font-weight: 600;
+    font-variant-numeric: tabular-nums;
+    line-height: 1;
+  }
+  .av-overflow[data-shape="square"] {
+    border-radius: var(--av-radius);
+  }
+  .av-group[data-size="xs"],
+  .av-overflow[data-size="xs"] {
+    --av-size: 20px;
+    --av-font-size: 10px;
+  }
+  .av-group[data-size="sm"],
+  .av-overflow[data-size="sm"] {
+    --av-size: 24px;
+    --av-font-size: 11px;
+  }
+  .av-group[data-size="lg"],
+  .av-overflow[data-size="lg"] {
+    --av-size: 40px;
+    --av-font-size: 15px;
+  }
+  .av-group[data-size="xl"],
+  .av-overflow[data-size="xl"] {
+    --av-size: 56px;
+    --av-font-size: 20px;
+  }
+  /* The group's size reaches the avatars inside it, unless one sets its own. */
+  .av-group[data-size="xs"] .av-root:not([data-size]) {
+    --av-size: 20px;
+    --av-font-size: 10px;
+  }
+  .av-group[data-size="sm"] .av-root:not([data-size]) {
+    --av-size: 24px;
+    --av-font-size: 11px;
+  }
+  .av-group[data-size="lg"] .av-root:not([data-size]) {
+    --av-size: 40px;
+    --av-font-size: 15px;
+  }
+  .av-group[data-size="xl"] .av-root:not([data-size]) {
+    --av-size: 56px;
+    --av-font-size: 20px;
+  }
+
+  @media (forced-colors: active) {
+    .av-root,
+    .av-overflow {
+      border: 1px solid CanvasText;
+    }
+    .av-status {
+      border-color: Canvas;
+    }
+  }
+}

package/source/beta-components/badge/README.md

@@ -0,0 +1,37 @@
+# Badge and Tag
+
+Short labels for React 19, styled to match the rest of the library. A **Badge**
+is static text — a status, a category, a count. A **Tag** is a chip the user can
+take off. No runtime dependencies besides React.
+
+```ts
+import { Badge, Tag } from "@/components/badge";
+import "@/components/badge/styles.css";
+```
+
+```tsx
+<Badge variant="success">Active</Badge>
+<Badge variant="danger" appearance="solid" count={128} />   {/* 99+ */}
+<Badge variant="warning" dot>Degraded</Badge>
+
+<Tag onRemove={() => remove("berlin")}>Berlin</Tag>
+```
+
+**Badge:** `children` or `count`, `variant` (`neutral` `accent` `success`
+`warning` `danger` `info`), `appearance` (`soft` `solid` `outline`), `size`
+(`sm` `md`), `max`, `showZero`, `formatValue`, `dot`, `icon`, `classNames`
+(`root` `dot` `icon` `label`), `ref`, and every `<span>` attribute.
+
+**Tag:** the same variants, plus `onRemove`, `label` (names the remove button
+when the children are not a plain string), `disabled`, `classNames` (`root`
+`icon` `label` `remove`), `localeText`.
+
+A badge with `count` renders nothing at all when the count is zero, unless
+`showZero` says otherwise: an empty counter is noise on the page and a spurious
+announcement in a screen reader.
+
+The remove button carries the tag's own text in its name — "Remove Berlin" —
+because a row of identical "Remove" buttons cannot be told apart by anyone
+listening to it.
+
+`formatCount` and `showCount` are exported from the framework-free `core`.