@mediaradar/design-components 0.17.0 → 0.18.1

package/dist/index.d.cts

@@ -398,6 +398,7 @@ declare function CheckBoxBox({ checked, indeterminate, disabled, className }: Ch
 
 /**
  * @pattern DateRangeFilter
+ * @status stable
  * @description Date-range control -- the two-line chip (caption + value) with
  * a chevron that opens a two-pane picker: preset shortcuts on the left, a
  * dual-month calendar with range highlighting on the right, Start/End fields,
@@ -675,6 +676,7 @@ declare function SelectFilter({ caption, value, options, onChange, align, fullWi
 
 /**
  * @pattern Card
+ * @status stable
  * @description Layout primitive for grouping content in a bordered, elevated
  * surface. Width is controlled by the parent container, not the Card itself,
  * so it works unchanged as a fixed-width rail item or a grid cell. Applies an
@@ -683,7 +685,8 @@ declare function SelectFilter({ caption, value, options, onChange, align, fullWi
  * switches the card into a padded content layout, replacing the header/body
  * shell mr-clientapps-insights-studio's own `CardShell` used to hand-roll.
  * @tokens rounded-card, border-border-default, bg-surface, shadow-raised,
- * hover:shadow-overlay, p-card-padding, text-text-primary, text-text-tertiary
+ * hover:shadow-overlay, p-card-padding, text-style-card-title, text-xs,
+ * text-text-tertiary
  * @behavior Without `title`, children render directly as the card's only
  * content -- no padding is applied, so callers that need a full-bleed image
  * or gradient flush against the card edge (the common case in
@@ -693,6 +696,10 @@ declare function SelectFilter({ caption, value, options, onChange, align, fullWi
  * standard padding, matching `CardShell`'s layout so it can be swapped in
  * directly. `staticCard` drops the hover-shadow transition for non-clickable
  * content (a KPI tile, a read-only summary) -- there's nothing to respond to.
+ * @a11y With `title`, the title renders as a real heading (`titleAs`,
+ * default `h3`) so screen-reader users can jump between cards; pick the
+ * level that fits the page outline rather than one that looks right --
+ * every level is styled the same. The card itself is an `<article>`.
  * @variant interactive - Default. Clickable/hoverable content -- deeper
  * shadow on hover signals it responds to the cursor.
  * @variant static - Set `staticCard`. Non-clickable content -- no hover
@@ -704,7 +711,7 @@ declare function SelectFilter({ caption, value, options, onChange, align, fullWi
  *   <p>Body content</p>
  * </Card>
  * <Card staticCard>Non-interactive content</Card>
- * <Card title="Spend trend" subtitle="Last 90 days" action={<Link to="/spend">View all</Link>}>
+ * <Card title="Spend trend" subtitle="Last 90 days" titleAs="h2" action={<Link to="/spend">View all</Link>}>
  *   <SpendChart />
  * </Card>
  * ```
@@ -718,6 +725,13 @@ interface CardProps extends Omit<React.HTMLAttributes<HTMLElement>, "title"> {
      * plus the card's standard content padding, matching `CardShell`.
      */
     title?: string;
+    /**
+     * Heading level for `title`. Defaults to `h3`; pass `h2` where the card's
+     * title is the first heading under the page's `h1`, so the page doesn't skip
+     * a level. Only the element changes: every level looks the same
+     * (`text-style-card-title`). Ignored without `title`.
+     */
+    titleAs?: "h2" | "h3" | "h4";
     /** Shown under `title` in a muted tertiary color. Ignored without `title`. */
     subtitle?: string;
     /** Trailing header content, e.g. a "View all" link. Ignored without `title`. */
@@ -839,6 +853,7 @@ interface SummaryGroup {
 }
 /**
  * @pattern WorkspaceSelectedCard
+ * @status stable
  * @description Sticky recap card listing what each section's picker has
  * added, as collapsible groups with per-item remove and "Remove all" --
  * generic over the `SummaryGroup` shape, no domain coupling. Reconciled from
@@ -900,6 +915,7 @@ declare function WorkspaceSelectedCard({ groups, testIdPrefix }: WorkspaceSelect
 
 /**
  * @pattern BarChartPlaceholder
+ * @status stable
  * @description Neutral, dataless stand-in for a ranked-bar chart --
  * descending bar profile under a blank-labelled axis frame (dashed
  * gridlines, blank y/x-tick boxes), so an unsatisfiable filter still reads
@@ -929,6 +945,7 @@ declare function BarChartPlaceholder({ height }: BarChartPlaceholderProps): reac
 
 /**
  * @pattern LineChartPlaceholder
+ * @status stable
  * @description Neutral, dataless stand-in for a multi-series trend chart --
  * four grey paths over the shared axis frame, each with a solid-then-dashed
  * handoff for the live chart's forecast tail, and a point at every sample.
@@ -959,6 +976,7 @@ declare function LineChartPlaceholder({ height }: LineChartPlaceholderProps): re
 
 /**
  * @pattern PieChartPlaceholder
+ * @status stable
  * @description Neutral, dataless stand-in for a pie chart -- a grey disc
  * seamed where slices would fall, beside a blank legend. No axis, matching
  * the live pie it stands in for. Same no-results use as
@@ -1160,6 +1178,7 @@ declare function AdvertiserNoResults({ query, hint, }: AdvertiserNoResultsProps)
 
 /**
  * @pattern SelectAllVisible
+ * @status stable
  * @description "Select all visible" row for a search-first picker's result
  * list -- only render it once the caller decides the visible result set is
  * long enough to warrant it (`insights-studio-prototype`'s three advertiser-
@@ -1193,6 +1212,7 @@ declare function SelectAllVisible({ count, allSelected, onToggle, testIdPrefix }
 
 /**
  * @pattern SelectedSection
+ * @status stable
  * @description Collapsible "Selected (n)" container for a search-first
  * picker. Selections can pile up and crowd out the live search results, so
  * the user can fold them away to refocus on the search. Controlled so the
@@ -1337,6 +1357,7 @@ interface SelectionPickerProps<T extends PickerRow> {
 }
 /**
  * @pattern SelectionPicker
+ * @status stable
  * @description Generic search-and-filter picker for building a selection out
  * of a larger catalog -- a search box plus filter dropdowns above a checkbox
  * table, with an optional "Search / Account lists" source toggle for pulling
@@ -1364,10 +1385,12 @@ interface SelectionPickerProps<T extends PickerRow> {
  * with both an `onChange` and the row's own `onClick` -- `CheckBox` stops
  * click propagation before firing `onChange`, which is exactly what lets it
  * sit inside a row that toggles on its own click without double-firing.
- * @a11y Search is an <input>; result rows and the account-list menu
- * (role="menu") are buttons. Escape closes the menu. Loading, empty and
- * error states announce through role="status", so a consumer should NOT
- * wrap this in its own live region -- that would double-announce.
+ * @a11y Search is an <input>; result rows are buttons. Each filter dropdown
+ * is a disclosure (aria-expanded) opening a labelled group of checkboxes,
+ * not a menu: it holds a search box and checkboxes, which a menu may not.
+ * Escape closes it. Loading, empty and error states announce through
+ * role="status", so a consumer should NOT wrap this in its own live region
+ * -- that would double-announce.
  * @usage
  * ```tsx
  * <SelectionPicker

package/dist/index.d.ts

@@ -398,6 +398,7 @@ declare function CheckBoxBox({ checked, indeterminate, disabled, className }: Ch
 
 /**
  * @pattern DateRangeFilter
+ * @status stable
  * @description Date-range control -- the two-line chip (caption + value) with
  * a chevron that opens a two-pane picker: preset shortcuts on the left, a
  * dual-month calendar with range highlighting on the right, Start/End fields,
@@ -675,6 +676,7 @@ declare function SelectFilter({ caption, value, options, onChange, align, fullWi
 
 /**
  * @pattern Card
+ * @status stable
  * @description Layout primitive for grouping content in a bordered, elevated
  * surface. Width is controlled by the parent container, not the Card itself,
  * so it works unchanged as a fixed-width rail item or a grid cell. Applies an
@@ -683,7 +685,8 @@ declare function SelectFilter({ caption, value, options, onChange, align, fullWi
  * switches the card into a padded content layout, replacing the header/body
  * shell mr-clientapps-insights-studio's own `CardShell` used to hand-roll.
  * @tokens rounded-card, border-border-default, bg-surface, shadow-raised,
- * hover:shadow-overlay, p-card-padding, text-text-primary, text-text-tertiary
+ * hover:shadow-overlay, p-card-padding, text-style-card-title, text-xs,
+ * text-text-tertiary
  * @behavior Without `title`, children render directly as the card's only
  * content -- no padding is applied, so callers that need a full-bleed image
  * or gradient flush against the card edge (the common case in
@@ -693,6 +696,10 @@ declare function SelectFilter({ caption, value, options, onChange, align, fullWi
  * standard padding, matching `CardShell`'s layout so it can be swapped in
  * directly. `staticCard` drops the hover-shadow transition for non-clickable
  * content (a KPI tile, a read-only summary) -- there's nothing to respond to.
+ * @a11y With `title`, the title renders as a real heading (`titleAs`,
+ * default `h3`) so screen-reader users can jump between cards; pick the
+ * level that fits the page outline rather than one that looks right --
+ * every level is styled the same. The card itself is an `<article>`.
  * @variant interactive - Default. Clickable/hoverable content -- deeper
  * shadow on hover signals it responds to the cursor.
  * @variant static - Set `staticCard`. Non-clickable content -- no hover
@@ -704,7 +711,7 @@ declare function SelectFilter({ caption, value, options, onChange, align, fullWi
  *   <p>Body content</p>
  * </Card>
  * <Card staticCard>Non-interactive content</Card>
- * <Card title="Spend trend" subtitle="Last 90 days" action={<Link to="/spend">View all</Link>}>
+ * <Card title="Spend trend" subtitle="Last 90 days" titleAs="h2" action={<Link to="/spend">View all</Link>}>
  *   <SpendChart />
  * </Card>
  * ```
@@ -718,6 +725,13 @@ interface CardProps extends Omit<React.HTMLAttributes<HTMLElement>, "title"> {
      * plus the card's standard content padding, matching `CardShell`.
      */
     title?: string;
+    /**
+     * Heading level for `title`. Defaults to `h3`; pass `h2` where the card's
+     * title is the first heading under the page's `h1`, so the page doesn't skip
+     * a level. Only the element changes: every level looks the same
+     * (`text-style-card-title`). Ignored without `title`.
+     */
+    titleAs?: "h2" | "h3" | "h4";
     /** Shown under `title` in a muted tertiary color. Ignored without `title`. */
     subtitle?: string;
     /** Trailing header content, e.g. a "View all" link. Ignored without `title`. */
@@ -839,6 +853,7 @@ interface SummaryGroup {
 }
 /**
  * @pattern WorkspaceSelectedCard
+ * @status stable
  * @description Sticky recap card listing what each section's picker has
  * added, as collapsible groups with per-item remove and "Remove all" --
  * generic over the `SummaryGroup` shape, no domain coupling. Reconciled from
@@ -900,6 +915,7 @@ declare function WorkspaceSelectedCard({ groups, testIdPrefix }: WorkspaceSelect
 
 /**
  * @pattern BarChartPlaceholder
+ * @status stable
  * @description Neutral, dataless stand-in for a ranked-bar chart --
  * descending bar profile under a blank-labelled axis frame (dashed
  * gridlines, blank y/x-tick boxes), so an unsatisfiable filter still reads
@@ -929,6 +945,7 @@ declare function BarChartPlaceholder({ height }: BarChartPlaceholderProps): reac
 
 /**
  * @pattern LineChartPlaceholder
+ * @status stable
  * @description Neutral, dataless stand-in for a multi-series trend chart --
  * four grey paths over the shared axis frame, each with a solid-then-dashed
  * handoff for the live chart's forecast tail, and a point at every sample.
@@ -959,6 +976,7 @@ declare function LineChartPlaceholder({ height }: LineChartPlaceholderProps): re
 
 /**
  * @pattern PieChartPlaceholder
+ * @status stable
  * @description Neutral, dataless stand-in for a pie chart -- a grey disc
  * seamed where slices would fall, beside a blank legend. No axis, matching
  * the live pie it stands in for. Same no-results use as
@@ -1160,6 +1178,7 @@ declare function AdvertiserNoResults({ query, hint, }: AdvertiserNoResultsProps)
 
 /**
  * @pattern SelectAllVisible
+ * @status stable
  * @description "Select all visible" row for a search-first picker's result
  * list -- only render it once the caller decides the visible result set is
  * long enough to warrant it (`insights-studio-prototype`'s three advertiser-
@@ -1193,6 +1212,7 @@ declare function SelectAllVisible({ count, allSelected, onToggle, testIdPrefix }
 
 /**
  * @pattern SelectedSection
+ * @status stable
  * @description Collapsible "Selected (n)" container for a search-first
  * picker. Selections can pile up and crowd out the live search results, so
  * the user can fold them away to refocus on the search. Controlled so the
@@ -1337,6 +1357,7 @@ interface SelectionPickerProps<T extends PickerRow> {
 }
 /**
  * @pattern SelectionPicker
+ * @status stable
  * @description Generic search-and-filter picker for building a selection out
  * of a larger catalog -- a search box plus filter dropdowns above a checkbox
  * table, with an optional "Search / Account lists" source toggle for pulling
@@ -1364,10 +1385,12 @@ interface SelectionPickerProps<T extends PickerRow> {
  * with both an `onChange` and the row's own `onClick` -- `CheckBox` stops
  * click propagation before firing `onChange`, which is exactly what lets it
  * sit inside a row that toggles on its own click without double-firing.
- * @a11y Search is an <input>; result rows and the account-list menu
- * (role="menu") are buttons. Escape closes the menu. Loading, empty and
- * error states announce through role="status", so a consumer should NOT
- * wrap this in its own live region -- that would double-announce.
+ * @a11y Search is an <input>; result rows are buttons. Each filter dropdown
+ * is a disclosure (aria-expanded) opening a labelled group of checkboxes,
+ * not a menu: it holds a search box and checkboxes, which a menu may not.
+ * Escape closes it. Loading, empty and error states announce through
+ * role="status", so a consumer should NOT wrap this in its own live region
+ * -- that would double-announce.
  * @usage
  * ```tsx
  * <SelectionPicker

package/dist/index.js

@@ -1485,7 +1485,7 @@ function SelectFilter({
 // src/Card.tsx
 import { forwardRef } from "react";
 import { jsx as jsx12, jsxs as jsxs11 } from "react/jsx-runtime";
-var Card = forwardRef(function Card2({ staticCard, title, subtitle, action, className, children, ...rest }, ref) {
+var Card = forwardRef(function Card2({ staticCard, title, titleAs: TitleTag = "h3", subtitle, action, className, children, ...rest }, ref) {
   return /* @__PURE__ */ jsx12(
     "article",
     {
@@ -1500,8 +1500,8 @@ var Card = forwardRef(function Card2({ staticCard, title, subtitle, action, clas
       children: title ? /* @__PURE__ */ jsxs11("div", { className: "flex flex-1 flex-col p-card-padding", children: [
         /* @__PURE__ */ jsxs11("div", { className: "flex items-start justify-between gap-2", children: [
           /* @__PURE__ */ jsxs11("div", { children: [
-            /* @__PURE__ */ jsx12("h3", { className: "text-[15px] font-semibold leading-snug text-text-primary", children: title }),
-            subtitle && /* @__PURE__ */ jsx12("p", { className: "mt-0.5 text-[12px] leading-snug text-text-tertiary", children: subtitle })
+            /* @__PURE__ */ jsx12(TitleTag, { className: "text-style-card-title", children: title }),
+            subtitle && /* @__PURE__ */ jsx12("p", { className: "mt-0.5 text-xs leading-snug text-text-tertiary", children: subtitle })
           ] }),
           action && /* @__PURE__ */ jsx12("div", { className: "shrink-0 text-text-tertiary", children: action })
         ] }),
@@ -2344,7 +2344,8 @@ function SelectionPicker({
                   "grid items-center gap-2 px-3 py-2.5",
                   rowGridCols,
                   isLocked ? "cursor-default opacity-50" : "cursor-pointer hover:bg-subtle",
-                  !isLocked && isSel && "opacity-60"
+                  // 70%, not lower: selected rows' text must keep 4.5:1 contrast.
+                  !isLocked && isSel && "opacity-70"
                 ),
                 children: [
                   isLocked ? /* @__PURE__ */ jsx24("span", { "aria-hidden": "true" }) : /* @__PURE__ */ jsx24(
@@ -2579,7 +2580,6 @@ function FilterDropdown({
         ref: btnRef,
         type: "button",
         onClick: () => setOpen((v) => !v),
-        "aria-haspopup": "menu",
         "aria-expanded": open,
         "data-testid": testIdPrefix && `${testIdPrefix}-filter-${filterSlug}`,
         className: "inline-flex h-9 items-center gap-1.5 whitespace-nowrap rounded-control border border-border-default bg-input px-3 text-[13px] font-medium text-text-secondary transition-colors hover:bg-subtle",
@@ -2594,7 +2594,7 @@ function FilterDropdown({
         "div",
         {
           ref: menuRef,
-          role: "menu",
+          role: "group",
           "aria-label": filter.label,
           style: { top: pos.top, left: pos.left },
           className: "fixed z-[80] min-w-[220px] rounded-card border border-border-default bg-surface p-2 shadow-overlay",