@mediaradar/design-components 0.17.0 → 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`. */

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`. */

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 })
         ] }),