@apliteni/apliteni-ui 0.115.0 → 0.117.0

package/guidelines/colour-and-theming.md

@@ -68,3 +68,5 @@
 **Don't:** Put text on grey fields, chips, headers or footers.
 
 **Except:** The sidebar rail's current row. Its mark may be neither an accent nor an edge — an outline there means focus — and in the page shell the rail is the card surface already. It takes the quiet fill a rung off its rail, label and all. Artur, r34 of [#475](https://github.com/apliteni/apliteni-ui/issues/475).
+
+**Except:** A status chip carries a soft fill. Where its tone reports no verdict it takes a light tint of muted ink that leaves the panel in one direction per theme, so the neutral tones read as the same family as the coloured ones.

package/guidelines/dense-tables.md

@@ -60,6 +60,20 @@
 
 **Don't:** Hide units in muted text or make readers guess what an abbreviation means.
 
+## Size the table to its content
+
+<!-- rule: content-width -->
+
+**Why:** Large gaps separate labels from values.
+
+**Rule:** Limit each column to its longest cell plus the cell inset.
+
+**Do:** Keep amounts beside their references in a two-column table.
+
+**Don't:** Stretch short tables across the page.
+
+**Except:** A text column intended to grow, such as a name or title, takes the remaining width.
+
 ## Scroll instead of squeezing
 
 <!-- rule: overflow -->

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@apliteni/apliteni-ui",
-  "version": "0.115.0",
+  "version": "0.117.0",
   "workspaces": [
     "react"
   ],

package/react/dist/index.css

@@ -317,6 +317,12 @@
     transition: none;
   }
 }
