@eifi1/ui-kit 0.48.2 → 0.50.0

package/src/components/row-actions.tsx

@@ -1,4 +1,4 @@
-import { isValidElement } from "react";
+import { isValidElement, useContext } from "react";
 import type { KeyboardEvent, MouseEvent, ReactElement, ReactNode } from "react";
 import { MoreHorizontal } from "lucide-react";
 import type { LucideIcon } from "lucide-react";
@@ -15,6 +15,8 @@ import type { TooltipSide } from "./tooltip";
 import type { DataTableColumn } from "./data-table";
 import { TableHeaderCell, type TableHeaderCellProps } from "./table";
 import { DEFAULT_ROW_ACTIONS_LABELS } from "./row-actions-labels";
+import { ConfirmContext } from "./confirm-context";
+import { ConfirmProvider } from "./confirm-dialog";
 
 /**
  * A row's actions — inline icons at Normal, one "⋯" menu at Large and above
@@ -30,6 +32,11 @@ import { DEFAULT_ROW_ACTIONS_LABELS } from "./row-actions-labels";
  * The data is the roster's `UserRowActionList`, generalised: entries, and `false` /
  * `null` for the ones a condition left out (`row.locked || {…}`).
  *
+ * Destructive actions belong in the menu (0.49 KIT-12): a `tone: "danger"` action goes
+ * into the "⋯" menu while the others stay inline (`dangerPlacement`), and choosing it
+ * opens a `ConfirmDialog` before `onSelect` runs (`confirm`; `false` to opt out). A
+ * delete is then never a bin icon in every row, one stray tap from gone.
+ *
  * 0.33 (§10.16): an action carries its state at both sizes — a toggle (`pressed`), a
  * disclosure (`expanded`, `controls`), a tone, a tour anchor (`dataTour`) — so a row
  * with an "on" share button or a tour step no longer keeps hand-rolled IconButtons at
@@ -47,11 +54,21 @@ export interface RowAction {
   /** The action's name: the inline icon's name and tooltip, the menu entry's words. */
   label: string;
   /**
-   * Runs it. The kit sends nothing — the app opens its confirmation or calls its API.
-   * Optional only beside `href`; an action has one or the other (or both: `onSelect`
-   * then runs as the link is followed).
+   * Runs it. The kit sends nothing — it calls this, after a `tone: "danger"` action's
+   * confirmation (see {@link confirm}). Optional only beside `href`; an action has one or
+   * the other (or both: `onSelect` then runs as the link is followed).
    */
   onSelect?: () => void;
+  /**
+   * 0.49 KIT-12: ask before `onSelect`. A `tone: "danger"` action asks by default — a
+   * `ConfirmDialog` (the provider's `useConfirm`, else one of its own) titled with the
+   * action and the row's name, "Delete “Ada Example”?", the consequence under it
+   * (`rowActions.confirmBody`), the action's label on the danger button and focus on
+   * Cancel. Pass the words to say more, or `false` when the app confirms in `onSelect`
+   * itself or offers an undo instead. Any other tone asks only when given one. Not for
+   * an `href` action: a link only navigates.
+   */
+  confirm?: boolean | RowActionConfirm;
   /**
    * The action NAVIGATES — an edit page, a mail to compose (0.32.1, kastlan's 0.32
    * report): a real link inline and in the menu, so open in a new tab, a middle click
@@ -133,6 +150,13 @@ export interface RowAction {
   dataTour?: string;
 }
 
+/** The words of a {@link RowAction.confirm}; each defaults as described there. */
+export interface RowActionConfirm {
+  title?: ReactNode;
+  body?: ReactNode;
+  confirmLabel?: ReactNode;
+}
+
 /** What a row's actions may be: entries, and `false` / `null` / `undefined` for the ones
  *  a condition left out. */
 export type RowActionList = readonly (RowAction | false | null | undefined)[];
@@ -143,6 +167,11 @@ export interface RowActionsLabels {
   actions: string;
   /** The menu button's name, given the row's: "Actions for Ada Example". */
   actionsFor: (name: string) => string;
+  /** 0.49 KIT-12: a danger action's confirmation title, given the action's label and the
+   *  row's name when it has one: "Delete “Ada Example”?", "Delete?". */
+  confirmTitle: (action: string, name?: string) => string;
+  /** 0.49 KIT-12: the line under it — "This cannot be undone." */
+  confirmBody: string;
 }
 
 // Defined in ./row-actions-labels, which holds no component code (0.34, KS U8).
