@apliteni/apliteni-ui 0.114.0 → 0.116.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/labels-and-titles.md

@@ -40,6 +40,18 @@
 
 **Don't:** Display “TOTAL REVENUE” above the figure.
 
+## Say the noun once
+
+<!-- rule: no-repeated-noun -->
+
+**Rule:** Leave a noun out of a label its frame already names.
+
+**Why:** Clutter hides the available action.
+
+**Do:** The chips name the filters; the button says what it does.
+
+**Don't:** The noun arrives twice.
+
 ## Rank card titles
 
 <!-- rule: title-rank -->

package/package.json

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

package/react/dist/index.d.ts

@@ -571,17 +571,26 @@ type Filter = {
     disabled?: boolean;
     open?: boolean;
 };
+/** A filter the bar can put on itself: the chip's name, and the values its menu offers. */
+type AddFilter = {
+    id: string;
+    label: string;
+    items: DropdownEntry[];
+};
 type FilterBarProps = {
     filters: Filter[];
     label?: string;
     clearLabel?: string;
     disabled?: boolean;
     busy?: boolean;
+    add?: AddFilter[];
+    addLabel?: string;
     onRemove: (id: string) => void;
     onClear: () => void;
     onChange: (id: string, value: string | undefined) => void;
+    onAdd?: (id: string, value: string | undefined) => void;
 };