+.rx-table-pager:has(.ui-pager) {
+  margin-top: var(--space-4);
+}
+.rx-table-pager:not(:has(.ui-pager)) {
+  display: none;
+}
 
 /* src/DatePicker.css */
 .ui-datepicker__panel {

package/react/dist/index.d.ts

@@ -23,7 +23,7 @@ declare const Switch: react.ForwardRefExoticComponent<Omit<InputHTMLAttributes<H
 } & react.RefAttributes<HTMLInputElement>>;
 
 type ButtonOptions = {
-    variant?: 'primary' | 'secondary' | 'ghost' | 'danger';
+    variant?: 'primary' | 'secondary' | 'ghost' | 'danger' | 'link';
     size?: 'xs' | 'sm' | 'md' | 'lg';
     icon?: string;
     /** Decorative caller artwork, before the label; takes precedence over icon. */
@@ -581,6 +581,7 @@ type FilterBarProps = {
     filters: Filter[];
     label?: string;
     clearLabel?: string;
+    clearVariant?: 'ghost' | 'secondary' | 'link';
     disabled?: boolean;
     busy?: boolean;
     add?: AddFilter[];
@@ -590,7 +591,7 @@ type FilterBarProps = {
     onChange: (id: string, value: string | undefined) => void;
     onAdd?: (id: string, value: string | undefined) => void;
 };
-declare function FilterBar({ filters, label, clearLabel, add, addLabel, disabled, busy, onRemove, onClear, onChange, onAdd }: FilterBarProps): react.JSX.Element;
+declare function FilterBar({ filters, label, clearLabel, clearVariant, add, addLabel, disabled, busy, onRemove, onClear, onChange, onAdd }: FilterBarProps): react.JSX.Element;
 
 type KeyValueRow = {
     label: string;

package/react/dist/index.js

@@ -945,7 +945,7 @@ function rowId(uid, groups, item) {
 }
 
 // src/DataTable.tsx
-import { useMemo as useMemo2, useState as useState5 } from "react";
+import { useCallback as useCallback2, useEffect as useEffect5, useMemo as useMemo2, useRef as useRef9, useState as useState5 } from "react";
 import { DEFAULT_PAGE_SIZE as DEFAULT_PAGE_SIZE2 } from "@apliteni/apliteni-ui";
 
 // src/Pagination.tsx
@@ -1209,6 +1209,33 @@ function DataTable({
   hasMore = false
 }) {
   const scrollable = stickyHeader || pinnedIdentity;
+  const table = useRef9(null);
+  const [pagerHost, setPagerHost] = useState5(null);
+  const holdPagerBox = useCallback2(
+    (box) => setPagerHost(box?.parentElement ?? null),
+    []
+  );
+  const [strip2, setStrip] = useState5();
+  useEffect5(() => {
+    const el = table.current;
+    const host = pagerHost;
+    if (!el || !host || typeof ResizeObserver === "undefined") {
+      setStrip(void 0);
+      return;
+    }
+    const measure = () => {
+      const rect = el.getBoundingClientRect();
+      const box = host.getBoundingClientRect();
+      const left = box.left + host.clientLeft + (Number.parseFloat(getComputedStyle(host).paddingLeft) || 0);
+      const inset = Math.max(0, rect.left - left);
+      const width = rect.right - left - inset;
+      setStrip(width > 0 ? { width, inset } : void 0);
+    };
+    const observer = new ResizeObserver(measure);
+    observer.observe(el);
+    measure();
+    return () => observer.disconnect();
+  }, [pagerHost, columns, rows]);
   const [localSort, setLocalSort] = useState5(
     { key: columns.find((c) => c.sortable)?.key, dir: -1 }
   );
@@ -1271,6 +1298,7 @@ function DataTable({
         children: /* @__PURE__ */ jsxs13(
           "table",
           {
+            ref: table,
             className: ["ui-table ui-table--hover", (density === "dense" || !density && dense) && "ui-table--dense", density === "compact" && "ui-table--compact", stickyHeader && "ui-table--sticky", pinnedIdentity && "ui-table--pinned"].filter(Boolean).join(" "),
             "aria-busy": loading || void 0,
             children: [
@@ -1328,23 +1356,37 @@ function DataTable({
         )
       }
     ),
-    pager ? /* @__PURE__ */ jsx17(
-      Pagination,
-      {
-        page,
-        pageSize: size,
-        total: owned ? ordered.length : total ?? null,
-        hasMore,
-        pageSizes,
-        loading,
-        ...pagerLabel === void 0 ? {} : { label: pagerLabel },
-        onPageChange: goTo,
-        onPageSizeChange: (s) => {
-          if (pageSize === void 0) setLocalSize(s);
-          onPageSizeChange?.(s);
-          if (owned) setLocalPage(1);
+    pager ? (
+      // The strip that pages a table may not be wider than the rows it pages (#504).
+      // The two are siblings, and no selector sizes one to the other, so the width is
+      // measured: a cap rather than a width, so a pager wider than the table wraps
+      // inside it and a table wider than the room still leaves the strip in the room.
+      /* @__PURE__ */ jsx17(
+        "div",
+        {
+          className: "rx-table-pager",
+          ref: holdPagerBox,
+          style: strip2 ? { maxWidth: strip2.width, marginInlineStart: strip2.inset || void 0 } : void 0,
+          children: /* @__PURE__ */ jsx17(
+            Pagination,
+            {
+              page,
+              pageSize: size,
+              total: owned ? ordered.length : total ?? null,
+              hasMore,
+              pageSizes,
+              loading,
+              ...pagerLabel === void 0 ? {} : { label: pagerLabel },
+              onPageChange: goTo,
+              onPageSizeChange: (s) => {
+                if (pageSize === void 0) setLocalSize(s);
+                onPageSizeChange?.(s);
+                if (owned) setLocalPage(1);
+              }
+            }
+          )
         }
-      }
+      )
     ) : null
   ] });
 }
@@ -1424,10 +1466,10 @@ function Denied({
 
 // src/DatePicker.tsx
 import {
-  useCallback as useCallback2,
-  useEffect as useEffect5,
+  useCallback as useCallback3,
+  useEffect as useEffect6,
   useMemo as useMemo3,
-  useRef as useRef9,
+  useRef as useRef10,
   useState as useState6
 } from "react";
 import { jsx as jsx19, jsxs as jsxs15 } from "react/jsx-runtime";
@@ -1440,7 +1482,7 @@ var DAY_RE = /^(\d{4})-(\d{2})-(\d{2})$/;
 var PHONE_MAX = 560;
 function usePhone() {
   const [phone, setPhone] = useState6(false);
-  useEffect5(() => {
+  useEffect6(() => {
     const query = typeof window === "undefined" ? null : window.matchMedia?.(`(max-width: ${PHONE_MAX}px)`);
     if (!query) return;
     const read = () => setPhone(query.matches);
@@ -1535,9 +1577,9 @@ function DatePicker({
   const picksRange = mode === "range" || mode === "day-range";
   const phone = usePhone();
   const asSheet = sheet ?? phone;
-  const root = useRef9(null);
-  const trigger = useRef9(null);
-  const grid = useRef9(null);
+  const root = useRef10(null);
+  const trigger = useRef10(null);
+  const grid = useRef10(null);
   const [selfOpen, setSelfOpen] = useState6(defaultOpen);
   const open = openProp ?? selfOpen;
   const [selfValue, setSelfValue] = useState6(defaultValue);
@@ -1555,7 +1597,7 @@ function DatePicker({
     weekdayShort: new Intl.DateTimeFormat(locale, { weekday: "short", timeZone: "UTC" })
   }), [locale]);
   const monthLabels = useMemo3(() => evenMonthLabels(names.monthShort), [names]);
-  const at = useCallback2((index) => new Date(
+  const at = useCallback3((index) => new Date(
     grain === "month" ? Date.UTC(Math.floor(index / 12), index % 12, 1) : index * DAY_MS
   ), [grain]);
   const lo = toIndex(min, grain, "start");
@@ -1574,19 +1616,19 @@ function DatePicker({
   }, [today, grain]);
   const anchor = toIndex(picked, grain) ?? toIndex(picksRange ? span.start ?? span.end : null, grain) ?? todayIndex;
   const [cursor, setCursor] = useState6(() => clamp(anchor, lo, hi));
-  const land = useRef9(false);
-  const setOpen = useCallback2((next) => {
+  const land = useRef10(false);
+  const setOpen = useCallback3((next) => {
     if (openProp === void 0) setSelfOpen(next);
     onOpenChange?.(next);
   }, [openProp, onOpenChange]);
-  const close = useRef9(setOpen);
+  const close = useRef10(setOpen);
   useIsoLayoutEffect(() => {
     close.current = setOpen;
   });
-  useEffect5(() => {
+  useEffect6(() => {
     if (open) setCursor(clamp(anchor, lo, hi));
   }, [open]);
-  useEffect5(() => {
+  useEffect6(() => {
     if (!open || asSheet) return;
     const doc = root.current?.ownerDocument ?? document;
     const onClick = (e) => {
@@ -1612,7 +1654,7 @@ function DatePicker({
   const columns = grain === "month" ? 3 : 7;
   const page = grain === "month" ? Math.floor(cursor / 12) : monthOf(cursor);
   const caption = grain === "month" ? String(page) : names.monthYear.format(at(firstDayOf(page)));
-  const periodName = useCallback2((index) => grain === "month" ? names.monthYear.format(at(index)) : `${names.weekday.format(at(index))} ${names.day.format(at(index))}`, [grain, names, at]);
+  const periodName = useCallback3((index) => grain === "month" ? names.monthYear.format(at(index)) : `${names.weekday.format(at(index))} ${names.day.format(at(index))}`, [grain, names, at]);
   const count = grain === "month" ? 12 : daysInMonth(page);
   const first = grain === "month" ? page * 12 : firstDayOf(page);
   const last = first + count - 1;
@@ -1895,10 +1937,10 @@ function DatePicker({
 // src/Dropdown.tsx
 import {
   Fragment as Fragment4,
-  useCallback as useCallback3,
-  useEffect as useEffect6,
+  useCallback as useCallback4,
+  useEffect as useEffect7,
   useId as useId7,
-  useRef as useRef10,
+  useRef as useRef11,
   useState as useState7
 } from "react";
 import {
@@ -1975,19 +2017,19 @@ function Dropdown({
   const [pick, setPick] = useState7(null);
   const [query, setQuery] = useState7(() => search && search !== true ? search.query || "" : "");
   const [activeKey, setActiveKey] = useState7(null);
-  const root = useRef10(null);
-  const panel = useRef10(null);
-  const trigger = useRef10(null);
-  const field = useRef10(null);
-  const landOn = useRef10(null);
-  const at = useRef10("");
+  const root = useRef11(null);
+  const panel = useRef11(null);
+  const trigger = useRef11(null);
+  const field = useRef11(null);
+  const landOn = useRef11(null);
+  const at = useRef11("");
   const auto = useId7().replace(/:/g, "");
   const uid = id ?? auto;
-  const setOpen = useCallback3((next) => {
+  const setOpen = useCallback4((next) => {
     if (openProp === void 0) setSelfOpen(next);
     onOpenChange?.(next);
   }, [openProp, onOpenChange]);
-  const close = useRef10(setOpen);
+  const close = useRef11(setOpen);
   useIsoLayoutEffect(() => {
     close.current = setOpen;
   });
@@ -2040,7 +2082,7 @@ function Dropdown({
       stop.forEach((off) => off());
     };
   }, [open]);
-  const opened = useRef10(false);
+  const opened = useRef11(false);
   useIsoLayoutEffect(() => {
     const el = panel.current;
     if (open) {
@@ -2079,7 +2121,7 @@ function Dropdown({
   const given = rows.find((it) => it.selected);
   const givenKey = given ? keyOf(given) : null;
   const pickedKey = pick && pick.against === givenKey ? pick.key : null;
-  useEffect6(() => {
+  useEffect7(() => {
     if (pick && pick.against !== givenKey) setPick(null);
   }, [givenKey, pick]);
   const picked = pickedKey != null ? rows.find((it) => keyOf(it) === pickedKey) : void 0;
@@ -2093,7 +2135,7 @@ function Dropdown({
   const rowIds = /* @__PURE__ */ new Map();
   rows.forEach((it, i) => rowIds.set(it, `${uid}-opt-${i}`));
   const listId = `${uid}-list`;
-  useEffect6(() => {
+  useEffect7(() => {
     if (!open) return;
     const mine = () => close.current(false);
     for (const other of [...openNow]) other();
@@ -2102,7 +2144,7 @@ function Dropdown({
       openNow.delete(mine);
     };
   }, [open]);
-  useEffect6(() => {
+  useEffect7(() => {
     if (!open) return;
     const doc = root.current?.ownerDocument ?? document;
     const onClick = (e) => {
@@ -2567,15 +2609,15 @@ function Segmented({ options, value, onChange, label, appearance = "pill", size,
 }
 
 // src/FilterBar.tsx
-import { useRef as useRef11, useState as useState8 } from "react";
+import { useRef as useRef12, useState as useState8 } from "react";
 import { filterChipText, filterChipName, filterChipUnset, filterChipItems, focusNextStop } from "@apliteni/apliteni-ui";
 import { Fragment as Fragment6, jsx as jsx24, jsxs as jsxs19 } from "react/jsx-runtime";
 var SEARCH_AT = 10;
 var isRow2 = (entry) => entry !== "---" && !entry.separator;
-function FilterBar({ filters, label = "Filters", clearLabel = "Clear all", add, addLabel = "Filter", disabled = false, busy = false, onRemove, onClear, onChange, onAdd }) {
-  const bar = useRef11(null);
-  const focused = useRef11(null);
-  const landing = useRef11(null);
+function FilterBar({ filters, label = "Filters", clearLabel = "Clear all", clearVariant = "ghost", add, addLabel = "Filter", disabled = false, busy = false, onRemove, onClear, onChange, onAdd }) {
+  const bar = useRef12(null);
+  const focused = useRef12(null);
+  const landing = useRef12(null);
   const [opened, setOpened] = useState8({});
   const [adding, setAdding] = useState8(false);
   const blocked = disabled || busy;
@@ -2693,7 +2735,7 @@ function FilterBar({ filters, label = "Filters", clearLabel = "Clear all", add,
         ) }),
         filters.length > 0 && /* @__PURE__ */ jsx24("span", { "data-filter-clear": "", onFocus: () => {
           focused.current = { id: null, index: 0 };
-        }, children: /* @__PURE__ */ jsx24(Button, { size: "sm", variant: "ghost", onClick: () => {
+        }, children: /* @__PURE__ */ jsx24(Button, { size: "sm", variant: clearVariant, onClick: () => {
           if (!blocked) onClear();
         }, children: clearLabel }) })
       ]
@@ -2726,13 +2768,13 @@ function DrawerSection({ title, headingLevel = 3, className, children, ...rest }
 }
 
 // src/Snippet.tsx
-import { useEffect as useEffect7, useRef as useRef12, useState as useState9 } from "react";
+import { useEffect as useEffect8, useRef as useRef13, useState as useState9 } from "react";
 import { Fragment as Fragment7, jsx as jsx26, jsxs as jsxs21 } from "react/jsx-runtime";
 function Snippet({ label = "shell", code = "", children, copy = true, reveal = false, copyLabel = "Copy code" }) {
   const [status, setStatus] = useState9("idle");
-  const request = useRef12(0);
-  const timer = useRef12(void 0);
-  useEffect7(() => {
+  const request = useRef13(0);
+  const timer = useRef13(void 0);
+  useEffect8(() => {
     setStatus("idle");
     return () => {
       request.current++;
@@ -2775,15 +2817,15 @@ function Snippet({ label = "shell", code = "", children, copy = true, reveal = f
 }
 
 // src/Tabs.tsx
-import { useEffect as useEffect8, useId as useId8, useRef as useRef13 } from "react";
+import { useEffect as useEffect9, useId as useId8, useRef as useRef14 } from "react";
 import { playEntrance } from "@apliteni/apliteni-ui/motion";
 import { Fragment as Fragment8, jsx as jsx27, jsxs as jsxs22 } from "react/jsx-runtime";
 function Tabs({ items, value, onChange, label }) {
   const id = useId8();
-  const previous = useRef13(value);
-  const activePanel = useRef13(null);
-  const buttons = useRef13([]);
-  useEffect8(() => {
+  const previous = useRef14(value);
+  const activePanel = useRef14(null);
+  const buttons = useRef14([]);
+  useEffect9(() => {
     if (previous.current !== value) playEntrance(activePanel.current);
     previous.current = value;
   }, [value]);
@@ -2852,14 +2894,14 @@ function Tabs({ items, value, onChange, label }) {
 }
 
 // src/Timeline.tsx
-import { useEffect as useEffect9, useRef as useRef14 } from "react";
+import { useEffect as useEffect10, useRef as useRef15 } from "react";
 import { playEntrance as playEntrance2, prefersReducedMotion } from "@apliteni/apliteni-ui/motion";
 import { jsx as jsx28, jsxs as jsxs23 } from "react/jsx-runtime";
 var kindIcons = { person: "user", rule: "bolt", reversal: "refresh" };
 function Timeline({ events, className, ...rest }) {
-  const previousIds = useRef14(new Set(events.map((event) => event.id)));
-  const rows = useRef14(/* @__PURE__ */ new Map());
-  useEffect9(() => {
+  const previousIds = useRef15(new Set(events.map((event) => event.id)));
+  const rows = useRef15(/* @__PURE__ */ new Map());
+  useEffect10(() => {
     if (previousIds.current.size > 0 && !prefersReducedMotion()) {
       for (const event of events) {
         if (previousIds.current.has(event.id)) continue;
@@ -2902,7 +2944,7 @@ function Timeline({ events, className, ...rest }) {
 }
 
 // src/Field.tsx
-import { forwardRef as forwardRef6, useEffect as useEffect10, useId as useId9, useRef as useRef15, useState as useState10 } from "react";
+import { forwardRef as forwardRef6, useEffect as useEffect11, useId as useId9, useRef as useRef16, useState as useState10 } from "react";
 import { esc, icon as icon4 } from "@apliteni/apliteni-ui";
 import { jsx as jsx29, jsxs as jsxs24 } from "react/jsx-runtime";
 function messages(id, hint, error) {
@@ -2990,10 +3032,10 @@ function SelectField({ label, hint, error, required, className = "", children, .
 }
 function FileField({ label, hint, error, required, disabled, onFileChange, className = "", ...props }) {
   const id = useId9();
-  const input = useRef15(null);
+  const input = useRef16(null);
   const [file, setFile] = useState10(null);
   const [dragging, setDragging] = useState10(false);
-  useEffect10(() => {
+  useEffect11(() => {
     const form = input.current?.form;
     const reset = () => {
       setFile(null);
@@ -3052,7 +3094,7 @@ function FileField({ label, hint, error, required, disabled, onFileChange, class
 }
 
 // src/FileDrop.tsx
-import { useRef as useRef16, useState as useState11 } from "react";
+import { useRef as useRef17, useState as useState11 } from "react";
 import { Fragment as Fragment9, jsx as jsx30, jsxs as jsxs25 } from "react/jsx-runtime";
 var MARKS = {
   uploading: "clock",
@@ -3086,7 +3128,7 @@ function FileDrop({
   children,
   className
 }) {
-  const input = useRef16(null);
+  const input = useRef17(null);
   const [over, setOver] = useState11(false);
   const status = file?.status ?? "uploading";
   const word = status === "error" ? file?.error ?? WORDS.error : file?.state ?? WORDS[status];
@@ -3221,7 +3263,7 @@ var SearchField = forwardRef7(function SearchField2({ ariaLabel, className, ...p
 });
 
 // src/Toast.tsx
-import { createContext as createContext2, useCallback as useCallback4, useContext as useContext2, useEffect as useEffect11, useLayoutEffect as useLayoutEffect4, useRef as useRef17, useState as useState12 } from "react";
+import { createContext as createContext2, useCallback as useCallback5, useContext as useContext2, useEffect as useEffect12, useLayoutEffect as useLayoutEffect4, useRef as useRef18, useState as useState12 } from "react";
 import { createPortal as createPortal4 } from "react-dom";
 import { jsx as jsx32, jsxs as jsxs27 } from "react/jsx-runtime";
 var Context = createContext2(null);
@@ -3232,21 +3274,21 @@ function useToast() {
   return push;
 }
 function Notice({ notice, remove }) {
-  const root = useRef17(null);
+  const root = useRef18(null);
   const [leaving2, setLeaving] = useState12(false);
-  const dismissed = useRef17(false);
-  const remaining = useRef17(5e3);
+  const dismissed = useRef18(false);
+  const remaining = useRef18(5e3);
   const [hovered, setHovered] = useState12(false);
   const [focused, setFocused] = useState12(false);
   const paused = hovered || focused;
   const tone = notice.tone ?? "success";
-  const dismiss = useCallback4(() => {
+  const dismiss = useCallback5(() => {
     if (dismissed.current) return;
     dismissed.current = true;
     if (typeof matchMedia === "function" && matchMedia("(prefers-reduced-motion: reduce)").matches) remove();
     else setLeaving(true);
   }, [remove]);
-  useEffect11(() => {
+  useEffect12(() => {
     if (leaving2) {
       const element = root.current;
       const finish = (event) => {
@@ -3260,7 +3302,7 @@ function Notice({ notice, remove }) {
       };
     }
   }, [leaving2, remove]);
-  useEffect11(() => {
+  useEffect12(() => {
     if (leaving2 || notice.action || paused) return;
     const started = Date.now();
     const timer = setTimeout(dismiss, remaining.current);
@@ -3338,9 +3380,9 @@ function usePublishedReach(stack2, count) {
 }
 function Toast({ children }) {
   const [entries, setEntries] = useState12([]);
-  const nextId = useRef17(0);
-  const stack2 = useRef17(null);
-  const push = useCallback4((notice) => {
+  const nextId = useRef18(0);
+  const stack2 = useRef18(null);
+  const push = useCallback5((notice) => {
     const id = nextId.current++;
     const remove = () => setEntries((current) => current.filter((entry) => entry.id !== id));
     setEntries((current) => [...current, { id, notice, remove }]);
@@ -3356,11 +3398,11 @@ function Toast({ children }) {
 }
 
 // src/AppShell.tsx
-import { useEffect as useEffect13, useId as useId11, useState as useState14 } from "react";
+import { useEffect as useEffect14, useId as useId11, useState as useState14 } from "react";
 import { applyTheme, paletteHotkey, prism, railCollapsed, themeIcon, themeName } from "@apliteni/apliteni-ui";
 
 // src/SidebarNav.tsx
-import { forwardRef as forwardRef8, useEffect as useEffect12, useId as useId10, useState as useState13 } from "react";
+import { forwardRef as forwardRef8, useEffect as useEffect13, useId as useId10, useState as useState13 } from "react";
 import { ENTRANCE_FALLBACK_MS } from "@apliteni/apliteni-ui/motion";
 import { Fragment as Fragment10, jsx as jsx33, jsxs as jsxs28 } from "react/jsx-runtime";
 var badgeText = (badge) => typeof badge === "object" ? badge.text : badge;
@@ -3371,7 +3413,7 @@ function Row({ item, active, activeIs, collapsed, renderLink, sub }) {
   const [expanded, setExpanded] = useState13();
   const open = expanded ?? item.defaultOpen ?? childActive;
   const [entering, setEntering] = useState13(false);
-  useEffect12(() => {
+  useEffect13(() => {
     if (!entering) return;
     const timer = setTimeout(() => setEntering(false), ENTRANCE_FALLBACK_MS);
     return () => clearTimeout(timer);
@@ -3487,14 +3529,14 @@ function AppShell({
   const [theme, setTheme] = useState14("dark");
   const current = path(pathname);
   const active = sections.filter((section) => current === path(section.href) || path(section.href) !== "/" && current.startsWith(`${path(section.href)}/`)).sort((a, b) => path(b.href).length - path(a.href).length)[0];
-  useEffect13(() => {
+  useEffect14(() => {
     setCollapsed(railCollapsed() ?? defaultCollapsed);
   }, [defaultCollapsed]);
-  useEffect13(() => {
+  useEffect14(() => {
     setMore(false);
     setSearch(false);
   }, [pathname]);
-  useEffect13(() => {
+  useEffect14(() => {
     const root = document.documentElement;
     const sync2 = () => setTheme(root.getAttribute("data-theme") === "light" ? "light" : "dark");
     sync2();
@@ -3502,7 +3544,7 @@ function AppShell({
     observer.observe(root, { attributes: true, attributeFilter: ["data-theme"] });
     return () => observer.disconnect();
   }, []);
-  useEffect13(() => {
+  useEffect14(() => {
     const hotkey = (event) => {
       if (!(event.metaKey || event.ctrlKey) || event.altKey || event.shiftKey || event.key.toLowerCase() !== "k") return;
       const target = event.target;
@@ -3733,7 +3775,7 @@ function ThemeToggle({ labelled = false }) {
 }
 
 // src/Success.tsx
-import { forwardRef as forwardRef9, useEffect as useEffect14, useRef as useRef18, useState as useState15 } from "react";
+import { forwardRef as forwardRef9, useEffect as useEffect15, useRef as useRef19, useState as useState15 } from "react";
 import { jsx as jsx37, jsxs as jsxs32 } from "react/jsx-runtime";
 var SuccessCheck = forwardRef9(function SuccessCheck2({ variant = "line", className, ...rest }, ref) {
   const circled = variant === "circled";
@@ -3781,11 +3823,11 @@ var pieces = [
 ];
 function Countdown({ seconds, label = "Redirecting", onDone }) {
   const [remaining, setRemaining] = useState15(seconds);
-  const callback = useRef18(onDone);
-  useEffect14(() => {
+  const callback = useRef19(onDone);
+  useEffect15(() => {
     callback.current = onDone;
   }, [onDone]);
-  useEffect14(() => {
+  useEffect15(() => {
     let count = seconds;
     const timer = setInterval(() => {
       count -= 1;
@@ -3857,12 +3899,12 @@ var Success = forwardRef9(function Success2({
 
 // src/Chart.tsx
 import {
-  useCallback as useCallback5,
-  useEffect as useEffect15,
+  useCallback as useCallback6,
+  useEffect as useEffect16,
   useId as useId12,
   useLayoutEffect as useLayoutEffect5,
   useMemo as useMemo4,
-  useRef as useRef19,
+  useRef as useRef20,
   useState as useState16
 } from "react";
 import { CHART_FLOOR, bridgeWalk, chartScale, pointTarget } from "@apliteni/apliteni-ui";
@@ -3905,7 +3947,7 @@ function barPath(m) {
 }
 function useTapFloor() {
   const [floor, setFloor] = useState16(TARGET);
-  useEffect15(() => {
+  useEffect16(() => {
     const query = typeof window === "undefined" ? null : window.matchMedia?.(`(max-width: ${PHONE_MAX2}px) and (pointer: coarse)`);
     if (!query) return;
     const read = () => setFloor(query.matches ? TAP_FLOOR : TARGET);
@@ -4028,16 +4070,16 @@ function Chart(props) {
   const plotHeight = height ?? HEIGHT[variant];
   const showTable = table ?? !spark;
   const uid = useId12().replace(/[^\w-]/g, "");
-  const frameEl = useRef19(null);
-  const scroller = useRef19(null);
-  const plot = useRef19(null);
-  const tipEl = useRef19(null);
-  const svgEl = useRef19(null);
-  const ignoreMouseUntil = useRef19(0);
-  const touchMoved = useRef19(false);
-  const dismissed = useRef19(null);
-  const opening = useRef19(false);
-  const pointerFocus = useRef19(false);
+  const frameEl = useRef20(null);
+  const scroller = useRef20(null);
+  const plot = useRef20(null);
+  const tipEl = useRef20(null);
+  const svgEl = useRef20(null);
+  const ignoreMouseUntil = useRef20(0);
+  const touchMoved = useRef20(false);
+  const dismissed = useRef20(null);
+  const opening = useRef20(false);
+  const pointerFocus = useRef20(false);
   const floor = useTapFloor();
   const [width, setWidth] = useState16(0);
   const [openId, setOpenId] = useState16(null);
@@ -4058,7 +4100,7 @@ function Chart(props) {
   const boxHeight = Math.max(plotHeight, floor);
   const boxTop = -(boxHeight - plotHeight) / 2;
   const span = scale.max - scale.min || 1;
-  const y = useCallback5(
+  const y = useCallback6(
     (value) => PAD + (scale.max - value) / span * (plotHeight - PAD * 2),
     [scale.max, span, plotHeight]
   );
@@ -4071,7 +4113,7 @@ function Chart(props) {
     cap * lanes + LANE_GAP * (lanes - 1)
   ));
   const barWidth = (groupWidth - LANE_GAP * (lanes - 1)) / lanes;
-  const centre = useCallback5((column) => column * colWidth + colWidth / 2, [colWidth]);
+  const centre = useCallback6((column) => column * colWidth + colWidth / 2, [colWidth]);
   const marks = useMemo4(() => {
     const out = frame.bars.map((bar) => {
       let top = Math.min(y(bar.from), y(bar.to));
@@ -4145,9 +4187,9 @@ function Chart(props) {
     return [...out, ...dots];
   }, [frame, lines, keys, columns, centre, barWidth, groupWidth, y, floor, colWidth, plotWidth, boxTop, boxHeight]);
   const byId = useMemo4(() => new Map(marks.map((m) => [m.id, m])), [marks]);
-  const lead = useCallback5((column) => marks.find((m) => m.column === column), [marks]);
+  const lead = useCallback6((column) => marks.find((m) => m.column === column), [marks]);
   const open = openId ? byId.get(openId) : void 0;
-  useEffect15(() => {
+  useEffect16(() => {
     const el = plot.current;
     if (!el) return;
     const read = () => setWidth(el.clientWidth);
@@ -4157,20 +4199,20 @@ function Chart(props) {
     observer.observe(el);
     return () => observer.disconnect();
   }, []);
-  const syncEdges = useCallback5(() => {
+  const syncEdges = useCallback6(() => {
     const el = scroller.current;
     if (!el) return;
     const last = el.scrollWidth - el.clientWidth;
     el.classList.toggle("is-more-before", el.scrollLeft > 1);
     el.classList.toggle("is-more-after", el.scrollLeft < last - 1);
   }, []);
-  useEffect15(syncEdges, [syncEdges, plotWidth, count]);
+  useEffect16(syncEdges, [syncEdges, plotWidth, count]);
   useLayoutEffect5(() => {
     if (!openId || !frameEl.current || !tipEl.current || !svgEl.current) return;
     const anchor = [...svgEl.current.querySelectorAll("[data-anchor]")].find((el) => el.getAttribute("data-anchor") === openId);
     if (anchor) placeTip(frameEl.current, anchor, tipEl.current, frameEl.current);
   }, [openId, plotWidth, plotHeight]);
-  useEffect15(() => {
+  useEffect16(() => {
     if (!openId) return;
     const doc = frameEl.current?.ownerDocument;
     const view = doc?.defaultView;
@@ -4198,7 +4240,7 @@ function Chart(props) {
     setOpenId(id);
   };
   const markAt = (target) => target.closest?.("[data-mark]")?.getAttribute("data-mark") ?? null;
-  const announce = useCallback5((column, picked = pick) => {
+  const announce = useCallback6((column, picked = pick) => {
     const where = columns[column];
     if (!where) return;
     const values = marks.filter((m) => m.column === column).map((m) => `${m.name} ${format(m.value)}`).join(". ") || "No value";

package/src/components/filter-bar.js

@@ -2,7 +2,7 @@ import { button, esc } from './index.js';
 import { dropdown, wireDropdown } from './dropdown.js';
 import { filterChipText, filterChipName, filterChipUnset, filterChipItems, focusNextStop } from '../logic/filter-bar.js';
 
-export function filterBar({ filters = [], label = 'Filters', clearLabel = 'Clear all', disabled = false, busy = false } = {}) {
+export function filterBar({ filters = [], label = 'Filters', clearLabel = 'Clear all', clearVariant = 'ghost', disabled = false, busy = false } = {}) {
   return `<fieldset class="ui-filter-bar" data-filter-bar${disabled || busy ? ' disabled' : ''}${busy ? ' aria-busy="true"' : ''}>`
     + `<legend class="ui-filter-bar__legend">${esc(label)}</legend>`
     + filters.map(filter => `<fieldset class="ui-filter-bar__chip" data-filter-id="${esc(filter.id)}"${filter.disabled ? ' disabled' : ''}>`
@@ -17,11 +17,10 @@ export function filterBar({ filters = [], label = 'Filters', clearLabel = 'Clear
     // row is the only thing in it, and it reads as a bar that has been turned
     // off rather than one with no filters on it. It is the kit's own `one-page`
     // rule — a control with no action to offer is not shown. It returns with
-    // the first chip, in the bordered skin rather than the ghost one, because a
-    // live action beside two chips has to read as live.
+    // the first chip, as a quiet text action.
     // why: docs/components.md#a-filter-row-holds-its-panels
     + (filters.length
-      ? `<span data-filter-clear>${button({ label: clearLabel, size: 'sm', variant: 'ghost' })}</span>`
+      ? `<span data-filter-clear>${button({ label: clearLabel, size: 'sm', variant: clearVariant })}</span>`
       : '')
     + '</fieldset>';
 }

package/src/logic/callout.js

@@ -1 +1,9 @@
-export const calloutIcons = { info: 'info', success: 'check', warn: 'alert', danger: 'alert', neutral: 'info' };
+// Default glyph per callout tone. A callout REPORTS a state, so its status
+// glyphs are the circled ones — the same family toast() uses (TOAST_ICON in
+// src/components/index.js) and the same split iconMeanings writes down. The
+// bare `check` and `alert` this used to ship read as actions, which is why
+// every showcase overrode them per instance. #453
+//
+// Neutral keeps `info` rather than the toast's `bolt`: a neutral callout is a
+// standing note on the page, not something that just happened.
+export const calloutIcons = { info: 'info', success: 'circleCheck', warn: 'circleAlert', danger: 'circleX', neutral: 'info' };

package/src/styles/badge.css

@@ -15,24 +15,29 @@
   padding: 3px 9px;
   border-radius: var(--radius-pill);
   color: var(--text);
-  background: var(--surface); /* code-bg: inherit — decorative or text-only paint; nothing nested reads a ground from it. */
+  background: var(--chip-neutral-fill);
   white-space: nowrap;
 }
 /* Status chips take the --chip-* pairs, so the light app's solid fills live in
    tokens.css rather than in a theme override down here: on white the glow-tints
-   wash out and the ink has to deepen to clear AA, and that is a token decision. */
-.ui-badge--live { color: var(--chip-success-ink); background: var(--chip-success-fill); /* code-bg: inherit — decorative or text-only paint; nothing nested reads a ground from it. */ }
-.ui-badge--soon { color: var(--accent); background: var(--surface); /* code-bg: inherit — a wash paints over a ground and behind a chip, so the opaque ground below it is the step. */ }
-.ui-badge--info { color: var(--chip-info-ink); background: var(--chip-info-fill); /* code-bg: inherit — decorative or text-only paint; nothing nested reads a ground from it. */ }
+   wash out and the ink has to deepen to clear AA, and that is a token decision.
+   The tones with no status take --chip-neutral-fill for the same reason: before #453
+   they painted the opaque --surface, the one soft badge fill that sat DARKER than the
+   panel in dark. why: docs/foundations.md#elevation
+   Soon takes body ink here, not --accent: accent ink measured 4.04:1 on a dark floating
+   panel under three of the four accents, body ink 9.74:1. See docs/foundations.md. */
+.ui-badge--live { color: var(--chip-success-ink); background: var(--chip-success-fill); }
+.ui-badge--soon { color: var(--text); background: var(--chip-neutral-fill); }
+.ui-badge--info { color: var(--chip-info-ink); background: var(--chip-info-fill); }
 .ui-badge--warn { color: var(--chip-warn-ink); background: var(--chip-warn-fill); }
-.ui-badge--danger { color: var(--chip-danger-ink); background: var(--chip-danger-fill); /* code-bg: inherit — decorative or text-only paint; nothing nested reads a ground from it. */ }
-.ui-badge--archive { /* muted-ink: state — archived record */ color: var(--muted); background: var(--surface); /* code-bg: inherit — decorative or text-only paint; nothing nested reads a ground from it. */ }
+.ui-badge--danger { color: var(--chip-danger-ink); background: var(--chip-danger-fill); }
+.ui-badge--archive { /* muted-ink: state — archived record */ color: var(--muted); background: var(--chip-neutral-fill); }
 
 /* Semantic status variants — for record/row status in data tables
    (paid / verified / pending / failed …). Same chip, mapped to meaning. */
-.ui-badge--success { color: var(--chip-success-ink); background: var(--chip-success-fill); /* code-bg: inherit — decorative or text-only paint; nothing nested reads a ground from it. */ }
+.ui-badge--success { color: var(--chip-success-ink); background: var(--chip-success-fill); }
 .ui-badge--pending { color: var(--chip-warn-ink); background: var(--chip-warn-fill); }
-.ui-badge--neutral { color: var(--text); background: var(--surface); /* code-bg: inherit — decorative or text-only paint; nothing nested reads a ground from it. */ }
+.ui-badge--neutral { color: var(--text); background: var(--chip-neutral-fill); }
 
 /* Pill: same shape, sentence case, a touch larger — a metadata chip */
 .ui-pill {
@@ -42,7 +47,7 @@
   /* rank: chip */
   font-size: var(--text-xs);
   color: var(--text);
-  background: var(--surface); /* code-bg: inherit — decorative or text-only paint; nothing nested reads a ground from it. */
+  background: var(--chip-neutral-fill);
   border-radius: var(--radius-pill);
   padding: 4px 11px;
   font-weight: var(--weight-semibold);
@@ -50,8 +55,8 @@
 /* The live pill is the same status paint as the live badge, so it takes the
    same pair. On its own it was --green on --glow-green, which is 3.97:1 over
    white — under AA, while the badge beside it cleared at 4.64:1. See issue #131. */
-.ui-pill--live { color: var(--chip-success-ink); background: var(--chip-success-fill); /* code-bg: inherit — decorative or text-only paint; nothing nested reads a ground from it. */ }
-.ui-pill--soon { color: var(--accent); background: var(--surface); /* code-bg: inherit — a wash paints over a ground and behind a chip, so the opaque ground below it is the step. */ }
+.ui-pill--live { color: var(--chip-success-ink); background: var(--chip-success-fill); }
+.ui-pill--soon { color: var(--text); background: var(--chip-neutral-fill); }
 
 /* Status dot */
 .ui-dot {

package/src/styles/button.css

@@ -1,5 +1,5 @@
 /* ============================================================================
- * Button — .ui-btn  (variants: primary / secondary / ghost / danger)
+ * Button — .ui-btn  (variants: primary / secondary / ghost / danger / link)
  *                   (sizes: xs / sm / md / lg, [icon], [disabled], [aria-busy])
  * ========================================================================== */
 
@@ -70,6 +70,22 @@
   color: var(--strong);
 }
 
+.ui-btn--link {
+  background: transparent;
+  border-color: transparent;
+  color: var(--accent);
+  padding-inline: 0;
+}
+.ui-btn--link .ui-btn__label-slot { overflow: visible; }
+.ui-btn--link[aria-busy="true"] .ui-btn__label-slot { overflow: hidden; }
+.ui-btn--link .ui-btn__label { text-decoration: underline; text-underline-offset: 0.2em; }
+.ui-btn.ui-btn--link:hover {
+  background: transparent;
+  border-color: transparent;
+  color: var(--strong);
+  text-decoration: underline;
+}
+
 .ui-btn--danger { color: var(--text); }
 .ui-btn--danger:hover, .ui-btn--danger:focus-visible {
   color: var(--pink);
@@ -112,6 +128,12 @@
   border-color: transparent;
   /* muted-ink: state — unavailable control */ color: var(--disabled-ink-bare);
 }
+.ui-btn--link:disabled,
+.ui-btn--link[aria-disabled="true"] {
+  background: transparent;
+  border-color: transparent;
+  /* muted-ink: state — unavailable link action */ color: var(--disabled-ink-bare);
+}
 /* With no box, the ink is read on whatever is behind it, so the ghost takes an ink
    set for the dullest ground: in dark 7.49 / 6.31 / 7.00 / 5.44 on --bg / --surface /
    --surface-2 / --surface-3, in light 5.85 / 6.50 / 5.49 / 5.70. The enabled ghost now uses body
@@ -161,6 +183,13 @@
   border-color: transparent;
   color: var(--text);
 }
+.ui-btn[aria-busy="true"].ui-btn--link,
+.ui-btn[aria-busy="true"].ui-btn--link:hover,
+.ui-btn[aria-busy="true"].ui-btn--link:active {
+  background: transparent; /* code-bg: inherit — busy paint retains the button's containing gap. */
+  border-color: transparent;
+  color: var(--accent);
+}
 .ui-btn[aria-busy="true"].ui-btn--danger,
 .ui-btn[aria-busy="true"].ui-btn--danger:hover,
 .ui-btn[aria-busy="true"].ui-btn--danger:active {

package/src/styles/card.css

@@ -40,6 +40,11 @@
 .ui-card--pad-sm { padding: var(--space-5) var(--space-6); }
 .ui-card--pad-lg { padding: var(--space-8) var(--space-10); }
 
+/* A card framing one content-width block ends where the block ends — a 359px table sat in
+   a 1232px card (#504) — and is capped, so a wider block still fills the room and scrolls.
+   why: docs/foundations.md#spacing-and-rhythm */
+.ui-card--fit { width: fit-content; max-width: 100%; }
+
 /* An accent-tinted card, e.g. a highlighted plan / success surface. The accent edge is
    the card's own hairline re-coloured: an inset ring over it would draw two. #295
    The strength is --card-tint, per theme: light mixes down from white, so a tint that

package/src/styles/dropdown.css

@@ -295,12 +295,12 @@
   margin-left: auto;
   flex: none;
   color: var(--text);
-  background: color-mix(in srgb, var(--muted) 12%, transparent); /* code-bg: inherit — decorative or text-only paint; nothing nested reads a ground from it. */
-}
-.ui-dropdown__badge.is-live { color: var(--chip-success-ink); background: var(--chip-success-fill); /* code-bg: inherit — decorative or text-only paint; nothing nested reads a ground from it. */ }
-:root[data-theme="light"] .ui-dropdown__badge:not(.is-live) {
-  background: color-mix(in srgb, var(--muted) 15%, transparent); /* code-bg: inherit — decorative or text-only paint; nothing nested reads a ground from it. */
+  /* The kit's one neutral chip fill, which #453 moved into a token so the badge, the
+     pill, this chip and the version badge are one family. The per-theme alphas that
+     used to be written here twice live with the token. */
+  background: var(--chip-neutral-fill); /* ring-gap: inherit — translucent wash retains the opaque containing gap. */
 }
+.ui-dropdown__badge.is-live { color: var(--chip-success-ink); background: var(--chip-success-fill); /* code-bg: inherit — decorative or text-only surface has no nested chip. */ }
 
 /* Disabled + danger rows */
 .ui-dropdown__item.is-disabled { /* muted-ink: state — unavailable control */ color: var(--disabled-ink); cursor: not-allowed; pointer-events: none; }

package/src/styles/pagination.css

@@ -10,6 +10,7 @@
 .ui-pager {
   display: flex;
   flex-wrap: wrap;
+  justify-content: flex-end;
   align-items: center;
   gap: var(--space-3) var(--space-4);
   font-size: var(--text-sm);
@@ -113,7 +114,8 @@
    `margin-top: 16px` for this, which is --space-4; the number moves to the scale
    with it rather than travelling as a literal.
    why: docs/foundations.md#spacing-and-rhythm */
-.ui-table + .ui-pager { margin-top: var(--space-4); }
+.ui-table + .ui-pager,
+.ui-table-scroll + .ui-pager { margin-top: var(--space-4); }
 
 /* A step given an `href` is an anchor, and a host stylesheet's `a:link` is
    (0,1,1) — which outranks `.ui-btn--ghost` at (0,1,0) and paints the enabled

package/src/styles/table.css

@@ -8,6 +8,11 @@
   border-collapse: collapse;
   font-size: var(--text-base);
 }
+/* Fit cards keep short tables close to their labels. Other cards keep full-width tables. */
+:where(.ui-card--fit) .ui-table {
+  width: auto;
+  max-width: 100%;
+}
 .ui-table th {
   text-align: left;
   /* rank: label */
@@ -280,6 +285,10 @@
   width: calc(100% + 2 * var(--space-3));
   margin-inline: calc(-1 * var(--space-3));
 }
+.ui-card--fit > :where(.ui-table--dense, .ui-table--zebra) {
+  width: auto;
+  max-width: calc(100% + 2 * var(--space-3));
+}
 /* A scroll wrapper owns the bleed for a nested dense table: 4px of focus
    clearance plus the 12px end-cell inset. */
 .ui-card > .ui-table-scroll:has(> .ui-table--dense) {
@@ -391,6 +400,8 @@ a.ui-identity:hover { text-decoration: underline; }
      under it, so whatever the cut lets out is painted over that column. A child's ring
      needs 3px and the cell's padding is 12px, so the room comes from the padding.
      why: docs/components.md#dense-financial-tables, #500, #513 */
+  /* A percentage can stretch an intrinsic table beyond its content. */
+  .ui-card--fit .ui-table--pinned .ui-table__identity { width: 1px; }
   .ui-table--pinned .ui-table__identity {
     width: 1%;
     max-width: var(--ui-table-identity-max);

package/src/styles/topbar.css

@@ -226,8 +226,11 @@
   flex: none;
   margin-top: 1px;
 }
-.vbadge.live { color: var(--chip-success-ink); background: var(--chip-success-fill); /* code-bg: inherit — decorative or text-only paint; nothing nested reads a ground from it. */ }
-.vbadge.arch { /* muted-ink: state — archived version */ color: var(--muted); background: var(--surface); /* code-bg: inherit — decorative or text-only paint; nothing nested reads a ground from it. */ }
+.vbadge.live { color: var(--chip-success-ink); background: var(--chip-success-fill); /* code-bg: inherit — decorative or text-only surface has no nested chip. */ }
+/* The archived version badge is the archive badge tone in a floating menu, so it takes
+   the same neutral chip fill rather than the card surface — which, inside a panel that
+   is itself lighter than a card, was darker than the ground it sat on. #453 */
+.vbadge.arch { /* muted-ink: state — archived version */ color: var(--muted); background: var(--chip-neutral-fill); /* ring-gap: inherit — translucent wash retains the opaque containing gap. */ }
 /* The phone step — the same one the rail folds at: docs/foundations.md#breakpoints.
    The switcher keeps its glyph and drops its label.
    The menu hangs the other way here. Anchored by its left edge it opened

package/src/tokens/tokens.css

@@ -233,10 +233,18 @@
   --chip-success-fill: var(--glow-green);
   --chip-warn-ink: var(--amber);
   --chip-warn-fill: color-mix(in srgb, var(--amber) 15%, transparent);
-  --chip-danger-ink: var(--pink);
+  /* Not --pink: that reads 4.23:1 on this fill over a floating panel, under the 4.5:1 badge
+     floor. Same hue lifted toward white — 8.64 page / 7.02 card / 6.30 panel. The signal
+     and the solid-toast pair keep --pink. why: docs/foundations.md#colour-and-contrast, #453 */
+  --chip-danger-ink: #f5aec6;
   --chip-danger-fill: var(--glow-pink);
   --chip-info-ink: var(--cyan);
   --chip-info-fill: var(--glow-cyan);
+  /* The fill of a chip with no status to carry. The themes match on SEPARATION, not on
+     alpha — 12% here is 1.22:1 off the card, 15% in light is 1.23:1 — because --muted is
+     a light violet-grey in dark and a mid slate in light.
+     why: docs/foundations.md#colour-and-contrast, #453 */
+  --chip-neutral-fill: color-mix(in srgb, var(--muted) 12%, transparent);
 
   /* Solid signal surfaces — a status that has stopped being ink and become the FILL (a
      solid toast). Fill and ink are ONE pair, never two independent picks: the fill is the
@@ -412,7 +420,10 @@
      chip text clears WCAG AA on its own pale fill, and on the soft toast's wash, which
      #131 gave the same ink. Three came down again at #295 with the page; danger did not
      need to. */
-  --chip-success-ink: #1c7034;
+  /* Success is held at the 7:1 body aim rather than the 4.5:1 floor: 7.17:1 on its own
+     fill, 8.33:1 on the card. Was #1c7034 at 5.29:1. The fill did not move.
+     why: docs/foundations.md#colour-and-contrast, #453 */
+  --chip-success-ink: #145a26;
   --chip-success-fill: #dff3e4;
   --chip-warn-ink: #825900;
   --chip-warn-fill: #fbedd2;
@@ -423,6 +434,8 @@
      already occupy. See issue #131. */
   --chip-info-ink: #096a7c;
   --chip-info-fill: #ddeff3;
+  /* See the dark block for why the two alphas differ. */
+  --chip-neutral-fill: color-mix(in srgb, var(--muted) 13%, transparent);
 
   /* Light runs the same rule the other way. The signals are mid-tone here, so NO ink
      rescues them and the fill is what has to move: it takes the deepened form the chip
@@ -579,3 +592,18 @@
 .ui-callout--warn,
 .ui-callout--danger,
 .ui-success { --code-bg: var(--wash-code-bg); }
+
+/* React badges and pills accept inline code on opaque or translucent status fills. */
+.ui-badge,
+.ui-badge--live,
+.ui-badge--soon,
+.ui-badge--info,
+.ui-badge--warn,
+.ui-badge--danger,
+.ui-badge--archive,
+.ui-badge--success,
+.ui-badge--pending,
+.ui-badge--neutral,
+.ui-pill,
+.ui-pill--live,
+.ui-pill--soon { --code-bg: var(--wash-code-bg); }