@mediaradar/design-components 0.18.2 → 0.18.3

package/dist/index.d.cts

@@ -14,12 +14,17 @@ import { VariantProps } from 'class-variance-authority';
  * @dependencies lucide-react
  * @behavior 'click' mode toggles on click only. 'hover' mode also opens on
  * keyboard focus and closes on blur, so it stays reachable without a mouse —
- * not just a decorative hover effect. Both modes close on Escape and on any
+ * not just a decorative hover effect. It closes 120ms after the pointer
+ * leaves, and stays open while the pointer is on the bubble, so the text can
+ * be hovered (WCAG 1.4.13). Both modes close on Escape and on any
  * outside click. The bubble is portaled to document.body and repositions
  * itself to stay clear of the right viewport edge.
- * @a11y The trigger is a <button> reporting aria-expanded; the bubble is
- * role="tooltip" and Escape dismisses it. It describes its anchor rather
- * than naming it, so the anchor still needs its own accessible name.
+ * @a11y The trigger is a <button> reporting aria-expanded, and its
+ * aria-describedby points at a hidden copy of the text beside it, so a screen
+ * reader reads the text on focus, open or not. (The visible bubble is
+ * portaled to the end of the page and appears only after a click, so it is
+ * aria-hidden rather than described-by.) Escape dismisses it. `label` names
+ * the button; the text describes it.
  * @usage
  * ```tsx
  * <InfoTip text="Trims time periods to data that has finalized across the selected media formats." />
@@ -291,7 +296,7 @@ declare function Delta({ value, suffix, arrow, period, className }: DeltaProps):
  * be dropped into a row that already has its own click-to-toggle handler
  * (a common list/table pattern) without double-firing. Where the row itself
  * is the control, use `CheckBoxBox` instead.
- * @tokens bg-brand-primaryAction, border-border-interactive, bg-input,
+ * @tokens bg-brand-primaryAction, text-brand-onprimary, border-border-interactive, bg-input,
  * hover:border-brand-primaryAction, focus-visible:outline-border-focus
  * @dependencies lucide-react
  * @behavior `aria-checked` is `"mixed"` when indeterminate, otherwise the
@@ -364,7 +369,7 @@ declare function CheckBox({ checked, indeterminate, onChange, ariaLabel, disable
  * the same control is worse for keyboard users, not better. The owning
  * element supplies `role="checkbox"` and `aria-checked`; this is
  * `aria-hidden` so the state isn't announced twice.
- * @tokens bg-brand-primaryAction, border-border-interactive, bg-input
+ * @tokens bg-brand-primaryAction, text-brand-onprimary, border-border-interactive, bg-input
  * @dependencies lucide-react
  * @behavior Renders through the same `boxClass` as `CheckBox`, so geometry
  * and fill can't drift. Takes neither the focus ring nor the hover border,
@@ -404,7 +409,7 @@ declare function CheckBoxBox({ checked, indeterminate, disabled, className }: Ch
  * dual-month calendar with range highlighting on the right, Start/End fields,
  * and Cancel/Apply. Shared by Creative Intel and the Account Review.
  * @tokens rounded-control, rounded-card, border-border-default, border-border-strong,
- * bg-surface, bg-input, bg-subtle, bg-ai-tint, bg-brand-primaryAction,
+ * bg-surface, bg-input, bg-subtle, bg-ai-tint, bg-brand-primaryAction, text-brand-onprimary,
  * shadow-overlay, text-text-primary, text-text-secondary, text-text-tertiary,
  * hover:bg-subtle, hover:text-text-primary, focus-visible:outline-border-focus
  * @dependencies lucide-react
@@ -761,7 +766,7 @@ interface NoResultsAction {
     /** Rendered as the filled button; every other action renders as the quiet link/button. */
     primary?: boolean;
 }
-declare const PRIMARY_ACTION_CLASS = "rounded-control bg-brand-primaryAction px-3.5 py-2 text-[13px] font-semibold text-white transition-colors hover:opacity-90";
+declare const PRIMARY_ACTION_CLASS = "rounded-control bg-brand-primaryAction px-3.5 py-2 text-[13px] font-semibold text-brand-onprimary transition-colors hover:opacity-90";
 declare const QUIET_ACTION_CLASS = "rounded-control text-[13px] font-medium text-text-link transition-colors hover:underline focus-visible:outline-solid focus-visible:outline-2 focus-visible:outline-border-focus";
 /**
  * @pattern NoResultsEmptyState
@@ -775,7 +780,7 @@ declare const QUIET_ACTION_CLASS = "rounded-control text-[13px] font-medium text
  * in a colSpan table cell (or a card, or a chart body) that already owns
  * that chrome, without imposing its own.
  * @tokens bg-subtle, text-text-tertiary, text-base, text-text-primary,
- * text-text-secondary, rounded-control, bg-brand-primaryAction, text-text-link,
+ * text-text-secondary, rounded-control, bg-brand-primaryAction, text-brand-onprimary, text-text-link,
  * focus-visible:outline-border-focus
  * @dependencies lucide-react
  * @behavior The Clear button shows when `onClearFilters` is given AND
@@ -1082,8 +1087,11 @@ declare function StackedColumnPlaceholder({ height, width, legendRows, axis, }:
  * right-aligned to the anchor's right edge -- both meant for `anchorRef`
  * anchors near the viewport's right edge, where a centred box would run
  * off-screen or read awkwardly beside a narrow icon.
- * @a11y Renders role="tooltip" and is wired to its anchor by aria-describedby,
- * so the anchor must exist and keep a stable id. It describes rather than
+ * @a11y Renders role="tooltip" and is wired by aria-describedby to the
+ * element that has focus: the `anchorRef` element, or inline, the child that
+ * took focus (not the wrapper span: a screen reader reads the description of
+ * the focused element only). An aria-describedby the caller set is kept.
+ * Escape hides it without moving focus or the pointer. It describes rather than
  * labels: it is announced in addition to the anchor's own name, not
  * instead of it, so never put the only label for a control in here.
  * @usage
@@ -1522,7 +1530,7 @@ interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement>, VariantPr
  * styling to a different element, e.g. a router `<Link>`. Also exports the
  * raw `buttonVariants` cva function for consumers composing button styling
  * onto something other than this component.
- * @tokens bg-brand-primaryAction, text-brand-onprimary, bg-surface, text-text-primary, border-border-strong, hover:border-border-interactive, hover:bg-subtle, bg-status-danger, text-status-onstatus, text-text-secondary, hover:text-text-danger, text-text-link, rounded-control, duration-(--mr-motion-duration-interactive), ease-interactive
+ * @tokens bg-brand-primaryAction, text-brand-onprimary, bg-surface, text-text-primary, border-border-strong, hover:border-border-interactive, hover:bg-subtle, bg-status-danger, text-status-onstatus, text-text-secondary, hover:text-text-danger, text-text-link, rounded-control, duration-(--mr-motion-duration-interactive), ease-interactive, focus-visible:outline-border-focus
  * @dependencies class-variance-authority, @radix-ui/react-slot, lucide-react
  * @variant primary - The one primary action on a screen. Solid brand fill.
  * @variant secondary - Any other real action competing for attention (Cancel, Export). Bordered, neutral fill.
@@ -1531,10 +1539,11 @@ interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement>, VariantPr
  * @variant dangerGhost - Neutral at rest, red on hover. For a destructive affordance inline in a row or toolbar -- what the product reaches for far more often than filled danger.
  * @variant link - Reads as inline text, not a control. Use inside body copy or where a full button would overpower the surrounding content.
  * @behavior `disabled` removes pointer events entirely (not just a style
- * change) and dims to 40% opacity. Focus handling is a deliberate exception:
- * most interactive components use a visible `focus-visible:outline-2` ring,
- * but Button suppresses it (`focus-visible:outline-hidden focus-visible:ring-0`)
- * and relies on its per-variant hover/brightness treatment instead. `loading`
+ * change) and dims to 40% opacity. Keyboard focus shows the same 2px
+ * `border-focus` outline as every other control here. It used to be
+ * suppressed in favour of the hover treatment, which a keyboard user never
+ * sees, and the suppression also cancelled the apps' own global focus ring,
+ * so a focused Button had no indicator at all (WCAG 2.4.7). `loading`
  * implies `disabled` (and sets `aria-busy`), since a control mid-submit
  * shouldn't accept another click. `asChild` renders only the child element,
  * through Radix `Slot`, with the button classes, ref and remaining props
@@ -1643,10 +1652,10 @@ interface NameListModalProps {
  * When `options` are given they render as CheckBox rows below the field, and
  * their state comes back as `onSubmit`'s second argument -- a handler that
  * only takes the name stays valid.
- * @a11y role="dialog" with aria-modal, labelled by its title. The name field
- * takes focus on open and Escape closes via onCancel. Focus is NOT trapped
- * and NOT restored to the opener on close -- confirmed in the source -- so
- * a consumer that needs either must supply it around this component.
+ * @a11y role="dialog" with aria-modal, labelled by its title (aria-labelledby
+ * on the heading). The name field takes focus on open and Escape closes via
+ * onCancel. Tab and Shift+Tab stay inside the dialog, and on close focus
+ * returns to the element that had it when the dialog opened.
  * @usage
  * ```tsx
  * <NameListModal title="Rename list" initialName={list.name} submitLabel="Save" onCancel={close} onSubmit={rename} />