-declare function FilterBar({ filters, label, clearLabel, disabled, busy, onRemove, onClear, onChange }: FilterBarProps): react.JSX.Element;
+declare function FilterBar({ filters, label, clearLabel, add, addLabel, disabled, busy, onRemove, onClear, onChange, onAdd }: FilterBarProps): react.JSX.Element;
 
 type KeyValueRow = {
     label: string;
@@ -1046,4 +1055,4 @@ declare const AccentPicker: react.ForwardRefExoticComponent<Omit<HTMLAttributes<
 declare const PAGE_SIZES: readonly number[];
 declare const DEFAULT_PAGE_SIZE: number;
 
-export { type Accent, AccentPicker, type AccentPickerProps, AppShell, type AppShellProps, type AppShellSection, BackLink, type BackLinkOwnProps, type BackLinkProps, Badge, BusyRegion, type BusyRegionProps, Button, type ButtonLinkProps, type ButtonProps, Callout, type CalloutProps, type CalloutVariant, Card, Chart, type ChartBridgeStep, type ChartBridgeTones, type ChartPeriod, type ChartProps, type ChartSeries, type ChartTone, Checkbox, type CheckboxProps, type Column, type CommandGroup, type CommandItem, CommandPalette, type CommandPaletteProps, Confirm, type ConfirmProps, DEFAULT_PAGE_SIZE, DataTable, type DataTableProps, DatePicker, type DatePickerMode, type DatePickerPreset, type DatePickerProps, type DatePickerRange, DeltaValue, type DeltaValueProps, Denied, type DeniedProps, Drawer, type DrawerProps, DrawerSection, type DrawerSectionProps, Dropdown, type DropdownBadge, type DropdownEntry, type DropdownItem, type DropdownProps, type DropdownRowProps, type DropdownSearch, type DropdownSection, type DropdownSeparator, EmptyState, type EmptyStateProps, type EmptyStateVariant, Field, type FieldControlProps, type FieldProps, FileDrop, type FileDropFile, type FileDropProps, type FileDropStatus, FileField, type FileFieldProps, type Filter, FilterBar, type FilterBarProps, Icon, KeyValueList, type KeyValueListProps, type KeyValueRow, Modal, type ModalProps, type NativeButtonProps, NumericValue, type NumericValueProps, PAGE_SIZES, Pagination, type PaginationProps, Pill, type PillProps, RowIdentity, type RowIdentityProps, SearchField, type SearchFieldProps, type SegmentOption, Segmented, type SegmentedProps, SelectField, type SelectFieldProps, SidebarNav, type SidebarNavBadge, type SidebarNavItem, type SidebarNavLeaf, type SidebarNavProps, type SidebarNavSection, Skeleton, type SkeletonProps, SkeletonTable, type SkeletonTableProps, Snippet, type SnippetProps, StatBand, type StatBandProps, type StatDelta, type StatFigure, type StatTone, type StatVariant, StatusDot, type StatusDotProps, Success, SuccessCheck, type SuccessCheckProps, type SuccessCountdown, SuccessPanel, type SuccessPanelProps, type SuccessProps, Switch, type SwitchProps, THEME_INIT_SCRIPT, type TabItem, type TableSort, Tabs, type TabsProps, TextArea, type TextAreaProps, TextField, type TextFieldProps, ThemeToggle, type ThemeToggleProps, Timeline, type TimelineEvent, type TimelineEventKind, type TimelineProps, Toast, type ToastNotice, type ToastProps, Tooltip, type TooltipProps, sortTableRows, useToast };
+export { type Accent, AccentPicker, type AccentPickerProps, type AddFilter, AppShell, type AppShellProps, type AppShellSection, BackLink, type BackLinkOwnProps, type BackLinkProps, Badge, BusyRegion, type BusyRegionProps, Button, type ButtonLinkProps, type ButtonProps, Callout, type CalloutProps, type CalloutVariant, Card, Chart, type ChartBridgeStep, type ChartBridgeTones, type ChartPeriod, type ChartProps, type ChartSeries, type ChartTone, Checkbox, type CheckboxProps, type Column, type CommandGroup, type CommandItem, CommandPalette, type CommandPaletteProps, Confirm, type ConfirmProps, DEFAULT_PAGE_SIZE, DataTable, type DataTableProps, DatePicker, type DatePickerMode, type DatePickerPreset, type DatePickerProps, type DatePickerRange, DeltaValue, type DeltaValueProps, Denied, type DeniedProps, Drawer, type DrawerProps, DrawerSection, type DrawerSectionProps, Dropdown, type DropdownBadge, type DropdownEntry, type DropdownItem, type DropdownProps, type DropdownRowProps, type DropdownSearch, type DropdownSection, type DropdownSeparator, EmptyState, type EmptyStateProps, type EmptyStateVariant, Field, type FieldControlProps, type FieldProps, FileDrop, type FileDropFile, type FileDropProps, type FileDropStatus, FileField, type FileFieldProps, type Filter, FilterBar, type FilterBarProps, Icon, KeyValueList, type KeyValueListProps, type KeyValueRow, Modal, type ModalProps, type NativeButtonProps, NumericValue, type NumericValueProps, PAGE_SIZES, Pagination, type PaginationProps, Pill, type PillProps, RowIdentity, type RowIdentityProps, SearchField, type SearchFieldProps, type SegmentOption, Segmented, type SegmentedProps, SelectField, type SelectFieldProps, SidebarNav, type SidebarNavBadge, type SidebarNavItem, type SidebarNavLeaf, type SidebarNavProps, type SidebarNavSection, Skeleton, type SkeletonProps, SkeletonTable, type SkeletonTableProps, Snippet, type SnippetProps, StatBand, type StatBandProps, type StatDelta, type StatFigure, type StatTone, type StatVariant, StatusDot, type StatusDotProps, Success, SuccessCheck, type SuccessCheckProps, type SuccessCountdown, SuccessPanel, type SuccessPanelProps, type SuccessProps, Switch, type SwitchProps, THEME_INIT_SCRIPT, type TabItem, type TableSort, Tabs, type TabsProps, TextArea, type TextAreaProps, TextField, type TextFieldProps, ThemeToggle, type ThemeToggleProps, Timeline, type TimelineEvent, type TimelineEventKind, type TimelineProps, Toast, type ToastNotice, type ToastProps, Tooltip, type TooltipProps, sortTableRows, useToast };

package/react/dist/index.js

@@ -1908,7 +1908,8 @@ import {
   filterPanelFit,
   transitionMs as transitionMs2,
   dropdownViewportFit,
-  dropdownHeightFit
+  dropdownHeightFit,
+  filterPanelRow
 } from "@apliteni/apliteni-ui";
 import { Fragment as Fragment5, jsx as jsx20, jsxs as jsxs16 } from "react/jsx-runtime";
 var EXIT_SLACK_MS2 = 50;
@@ -2011,7 +2012,7 @@ function Dropdown({
     };
     fit();
     const view = root.current?.ownerDocument?.defaultView;
-    const row2 = root.current?.closest(".ui-filter-bar__chip")?.closest(".ui-filter-bar");
+    const row2 = filterPanelRow(root.current);
     if (!row2 || !view) return;
     const stop = [];
     let ro = null;
@@ -2046,7 +2047,7 @@ function Dropdown({
       opened.current = true;
       return;
     }
-    if (!opened.current || !el || !root.current?.closest(".ui-filter-bar__chip")) return;
+    if (!opened.current || !el || !filterPanelRow(root.current)) return;
     el.classList.add("is-closing");
     let done = false;
     const finish = () => {
@@ -2144,7 +2145,7 @@ function Dropdown({
     const want = landOn.current;
     landOn.current = null;
     if (!open) {
-      if (panel.current?.style && root.current?.closest(".ui-filter-bar") && !root.current.closest(".ui-filter-bar__chip")) {
+      if (panel.current?.style && root.current?.closest(".ui-filter-bar") && !filterPanelRow(root.current)) {
         panel.current.style.minWidth = "";
       }
       return;
@@ -2568,18 +2569,43 @@ function Segmented({ options, value, onChange, label, appearance = "pill", size,
 // src/FilterBar.tsx
 import { useRef as useRef11, useState as useState8 } from "react";
 import { filterChipText, filterChipName, filterChipUnset, filterChipItems, focusNextStop } from "@apliteni/apliteni-ui";
-import { jsx as jsx24, jsxs as jsxs19 } from "react/jsx-runtime";
-function FilterBar({ filters, label = "Filters", clearLabel = "Clear all filters", disabled = false, busy = false, onRemove, onClear, onChange }) {
+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);
   const [opened, setOpened] = useState8({});
+  const [adding, setAdding] = useState8(false);
   const blocked = disabled || busy;
+  const offer = (add || []).filter((entry) => !filters.some((filter) => filter.id === entry.id));
+  const source = /* @__PURE__ */ new Map();
+  const sections = offer.map((entry) => ({ label: entry.label, items: entry.items.map((item) => {
+    if (!isRow2(item)) return item;
+    const copy = { ...item };
+    source.set(copy, entry.id);
+    return copy;
+  }) }));
+  const options = sections.reduce((count, section) => count + section.items.filter(isRow2).length, 0);
+  const offering = Boolean(onAdd && offer.length);
   useIsoLayoutEffect(() => {
     const stale = Object.keys(opened).filter((id) => !filters.some((filter) => filter.id === id && filter.open === opened[id].against));
     if (stale.length) setOpened((previous) => Object.fromEntries(Object.entries(previous).filter(([id]) => !stale.includes(id))));
+    const chips = Array.from(bar.current?.querySelectorAll("[data-filter-id]") ?? []);
+    const asked = landing.current;
+    landing.current = null;
+    if (asked !== null) {
+      const chip = chips.find((c) => c.dataset.filterId === asked && !c.disabled);
+      const trigger = !blocked && chip?.querySelector("[data-dropdown-trigger]");
+      if (trigger) {
+        focused.current = null;
+        trigger.focus();
+        return;
+      }
+    }
     const prior = focused.current;
     if (!prior || prior.id === null && filters.length > 0 || filters.some((f) => f.id === prior.id)) return;
-    const chips = Array.from(bar.current?.querySelectorAll("[data-filter-id]") ?? []);
     const next = chips.slice(prior.index).find((chip) => !chip.disabled) || chips.slice(0, prior.index).reverse().find((chip) => !chip.disabled);
     const target = !blocked && next?.querySelector("[data-dropdown-trigger]");
     focused.current = null;
@@ -2642,9 +2668,32 @@ function FilterBar({ filters, label = "Filters", clearLabel = "Clear all filters
           },
           filter.id
         )),
+        offering && /* @__PURE__ */ jsx24("div", { "data-filter-add": "", onFocus: () => {
+          focused.current = null;
+        }, children: /* @__PURE__ */ jsx24(
+          Dropdown,
+          {
+            variant: "menu",
+            sections,
+            ariaLabel: addLabel,
+            triggerContent: /* @__PURE__ */ jsxs19(Fragment6, { children: [
+              /* @__PURE__ */ jsx24(Icon, { name: "plus" }),
+              addLabel
+            ] }),
+            search: options >= SEARCH_AT && { label: `Search ${label.toLowerCase()}` },
+            open: adding && !blocked,
+            onOpenChange: setAdding,
+            onSelect: (value, item) => {
+              const id = source.get(item);
+              if (blocked || !id) return;
+              landing.current = id;
+              onAdd?.(id, value == null ? void 0 : String(value));
+            }
+          }
+        ) }),
         filters.length > 0 && /* @__PURE__ */ jsx24("span", { "data-filter-clear": "", onFocus: () => {
           focused.current = { id: null, index: 0 };
-        }, children: /* @__PURE__ */ jsx24(Button, { size: "sm", onClick: () => {
+        }, children: /* @__PURE__ */ jsx24(Button, { size: "sm", variant: "ghost", onClick: () => {
           if (!blocked) onClear();
         }, children: clearLabel }) })
       ]
@@ -2678,7 +2727,7 @@ function DrawerSection({ title, headingLevel = 3, className, children, ...rest }
 
 // src/Snippet.tsx
 import { useEffect as useEffect7, useRef as useRef12, useState as useState9 } from "react";
-import { Fragment as Fragment6, jsx as jsx26, jsxs as jsxs21 } from "react/jsx-runtime";
+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);
@@ -2706,7 +2755,7 @@ function Snippet({ label = "shell", code = "", children, copy = true, reveal = f
   return /* @__PURE__ */ jsxs21("div", { className: reveal ? "ui-snippet ui-snippet--reveal" : "ui-snippet", children: [
     /* @__PURE__ */ jsxs21("div", { className: "ui-snippet__bar", children: [
       /* @__PURE__ */ jsx26("span", { children: label }),
-      copy && /* @__PURE__ */ jsxs21(Fragment6, { children: [
+      copy && /* @__PURE__ */ jsxs21(Fragment7, { children: [
         /* @__PURE__ */ jsx26(
           "button",
           {
@@ -2728,7 +2777,7 @@ 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 { playEntrance } from "@apliteni/apliteni-ui/motion";
-import { Fragment as Fragment7, jsx as jsx27, jsxs as jsxs22 } from "react/jsx-runtime";
+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);
@@ -2777,7 +2826,7 @@ function Tabs({ items, value, onChange, label }) {
         },
         children: [
           item.label,
-          item.count != null && /* @__PURE__ */ jsxs22(Fragment7, { children: [
+          item.count != null && /* @__PURE__ */ jsxs22(Fragment8, { children: [
             " ",
             item.count
           ] })
@@ -3004,7 +3053,7 @@ function FileField({ label, hint, error, required, disabled, onFileChange, class
 
 // src/FileDrop.tsx
 import { useRef as useRef16, useState as useState11 } from "react";
-import { Fragment as Fragment8, jsx as jsx30, jsxs as jsxs25 } from "react/jsx-runtime";
+import { Fragment as Fragment9, jsx as jsx30, jsxs as jsxs25 } from "react/jsx-runtime";
 var MARKS = {
   uploading: "clock",
   done: "circleCheck",
@@ -3116,7 +3165,7 @@ function FileDrop({
                 children: /* @__PURE__ */ jsx30("span", { style: { width: `${file.progress}%` } })
               }
             )
-          ] }) : /* @__PURE__ */ jsxs25(Fragment8, { children: [
+          ] }) : /* @__PURE__ */ jsxs25(Fragment9, { children: [
             /* @__PURE__ */ jsx30(
               Button,
               {
@@ -3313,7 +3362,7 @@ import { applyTheme, paletteHotkey, prism, railCollapsed, themeIcon, themeName }
 // src/SidebarNav.tsx
 import { forwardRef as forwardRef8, useEffect as useEffect12, useId as useId10, useState as useState13 } from "react";
 import { ENTRANCE_FALLBACK_MS } from "@apliteni/apliteni-ui/motion";
-import { Fragment as Fragment9, jsx as jsx33, jsxs as jsxs28 } from "react/jsx-runtime";
+import { Fragment as Fragment10, jsx as jsx33, jsxs as jsxs28 } from "react/jsx-runtime";
 var badgeText = (badge) => typeof badge === "object" ? badge.text : badge;
 function Row({ item, active, activeIs, collapsed, renderLink, sub }) {
   const uid = useId10();
@@ -3339,7 +3388,7 @@ function Row({ item, active, activeIs, collapsed, renderLink, sub }) {
     item.disabled && "is-disabled",
     item.danger && "is-danger"
   ].filter(Boolean).join(" ");
-  const children = /* @__PURE__ */ jsxs28(Fragment9, { children: [
+  const children = /* @__PURE__ */ jsxs28(Fragment10, { children: [
     (item.leading ?? item.icon) && /* @__PURE__ */ jsx33("span", { className: "ui-nav__ic", children: item.leading ?? /* @__PURE__ */ jsx33(Icon, { name: item.icon }) }),
     /* @__PURE__ */ jsx33("span", { className: "ui-nav__label", children: item.label }),
     count != null && count !== "" && /* @__PURE__ */ jsx33("span", { className: `ui-nav__badge is-${typeof item.badge === "object" ? item.badge.tone ?? "neutral" : "neutral"}`, children: count }),
@@ -3408,7 +3457,7 @@ var SidebarNav = forwardRef8(function SidebarNav2({
 });
 
 // src/AppShell.tsx
-import { Fragment as Fragment10, jsx as jsx34, jsxs as jsxs29 } from "react/jsx-runtime";
+import { Fragment as Fragment11, jsx as jsx34, jsxs as jsxs29 } from "react/jsx-runtime";
 var path = (value) => value.split(/[?#]/)[0].replace(/\/+$/, "") || "/";
 function AppShell({
   sections,
@@ -3483,7 +3532,7 @@ function AppShell({
       onClick: (event) => {
         if (!event.metaKey && !event.ctrlKey && !event.shiftKey && !event.altKey) setMore(false);
       },
-      children: /* @__PURE__ */ jsxs29(Fragment10, { children: [
+      children: /* @__PURE__ */ jsxs29(Fragment11, { children: [
         /* @__PURE__ */ jsx34("span", { className: "ui-nav__ic", children: /* @__PURE__ */ jsx34(Icon, { name: section.icon }) }),
         /* @__PURE__ */ jsx34("span", { className: "ui-nav__label", children: section.label }),
         section.count != null && /* @__PURE__ */ jsx34("span", { className: "ui-nav__badge is-neutral", children: section.count })
@@ -3817,7 +3866,7 @@ import {
   useState as useState16
 } from "react";
 import { CHART_FLOOR, bridgeWalk, chartScale, pointTarget } from "@apliteni/apliteni-ui";
-import { Fragment as Fragment11, jsx as jsx38, jsxs as jsxs33 } from "react/jsx-runtime";
+import { Fragment as Fragment12, jsx as jsx38, jsxs as jsxs33 } from "react/jsx-runtime";
 var HEIGHT = { months: 216, bridge: 216, spark: 32 };
 var PAD = 2;
 var ZERO_INSET = 1.5;
@@ -4447,7 +4496,7 @@ function Chart(props) {
                   `${column.label}-${i}`
                 )) })
               ] }) }),
-              /* @__PURE__ */ jsx38("span", { ref: tipEl, className: cx8("ui-tip", openId && "is-open"), role: open ? "tooltip" : void 0, children: open && /* @__PURE__ */ jsxs33(Fragment11, { children: [
+              /* @__PURE__ */ jsx38("span", { ref: tipEl, className: cx8("ui-tip", openId && "is-open"), role: open ? "tooltip" : void 0, children: open && /* @__PURE__ */ jsxs33(Fragment12, { children: [
                 /* @__PURE__ */ jsx38("span", { className: "ui-tip__label", children: spark ? columns[open.column]?.label : `${open.name}, ${columns[open.column]?.label}` }),
                 /* @__PURE__ */ jsx38("span", { className: "ui-tip__value", children: format(open.value) }),
                 (stateOf(columns[open.column]) || open.detail) && /* @__PURE__ */ jsx38("span", { className: "ui-tip__detail", children: stateOf(columns[open.column]) || open.detail })
@@ -4470,7 +4519,7 @@ function Chart(props) {
                 /* @__PURE__ */ jsx38("tbody", { children: tableRows.map((row, i) => /* @__PURE__ */ jsxs33("tr", { "aria-current": pick === i ? true : void 0, children: [
                   /* @__PURE__ */ jsxs33("th", { scope: "row", children: [
                     row.column.label,
-                    row.column.estimated && /* @__PURE__ */ jsxs33(Fragment11, { children: [
+                    row.column.estimated && /* @__PURE__ */ jsxs33(Fragment12, { children: [
                       " ",
                       /* @__PURE__ */ jsx38("span", { className: "ui-chart__state", children: stateOf(row.column) })
                     ] })

package/src/components/dropdown.js

@@ -384,6 +384,45 @@ function ddResetSearch(dd, panel, search) {
  * fails when one drifts. why: src/styles/dropdown.css */
 export const DD_MENU_FLOOR = 240;
 
+/** The floor a panel asks for in the sheet, or null. A separate name from the
+ *  floor this fit writes back: one that read its own output would pin a menu at
+ *  whatever a narrow row once allowed. why: src/styles/filter-bar.css */
+function ddPanelAsk(panel) {
+  const view = panel?.ownerDocument?.defaultView;
+  if (!panel || typeof view?.getComputedStyle !== 'function') return null;
+  const asked = Number.parseFloat(view.getComputedStyle(panel).getPropertyValue('--ui-filter-panel-ask'));
+  return Number.isFinite(asked) && asked > 0 ? asked : null;
+}
+
+/** The `.ui-dropdown__panel` inside a dropdown, by class rather than by data
+ *  attribute: the fit's subjects are the panels the stylesheet's rules match, and
+ *  filter-panel-fit.test.js hands this function hand-made elements. */
+const ddFitPanelOf = (dd) => (typeof dd?.querySelector === 'function'
+  ? dd.querySelector('.ui-dropdown__panel') : null);
+
+/**
+ * The filter row an anchored menu is measured inside, or null outside one.
+ *
+ * Two panels in a row are anchored at a trigger of their own: a chip's values, and
+ * the add control's catalogue, which says so by asking for a width. The slide
+ * filterPanelFit() computes is measured from that trigger's offset along the row,
+ * which is arithmetic for either. A panel anchored to the row itself is neither,
+ * and sizes itself.
+ *
+ * Published because `<Dropdown>` asks the same question — the same row to observe,
+ * the same panels to hold through a close — and a second copy of this rule would
+ * drift from the stylesheet. why: src/styles/filter-bar.css
+ *
+ * @param {Element} dd a `.ui-dropdown` that may be inside a filter row
+ * @returns {Element|null} the `.ui-filter-bar` this menu's fit is measured in
+ */
+export function filterPanelRow(dd) {
+  if (typeof dd?.closest !== 'function') return null;
+  const chip = dd.closest('.ui-filter-bar__chip');
+  if (chip) return chip.closest('.ui-filter-bar');
+  return ddPanelAsk(ddFitPanelOf(dd)) ? dd.closest('.ui-filter-bar') : null;
+}
+
 /**
  * Where a filter chip's menu may sit. #484 bounds the panel to its trigger, so a
  * chip printing its value alone (#536) left a 48px menu breaking words
@@ -396,23 +435,23 @@ export const DD_MENU_FLOOR = 240;
  * other way. Measuring an end-anchored panel forwards put one off the page.
  * why: docs/components.md#a-filter-row-holds-its-panels
  *
+ * A menu that is not a chip's takes this arithmetic by asking, on its own panel,
+ * for a width: `--ui-filter-panel-ask`. why: src/styles/filter-bar.css
+ *
  * @param {Element} dd a `.ui-dropdown` that may be inside a filter row
- * @param {number} [floor] the width to reach for
+ * @param {number} [floor] the width to reach for; the panel's own ask, else the kit's
  * @returns {{room: number, shift: number, floor: number, end: boolean}|null}
  */
-export function filterPanelFit(dd, floor = DD_MENU_FLOOR) {
-  /* A chip's menu, not any menu in a filter row: the slide below is measured from
-   * the trigger's offset along the row, so a panel anchored to the row itself is
-   * not this function's subject and must size itself. why: src/styles/filter-bar.css */
-  const chip = typeof dd?.closest === 'function' ? dd.closest('.ui-filter-bar__chip') : null;
-  const bar = chip ? chip.closest('.ui-filter-bar') : null;
+export function filterPanelFit(dd, floor) {
+  const panel = ddFitPanelOf(dd);
+  // Which menus are this function's subjects is filterPanelRow()'s question.
+  const bar = filterPanelRow(dd);
   if (!bar || typeof bar.getBoundingClientRect !== 'function') return null;
   const row = bar.getBoundingClientRect();
   const box = dd.getBoundingClientRect();
-  const panel = typeof dd.querySelector === 'function' ? dd.querySelector('.ui-dropdown__panel') : null;
   const end = !!panel?.classList?.contains('is-end');
   // A row narrower than the floor decides the width; nothing may leave the row.
-  const want = Math.min(floor, row.width);
+  const want = Math.min(floor ?? ddPanelAsk(panel) ?? DD_MENU_FLOOR, row.width);
   const ahead = end
     ? Math.max(0, box.right - row.left)    // an end-anchored panel grows backwards
     : Math.max(0, row.right - box.left);
@@ -466,11 +505,6 @@ function ddRefitFilterPanel(dd, panel) {
   if (panel.offsetWidth) panel.style.minWidth = `${panel.offsetWidth}px`;
 }
 
-/** The row this chip's menu is fitted to, or null outside one. */
-function ddRowOf(dd) {
-  return dd?.closest?.('.ui-filter-bar__chip')?.closest('.ui-filter-bar') || null;
-}
-
 /** Is this node inside some dropdown panel? Both fits write to a panel and to
  *  nothing else, so a change inside one is never news — and a panel is
  *  `position: absolute`, so nothing in it can move a chip along its row. Any
@@ -501,7 +535,7 @@ function ddOurs(node) {
  */
 function ddWatchRow(dd, panel) {
   ddUnwatchRow(dd);
-  const row = ddRowOf(dd);
+  const row = filterPanelRow(dd);
   const view = dd.ownerDocument?.defaultView;
   if (!row) return;
   const refit = () => { if (dd.classList.contains('open')) ddRefitFilterPanel(dd, panel); };
@@ -619,7 +653,7 @@ const DD_EXIT_SLACK_MS = 50;
 const DD_SETTLE_MS = 450;
 
 /**
- * Hold a closing chip menu's open geometry until its fade has finished.
+ * Hold a closing anchored menu's open geometry until its fade has finished.
  *
  * `.open` stops matching in the frame the menu closes; the fade does not — the
  * panel transitions opacity over --dur-med. Dropping the width there left a 240px
@@ -823,10 +857,10 @@ function closeDropdown(dd) {
   /* A search panel carries the width it was opened at as an inline `min-width`,
    * and inline beats any sheet. Inside a filter row that leaves a SHUT panel wider
    * than its trigger, which is #467. Cleared here, and ddResetSearch() writes it
-   * again on the next open — except for a chip's menu, which gives the pin and the
-   * fit back at the END of its fade, both being its open geometry. A portalled
+   * again on the next open — except for an anchored menu, which gives the pin and
+   * the fit back at the END of its fade, both being its open geometry. A portalled
    * panel is never fitted, so it has none to hold. why: ddHoldClose() */
-  if (panel?.style && !dd.__ddPanel && ddRowOf(dd)) ddHoldClose(dd, panel);
+  if (panel?.style && !dd.__ddPanel && filterPanelRow(dd)) ddHoldClose(dd, panel);
   else if (panel?.style && dd.closest?.('.ui-filter-bar')) panel.style.minWidth = '';
   dd.querySelector('[data-dropdown-trigger]')?.setAttribute('aria-expanded', 'false');
   /* The anchor may have moved while the panel was open, and a shut panel is laid

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 filters', disabled = false, busy = false } = {}) {
+export function filterBar({ filters = [], label = 'Filters', clearLabel = 'Clear all', 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' : ''}>`
@@ -21,7 +21,7 @@ export function filterBar({ filters = [], label = 'Filters', clearLabel = 'Clear
     // live action beside two chips has to read as live.
     // why: docs/components.md#a-filter-row-holds-its-panels
     + (filters.length
-      ? `<span data-filter-clear>${button({ label: clearLabel, size: 'sm' })}</span>`
+      ? `<span data-filter-clear>${button({ label: clearLabel, size: 'sm', variant: 'ghost' })}</span>`
       : '')
     + '</fieldset>';
 }
@@ -58,7 +58,10 @@ export function initFilterBar(host, options = {}) {
     const chip = e.target.closest('[data-filter-id]');
     if (e.target.closest('[data-filter-remove]')) emit('ui-filter-remove', { id: chip.dataset.filterId });
     else if (e.target.closest('[data-filter-clear] button')) emit('ui-filter-clear', {});
-    else if (e.target.closest('[data-dd-item]')) {
+    // A chip's menu only. The catalogue a vanilla page draws under `data-filter-add` is the
+    // page's own, and a pick in it names no chip: reported as a change, it had a consumer
+    // mapping over its filters and writing the catalogue's value into every one of them. #518
+    else if (e.target.closest('[data-dd-item]') && !e.target.closest('[data-filter-add]')) {
       const item = e.target.closest('[data-dd-item]');
       if (item.getAttribute('aria-disabled') !== 'true') {
         const id = chip?.dataset.filterId, value = item.dataset.value;

package/src/index.d.ts

@@ -43,12 +43,18 @@ export declare function dropdownAvail(opts: {
 }): number;
 /** The kit's menu floor, the width `.ui-dropdown__panel` writes. */
 export declare const DD_MENU_FLOOR: number;
-/** Where a filter chip's open menu can sit: the room from the edge it is
- *  anchored at to the far side of its row once slid, how far it had to slide,
- *  the width it reached for, and whether it is anchored at its inline end.
- *  `null` unless the dropdown is inside a `.ui-filter-bar__chip`: the slide is a
- *  chip's offset along its row, so a panel anchored to the row itself is not this
- *  function's subject and sizes itself. why: docs/components.md */
+/** The `.ui-filter-bar` an anchored menu's fit is measured inside, or `null`.
+ *  A chip's menu, and a menu that asks for a width with `--ui-filter-panel-ask` on
+ *  its own panel: the slide is that trigger's offset along the row, so those two
+ *  are the subjects and a panel anchored to the row itself sizes itself.
+ *  why: docs/components.md */
+export declare function filterPanelRow(dd: Element | null | undefined): Element | null;
+/** Where an anchored filter menu can sit: the room from the edge it is anchored
+ *  at to the far side of its row once slid, how far it had to slide, the width it
+ *  reached for, and whether it is anchored at its inline end. `null` for a
+ *  dropdown `filterPanelRow()` does not answer for. The width reached for is
+ *  `floor`, else the panel's own `--ui-filter-panel-ask`, else `DD_MENU_FLOOR`.
+ *  why: docs/components.md */
 export declare function filterPanelFit(
   dd: Element | null | undefined,
   floor?: number,

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/logic/filter-bar.js

@@ -67,37 +67,55 @@ function stopsAround(host) {
     ...order.filter(el => host.compareDocumentPosition(el) & PRECEDING).reverse()];
 }
 
-/** The control a reader's next Tab would reach from `host`: forward in document
- *  order, else the nearest one behind it. A filter bar that has just dropped its
- *  last control keeps no box the focus ring can sit on, so the focus has to
- *  leave the bar rather than land on a line with no height.
+/** The bar `host` is, or the one inside it. */
+function barIn(host) {
+  if (!host || typeof host.matches !== 'function') return null;
+  return host.matches('[data-filter-bar]') ? host : host.querySelector('[data-filter-bar]');
+}
+
+/** Where an emptied bar hands the focus, in the order it tries: the way to add one
+ *  still drawn on the row, which outlives the chips and so is nearer than anything
+ *  outside, then the controls around the bar. The answer a consumer reads and the
+ *  move the bar makes both come from here, so the two cannot disagree. A control
+ *  the reader cannot reach is left out of the list. #518 */
+function focusStops(host) {
+  const bar = barIn(host);
+  const add = bar && !bar.querySelector('[data-filter-id]')
+    && bar.querySelector('[data-filter-add] [data-dropdown-trigger]');
+  const around = stopsAround(host);
+  return add && !unreachable(add) ? [add, ...around] : around;
+}
+
+/** Where an emptied bar sends the focus, without moving it: the way to add one
+ *  still on its row, else the control a reader's next Tab would reach — forward in
+ *  document order, else the nearest one behind. A bar that has just dropped its
+ *  last chip keeps no box the focus ring can sit on, so with no control of its own
+ *  left the focus has to leave rather than land on a line with no height.
+ *  `focusNextStop()` acts on this same list.
  *  why: docs/components.md#a-filter-row-holds-its-panels */
 export function nextFocusStop(host) {
-  return stopsAround(host)[0] || null;
+  return focusStops(host)[0] || null;
 }
 
 /** Puts the focus where an emptied bar hands it on, and answers with the element
  *  it ended on, or null if nothing took it.
  *
- *  A bar that still holds chips draws a box around them, so it takes the focus
- *  itself, made focusable for that moment. Emptied, it has only an out-of-flow
- *  legend left and measures 0 high, so the focus goes to the first control
- *  outside it that will have it — on the Stock screener the caller's own
- *  `Add filter`, in the React Finance composition the view strip's chosen tab.
- *
- *  Being reachable is not the same as taking the focus: a control can be visible
- *  and enabled and still refuse, so each candidate is asked and then checked, and
- *  the next one tried.
+ *  A bar that still holds chips draws a box around them and takes the focus
+ *  itself. Emptied of them it has only an out-of-flow legend and measures 0 high,
+ *  so the focus goes where `nextFocusStop()` names — the way to add one still on
+ *  the row, which is what the Stock screener draws, else outside the bar.
+ *  Being reachable is not taking the focus: each candidate is asked and then
+ *  checked. #518
  *  why: docs/components.md#a-filter-row-holds-its-panels */
 export function focusNextStop(host) {
   const doc = host && host.ownerDocument;
   if (!doc) return null;
-  const bar = host.matches('[data-filter-bar]') ? host : host.querySelector('[data-filter-bar]');
+  const bar = barIn(host);
   if (bar && bar.querySelector('[data-filter-id]')) {
     bar.tabIndex = -1; bar.focus();
     return doc.activeElement === bar ? bar : null;
   }
-  for (const stop of stopsAround(host)) {
+  for (const stop of focusStops(host)) {
     stop.focus();
     if (doc.activeElement === stop) return stop;
   }

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/dropdown.css

@@ -31,9 +31,9 @@
    accent band is the second band #578 round r34 took off the focus rules, and a
    pointer resting on a focused control would put it back. One indicator, which is
    what the kit's rows already chose. why: docs/foundations.md#the-focus-ring */
-.ui-dropdown__trigger:hover:not(:focus-visible) { border-color: var(--accent); }
+.ui-dropdown__trigger:enabled:hover:not(:focus-visible) { border-color: var(--accent); }
 .ui-dropdown__trigger:focus-visible { outline: var(--ring); outline-offset: var(--ring-offset); }
-/* Off. The off hover-not-focus selectors are (0,4,0), above live hover's (0,3,0).
+/* Off. The off hover-not-focus selectors are (0,4,0), tied with live hover and later.
    A pointer over a dead control changes nothing while an aria-disabled one keeps its stop and the ring.
    No fill: --disabled-surface IS this control's --surface, in both themes. The
    activation is refused in ddTriggerOff(), not with pointer-events, which would
@@ -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/filter-bar.css

@@ -13,15 +13,19 @@
   background: var(--surface);
 }
 .ui-filter-bar__chip .ui-dropdown__trigger { border: 0; background: transparent; padding: var(--space-1) var(--space-2); }
-.ui-filter-bar__remove { border: 0; background: transparent; color: var(--text); font: inherit; text-align: center; font-size: var(--text-lg); padding: 0; min-width: 24px; min-height: 24px; border-radius: var(--radius-xs); cursor: pointer; }
+/* The chip is the edge the row's other boxes are measured against, so it fades with them:
+   off, the chips stayed at full strength and only their ink said so. Two carriers, because
+   a bar turned off disables the controls in a nested fieldset and not the fieldset. #518
+   why: guidelines/accessibility-floor.md#disabled-control-legibility */
+.ui-filter-bar__chip:disabled,
+.ui-filter-bar:disabled .ui-filter-bar__chip { border-color: var(--disabled-border); }
+.ui-filter-bar__remove { border: 0; background: transparent; /* muted-ink: glyph — filter remove mark */ color: var(--muted); font: inherit; text-align: center; font-size: var(--text-lg); padding: 0; min-width: 24px; min-height: 24px; border-radius: var(--radius-xs); cursor: pointer; }
 .ui-filter-bar__remove:focus-visible,
 .ui-filter-bar:focus-visible { outline: var(--ring); outline-offset: var(--ring-offset); }
 .ui-filter-bar button:disabled { /* muted-ink: state — disabled filters */ color: var(--disabled-ink); cursor: not-allowed; }
+.ui-filter-bar .ui-filter-bar__remove:disabled { /* muted-ink: state — unavailable remove mark on the page */ color: var(--disabled-ink-bare); }
 
-/* The chip's value takes its button's own ink, so a disabled chip keeps the
-   disabled ink it inherits instead of the value ink the enabled rules set. */
-.ui-filter-bar .ui-dropdown__value { color: inherit; }
-.ui-filter-bar button:enabled .ui-dropdown__value { color: var(--strong); }
+.ui-filter-bar .ui-dropdown__value { color: inherit; font-weight: inherit; letter-spacing: normal; }
 /* A chip with nothing chosen prints the field's name in the slot the value will
    take — in the page's reading ink, not --muted. --disabled-ink IS --muted, so a
    muted name on an offered filter said "switched off" in the one ink the kit
@@ -34,11 +38,8 @@
    dropdown gets: it is laid out while hidden, so a wider one widened the page
    (#467). why: docs/components.md#a-filter-row-holds-its-panels */
 .ui-filter-bar .ui-dropdown__panel { min-width: 100%; max-width: 100%; overflow-wrap: anywhere; }
-/* The clear action takes the kit's bordered skin minus its fill: words belong on
-   the page, not on a grey block, in any state — Artur, round r28. Rest stays at
-   (0,1,1) so `.ui-btn:hover`'s accent wash still outranks it; the rules under it
-   answer each state that paints a NEUTRAL fill, one step above the kit rule
-   writing it. Held by filter-bar.test.js. why: docs/components.md#a-filter-row-holds-its-panels */
+/* Clear is a quiet text button: no edge in any state, and no fill but the pointer's wash below.
+   why: docs/components.md#a-filter-row-holds-its-panels */
 [data-filter-clear] button { background: transparent; }
 .ui-filter-bar [data-filter-clear] button:disabled,
 .ui-filter-bar [data-filter-clear] button[aria-disabled="true"],
@@ -46,23 +47,40 @@
 .ui-filter-bar [data-filter-clear] button[aria-busy="true"]:hover,
 .ui-filter-bar [data-filter-clear] button[aria-busy="true"]:active,
 .ui-filter-bar [data-filter-clear] button[aria-busy="true"][data-btn-disabled] { background: transparent; }
-/* No fill, so the label is read on the page: the ink button-disabled.test.js
-   measures on every ground. The edge stays the kit's --disabled-border. */
+/* The ink button-disabled.test.js measures on every ground, since there is no fill. */
 .ui-filter-bar [data-filter-clear] button:disabled,
 .ui-filter-bar [data-filter-clear] button[aria-disabled="true"] { /* muted-ink: state — the clear action is off and its words sit on the page */ color: var(--disabled-ink-bare); }
+.ui-filter-bar [data-filter-clear] button { border-color: transparent; }
+.ui-filter-bar [data-filter-clear] button[aria-busy="true"],
+.ui-filter-bar [data-filter-clear] button[aria-busy="true"]:hover,
+.ui-filter-bar [data-filter-clear] button[aria-busy="true"]:active { border-color: transparent; }
+/* The kit's own pointer answer, `.ui-btn:hover`: --accent at 14% and --strong ink, over the page
+   ground rather than --surface, which would be a grey block under words. Busy restated after. */
+.ui-filter-bar [data-filter-clear] button:enabled:hover { border-color: transparent; background: color-mix(in srgb, var(--accent) 14%, transparent); /* code-bg: inherit — a translucent wash moves the ground, not the chip on it. */ }
+.ui-filter-bar [data-filter-clear] button[aria-busy="true"]:hover { background: transparent; }
+.ui-filter-bar [data-filter-clear] button:disabled,
+.ui-filter-bar [data-filter-clear] button[aria-disabled="true"],
+.ui-filter-bar [data-filter-clear] button[aria-busy="true"][data-btn-disabled] { border-color: transparent; }
 
-/* Open, a chip's menu takes the kit's menu floor, measured and slid by
-   filterPanelFit(); `is-closing` holds that geometry through the fade. #549
+/* Open, a filter menu anchored at its own trigger takes a floor measured and slid by
+   filterPanelFit(); `is-closing` holds that geometry through the fade. A chip's menu
+   reaches for the kit's menu floor; the add control's catalogue asks for a panel's
+   width instead, because a search field over it reads "Searc" at 240. #549, #496
    why: docs/components.md#a-filter-row-holds-its-panels */
+.ui-filter-bar [data-filter-add] .ui-dropdown__panel { --ui-filter-panel-ask: var(--panel-sm); }
 .ui-filter-bar__chip .ui-dropdown.open .ui-dropdown__panel,
-.ui-filter-bar__chip .ui-dropdown__panel.is-closing {
+.ui-filter-bar__chip .ui-dropdown__panel.is-closing,
+.ui-filter-bar [data-filter-add] .ui-dropdown.open .ui-dropdown__panel,
+.ui-filter-bar [data-filter-add] .ui-dropdown__panel.is-closing {
   min-width: min(var(--ui-filter-panel-floor, 240px), var(--ui-filter-panel-room, 100%));
   max-width: var(--ui-filter-panel-room, 100%);
   margin-inline-start: calc(-1 * var(--ui-filter-panel-shift, 0px));
 }
 /* An end-aligned panel is pinned by its right edge, so the slide pushes it. */
 .ui-filter-bar__chip .ui-dropdown.open .ui-dropdown__panel.is-end,
-.ui-filter-bar__chip .ui-dropdown__panel.is-end.is-closing {
+.ui-filter-bar__chip .ui-dropdown__panel.is-end.is-closing,
+.ui-filter-bar [data-filter-add] .ui-dropdown.open .ui-dropdown__panel.is-end,
+.ui-filter-bar [data-filter-add] .ui-dropdown__panel.is-end.is-closing {
   margin-inline-start: 0;
   margin-inline-end: calc(-1 * var(--ui-filter-panel-shift, 0px));
 }
@@ -104,3 +122,24 @@
    field and filterBar() builds none, so an arrow key moves real focus instead. #578
    why: docs/components.md#a-filter-row-holds-its-panels */
 .ui-filter-bar .ui-dropdown__item.is-selected:hover { background: color-mix(in srgb, var(--glow-purple), var(--accent) 9%); /* code-bg: inherit — a translucent wash moves the ground, not the chip on it. */ }
+
+/* A chip's height — its remove mark's line box, padding and border — named so the control
+   stands as tall on a line of its own, where there is no chip to stretch to. */
+.ui-filter-bar { --ui-filter-row-h: calc(2px + 2 * var(--space-1) + var(--leading-normal) * var(--text-lg)); }
+
+/* A chip's neighbour takes the chip's corner, that height and edge, but not its painted fill:
+   the trigger's own edge can differ from the row's, while its --surface made the
+   row's least consequential action its loudest box — and off, with its edge down, the one thing
+   still looking pressable. The states are
+   spelled out because this depth outranks the base rules; the fill needs one rule, because the
+   kit paints it at rest only. Under a pointer it takes the kit's trigger edge, --accent, which
+   steps aside under the band; held at its resting edge, hover and rest were one paint. #496, #518
+   why: guidelines/colour-and-theming.md#keep-text-off-grey-fills */
+.ui-filter-bar [data-filter-add] { display: flex; align-self: stretch; }
+.ui-filter-bar [data-filter-add] .ui-dropdown { display: flex; }
+.ui-filter-bar [data-filter-add] .ui-dropdown__trigger { border-radius: var(--radius-sm); min-height: var(--ui-filter-row-h); border-color: var(--control-edge); background: transparent; }
+.ui-filter-bar [data-filter-add] .ui-dropdown__trigger svg { width: 16px; height: 16px; flex: none; stroke-width: 2.4; }
+.ui-filter-bar [data-filter-add] .ui-dropdown__trigger:enabled:hover:not(:focus-visible) { border-color: var(--accent); }
+.ui-filter-bar [data-filter-add] .ui-dropdown__trigger:disabled { border-color: var(--disabled-border); }
+.ui-filter-bar [data-filter-add] .ui-dropdown__trigger[aria-disabled="true"],
+.ui-filter-bar [data-filter-add] .ui-dropdown__trigger[aria-disabled="true"]:hover:not(:focus-visible) { border-color: var(--disabled-border); }

package/src/styles/topbar.css

@@ -209,7 +209,7 @@
    src/styles/dropdown.css:271 `.ui-dropdown__item:hover`.
    why: docs/foundations.md#elevation */
 .vopt:hover { outline: 1px solid var(--control-edge); outline-offset: -1px; background: var(--surface); /* code-bg: inherit — control paint; the containing surface is the ground, for a chip and for a band alike. */ }
-/* The row is a keyboard stop: src/components/dropdown.js:1107
+/* The row is a keyboard stop: src/components/dropdown.js:1141
    `items[next < 0 ? 0 : next]?.focus()` moves focus onto a `[data-dd-item]` with
    the arrow keys, and this is one. It takes the ring on its own 10px radius, the
    same way `.amenu a` above does. #482 */
@@ -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); }