@mediaradar/design-components 0.18.2 → 0.18.4

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
@@ -1458,7 +1466,7 @@ interface PublisherBreakdownListProps {
  * @tokens text-text-primary, text-text-tertiary, text-text-secondary,
  * text-text-link, text-text-warning, text-text-success, text-text-danger,
  * border-border-default, bg-surface, bg-subtle, rounded-control, rounded-full,
- * shadow-overlay
+ * shadow-overlay, text-micro
  * @behavior Truncates to `defaultVisibleCount` rows with a "See all (N more)"
  * / "Show less" toggle, unless `viewAllHref` is given, in which case the
  * footer becomes a plain link out instead (e.g. to a full breakdown page).
@@ -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
@@ -1458,7 +1466,7 @@ interface PublisherBreakdownListProps {
  * @tokens text-text-primary, text-text-tertiary, text-text-secondary,
  * text-text-link, text-text-warning, text-text-success, text-text-danger,
  * border-border-default, bg-surface, bg-subtle, rounded-control, rounded-full,
- * shadow-overlay
+ * shadow-overlay, text-micro
  * @behavior Truncates to `defaultVisibleCount` rows with a "See all (N more)"
  * / "Show less" toggle, unless `viewAllHref` is given, in which case the
  * footer becomes a plain link out instead (e.g. to a full breakdown page).
@@ -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