@@ -1794,7 +1803,7 @@ interface SortButtonProps<K extends string> {
  * neutral ArrowUpDown in text-tertiary at half opacity, coming up to full on
  * hover so the column reads as clickable; the active column swaps to a
  * direction arrow (ArrowUp/ArrowDown) colored with the brand action blue.
- * @tokens text-text-tertiary, text-brand-primaryAction, hover:text-text-primary
+ * @tokens text-text-tertiary, text-brand-primaryAction, hover:text-text-primary, focus-visible:outline-border-focus
  * @dependencies lucide-react
  * @behavior Pair with `cycleSort`/`sortProp` (exported alongside) for the
  * standard three-state cycle — sort, reverse, then unsorted. `disabled` keeps

package/dist/index.d.ts

@@ -14,12 +14,17 @@ import { VariantProps } from 'class-variance-authority';
  * @dependencies lucide-react
  * @behavior 'click' mode toggles on click only. 'hover' mode also opens on
  * keyboard focus and closes on blur, so it stays reachable without a mouse —
- * not just a decorative hover effect. Both modes close on Escape and on any
+ * not just a decorative hover effect. It closes 120ms after the pointer
+ * leaves, and stays open while the pointer is on the bubble, so the text can
+ * be hovered (WCAG 1.4.13). Both modes close on Escape and on any
  * outside click. The bubble is portaled to document.body and repositions
  * itself to stay clear of the right viewport edge.
- * @a11y The trigger is a <button> reporting aria-expanded; the bubble is
- * role="tooltip" and Escape dismisses it. It describes its anchor rather
- * than naming it, so the anchor still needs its own accessible name.
+ * @a11y The trigger is a <button> reporting aria-expanded, and its
+ * aria-describedby points at a hidden copy of the text beside it, so a screen
+ * reader reads the text on focus, open or not. (The visible bubble is
+ * portaled to the end of the page and appears only after a click, so it is
+ * aria-hidden rather than described-by.) Escape dismisses it. `label` names
+ * the button; the text describes it.
  * @usage
  * ```tsx
  * <InfoTip text="Trims time periods to data that has finalized across the selected media formats." />
@@ -291,7 +296,7 @@ declare function Delta({ value, suffix, arrow, period, className }: DeltaProps):
  * be dropped into a row that already has its own click-to-toggle handler
  * (a common list/table pattern) without double-firing. Where the row itself
  * is the control, use `CheckBoxBox` instead.
- * @tokens bg-brand-primaryAction, border-border-interactive, bg-input,
+ * @tokens bg-brand-primaryAction, text-brand-onprimary, border-border-interactive, bg-input,
  * hover:border-brand-primaryAction, focus-visible:outline-border-focus
  * @dependencies lucide-react
  * @behavior `aria-checked` is `"mixed"` when indeterminate, otherwise the
@@ -364,7 +369,7 @@ declare function CheckBox({ checked, indeterminate, onChange, ariaLabel, disable
  * the same control is worse for keyboard users, not better. The owning
  * element supplies `role="checkbox"` and `aria-checked`; this is
  * `aria-hidden` so the state isn't announced twice.
- * @tokens bg-brand-primaryAction, border-border-interactive, bg-input
+ * @tokens bg-brand-primaryAction, text-brand-onprimary, border-border-interactive, bg-input
  * @dependencies lucide-react
  * @behavior Renders through the same `boxClass` as `CheckBox`, so geometry
  * and fill can't drift. Takes neither the focus ring nor the hover border,
@@ -404,7 +409,7 @@ declare function CheckBoxBox({ checked, indeterminate, disabled, className }: Ch
  * dual-month calendar with range highlighting on the right, Start/End fields,
  * and Cancel/Apply. Shared by Creative Intel and the Account Review.
  * @tokens rounded-control, rounded-card, border-border-default, border-border-strong,
- * bg-surface, bg-input, bg-subtle, bg-ai-tint, bg-brand-primaryAction,
+ * bg-surface, bg-input, bg-subtle, bg-ai-tint, bg-brand-primaryAction, text-brand-onprimary,
  * shadow-overlay, text-text-primary, text-text-secondary, text-text-tertiary,
  * hover:bg-subtle, hover:text-text-primary, focus-visible:outline-border-focus
  * @dependencies lucide-react
@@ -761,7 +766,7 @@ interface NoResultsAction {
     /** Rendered as the filled button; every other action renders as the quiet link/button. */
     primary?: boolean;
 }
-declare const PRIMARY_ACTION_CLASS = "rounded-control bg-brand-primaryAction px-3.5 py-2 text-[13px] font-semibold text-white transition-colors hover:opacity-90";
+declare const PRIMARY_ACTION_CLASS = "rounded-control bg-brand-primaryAction px-3.5 py-2 text-[13px] font-semibold text-brand-onprimary transition-colors hover:opacity-90";
 declare const QUIET_ACTION_CLASS = "rounded-control text-[13px] font-medium text-text-link transition-colors hover:underline focus-visible:outline-solid focus-visible:outline-2 focus-visible:outline-border-focus";
 /**
  * @pattern NoResultsEmptyState
@@ -775,7 +780,7 @@ declare const QUIET_ACTION_CLASS = "rounded-control text-[13px] font-medium text
  * in a colSpan table cell (or a card, or a chart body) that already owns
  * that chrome, without imposing its own.
  * @tokens bg-subtle, text-text-tertiary, text-base, text-text-primary,
- * text-text-secondary, rounded-control, bg-brand-primaryAction, text-text-link,
+ * text-text-secondary, rounded-control, bg-brand-primaryAction, text-brand-onprimary, text-text-link,
  * focus-visible:outline-border-focus
  * @dependencies lucide-react
  * @behavior The Clear button shows when `onClearFilters` is given AND
@@ -1082,8 +1087,11 @@ declare function StackedColumnPlaceholder({ height, width, legendRows, axis, }:
  * right-aligned to the anchor's right edge -- both meant for `anchorRef`
  * anchors near the viewport's right edge, where a centred box would run
  * off-screen or read awkwardly beside a narrow icon.
- * @a11y Renders role="tooltip" and is wired to its anchor by aria-describedby,
- * so the anchor must exist and keep a stable id. It describes rather than
+ * @a11y Renders role="tooltip" and is wired by aria-describedby to the
+ * element that has focus: the `anchorRef` element, or inline, the child that
+ * took focus (not the wrapper span: a screen reader reads the description of
+ * the focused element only). An aria-describedby the caller set is kept.
+ * Escape hides it without moving focus or the pointer. It describes rather than
  * labels: it is announced in addition to the anchor's own name, not
  * instead of it, so never put the only label for a control in here.
  * @usage
@@ -1522,7 +1530,7 @@ interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement>, VariantPr
  * styling to a different element, e.g. a router `<Link>`. Also exports the
  * raw `buttonVariants` cva function for consumers composing button styling
  * onto something other than this component.
- * @tokens bg-brand-primaryAction, text-brand-onprimary, bg-surface, text-text-primary, border-border-strong, hover:border-border-interactive, hover:bg-subtle, bg-status-danger, text-status-onstatus, text-text-secondary, hover:text-text-danger, text-text-link, rounded-control, duration-(--mr-motion-duration-interactive), ease-interactive
+ * @tokens bg-brand-primaryAction, text-brand-onprimary, bg-surface, text-text-primary, border-border-strong, hover:border-border-interactive, hover:bg-subtle, bg-status-danger, text-status-onstatus, text-text-secondary, hover:text-text-danger, text-text-link, rounded-control, duration-(--mr-motion-duration-interactive), ease-interactive, focus-visible:outline-border-focus
  * @dependencies class-variance-authority, @radix-ui/react-slot, lucide-react
  * @variant primary - The one primary action on a screen. Solid brand fill.
  * @variant secondary - Any other real action competing for attention (Cancel, Export). Bordered, neutral fill.
@@ -1531,10 +1539,11 @@ interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement>, VariantPr
  * @variant dangerGhost - Neutral at rest, red on hover. For a destructive affordance inline in a row or toolbar -- what the product reaches for far more often than filled danger.
  * @variant link - Reads as inline text, not a control. Use inside body copy or where a full button would overpower the surrounding content.
  * @behavior `disabled` removes pointer events entirely (not just a style
- * change) and dims to 40% opacity. Focus handling is a deliberate exception:
- * most interactive components use a visible `focus-visible:outline-2` ring,
- * but Button suppresses it (`focus-visible:outline-hidden focus-visible:ring-0`)
- * and relies on its per-variant hover/brightness treatment instead. `loading`
+ * change) and dims to 40% opacity. Keyboard focus shows the same 2px
+ * `border-focus` outline as every other control here. It used to be
+ * suppressed in favour of the hover treatment, which a keyboard user never
+ * sees, and the suppression also cancelled the apps' own global focus ring,
+ * so a focused Button had no indicator at all (WCAG 2.4.7). `loading`
  * implies `disabled` (and sets `aria-busy`), since a control mid-submit
  * shouldn't accept another click. `asChild` renders only the child element,
  * through Radix `Slot`, with the button classes, ref and remaining props
@@ -1643,10 +1652,10 @@ interface NameListModalProps {
  * When `options` are given they render as CheckBox rows below the field, and
  * their state comes back as `onSubmit`'s second argument -- a handler that
  * only takes the name stays valid.
- * @a11y role="dialog" with aria-modal, labelled by its title. The name field
- * takes focus on open and Escape closes via onCancel. Focus is NOT trapped
- * and NOT restored to the opener on close -- confirmed in the source -- so
- * a consumer that needs either must supply it around this component.
+ * @a11y role="dialog" with aria-modal, labelled by its title (aria-labelledby
+ * on the heading). The name field takes focus on open and Escape closes via
+ * onCancel. Tab and Shift+Tab stay inside the dialog, and on close focus
+ * returns to the element that had it when the dialog opened.
  * @usage
  * ```tsx
  * <NameListModal title="Rename list" initialName={list.name} submitLabel="Save" onCancel={close} onSubmit={rename} />
@@ -1794,7 +1803,7 @@ interface SortButtonProps<K extends string> {
  * neutral ArrowUpDown in text-tertiary at half opacity, coming up to full on
  * hover so the column reads as clickable; the active column swaps to a
  * direction arrow (ArrowUp/ArrowDown) colored with the brand action blue.
- * @tokens text-text-tertiary, text-brand-primaryAction, hover:text-text-primary
+ * @tokens text-text-tertiary, text-brand-primaryAction, hover:text-text-primary, focus-visible:outline-border-focus
  * @dependencies lucide-react
  * @behavior Pair with `cycleSort`/`sortProp` (exported alongside) for the
  * standard three-state cycle — sort, reverse, then unsorted. `disabled` keeps

package/dist/index.js

@@ -1,7 +1,7 @@
 "use client";
 
 // src/InfoTip.tsx
-import { useEffect, useRef, useState } from "react";
+import { useEffect, useId, useRef, useState } from "react";
 import { createPortal } from "react-dom";
 import { Info } from "lucide-react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
@@ -9,6 +9,17 @@ function InfoTip({ text, size = 11, label = "More information", trigger = "click
   const [open, setOpen] = useState(false);
   const [pos, setPos] = useState(null);
   const btnRef = useRef(null);
+  const closeTimer = useRef(null);
+  const textId = useId();
+  const cancelClose = () => {
+    if (closeTimer.current) clearTimeout(closeTimer.current);
+    closeTimer.current = null;
+  };
+  const closeSoon = () => {
+    cancelClose();
+    closeTimer.current = setTimeout(() => setOpen(false), 120);
+  };
+  useEffect(() => cancelClose, []);
   useEffect(() => {
     if (!open) return;
     const onDown = (e) => {
@@ -30,6 +41,7 @@ function InfoTip({ text, size = 11, label = "More information", trigger = "click
     setPos({ top: r.bottom + 6, left, width });
   };
   const show = () => {
+    cancelClose();
     place();
     setOpen(true);
   };
@@ -40,7 +52,7 @@ function InfoTip({ text, size = 11, label = "More information", trigger = "click
   };
   const hoverProps = trigger === "hover" ? {
     onMouseEnter: show,
-    onMouseLeave: () => setOpen(false),
+    onMouseLeave: closeSoon,
     onFocus: show,
     onBlur: () => setOpen(false)
   } : {};
@@ -53,16 +65,20 @@ function InfoTip({ text, size = 11, label = "More information", trigger = "click
         onClick: toggle,
         "aria-label": label,
         "aria-expanded": open,
+        "aria-describedby": textId,
         ...hoverProps,
         className: "inline-flex cursor-pointer items-center text-text-tertiary transition-colors hover:text-text-primary focus-visible:outline-solid focus-visible:outline-2 focus-visible:outline-border-focus",
         children: /* @__PURE__ */ jsx(Info, { size, "aria-hidden": "true" })
       }
     ),
+    /* @__PURE__ */ jsx("span", { id: textId, hidden: true, children: text }),
     open && pos && createPortal(
       /* @__PURE__ */ jsx(
         "div",
         {
-          role: "tooltip",
+          "aria-hidden": "true",
+          onMouseEnter: trigger === "hover" ? cancelClose : void 0,
+          onMouseLeave: trigger === "hover" ? closeSoon : void 0,
           style: { position: "fixed", top: pos.top, left: pos.left, width: pos.width },
           className: "z-[90] rounded-control border border-border-default bg-surface px-3 py-2 text-[12px] font-normal not-italic normal-case leading-relaxed tracking-normal text-text-secondary shadow-overlay",
           children: text
@@ -511,7 +527,7 @@ import { jsx as jsx6 } from "react/jsx-runtime";
 function boxClass(on, disabled) {
   return cn(
     "flex h-[18px] w-[18px] shrink-0 items-center justify-center rounded-[5px] border transition-colors",
-    on ? "border-transparent bg-brand-primaryAction text-white" : "border-border-interactive bg-input",
+    on ? "border-transparent bg-brand-primaryAction text-brand-onprimary" : "border-border-interactive bg-input",
     disabled && "cursor-not-allowed opacity-50"
   );
 }
@@ -851,7 +867,7 @@ function DateRangeFilter({
                       /* @__PURE__ */ jsx7(
                         "span",
                         {
-                          className: `relative z-10 flex h-8 w-8 items-center justify-center rounded-full text-[13px] tabular-nums ${endpoint ? "bg-brand-primaryAction font-semibold text-white" : inMonth ? "text-text-primary hover:bg-subtle" : "text-text-tertiary"}`,
+                          className: `relative z-10 flex h-8 w-8 items-center justify-center rounded-full text-[13px] tabular-nums ${endpoint ? "bg-brand-primaryAction font-semibold text-brand-onprimary" : inMonth ? "text-text-primary hover:bg-subtle" : "text-text-tertiary"}`,
                           children: d.getDate()
                         }
                       )
@@ -862,7 +878,7 @@ function DateRangeFilter({
             }) }),
             /* @__PURE__ */ jsxs6("div", { className: "mt-4 flex justify-end gap-2", children: [
               /* @__PURE__ */ jsx7("button", { type: "button", "data-testid": testIdPrefix && `${testIdPrefix}-cancel`, onClick: () => setOpen(false), className: "rounded-control border border-border-default bg-surface px-5 py-2 text-[13px] font-semibold text-text-primary transition-colors hover:bg-subtle", children: "Cancel" }),
-              /* @__PURE__ */ jsx7("button", { type: "button", "data-testid": testIdPrefix && `${testIdPrefix}-apply`, onClick: apply, className: "rounded-control bg-brand-primaryAction px-5 py-2 text-[13px] font-semibold text-white transition-[filter] hover:brightness-110", children: "Apply" })
+              /* @__PURE__ */ jsx7("button", { type: "button", "data-testid": testIdPrefix && `${testIdPrefix}-apply`, onClick: apply, className: "rounded-control bg-brand-primaryAction px-5 py-2 text-[13px] font-semibold text-brand-onprimary transition-[filter] hover:brightness-110", children: "Apply" })
             ] })
           ] })
         ]
@@ -881,7 +897,7 @@ function NavBtn({ children, onClick, ...rest }) {
 }
 
 // src/SearchBar.tsx
-import { useEffect as useEffect4, useRef as useRef4, useState as useState4 } from "react";
+import { useEffect as useEffect4, useId as useId2, useRef as useRef4, useState as useState4 } from "react";
 import { AlertCircle, Check as Check3, ChevronDown as ChevronDown3, Search as Search3 } from "lucide-react";
 import { Fragment as Fragment3, jsx as jsx8, jsxs as jsxs7 } from "react/jsx-runtime";
 var DEFAULT_SEARCH_MATCH = { mode: "anyWord", wordJoin: "Or" };
@@ -1142,6 +1158,7 @@ function RadioOption({
 }
 function RowInfoTip({ text }) {
   const [open, setOpen] = useState4(false);
+  const id = useId2();
   const ref = useRef4(null);
   useEffect4(() => {
     if (!open) return;
@@ -1162,14 +1179,16 @@ function RowInfoTip({ text }) {
         },
         "aria-label": "More information",
         "aria-expanded": open,
-        className: "inline-flex text-text-tertiary transition-colors hover:text-text-primary",
+        "aria-describedby": id,
+        className: "inline-flex text-text-tertiary transition-colors hover:text-text-primary focus-visible:outline-solid focus-visible:outline-2 focus-visible:outline-border-focus",
         children: /* @__PURE__ */ jsx8(AlertCircle, { size: 13, "aria-hidden": "true" })
       }
     ),
-    open && /* @__PURE__ */ jsx8(
+    /* @__PURE__ */ jsx8(
       "span",
       {
-        role: "tooltip",
+        id,
+        hidden: !open,
         className: "absolute left-0 top-[calc(100%+6px)] z-40 w-[220px] rounded-control border border-border-default bg-surface px-2.5 py-1.5 text-[11.5px] font-normal leading-snug text-text-secondary shadow-overlay",
         children: text
       }
@@ -1521,7 +1540,7 @@ var NO_RESULTS_BODY = "Your filters may be too narrow, conflict with each other,
 function noResultsBody(workspaceName) {
   return workspaceName ? `Nothing in the \u201C${workspaceName}\u201D workspace matches. ${NO_RESULTS_BODY}` : NO_RESULTS_BODY;
 }
-var PRIMARY_ACTION_CLASS = "rounded-control bg-brand-primaryAction px-3.5 py-2 text-[13px] font-semibold text-white transition-colors hover:opacity-90";
+var PRIMARY_ACTION_CLASS = "rounded-control bg-brand-primaryAction px-3.5 py-2 text-[13px] font-semibold text-brand-onprimary transition-colors hover:opacity-90";
 var QUIET_ACTION_CLASS = "rounded-control text-[13px] font-medium text-text-link transition-colors hover:underline focus-visible:outline-solid focus-visible:outline-2 focus-visible:outline-border-focus";
 function NoResultsEmptyState({
   title = NO_RESULTS_TITLE,
@@ -1856,12 +1875,21 @@ function StackedColumnPlaceholder({
 }
 
 // src/Tooltip.tsx
-import { useEffect as useEffect8, useId, useLayoutEffect as useLayoutEffect2, useRef as useRef9, useState as useState8 } from "react";
+import { useEffect as useEffect8, useId as useId3, useLayoutEffect as useLayoutEffect2, useRef as useRef9, useState as useState8 } from "react";
 import { createPortal as createPortal3 } from "react-dom";
 import { jsx as jsx20, jsxs as jsxs18 } from "react/jsx-runtime";
 function cx6(...parts) {
   return parts.filter(Boolean).join(" ");
 }
+function addDescribedBy(el, id) {
+  const ids = (el.getAttribute("aria-describedby") ?? "").split(" ").filter(Boolean);
+  if (!ids.includes(id)) el.setAttribute("aria-describedby", [...ids, id].join(" "));
+}
+function removeDescribedBy(el, id) {
+  const ids = (el.getAttribute("aria-describedby") ?? "").split(" ").filter((x) => x && x !== id);
+  if (ids.length) el.setAttribute("aria-describedby", ids.join(" "));
+  else el.removeAttribute("aria-describedby");
+}
 function exitDurationMs(el) {
   if (typeof window.matchMedia === "function" && window.matchMedia("(prefers-reduced-motion: reduce)").matches) return 0;
   const cs = window.getComputedStyle(el);
@@ -1898,7 +1926,8 @@ function Tooltip({
   const [shown, setShown] = useState8(false);
   const openRef = useRef9(false);
   const mountedRef = useRef9(false);
-  const id = useId();
+  const id = useId3();
+  const describedRef = useRef9(null);
   const clearHideTimer = () => {
     if (hideTimer.current) {
       clearTimeout(hideTimer.current);
@@ -1935,7 +1964,8 @@ function Tooltip({
     if (!mountedRef.current) setBoxWidth(null);
     mountedRef.current = true;
     setAnchor({ top: r.top, left: r.left, width: r.width, height: r.height, bottom: r.bottom, right: r.right });
-    if (anchorRef) el.setAttribute("aria-describedby", id);
+    const target = anchorRef ? el : describedRef.current;
+    if (target) addDescribedBy(target, id);
   };
   const show = () => {
     clearHideTimer();
@@ -1952,7 +1982,9 @@ function Tooltip({
     mountedRef.current = false;
     setAnchor(null);
     setBoxWidth(null);
-    if (anchorRef?.current) anchorRef.current.removeAttribute("aria-describedby");
+    if (anchorRef?.current) removeDescribedBy(anchorRef.current, id);
+    if (describedRef.current) removeDescribedBy(describedRef.current, id);
+    describedRef.current = null;
   };
   const hideNow = () => {
     clearShowTimer();
@@ -2003,6 +2035,12 @@ function Tooltip({
       el.removeEventListener("blur", hide);
     };
   }, [anchorRef, placement, delay]);
+  useEffect8(() => {
+    if (!anchor) return;
+    const onKey = (e) => e.key === "Escape" && hideNow();
+    window.addEventListener("keydown", onKey);
+    return () => window.removeEventListener("keydown", onKey);
+  }, [anchor]);
   useLayoutEffect2(() => {
     if (!anchor) return;
     const el = boxRef.current;
@@ -2066,9 +2104,11 @@ function Tooltip({
       className,
       onMouseEnter: show,
       onMouseLeave: hide,
-      onFocus: show,
+      onFocus: (e) => {
+        describedRef.current = e.target;
+        show();
+      },
       onBlur: hide,
-      "aria-describedby": anchor ? id : void 0,
       children: [
         children,
         floating
@@ -2763,7 +2803,7 @@ import { cva } from "class-variance-authority";
 import { Loader2 as Loader22 } from "lucide-react";
 import { jsx as jsx26, jsxs as jsxs24 } from "react/jsx-runtime";
 var buttonVariants = cva(
-  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-control transition-all duration-(--mr-motion-duration-interactive) ease-interactive disabled:pointer-events-none disabled:opacity-40 focus-visible:outline-hidden focus-visible:ring-0",
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-control transition-all duration-(--mr-motion-duration-interactive) ease-interactive disabled:pointer-events-none disabled:opacity-40 focus-visible:outline-solid focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-border-focus",
   {
     variants: {
       variant: {
@@ -2861,7 +2901,7 @@ function FilterDropdownFooter({
 }
 
 // src/NameListModal.tsx
-import { useEffect as useEffect10, useState as useState11 } from "react";
+import { useEffect as useEffect10, useId as useId4, useRef as useRef11, useState as useState11 } from "react";
 import { createPortal as createPortal5 } from "react-dom";
 import { jsx as jsx28, jsxs as jsxs26 } from "react/jsx-runtime";
 function NameListModal({
@@ -2879,11 +2919,38 @@ function NameListModal({
     () => Object.fromEntries((options ?? []).map((o) => [o.key, !!o.initial]))
   );
   const toggle = (key) => setChecked((c) => ({ ...c, [key]: !c[key] }));
+  const dialogRef = useRef11(null);
+  const titleId = useId4();
+  const fieldId = useId4();
   useEffect10(() => {
     const onKey = (e) => e.key === "Escape" && onCancel();
     window.addEventListener("keydown", onKey);
     return () => window.removeEventListener("keydown", onKey);
   }, [onCancel]);
+  const [opener] = useState11(() => typeof document === "undefined" ? null : document.activeElement);
+  useEffect10(
+    () => () => {
+      const active = document.activeElement;
+      if (!active || active === document.body) opener?.focus?.();
+    },
+    [opener]
+  );
+  const trapTab = (e) => {
+    if (e.key !== "Tab" || !dialogRef.current) return;
+    const items = [
+      ...dialogRef.current.querySelectorAll("button:not([disabled]), input:not([disabled]), [tabindex]:not([tabindex='-1'])")
+    ];
+    if (items.length === 0) return;
+    const first = items[0];
+    const last = items[items.length - 1];
+    if (e.shiftKey && document.activeElement === first) {
+      e.preventDefault();
+      last.focus();
+    } else if (!e.shiftKey && document.activeElement === last) {
+      e.preventDefault();
+      first.focus();
+    }
+  };
   return createPortal5(
     // bg-scrim, not a literal: design-tokens gained a scrim token in 2.5.0.
     // No in-data-[theme=dark] override needed any more -- the token redefines
@@ -2896,18 +2963,20 @@ function NameListModal({
         children: /* @__PURE__ */ jsxs26(
           "div",
           {
+            ref: dialogRef,
             role: "dialog",
             "aria-modal": "true",
-            "aria-label": title,
+            "aria-labelledby": titleId,
+            onKeyDown: trapTab,
             className: "w-full max-w-[420px] rounded-card border border-border-default bg-surface p-5 shadow-overlay",
             children: [
-              /* @__PURE__ */ jsx28("h2", { className: "text-[16px] font-semibold text-text-primary", children: title }),
+              /* @__PURE__ */ jsx28("h2", { id: titleId, className: "text-[16px] font-semibold text-text-primary", children: title }),
               /* @__PURE__ */ jsxs26("div", { className: "mt-4 flex flex-col gap-1.5", children: [
-                /* @__PURE__ */ jsx28("label", { htmlFor: "account-list-name", className: "text-[12px] font-medium text-text-secondary", children: fieldLabel }),
+                /* @__PURE__ */ jsx28("label", { htmlFor: fieldId, className: "text-[12px] font-medium text-text-secondary", children: fieldLabel }),
                 /* @__PURE__ */ jsx28(
                   "input",
                   {
-                    id: "account-list-name",
+                    id: fieldId,
                     autoFocus: true,
                     value: name,
                     onChange: (e) => setName(e.target.value),
@@ -3065,7 +3134,7 @@ function SortButton({
         // subtly tighter than the fixed headers next to them. A control
         // should carry exactly the properties that do not inherit, and
         // nothing more.
-        "group inline-flex items-center gap-1 uppercase transition-colors",
+        "group inline-flex items-center gap-1 uppercase transition-colors focus-visible:outline-solid focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-border-focus",
         ALIGN[align],
         !disabled && "hover:text-text-primary"
       ),
@@ -3337,7 +3406,7 @@ function TablePagination({
 }
 
 // src/DateRangePicker.tsx
-import { useEffect as useEffect11, useMemo as useMemo4, useRef as useRef11, useState as useState12 } from "react";
+import { useEffect as useEffect11, useMemo as useMemo4, useRef as useRef12, useState as useState12 } from "react";
 import { ChevronDown as ChevronDown10 } from "lucide-react";
 import { jsx as jsx36, jsxs as jsxs32 } from "react/jsx-runtime";
 var MONTH_ABBR = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
@@ -3404,7 +3473,7 @@ function DateRangePicker({
   const [open, setOpen] = useState12(false);
   const [value, setValue] = useState12(defaultValue);
   const [draft, setDraft] = useState12(defaultValue);
-  const ref = useRef11(null);
+  const ref = useRef12(null);
   const [fromMo, setFromMo] = useState12(end.getMonth());
   const [fromYr, setFromYr] = useState12(end.getFullYear() - 1);
   const [toMo, setToMo] = useState12(end.getMonth());
@@ -3511,7 +3580,7 @@ function DateRangePicker({
 }
 
 // src/MultiSelectFilter.tsx
-import { useCallback as useCallback4, useEffect as useEffect12, useRef as useRef12, useState as useState13 } from "react";
+import { useCallback as useCallback4, useEffect as useEffect12, useRef as useRef13, useState as useState13 } from "react";
 import { ChevronDown as ChevronDown11, Check as Check7, Minus as Minus2, Search as Search5, X as X4 } from "lucide-react";
 import { jsx as jsx37, jsxs as jsxs33 } from "react/jsx-runtime";
 function MultiSelectFilter({
@@ -3540,7 +3609,7 @@ function MultiSelectFilter({
   const [open, setOpen] = useState13(false);
   const [q, setQ] = useState13("");
   const [draft, setDraft] = useState13(selected);
-  const ref = useRef12(null);
+  const ref = useRef13(null);
   const close = useCallback4(() => {
     setOpen(false);
     setQ("");
@@ -3794,11 +3863,11 @@ function Toggle({ checked, onChange, label, size = "md", disabled, className, te
 }
 
 // src/AISpark.tsx
-import { useId as useId2 } from "react";
+import { useId as useId5 } from "react";
 import { Sparkles } from "lucide-react";
 import { Fragment as Fragment5, jsx as jsx39, jsxs as jsxs34 } from "react/jsx-runtime";
 function AISpark({ size = 16, className }) {
-  const id = useId2();
+  const id = useId5();
   return /* @__PURE__ */ jsxs34(Fragment5, { children: [
     /* @__PURE__ */ jsx39("svg", { width: "0", height: "0", "aria-hidden": "true", style: { position: "absolute" }, children: /* @__PURE__ */ jsx39("defs", { children: /* @__PURE__ */ jsxs34("linearGradient", { id, x1: "0", y1: "0", x2: "1", y2: "1", children: [
       /* @__PURE__ */ jsx39("stop", { offset: "0%", stopColor: "var(--mr-color-brand-primary)" }),