@mediaradar/design-components 0.16.2 → 0.18.0

package/dist/index.d.cts

@@ -683,7 +683,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 +694,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 +709,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 +723,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`. */
@@ -1733,6 +1745,15 @@ declare function sortProp<K extends string>(sort: SortState<K>): {
     key: K | null;
     dir: SortDir;
 };
+/**
+ * The `aria-sort` value for column `key`'s <th>: "ascending"/"descending" on
+ * the active column, nothing on the rest. aria-sort belongs on the column
+ * header, not on the SortButton inside it, and only the sorted column carries it.
+ */
+declare function ariaSortFor<K extends string>(sort: SortState<K> | {
+    key: K | null;
+    dir: SortDir;
+}, key: K): "ascending" | "descending" | undefined;
 
 interface SortButtonProps<K extends string> {
     label: string;
@@ -1745,6 +1766,15 @@ interface SortButtonProps<K extends string> {
     onSort: (key: K) => void;
     /** True when there are no rows to order — hides the arrow, drops the click. */
     disabled?: boolean;
+    /**
+     * False renders the label alone, as plain text with no button, for a column
+     * that can never be sorted. Unlike `disabled`, nothing about it is a control.
+     */
+    sortable?: boolean;
+    /** Matches the column's alignment, so a label that wraps lines up with the cells under it. */
+    align?: "left" | "center" | "right";
+    /** Optional prefix for the button's `data-testid` (`${testIdPrefix}-sort-${sortKey}`). Omit for no test-id wiring. */
+    testIdPrefix?: string;
 }
 /**
  * @pattern SortButton
@@ -1759,16 +1789,25 @@ interface SortButtonProps<K extends string> {
  * standard three-state cycle — sort, reverse, then unsorted. `disabled` keeps
  * the column's inherited header color rather than dimming it — the column
  * isn't unavailable, there's just no data under it.
- * @a11y Renders a <button> and sets aria-sort on it. Intended for a table header
- * cell -- put it inside the <th> rather than replacing it, so the sort
- * state stays associated with the column for screen readers.
+ * `sortable={false}` renders just the label, for a column that is never
+ * sortable; `align` matches the column's alignment.
+ * @a11y Renders a <button> inside the <th>. The sort state is announced from
+ * the column header, not the button: aria-sort is only valid on a
+ * columnheader, so the caller sets it on the <th> with `ariaSortFor` (exported
+ * alongside). It gives the active column "ascending"/"descending" and leaves
+ * every other header without the attribute.
  * @usage
  * ```tsx
  * const [sort, setSort] = useState<SortState<'spend'>>(null)
- * <SortButton label="Spend" sortKey="spend" sort={sortProp(sort)} onSort={(k) => setSort(cycleSort(sort, k))} />
+ * <th aria-sort={ariaSortFor(sort, 'spend')}>
+ *   <SortButton label="Spend" sortKey="spend" sort={sortProp(sort)} onSort={(k) => setSort(cycleSort(sort, k))} />
+ * </th>
+ * <th className="text-right" aria-sort={ariaSortFor(sort, 'units')}>
+ *   <SortButton label="Units" sortKey="units" align="right" sort={sortProp(sort)} onSort={onSort} />
+ * </th>
  * ```
  */
-declare function SortButton<K extends string>({ label, sortKey, sort, onSort, disabled }: SortButtonProps<K>): react.JSX.Element;
+declare function SortButton<K extends string>({ label, sortKey, sort, onSort, disabled, sortable, align, testIdPrefix, }: SortButtonProps<K>): react.JSX.Element;
 
 interface PagerProps {
     /** The current page, 1-indexed. */
@@ -1883,7 +1922,7 @@ declare function Tag({ children, className }: TagProps): react.JSX.Element;
  * />
  * ```
  */