@@ -166,6 +195,13 @@ export type RowActionsSize = Extract<IconButtonSize, "md" | "sm" | "xs" | "2xs">
 
 export interface RowActionsProps {
   actions: RowActionList;
+  /**
+   * 0.49 KIT-12: where `tone: "danger"` actions go while the others are inline. `"menu"`
+   * (default): into the row's "⋯" menu, so a delete is never one stray tap in every
+   * row — the other actions stay icons beside it. `"inline"`: an icon like the rest.
+   * `collapse="inline"` keeps every action inline, `collapse="menu"` every one in the menu.
+   */
+  dangerPlacement?: "menu" | "inline";
   /** The row's name, for the menu button's name — "Actions for Ada Example". Without it
    *  (or `null`, as API fields often are) the button is "Actions". */
   name?: string | null;
@@ -226,7 +262,7 @@ function toneAttr(tone: RowActionTone | undefined) {
  * A row's actions, inline or as a "⋯" menu — see {@link RowActionsCollapse}. Every
  * control stops its click (and the Enter/Space it stands for) from reaching the row, so
  * a clickable row or a DataTable `rowLink` does not open as well; in a DataTable column
- * also set `noRowLink: true`, as {@link rowActionsColumn} does.
+ * also set `noRowLink: true` and `role: "actions"`, as {@link rowActionsColumn} does.
  *
  * Inline, the icons sit in a {@link CompactControls} region at Normal: their labels
  * stay the names and the tooltips, and a locked one keeps its reason in the tooltip — a
@@ -238,10 +274,54 @@ function toneAttr(tone: RowActionTone | undefined) {
  * press close it, and focus goes back to the "⋯" button, which is where a confirmation
  * dialog then returns it.
  */
-export function RowActions({
+export function RowActions(props: RowActionsProps) {
+  const outer = useContext(ConfirmContext);
+  // A danger action asks first (0.49 KIT-12). Under the app's ConfirmProvider through
+  // it; without one, through a provider of this row's own — only when there is
+  // something to ask, so a plain row adds nothing.
+  if (outer === null && visibleActions(props.actions).some(asksFirst)) {
+    return (
+      <ConfirmProvider>
+        <RowActionsBody {...props} />
+      </ConfirmProvider>
+    );
+  }
+  return <RowActionsBody {...props} />;
+}
+
+/** Whether choosing `action` opens a confirmation first: a danger action unless it says
+ *  `confirm: false`, any other when it passes one; never a link. */
+function asksFirst(action: RowAction): boolean {
+  if (action.href !== undefined || action.confirm === false) return false;
+  return action.confirm !== undefined || action.tone === "danger";
+}
+
+/** `action.onSelect`, after its confirmation when it {@link asksFirst}. */
+function useRunAction(name: string | null | undefined, labels: RowActionsLabels) {
+  const confirm = useContext(ConfirmContext);
+  return (action: RowAction) => {
+    if (!asksFirst(action) || confirm === null) {
+      action.onSelect?.();
+      return;
+    }
+    const words = typeof action.confirm === "object" ? action.confirm : {};
+    void confirm({
+      title: words.title ?? labels.confirmTitle(action.label, name ?? undefined),
+      body: words.body ?? labels.confirmBody,
+      confirmLabel: words.confirmLabel ?? action.label,
+      tone: "danger",
+      commit: action.commit,
+    }).then((ok) => {
+      if (ok) action.onSelect?.();
+    });
+  };
+}
+
+function RowActionsBody({
   actions,
   name,
   collapse = "auto",
+  dangerPlacement = "menu",
   size = "xs",
   menuWidth = "15rem",
   className,
@@ -251,28 +331,64 @@ export function RowActions({
 }: RowActionsProps) {
   const labels = useKitLabels("rowActions", DEFAULT_ROW_ACTIONS_LABELS, labelsProp);
   const large = useLargeText();
+  const run = useRunAction(name, labels);
   const entries = visibleActions(actions);
   if (entries.length === 0) return null;
   const asMenu = collapse === "menu" || (collapse === "auto" && large && entries.length > 1);
-  if (!asMenu) {
-    const strip = (
-      <div data-slot="row-actions" className={cn("inline-flex items-center gap-0.5", className)}>
-        {entries.map((action) => (
-          <InlineAction
-            key={action.key ?? action.label}
-            action={action}
-            size={size}
-            glyphSize={glyphSize}
-            tooltipSide={tooltipSide}
-          />
-        ))}
-      </div>
-    );
-    // Compact at Normal (no room for a reason line in a row); at Large an inline action
-    // is the app's choice ("inline") or the row's only one, and shows its words.
-    return large ? strip : <CompactControls>{strip}</CompactControls>;
-  }
+  // Inline, a danger action still goes into the "⋯" menu (KIT-12) unless the app keeps it
+  // inline: the other actions stay icons, the menu holds the destructive ones.
+  const toMenu = (action: RowAction) =>
+    asMenu || (collapse === "auto" && dangerPlacement === "menu" && action.tone === "danger");
+  const inline = entries.filter((action) => !toMenu(action));
+  const menu = entries.filter(toMenu);
   const title = name ? labels.actionsFor(name) : labels.actions;
+  const menuButton = menu.length > 0 && (
+    <RowActionsMenu
+      entries={menu}
+      title={title}
+      size={size}
+      menuWidth={menuWidth}
+      run={run}
+      className={inline.length === 0 ? className : undefined}
+    />
+  );
+  if (inline.length === 0) return menuButton || null;
+  const strip = (
+    <div data-slot="row-actions" className={cn("inline-flex items-center gap-0.5", className)}>
+      {inline.map((action) => (
+        <InlineAction
+          key={action.key ?? action.label}
+          action={action}
+          size={size}
+          glyphSize={glyphSize}
+          tooltipSide={tooltipSide}
+          run={run}
+        />
+      ))}
+      {menuButton}
+    </div>
+  );
+  // Compact at Normal (no room for a reason line in a row); at Large an inline action
+  // is the app's choice ("inline") or the row's only one, and shows its words.
+  return large ? strip : <CompactControls>{strip}</CompactControls>;
+}
+
+/** The "⋯" button and its menu of `entries`. */
+function RowActionsMenu({
+  entries,
+  title,
+  size,
+  menuWidth,
+  run,
+  className,
+}: {
+  entries: RowAction[];
+  title: string;
+  size: RowActionsSize;
+  menuWidth: `${number}rem`;
+  run: (action: RowAction) => void;
+  className?: string;
+}) {
   // The menu closed when the action was chosen, so what is in flight shows on "⋯".
   const busy = entries.some((action) => action.pending);
   const anchored = entries.filter((action) => action.dataTour);
@@ -315,7 +431,7 @@ export function RowActions({
           <ul data-slot="row-actions-menu" className="space-y-0.5">
             {entries.map((action) => (
               <li key={action.key ?? action.label}>
-                <MenuAction action={action} close={close} />
+                <MenuAction action={action} close={close} run={run} />
               </li>
             ))}
           </ul>
@@ -355,7 +471,7 @@ function useActionHref(action: RowAction): string | undefined {
 }
 
 /** One entry of the "⋯" menu: the words, as a link for an `href`, else a button. */
-function MenuAction({ action, close }: { action: RowAction; close: () => void }) {
+function MenuAction({ action, close, run }: { action: RowAction; close: () => void; run: (action: RowAction) => void }) {
   const href = useActionHref(action);
   const glyph = glyphOf(action.icon);
   const glyphTone = action.tone === undefined ? undefined : MENU_GLYPH_TONE[action.tone];
@@ -376,7 +492,7 @@ function MenuAction({ action, close }: { action: RowAction; close: () => void })
   const tone = action.tone === "danger" ? "danger" : undefined;
   const select = () => {
     close();
-    action.onSelect?.();
+    run(action);
   };
   if (href !== undefined) {
     return (
@@ -424,11 +540,13 @@ function InlineAction({
   size,
   glyphSize,
   tooltipSide,
+  run,
 }: {
   action: RowAction;
   size: RowActionsSize;
   glyphSize?: IconButtonGlyphSize;
   tooltipSide?: TooltipSide;
+  run: (action: RowAction) => void;
 }) {
   const href = useActionHref(action);
   const glyph = glyphOf(action.icon);
@@ -471,7 +589,7 @@ function InlineAction({
         pending={action.pending}
         disabled={action.disabled}
         stopPropagation
-        onClick={() => action.onSelect?.()}
+        onClick={() => run(action)}
       >
         {glyph}
       </IconButton>
@@ -481,7 +599,7 @@ function InlineAction({
   const stop = {
     onClick: (e: MouseEvent) => {
       e.stopPropagation();
-      action.onSelect?.();
+      run(action);
     },
     onKeyDown: (e: KeyboardEvent) => {
       if (e.key === "Enter" || e.key === " ") e.stopPropagation();
@@ -606,7 +724,7 @@ export interface RowActionsColumnOptions<T> {
    */
   header?: ReactNode | false;
   labels?: LabelOverride<RowActionsLabels>;
-  /** Anything else for the column (`mobileHidden`, `cellProps`…), merged last. */
+  /** Anything else for the column (`mobileHidden`, `cellProps`, another `role`…), merged last. */
   column?: Partial<DataTableColumn<T>>;
 }
 
@@ -618,9 +736,10 @@ export interface RowActionsColumnOptions<T> {
  *
  * The heading says "Actions" on screen (0.46.1; `header` changes or hides it), the
  * column hugs its content at the row's end, and `noRowLink` keeps a `rowHref` anchor off it, so the
- * buttons keep their own clicks. On a phone it is a line of the card like any column;
- * set `column: { mobileHidden: true }` to drop it there (with `mobileDetailsInRow` it
- * then shows in the opened row instead).
+ * buttons keep their own clicks. It is `role: "actions"` (0.49 KIT-7): DataTable's default
+ * phone card draws it after its three fields, at the card's end, and never counts it as
+ * one of them. Set `column: { mobileHidden: true }` to drop it there (with
+ * `mobileDetailsInRow` it then shows in the opened row instead).
  */
 export function rowActionsColumn<T>({
   key = "actions",
@@ -660,6 +779,8 @@ export function rowActionsColumn<T>({
     // `RowActionsHead` (0.47).
     headClassName: ROW_ACTIONS_HEAD_CLASS,
     noRowLink: true,
+    // After the phone card's fields, never one of them (0.49 KIT-7).
+    role: "actions",
     ...column,
   };
 }

package/src/components/section-nav.tsx

@@ -0,0 +1,65 @@
+import { cn } from "../lib/cn";
+import { NavPills } from "./nav-pills";
+import type { NavPillItem, NavPillLinkProps } from "./nav-pills";
+import type { ReactElement, Ref } from "react";
+
+export interface SectionNavProps<T extends string> {
+  /** The section's pages, each with its `href` (a pill without one is a button that
+   *  calls `onSelect`). Labels short: the row is one line. */
+  items: NavPillItem<T>[];
+  /** The page that is open. `null`: none of them. */
+  current: T | null;
+  /** The section's name — the landmark's accessible name ("Accounting"). */
+  label: string;
+  /** Called with a pill's value on a click, before the router follows its link. */
+  onSelect?: (value: T) => void;
+  /** Your router's link. Default: the `<UiKitProvider linkComponent>`, then `<a>`. */
+  renderLink?: (props: NavPillLinkProps) => ReactElement;
+  /** Default `true`: only below `md`, where the sidebar that lists the same pages is
+   *  gone. `false` shows it at every width. */
+  phoneOnly?: boolean;
+  className?: string;
+  ref?: Ref<HTMLElement>;
+}
+
+/**
+ * The pages of a section on a phone, as one row of pills under the page title (0.49
+ * KIT-6) — kastlan's section pills, which each section page drew by hand.
+ *
+ * On a desktop the sidebar lists a group's pages; on a phone the AppShell's bar holds
+ * the groups, and a group's pages are a sheet away. This row puts them on the page
+ * itself: {@link NavPills} with `layout="scroll"` — one line that scrolls sideways, faded
+ * where it is cut, the open page scrolled into view (the row only, never the page). At
+ * most 48 px high: 44 px pills, the touch target a finger needs, and 2 px above and
+ * below. Each pill is a link (`aria-current="page"` on the open one) and its own tab
+ * stop; the row is a `<nav>` named by `label`.
+ *
+ * Place it right under the page's title (`PageHeader`); the AppShell's own row of a
+ * group's pages above the bar (`mobileSubNav`) is the shell-wide alternative — use one,
+ * not both, for the same pages.
+ */
+export function SectionNav<T extends string>({
+  items,
+  current,
+  label,
+  onSelect,
+  renderLink,
+  phoneOnly = true,
+  className,
+  ref,
+}: SectionNavProps<T>) {
+  return (
+    <NavPills
+      ref={ref}
+      aria-label={label}
+      items={items}
+      current={current}
+      onSelect={onSelect}
+      renderLink={renderLink}
+      layout="scroll"
+      // The ring inside the pill: the row scrolls, so it clips what leaves its box.
+      itemClassName="min-h-11 focus-visible:ring-inset"
+      className={cn("py-0.5 large:py-0", phoneOnly && "md:hidden", className)}
+    />
+  );
+}

package/src/components/series-chart.tsx

@@ -116,7 +116,9 @@ import {
 import { useBreakpoint } from "../hooks/use-breakpoint";
 import { useTextSize } from "../theme/text-size";
 import { chartHeightProps, type ChartHeight } from "./chart-height";
+import { useChartEdge } from "./chart-edge";
 import { cn } from "../lib/cn";
+import { formatWithMinus } from "../lib/minus";
 
 export interface SeriesChartSeries {
   /** The row key this line reads — and the `--color-<key>` it is painted with, so it
@@ -764,7 +766,8 @@ function useDefaultFormat(localeProp: string | undefined): (value: number) => st
   const locale = useKitLocale(localeProp);
   return useMemo(() => {
     const format = new Intl.NumberFormat(locale, { maximumFractionDigits: 2 });
-    return (value: number) => format.format(value);
+    // U+2212 on a negative tick and in the tooltip (0.49, KIT-1).
+    return (value: number) => formatWithMinus(format, value);
   }, [locale]);
 }
 
@@ -1019,6 +1022,7 @@ function SeriesPlot({
   // grows by itself — and the axes aim at three ticks instead of five from Large up.
   // Strokes, dashes and the grid stay px.
   const { scale } = useTextSize();
+  const edgeFor = useChartEdge();
   const ticksAim = tickTarget(scale);
   const grow = (px: number) => (scale === 1 ? px : Math.round(px * scale));
   // The keyboard stops' roving tab stop, and the one that has focus (see `PointKeys`).
@@ -1552,6 +1556,9 @@ function SeriesPlot({
           const type = entry.type ?? "line";
           const yAxisId = entry.axis ?? DEFAULT_Y_AXIS;
           const color = `var(--color-${entry.key})`;
+          // A filled mark in a hue under 3:1 against the ground gets a 1px ink edge
+          // (WCAG 1.4.11, anyplot's rule) — measured on the colour the config paints.
+          const edge = edgeFor(config[entry.key]?.color);
           const own = entry.dash ?? (entry.dashed ? 1 : 0);
           const dash = entry.step ? strokeDash(STEP_DASH) : typeof own === "string" ? own : strokeDash(own);
           const curve = entry.step ? "stepAfter" : (entry.curve ?? "monotone");
@@ -1566,6 +1573,7 @@ function SeriesPlot({
                 stackId={entry.stack}
                 fill={color}
                 fillOpacity={entry.fillOpacity}
+                {...(edge ? { stroke: edge, strokeWidth: 1 } : {})}
                 radius={entry.stack === undefined ? BAR_RADIUS : 0}
                 // Read off the row rather than recharts' `value`: in a stack that is the
                 // layer's running top, which a hole has too — and a hole gets no stub.
@@ -1596,8 +1604,9 @@ function SeriesPlot({
                 type={curve}
                 dataKey={entry.key}
                 stackId={entry.stack}
-                stroke={color}
-                strokeWidth={width}
+                // The edge replaces the hue on the area's outline only; the fill keeps it.
+                stroke={edge ?? color}
+                strokeWidth={edge ? 1 : width}
                 strokeDasharray={dash}
                 fill={color}
                 fillOpacity={entry.fillOpacity ?? (entry.stack !== undefined ? 0.55 : 0.2)}

package/src/components/share-card.tsx

@@ -448,7 +448,7 @@ export function SharePanel({
               {captionNode && <Caption as="div">{captionNode}</Caption>}
             </div>
             <Button
-              variant="brand"
+              variant="accent"
               commit
               pending={busy === "add"}
               disabled={busy !== null || (empty && !addWithoutEmail)}

package/src/components/signature-pad.tsx

@@ -616,7 +616,7 @@ export function SignaturePad({
           </Button>
         )}
         {onSave && (
-          <Button type="button" variant="brand" onClick={save} disabled={disabled || isEmpty} className="ms-auto">
+          <Button type="button" variant="accent" onClick={save} disabled={disabled || isEmpty} className="ms-auto">
             {labels.save}
           </Button>
         )}

package/src/components/sparkline.tsx

@@ -3,6 +3,7 @@ import { cn } from "../lib/cn";
 import { useKitLabels, useKitLocale, type LabelOverride } from "../i18n/kit-labels";
 import { useTextSize } from "../theme/text-size";
 import { DEFAULT_SPARKLINE_LABELS } from "./sparkline-labels";
+import { formatWithMinus } from "../lib/minus";
 
 /**
  * The words a sparkline speaks. It has no axes, no tooltip and no legend, so its
@@ -118,7 +119,7 @@ function defaultFormat(locale: string | undefined): (v: number) => string {
     f = new Intl.NumberFormat(locale, { maximumFractionDigits: 2 });
     formatters.set(key, f);
   }
-  return (v) => f.format(v);
+  return (v) => formatWithMinus(f, v);
 }
 
 const isValue = (v: number | null | undefined): v is number => typeof v === "number" && Number.isFinite(v);

package/src/components/stat-tile.tsx

@@ -16,6 +16,7 @@ import { Tooltip } from "./tooltip";
 // tile's private copy of the string did not.
 import { SKELETON_CLASS } from "./skeleton";
 import { DEFAULT_STAT_TILE_LABELS } from "./stat-tile-labels";
+import { formatWithMinus } from "../lib/minus";
 
 /**
  * The words a stat tile speaks. The delta's arrow is an icon, and an icon is not a
@@ -352,11 +353,15 @@ export function StatTile({
   const fmt =
     format ??
     ((n: number) =>
-      numberFormatter(kitLocale, {
-        ...(currency ? { style: "currency", currency } : null),
-        ...(compact ? { notation: "compact" } : null),
-        ...numberFormat,
-      }).format(n));
+      // U+2212 for a negative headline (0.49, KIT-1).
+      formatWithMinus(
+        numberFormatter(kitLocale, {
+          ...(currency ? { style: "currency", currency } : null),
+          ...(compact ? { notation: "compact" } : null),
+          ...numberFormat,
+        }),
+        n,
+      ));
   const show = (v: ReactNode) => (typeof v === "number" ? fmt(v) : v);
 
   const d = typeof delta === "number" ? { value: delta } : delta;
@@ -592,14 +597,21 @@ function FigureRow({
   // next row stayed on one — two layouts in one list, and a figure no longer beside
   // the period it belongs to. Now the label breaks within itself and the amount stays
   // on the label's first line, end-aligned like every other row.
+  //
+  // 0.49: between WORDS only. `overflow-wrap:anywhere` (with `min-w-0`) cut a single
+  // word at any letter — "PROJECT|ED" in a 160px KPI tile at 360px. The label now keeps
+  // a flex item's own floor, its longest word; only a word that cannot share the line
+  // with the figure sends the figure to the next line, still end-aligned. `break-word`
+  // is the last resort for a word wider than the whole tile, and does not lower that
+  // floor the way `anywhere` did.
   return (
     <div
       className={cn(
         "flex text-xs tabular-nums text-muted",
-        stacked ? "flex-col items-start" : "items-baseline gap-x-2",
+        stacked ? "flex-col items-start" : "flex-wrap items-baseline gap-x-2",
       )}
     >
-      <dt className="min-w-0 uppercase tracking-wide [overflow-wrap:anywhere]">{figure.label}</dt>
+      <dt className="max-w-full uppercase tracking-wide [overflow-wrap:break-word]">{figure.label}</dt>
       <dd
         data-private={priv}
         className={cn(

package/src/components/status-dot.tsx

@@ -1,5 +1,6 @@
 import type { ComponentPropsWithRef, ReactNode } from "react";
 import { cn } from "../lib/cn";
+import { statusTone, type StatusKind } from "../lib/status-tone";
 import type { ProgressBarTone } from "./progress-bar";
 import type { ChipHue } from "./chip";
 
@@ -90,6 +91,9 @@ const DOT_ON_FIRST_LINE: Record<StatusDotSize, string> = {
 
 export interface StatusDotProps extends Omit<ComponentPropsWithRef<"span">, "children"> {
   tone?: StatusDotTone;
+  /** What the dot means as a status (0.49 KIT-8), instead of a `tone` — see Chip's
+   *  `status` and {@link statusTone}. An explicit `tone` wins. */
+  status?: StatusKind;
   size?: StatusDotSize;
   /**
    * Visible text beside the dot — a legend entry ("Rented") or a status ("Online"). It
@@ -122,7 +126,8 @@ export interface StatusDotProps extends Omit<ComponentPropsWithRef<"span">, "chi
  * this.
  */
 export function StatusDot({
-  tone = "neutral",
+  tone: toneProp,
+  status,
   size = "sm",
   label,
   ring = false,
@@ -131,6 +136,7 @@ export function StatusDot({
   "aria-label": ariaLabel,
   ...rest
 }: StatusDotProps) {
+  const tone: StatusDotTone = toneProp ?? (status ? statusTone(status) : "neutral");
   const dot = (
     <span
       // The tone as data (0.34, refactor audit 2026-10, TST-9): a stable hook for a test or

package/src/components/tooltip.tsx

@@ -580,7 +580,9 @@ function useTooltipTrigger(
   // A layer on the Escape stack while up (Wave 2, DUP-1): over a dialog, the first
   // Escape dismisses the bubble — WCAG 1.4.13, without moving focus — and the next one
   // the dialog. Inside a Modal the bubble used to be beyond reach of the key.
-  useDismissLayer(open, () => setDismissed(true));
+  // Not an overlay: a tooltip annotates what it is on, so a floating launcher with one
+  // does not step aside for its own bubble (`hideWhenOverlay`, 0.49 KIT-11).
+  useDismissLayer(open, () => setDismissed(true), { overlay: false });
   // A press anywhere else closes it — the case a blur does not cover: Safari moves no
   // focus on a tap, and a tap on plain text moves it nowhere.
   useOutsideClick(triggerRef, close, open);

package/src/components/translation-review-editor.tsx

@@ -241,7 +241,7 @@ export function TranslationReviewEditor({
           <div className="flex flex-wrap gap-2">
             {!missing && (
               <Button
-                variant="primary"
+                variant="default"
                 commit={COMMIT_EXCEPT_BILLING}
                 pending={busy === "approve"}
                 disabled={busy !== null}
@@ -251,7 +251,7 @@ export function TranslationReviewEditor({
               </Button>
             )}
             <Button
-              variant={missing ? "primary" : "danger"}
+              variant={missing ? "default" : "danger"}
               commit={COMMIT_EXCEPT_BILLING}
               pending={busy === "flag"}
               disabled={busy !== null || !canFlag}

package/src/components/translation-review.tsx

@@ -1088,7 +1088,7 @@ export function TranslationReviewPanel({
                         el.focus();
                       }
                     }}
-                    variant="primary"
+                    variant="default"
                     size="sm"
                     commit={COMMIT_EXCEPT_BILLING}
                     aria-describedby={questionId}
@@ -1204,7 +1204,7 @@ export function TranslationReviewPanel({
       {editable && (
         <BulkActionBar count={selectedRows.length} onClear={() => setSelected(new Set())}>
           <Button
-            variant="primary"
+            variant="default"
             size="sm"
             commit={COMMIT_EXCEPT_BILLING}
             pending={isQueued("bulk-approve")}