-declare function TablePagination({ page, perPage, totalItems, onPageChange, onPerPageChange, perPageOptions, itemLabel, className, }: {
+declare function TablePagination({ page, perPage, totalItems, onPageChange, onPerPageChange, perPageOptions, itemLabel, className, testIdPrefix, }: {
     page: number;
     perPage: number;
     totalItems: number;
@@ -1892,6 +1931,13 @@ declare function TablePagination({ page, perPage, totalItems, onPageChange, onPe
     perPageOptions?: number[];
     itemLabel?: string;
     className?: string;
+    /**
+     * Optional prefix for `data-testid` attributes on the bar (`testIdPrefix`
+     * itself), the per-page select (`-per-page`), the step buttons (`-first`,
+     * `-prev`, `-next`, `-last`) and each page button (`-page-<n>`). Omit for no
+     * test-id wiring.
+     */
+    testIdPrefix?: string;
 }): react.JSX.Element;
 type TablePaginationProps = Parameters<typeof TablePagination>[0];
 
@@ -2041,6 +2087,8 @@ interface ToggleProps {
     disabled?: boolean;
     /** Extra classes merged onto the track (the outer `<button>`). */
     className?: string;
+    /** Optional prefix for the switch's `data-testid` (`${testIdPrefix}-toggle`). Omit for no test-id wiring. */
+    testIdPrefix?: string;
 }
 /**
  * @pattern Toggle
@@ -2069,7 +2117,7 @@ interface ToggleProps {
  * <Toggle size="sm" checked={enabled} onChange={setEnabled} label="Only include enriched creatives" />
  * ```
  */
-declare function Toggle({ checked, onChange, label, size, disabled, className }: ToggleProps): react.JSX.Element;
+declare function Toggle({ checked, onChange, label, size, disabled, className, testIdPrefix }: ToggleProps): react.JSX.Element;
 
 interface AISparkProps {
     size?: number;
@@ -2108,4 +2156,4 @@ interface FreshnessProps {
  */
 declare function Freshness({ level }: FreshnessProps): react.JSX.Element;
 
-export { AISpark, type AISparkProps, AdvertiserNoResults, type AdvertiserNoResultsProps, AdvertiserQuickFilter, type AdvertiserQuickFilterProps, AdvertiserSearchPrompt, type AdvertiserSearchPromptProps, Badge, type BadgeKind, type BadgeProps, type BadgeTone, BarChartPlaceholder, type BarChartPlaceholderProps, Button, type ButtonProps, Card, type CardProps, CheckBox, CheckBoxBox, type CheckBoxBoxProps, type CheckBoxProps, ChipContent, type ChipContentProps, type ChipVariant, DEFAULT_SEARCH_MATCH, DataScopeFilter, type DataScopeFilterProps, type DateGranularity, DateRangeFilter, type DateRangeFilterProps, DateRangePicker, type DateRangePickerProps, Delta, type DeltaProps, FilterChipBar, type FilterChipBarProps, FilterDropdownFooter, type FilterDropdownFooterProps, Freshness, type FreshnessLevel, type FreshnessProps, InfoTip, type InfoTipProps, LineChartPlaceholder, type LineChartPlaceholderProps, MultiSelectFilter, type MultiSelectFilterProps, type MultiSelectGroup, NO_RESULTS_BODY, NO_RESULTS_TITLE, NameListModal, type NameListModalProps, type NoResultsAction, NoResultsEmptyState, type NoResultsEmptyStateProps, PRIMARY_ACTION_CLASS, Pager, type PagerProps, type PickerColumn, type PickerFilter, type PickerRow, PieChartPlaceholder, type PieChartPlaceholderProps, type PubBreak, PublisherBreakdownList, type PublisherBreakdownListProps, QUIET_ACTION_CLASS, SearchBar, type SearchBarProps, type SearchBarVariant, type SearchMatchMode, type SearchMatchValue, SectionRail, type SectionRailProps, SelectAllVisible, type SelectAllVisibleProps, SelectFilter, type SelectFilterProps, SelectedSection, type SelectedSectionProps, SelectionPicker, type SelectionPickerAccountList, type SelectionPickerProps, SortButton, type SortButtonProps, type SortDir, type SortState, StackedColumnPlaceholder, type StackedColumnPlaceholderProps, type SummaryGroup, type SummaryGroupItemValue, TablePagination, type TablePaginationProps, Tag, type TagProps, Toggle, type ToggleProps, Tooltip, type TooltipProps, WorkspaceAvatar, type WorkspaceAvatarProps, WorkspaceSelectedCard, type WorkspaceSelectedCardProps, buttonVariants, chipTriggerClass, cycleSort, noResultsBody, resolveRange, sortProp };
+export { AISpark, type AISparkProps, AdvertiserNoResults, type AdvertiserNoResultsProps, AdvertiserQuickFilter, type AdvertiserQuickFilterProps, AdvertiserSearchPrompt, type AdvertiserSearchPromptProps, Badge, type BadgeKind, type BadgeProps, type BadgeTone, BarChartPlaceholder, type BarChartPlaceholderProps, Button, type ButtonProps, Card, type CardProps, CheckBox, CheckBoxBox, type CheckBoxBoxProps, type CheckBoxProps, ChipContent, type ChipContentProps, type ChipVariant, DEFAULT_SEARCH_MATCH, DataScopeFilter, type DataScopeFilterProps, type DateGranularity, DateRangeFilter, type DateRangeFilterProps, DateRangePicker, type DateRangePickerProps, Delta, type DeltaProps, FilterChipBar, type FilterChipBarProps, FilterDropdownFooter, type FilterDropdownFooterProps, Freshness, type FreshnessLevel, type FreshnessProps, InfoTip, type InfoTipProps, LineChartPlaceholder, type LineChartPlaceholderProps, MultiSelectFilter, type MultiSelectFilterProps, type MultiSelectGroup, NO_RESULTS_BODY, NO_RESULTS_TITLE, NameListModal, type NameListModalProps, type NoResultsAction, NoResultsEmptyState, type NoResultsEmptyStateProps, PRIMARY_ACTION_CLASS, Pager, type PagerProps, type PickerColumn, type PickerFilter, type PickerRow, PieChartPlaceholder, type PieChartPlaceholderProps, type PubBreak, PublisherBreakdownList, type PublisherBreakdownListProps, QUIET_ACTION_CLASS, SearchBar, type SearchBarProps, type SearchBarVariant, type SearchMatchMode, type SearchMatchValue, SectionRail, type SectionRailProps, SelectAllVisible, type SelectAllVisibleProps, SelectFilter, type SelectFilterProps, SelectedSection, type SelectedSectionProps, SelectionPicker, type SelectionPickerAccountList, type SelectionPickerProps, SortButton, type SortButtonProps, type SortDir, type SortState, StackedColumnPlaceholder, type StackedColumnPlaceholderProps, type SummaryGroup, type SummaryGroupItemValue, TablePagination, type TablePaginationProps, Tag, type TagProps, Toggle, type ToggleProps, Tooltip, type TooltipProps, WorkspaceAvatar, type WorkspaceAvatarProps, WorkspaceSelectedCard, type WorkspaceSelectedCardProps, ariaSortFor, buttonVariants, chipTriggerClass, cycleSort, noResultsBody, resolveRange, sortProp };

package/dist/index.d.ts

@@ -683,7 +683,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 +694,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 +709,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 +723,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`. */
@@ -1733,6 +1745,15 @@ declare function sortProp<K extends string>(sort: SortState<K>): {
     key: K | null;
     dir: SortDir;
 };
+/**
+ * The `aria-sort` value for column `key`'s <th>: "ascending"/"descending" on
+ * the active column, nothing on the rest. aria-sort belongs on the column
+ * header, not on the SortButton inside it, and only the sorted column carries it.
+ */
+declare function ariaSortFor<K extends string>(sort: SortState<K> | {
+    key: K | null;
+    dir: SortDir;
+}, key: K): "ascending" | "descending" | undefined;
 
 interface SortButtonProps<K extends string> {
     label: string;
@@ -1745,6 +1766,15 @@ interface SortButtonProps<K extends string> {
     onSort: (key: K) => void;
     /** True when there are no rows to order — hides the arrow, drops the click. */
     disabled?: boolean;
+    /**
+     * False renders the label alone, as plain text with no button, for a column
+     * that can never be sorted. Unlike `disabled`, nothing about it is a control.
+     */
+    sortable?: boolean;
+    /** Matches the column's alignment, so a label that wraps lines up with the cells under it. */
+    align?: "left" | "center" | "right";
+    /** Optional prefix for the button's `data-testid` (`${testIdPrefix}-sort-${sortKey}`). Omit for no test-id wiring. */
+    testIdPrefix?: string;
 }
 /**
  * @pattern SortButton
@@ -1759,16 +1789,25 @@ interface SortButtonProps<K extends string> {
  * standard three-state cycle — sort, reverse, then unsorted. `disabled` keeps
  * the column's inherited header color rather than dimming it — the column
  * isn't unavailable, there's just no data under it.
- * @a11y Renders a <button> and sets aria-sort on it. Intended for a table header
- * cell -- put it inside the <th> rather than replacing it, so the sort
- * state stays associated with the column for screen readers.
+ * `sortable={false}` renders just the label, for a column that is never
+ * sortable; `align` matches the column's alignment.
+ * @a11y Renders a <button> inside the <th>. The sort state is announced from
+ * the column header, not the button: aria-sort is only valid on a
+ * columnheader, so the caller sets it on the <th> with `ariaSortFor` (exported
+ * alongside). It gives the active column "ascending"/"descending" and leaves
+ * every other header without the attribute.
  * @usage
  * ```tsx
  * const [sort, setSort] = useState<SortState<'spend'>>(null)
- * <SortButton label="Spend" sortKey="spend" sort={sortProp(sort)} onSort={(k) => setSort(cycleSort(sort, k))} />
+ * <th aria-sort={ariaSortFor(sort, 'spend')}>
+ *   <SortButton label="Spend" sortKey="spend" sort={sortProp(sort)} onSort={(k) => setSort(cycleSort(sort, k))} />
+ * </th>
+ * <th className="text-right" aria-sort={ariaSortFor(sort, 'units')}>
+ *   <SortButton label="Units" sortKey="units" align="right" sort={sortProp(sort)} onSort={onSort} />
+ * </th>
  * ```
  */
-declare function SortButton<K extends string>({ label, sortKey, sort, onSort, disabled }: SortButtonProps<K>): react.JSX.Element;
+declare function SortButton<K extends string>({ label, sortKey, sort, onSort, disabled, sortable, align, testIdPrefix, }: SortButtonProps<K>): react.JSX.Element;
 
 interface PagerProps {
     /** The current page, 1-indexed. */
@@ -1883,7 +1922,7 @@ declare function Tag({ children, className }: TagProps): react.JSX.Element;
  * />
  * ```
  */
-declare function TablePagination({ page, perPage, totalItems, onPageChange, onPerPageChange, perPageOptions, itemLabel, className, }: {
+declare function TablePagination({ page, perPage, totalItems, onPageChange, onPerPageChange, perPageOptions, itemLabel, className, testIdPrefix, }: {
     page: number;
     perPage: number;
     totalItems: number;
@@ -1892,6 +1931,13 @@ declare function TablePagination({ page, perPage, totalItems, onPageChange, onPe
     perPageOptions?: number[];
     itemLabel?: string;
     className?: string;
+    /**
+     * Optional prefix for `data-testid` attributes on the bar (`testIdPrefix`
+     * itself), the per-page select (`-per-page`), the step buttons (`-first`,
+     * `-prev`, `-next`, `-last`) and each page button (`-page-<n>`). Omit for no
+     * test-id wiring.
+     */
+    testIdPrefix?: string;
 }): react.JSX.Element;
 type TablePaginationProps = Parameters<typeof TablePagination>[0];
 
@@ -2041,6 +2087,8 @@ interface ToggleProps {
     disabled?: boolean;
     /** Extra classes merged onto the track (the outer `<button>`). */
     className?: string;
+    /** Optional prefix for the switch's `data-testid` (`${testIdPrefix}-toggle`). Omit for no test-id wiring. */
+    testIdPrefix?: string;
 }
 /**
  * @pattern Toggle
@@ -2069,7 +2117,7 @@ interface ToggleProps {
  * <Toggle size="sm" checked={enabled} onChange={setEnabled} label="Only include enriched creatives" />
  * ```
  */
-declare function Toggle({ checked, onChange, label, size, disabled, className }: ToggleProps): react.JSX.Element;
+declare function Toggle({ checked, onChange, label, size, disabled, className, testIdPrefix }: ToggleProps): react.JSX.Element;
 
 interface AISparkProps {
     size?: number;
@@ -2108,4 +2156,4 @@ interface FreshnessProps {
  */
 declare function Freshness({ level }: FreshnessProps): react.JSX.Element;
 
-export { AISpark, type AISparkProps, AdvertiserNoResults, type AdvertiserNoResultsProps, AdvertiserQuickFilter, type AdvertiserQuickFilterProps, AdvertiserSearchPrompt, type AdvertiserSearchPromptProps, Badge, type BadgeKind, type BadgeProps, type BadgeTone, BarChartPlaceholder, type BarChartPlaceholderProps, Button, type ButtonProps, Card, type CardProps, CheckBox, CheckBoxBox, type CheckBoxBoxProps, type CheckBoxProps, ChipContent, type ChipContentProps, type ChipVariant, DEFAULT_SEARCH_MATCH, DataScopeFilter, type DataScopeFilterProps, type DateGranularity, DateRangeFilter, type DateRangeFilterProps, DateRangePicker, type DateRangePickerProps, Delta, type DeltaProps, FilterChipBar, type FilterChipBarProps, FilterDropdownFooter, type FilterDropdownFooterProps, Freshness, type FreshnessLevel, type FreshnessProps, InfoTip, type InfoTipProps, LineChartPlaceholder, type LineChartPlaceholderProps, MultiSelectFilter, type MultiSelectFilterProps, type MultiSelectGroup, NO_RESULTS_BODY, NO_RESULTS_TITLE, NameListModal, type NameListModalProps, type NoResultsAction, NoResultsEmptyState, type NoResultsEmptyStateProps, PRIMARY_ACTION_CLASS, Pager, type PagerProps, type PickerColumn, type PickerFilter, type PickerRow, PieChartPlaceholder, type PieChartPlaceholderProps, type PubBreak, PublisherBreakdownList, type PublisherBreakdownListProps, QUIET_ACTION_CLASS, SearchBar, type SearchBarProps, type SearchBarVariant, type SearchMatchMode, type SearchMatchValue, SectionRail, type SectionRailProps, SelectAllVisible, type SelectAllVisibleProps, SelectFilter, type SelectFilterProps, SelectedSection, type SelectedSectionProps, SelectionPicker, type SelectionPickerAccountList, type SelectionPickerProps, SortButton, type SortButtonProps, type SortDir, type SortState, StackedColumnPlaceholder, type StackedColumnPlaceholderProps, type SummaryGroup, type SummaryGroupItemValue, TablePagination, type TablePaginationProps, Tag, type TagProps, Toggle, type ToggleProps, Tooltip, type TooltipProps, WorkspaceAvatar, type WorkspaceAvatarProps, WorkspaceSelectedCard, type WorkspaceSelectedCardProps, buttonVariants, chipTriggerClass, cycleSort, noResultsBody, resolveRange, sortProp };
+export { AISpark, type AISparkProps, AdvertiserNoResults, type AdvertiserNoResultsProps, AdvertiserQuickFilter, type AdvertiserQuickFilterProps, AdvertiserSearchPrompt, type AdvertiserSearchPromptProps, Badge, type BadgeKind, type BadgeProps, type BadgeTone, BarChartPlaceholder, type BarChartPlaceholderProps, Button, type ButtonProps, Card, type CardProps, CheckBox, CheckBoxBox, type CheckBoxBoxProps, type CheckBoxProps, ChipContent, type ChipContentProps, type ChipVariant, DEFAULT_SEARCH_MATCH, DataScopeFilter, type DataScopeFilterProps, type DateGranularity, DateRangeFilter, type DateRangeFilterProps, DateRangePicker, type DateRangePickerProps, Delta, type DeltaProps, FilterChipBar, type FilterChipBarProps, FilterDropdownFooter, type FilterDropdownFooterProps, Freshness, type FreshnessLevel, type FreshnessProps, InfoTip, type InfoTipProps, LineChartPlaceholder, type LineChartPlaceholderProps, MultiSelectFilter, type MultiSelectFilterProps, type MultiSelectGroup, NO_RESULTS_BODY, NO_RESULTS_TITLE, NameListModal, type NameListModalProps, type NoResultsAction, NoResultsEmptyState, type NoResultsEmptyStateProps, PRIMARY_ACTION_CLASS, Pager, type PagerProps, type PickerColumn, type PickerFilter, type PickerRow, PieChartPlaceholder, type PieChartPlaceholderProps, type PubBreak, PublisherBreakdownList, type PublisherBreakdownListProps, QUIET_ACTION_CLASS, SearchBar, type SearchBarProps, type SearchBarVariant, type SearchMatchMode, type SearchMatchValue, SectionRail, type SectionRailProps, SelectAllVisible, type SelectAllVisibleProps, SelectFilter, type SelectFilterProps, SelectedSection, type SelectedSectionProps, SelectionPicker, type SelectionPickerAccountList, type SelectionPickerProps, SortButton, type SortButtonProps, type SortDir, type SortState, StackedColumnPlaceholder, type StackedColumnPlaceholderProps, type SummaryGroup, type SummaryGroupItemValue, TablePagination, type TablePaginationProps, Tag, type TagProps, Toggle, type ToggleProps, Tooltip, type TooltipProps, WorkspaceAvatar, type WorkspaceAvatarProps, WorkspaceSelectedCard, type WorkspaceSelectedCardProps, ariaSortFor, buttonVariants, chipTriggerClass, cycleSort, noResultsBody, resolveRange, sortProp };

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 })
         ] }),
@@ -3023,7 +3023,22 @@ function Chip({
 // src/SortButton.tsx
 import { ArrowUp, ArrowDown, ArrowUpDown } from "lucide-react";
 import { jsx as jsx31, jsxs as jsxs29 } from "react/jsx-runtime";
-function SortButton({ label, sortKey, sort, onSort, disabled = false }) {
+var ALIGN = {
+  left: "justify-start text-left",
+  center: "justify-center text-center",
+  right: "justify-end text-right"
+};
+function SortButton({
+  label,
+  sortKey,
+  sort,
+  onSort,
+  disabled = false,
+  sortable = true,
+  align = "left",
+  testIdPrefix
+}) {
+  if (!sortable) return /* @__PURE__ */ jsx31("span", { className: cn("inline-flex", ALIGN[align]), children: label });
   const active = !disabled && sort.key === sortKey;
   return /* @__PURE__ */ jsxs29(
     "button",
@@ -3031,9 +3046,9 @@ function SortButton({ label, sortKey, sort, onSort, disabled = false }) {
       type: "button",
       disabled,
       onClick: () => onSort(sortKey),
-      "aria-sort": active ? sort.dir === "asc" ? "ascending" : "descending" : "none",
+      "data-testid": testIdPrefix && `${testIdPrefix}-sort-${sortKey}`,
       className: cn(
-        // text-left overrides the UA default on <button>, which would centre a
+        // ALIGN's text-* overrides the UA default on <button>, which would centre a
         // label that wraps onto two lines, out of step with the column under it.
         // `uppercase` is NOT this control imposing a treatment -- it is
         // restoring one. Every table header row sets uppercase on the <tr>,
@@ -3048,15 +3063,17 @@ function SortButton({ label, sortKey, sort, onSort, disabled = false }) {
         // 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 text-left uppercase transition-colors",
+        "group inline-flex items-center gap-1 uppercase transition-colors",
+        ALIGN[align],
         !disabled && "hover:text-text-primary"
       ),
       children: [
         label,
-        !disabled && (active ? sort.dir === "asc" ? /* @__PURE__ */ jsx31(ArrowUp, { size: 12, className: "shrink-0 text-brand-primaryAction" }) : /* @__PURE__ */ jsx31(ArrowDown, { size: 12, className: "shrink-0 text-brand-primaryAction" }) : /* @__PURE__ */ jsx31(
+        !disabled && (active ? sort.dir === "asc" ? /* @__PURE__ */ jsx31(ArrowUp, { size: 12, "aria-hidden": "true", className: "shrink-0 text-brand-primaryAction" }) : /* @__PURE__ */ jsx31(ArrowDown, { size: 12, "aria-hidden": "true", className: "shrink-0 text-brand-primaryAction" }) : /* @__PURE__ */ jsx31(
           ArrowUpDown,
           {
             size: 12,
+            "aria-hidden": "true",
             className: "shrink-0 text-text-tertiary opacity-50 transition-opacity group-hover:opacity-100"
           }
         ))
@@ -3074,6 +3091,10 @@ function cycleSort(current, key, firstDir = "desc") {
 function sortProp(sort) {
   return sort ?? { key: null, dir: "desc" };
 }
+function ariaSortFor(sort, key) {
+  if (!sort || sort.key !== key) return void 0;
+  return sort.dir === "asc" ? "ascending" : "descending";
+}
 
 // src/Pager.tsx
 import { ChevronLeft as ChevronLeft3, ChevronRight as ChevronRight4 } from "lucide-react";
@@ -3197,7 +3218,8 @@ function TablePagination({
   onPerPageChange,
   perPageOptions = [25, 50, 100],
   itemLabel = "results",
-  className
+  className,
+  testIdPrefix
 }) {
   const totalPages = Math.max(1, Math.ceil(totalItems / perPage));
   const current = Math.min(page, totalPages);
@@ -3208,7 +3230,7 @@ function TablePagination({
     btn,
     "text-text-secondary hover:bg-subtle hover:text-text-primary disabled:pointer-events-none disabled:opacity-30"
   );
-  return /* @__PURE__ */ jsxs31("div", { className: cn("flex flex-wrap items-center justify-between gap-x-4 gap-y-2", className), children: [
+  return /* @__PURE__ */ jsxs31("div", { className: cn("flex flex-wrap items-center justify-between gap-x-4 gap-y-2", className), "data-testid": testIdPrefix, children: [
     /* @__PURE__ */ jsxs31("label", { className: "flex items-center gap-2 text-[13px] text-text-secondary", children: [
       /* @__PURE__ */ jsxs31("span", { className: "relative", children: [
         /* @__PURE__ */ jsx35(
@@ -3217,6 +3239,7 @@ function TablePagination({
             value: perPage,
             onChange: (e) => onPerPageChange(Number(e.target.value)),
             "aria-label": "Items per page",
+            "data-testid": testIdPrefix && `${testIdPrefix}-per-page`,
             className: "appearance-none rounded-control border border-border-default bg-input py-1 pl-2.5 pr-7 text-[13px] font-medium text-text-primary focus:outline focus:outline-2 focus:outline-border-focus",
             children: perPageOptions.map((n) => /* @__PURE__ */ jsx35("option", { value: n, children: n }, n))
           }
@@ -3240,6 +3263,7 @@ function TablePagination({
           onClick: () => onPageChange(1),
           disabled: current === 1,
           "aria-label": "First page",
+          "data-testid": testIdPrefix && `${testIdPrefix}-first`,
           className: stepBtn,
           children: /* @__PURE__ */ jsx35(ChevronFirst, { size: 16, "aria-hidden": "true" })
         }
@@ -3251,6 +3275,7 @@ function TablePagination({
           onClick: () => onPageChange(current - 1),
           disabled: current === 1,
           "aria-label": "Previous page",
+          "data-testid": testIdPrefix && `${testIdPrefix}-prev`,
           className: stepBtn,
           children: /* @__PURE__ */ jsx35(ChevronLeft4, { size: 16, "aria-hidden": "true" })
         }
@@ -3260,6 +3285,7 @@ function TablePagination({
           "button",
           {
             type: "button",
+            "data-testid": testIdPrefix && `${testIdPrefix}-page-${p}`,
             onClick: () => onPageChange(p),
             "aria-current": p === current ? "page" : void 0,
             className: cn(
@@ -3278,6 +3304,7 @@ function TablePagination({
           onClick: () => onPageChange(current + 1),
           disabled: current === totalPages,
           "aria-label": "Next page",
+          "data-testid": testIdPrefix && `${testIdPrefix}-next`,
           className: stepBtn,
           children: /* @__PURE__ */ jsx35(ChevronRight5, { size: 16, "aria-hidden": "true" })
         }
@@ -3289,6 +3316,7 @@ function TablePagination({
           onClick: () => onPageChange(totalPages),
           disabled: current === totalPages,
           "aria-label": "Last page",
+          "data-testid": testIdPrefix && `${testIdPrefix}-last`,
           className: stepBtn,
           children: /* @__PURE__ */ jsx35(ChevronLast, { size: 16, "aria-hidden": "true" })
         }
@@ -3730,7 +3758,7 @@ var SIZES2 = {
   sm: { track: "h-5 w-9", knob: "h-4 w-4", on: "translate-x-[18px]" },
   md: { track: "h-6 w-11", knob: "h-5 w-5", on: "translate-x-[22px]" }
 };
-function Toggle({ checked, onChange, label, size = "md", disabled, className }) {
+function Toggle({ checked, onChange, label, size = "md", disabled, className, testIdPrefix }) {
   const s = SIZES2[size];
   return /* @__PURE__ */ jsx38(
     "button",
@@ -3740,6 +3768,7 @@ function Toggle({ checked, onChange, label, size = "md", disabled, className })
       "aria-checked": checked,
       "aria-label": label,
       disabled,
+      "data-testid": testIdPrefix && `${testIdPrefix}-toggle`,
       onClick: () => onChange(!checked),
       className: cn(
         "relative inline-flex shrink-0 items-center rounded-full transition-colors focus-visible:outline-solid focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-border-focus",
@@ -3845,6 +3874,7 @@ export {
   Tooltip,
   WorkspaceAvatar,
   WorkspaceSelectedCard,
+  ariaSortFor,
   buttonVariants,
   chipTriggerClass,
   cycleSort,