@refraction-ui/astro 0.18.0 → 0.19.0

package/dist/action-list/action-list.styles.ts

@@ -0,0 +1,33 @@
+import { cva } from '../shared/index.ts'
+
+/** The list: rows separated by hairlines, no bullets. */
+export const actionListClass = 'm-0 flex list-none flex-col divide-y divide-border-subtle p-0'
+
+/** A row button: full width, whole row is the hit target. */
+export const actionListItemVariants = cva({
+  base:
+    'flex w-full items-center gap-4 bg-transparent text-left text-sm text-foreground transition-colors ' +
+    'hover:bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring ' +
+    'disabled:pointer-events-none disabled:opacity-50',
+  variants: {
+    density: {
+      default: 'px-4 py-3',
+      compact: 'px-3 py-2',
+    },
+  },
+  defaultVariants: {
+    density: 'default',
+  },
+})
+
+/** Leading text column (title, description, meta). */
+export const actionListItemBodyClass = 'flex min-w-0 flex-1 flex-col gap-0.5'
+/** Primary line. */
+export const actionListItemTitleClass = 'break-words font-semibold text-foreground'
+/** Supporting line under the title. */
+export const actionListItemDescriptionClass = 'break-words text-xs text-muted-foreground'
+/** Tertiary line (owner, tags, ids). */
+export const actionListItemMetaClass = 'break-words text-xs text-muted-foreground'
+/** Trailing column (dates, sizes, counts). */
+export const actionListItemTrailingClass =
+  'flex flex-none items-center gap-4 text-xs tabular-nums text-muted-foreground'

package/dist/action-list/action-list.ts

@@ -0,0 +1,31 @@
+/** Row padding. */
+export type ActionListDensity = 'default' | 'compact'
+
+export interface ActionListItemProps {
+  disabled?: boolean
+  density?: ActionListDensity
+}
+
+export interface ActionListItemAPI {
+  /** ARIA attributes for the row button. */
+  ariaProps: Record<string, string | number | boolean>
+  /** Data attributes for styling hooks. */
+  dataAttributes: Record<string, string>
+}
+
+/**
+ * Build the framework-agnostic props for one ActionList row. Each row is ONE
+ * action (open, select, go to) rendered as a native button, so it is reachable
+ * by Tab and activated by Enter / Space — unlike a clickable table row.
+ */
+export function createActionListItem(props: ActionListItemProps = {}): ActionListItemAPI {
+  const { disabled = false, density = 'default' } = props
+  const dataAttributes: Record<string, string> = {
+    'data-slot': 'action-list-item',
+    'data-density': density,
+  }
+  if (disabled) dataAttributes['data-disabled'] = ''
+  const ariaProps: Record<string, string | number | boolean> = {}
+  if (disabled) ariaProps['aria-disabled'] = true
+  return { ariaProps, dataAttributes }
+}

package/dist/action-list/index.ts

@@ -0,0 +1,16 @@
+export {
+  createActionListItem,
+  type ActionListDensity,
+  type ActionListItemProps,
+  type ActionListItemAPI,
+} from './action-list.js'
+
+export {
+  actionListClass,
+  actionListItemVariants,
+  actionListItemBodyClass,
+  actionListItemTitleClass,
+  actionListItemDescriptionClass,
+  actionListItemMetaClass,
+  actionListItemTrailingClass,
+} from './action-list.styles.js'

package/dist/astro-action-list/ActionList.astro

@@ -0,0 +1,12 @@
+---
+import { actionListClass } from '../action-list/index.ts'
+import { cn } from '../shared/index.ts'
+
+interface Props extends astroHTML.JSX.HTMLAttributes {}
+
+const { class: className, ...rest } = Astro.props
+---
+
+<ul class={cn(actionListClass, className)} data-slot="action-list" {...rest}>
+  <slot />
+</ul>

package/dist/astro-action-list/ActionListItem.astro

@@ -0,0 +1,62 @@
+---
+import {
+  createActionListItem,
+  actionListItemVariants,
+  actionListItemBodyClass,
+  actionListItemTitleClass,
+  actionListItemDescriptionClass,
+  actionListItemMetaClass,
+  actionListItemTrailingClass,
+  type ActionListDensity,
+} from '../action-list/index.ts'
+import { cn } from '../shared/index.ts'
+
+interface Props extends astroHTML.JSX.ButtonHTMLAttributes {
+  /** Primary line. */
+  title: string
+  /** Optional supporting line under the title. */
+  description?: string
+  /** Optional tertiary line. */
+  meta?: string
+  /** Optional trailing column (or use the `trailing` slot). */
+  trailing?: string
+  /** Row padding. */
+  density?: ActionListDensity
+  disabled?: boolean
+}
+
+const {
+  title,
+  description,
+  meta,
+  trailing,
+  density = 'default',
+  disabled = false,
+  class: className,
+  ...rest
+} = Astro.props
+const api = createActionListItem({ disabled, density })
+const hasTrailing = trailing != null || Astro.slots.has('trailing')
+---
+
+<li>
+  <button
+    type="button"
+    disabled={disabled}
+    class={cn(actionListItemVariants({ density }), className)}
+    {...api.ariaProps}
+    {...api.dataAttributes}
+    {...rest}
+  >
+    <span class={actionListItemBodyClass}>
+      <span class={actionListItemTitleClass}>{title}</span>
+      {description && <span class={actionListItemDescriptionClass}>{description}</span>}
+      {meta && <span class={actionListItemMetaClass}>{meta}</span>}
+    </span>
+    {hasTrailing && (
+      <span class={actionListItemTrailingClass}>
+        <slot name="trailing">{trailing}</slot>
+      </span>
+    )}
+  </button>
+</li>

package/dist/astro-action-list/index.ts

@@ -0,0 +1 @@
+export {}

package/dist/astro-callout/Callout.astro

@@ -7,7 +7,10 @@ interface Props extends astroHTML.JSX.HTMLAttributes {
 }
 
 const { variant = 'default', class: className, ...props } = Astro.props
-const api = createCallout({ role: variant === 'destructive' ? 'alert' : 'region' })
+const api = createCallout({
+  destructive: variant === 'destructive',
+  labelled: Boolean(props['aria-label'] || props['aria-labelledby']),
+})
 ---
 
 <div

package/dist/astro-card/Card.astro

@@ -3,15 +3,16 @@ import { createCard, cardVariants } from '../card/index.ts'
 import { cn } from '../shared/index.ts'
 
 interface Props extends astroHTML.JSX.HTMLAttributes {
+  variant?: 'default' | 'subtle' | 'tertiary'
   padding?: 'none' | 'default' | 'compact'
 }
 
-const { padding, class: className, ...props } = Astro.props
+const { variant, padding, class: className, ...props } = Astro.props
 const api = createCard(props)
 ---
 
 <div
-  class={cn(cardVariants({ padding }), className)}
+  class={cn(cardVariants({ variant, padding }), className)}
   {...api.ariaProps}
   {...api.dataAttributes}
   {...props}

package/dist/astro-card/CardTitle.astro

@@ -1,15 +1,17 @@
 ---
-import { createCardTitle, cardTitleVariants } from '../card/index.ts'
+import { createCardTitle, cardTitleVariants, type CardTitleLevel } from '../card/index.ts'
 import { cn } from '../shared/index.ts'
 
 interface Props extends astroHTML.JSX.HTMLAttributes {
   size?: 'sm' | 'default' | 'lg'
+  /** Heading element. Defaults to `h3`. */
+  as?: CardTitleLevel
 }
 
-const { size, class: className, ...props } = Astro.props
+const { size, as: Heading = 'h3', class: className, ...props } = Astro.props
 const api = createCardTitle()
 ---
 
-<h3 class={cn(cardTitleVariants({ size }), className)} {...api.dataAttributes} {...props}>
+<Heading class={cn(cardTitleVariants({ size }), className)} {...api.dataAttributes} {...props}>
   <slot />
-</h3>
+</Heading>

package/dist/astro-funnel-chart/FunnelChart.astro

@@ -0,0 +1,64 @@
+---
+import {
+  computeFunnel,
+  funnelChartClasses as c,
+  funnelChartDefaults,
+  DEFAULT_FUNNEL_MIN_BAR_PERCENT,
+  type FunnelChartStep,
+} from '../funnel-chart/index.ts'
+import { cn } from '../shared/index.ts'
+
+interface Props extends astroHTML.JSX.HTMLAttributes {
+  /** The funnel steps, top first. */
+  steps: FunnelChartStep[]
+  formatValue?: (value: number) => string
+  formatPercent?: (percent: number) => string
+  minBarPercent?: number
+  shareLabel?: (share: string) => string
+  conversionLabel?: (percent: string) => string
+  droppedLabel?: (count: string) => string
+}
+
+const {
+  steps,
+  formatValue = funnelChartDefaults.formatValue,
+  formatPercent = funnelChartDefaults.formatPercent,
+  minBarPercent = DEFAULT_FUNNEL_MIN_BAR_PERCENT,
+  shareLabel = funnelChartDefaults.shareLabel,
+  conversionLabel = funnelChartDefaults.conversionLabel,
+  droppedLabel = funnelChartDefaults.droppedLabel,
+  class: className,
+  ...rest
+} = Astro.props
+const rows = computeFunnel(steps, minBarPercent)
+---
+
+<ol class={cn(c.root, className)} data-slot="funnel-chart" {...rest}>
+  {
+    rows.map((row) => (
+      <li>
+        <div class={c.bar}>
+          <div class={c.fill} style={`width:${row.barPercent}%`} aria-hidden="true" />
+          <svg class={c.chevron} width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+            <path d="m9 18 6-6-6-6" />
+          </svg>
+          <div class={c.text}>
+            <b class={c.label}>{row.step.label}</b>
+            {row.step.description && <span class={c.description}>{row.step.description}</span>}
+          </div>
+          <div class={c.figure}>
+            <b class={c.value}>{formatValue(row.step.value)}</b>
+            <span class={c.share}>{shareLabel(formatPercent(row.shareOfTop))}</span>
+          </div>
+        </div>
+        {row.next && (
+          <div class={c.transition}>
+            <span class={c.conversion}>{conversionLabel(formatPercent(row.next.conversion))}</span>
+            <span aria-hidden="true">·</span>
+            <span class={c.dropped}>{droppedLabel(formatValue(row.next.dropped))}</span>
+          </div>
+        )}
+      </li>
+    ))
+  }
+</ol>

package/dist/astro-funnel-chart/index.ts

@@ -0,0 +1 @@
+export {}

package/dist/astro-line-chart/LineChart.astro

@@ -0,0 +1,82 @@
+---
+import {
+  computeLineChart,
+  lineChartClasses as c,
+  DEFAULT_LINE_CHART_WIDTH,
+  DEFAULT_LINE_CHART_HEIGHT,
+  type LineChartSeries,
+} from '../line-chart/index.ts'
+import { cn } from '../shared/index.ts'
+
+interface Props extends astroHTML.JSX.HTMLAttributes {
+  /** The series to plot, all on one shared y-scale. */
+  series: LineChartSeries[]
+  /** One category label per data point. */
+  labels: string[]
+  /** Accessible name of the chart image. */
+  ariaLabel: string
+  height?: number
+  width?: number
+  /** Formats a y-axis tick. */
+  formatTick?: (value: number) => string
+  /** Fill the area under each line. Defaults to on for a single series only. */
+  area?: boolean
+  showLegend?: boolean
+}
+
+const {
+  series,
+  labels,
+  ariaLabel,
+  height = DEFAULT_LINE_CHART_HEIGHT,
+  width = DEFAULT_LINE_CHART_WIDTH,
+  formatTick = (value: number) => String(Math.round(value)),
+  area,
+  showLegend = true,
+  class: className,
+  ...rest
+} = Astro.props
+const geo = computeLineChart({ series, labels, width, height })
+const fillArea = area ?? series.length === 1
+const gradientBase = `line-chart-${ariaLabel.replace(/[^a-zA-Z0-9]+/g, '-').toLowerCase()}`
+---
+
+<div class={cn(c.root, className)} data-slot="line-chart" {...rest}>
+  <svg class={c.svg} viewBox={`0 0 ${width} ${height}`} style={`height:${height}px`} role="img" aria-label={ariaLabel}>
+    {geo.ticks.map((t) => (
+      <g>
+        <line class={c.gridline} x1={geo.padding.left} y1={t.y} x2={width - geo.padding.right} y2={t.y} />
+        <text class={c.axis} x={geo.padding.left - 8} y={t.y + 3} text-anchor="end">{formatTick(t.value)}</text>
+      </g>
+    ))}
+    {geo.xLabels.map((l) => (
+      <text class={c.axis} x={l.x} y={height - 6} text-anchor="middle">{l.label}</text>
+    ))}
+    {geo.paths.map((p, si) => (
+      <g>
+        {fillArea && (
+          <Fragment>
+            <defs>
+              <linearGradient id={`${gradientBase}-${si}`} x1="0" y1="0" x2="0" y2="1">
+                <stop offset="0%" stop-color={p.color} stop-opacity="0.22" />
+                <stop offset="100%" stop-color={p.color} stop-opacity="0" />
+              </linearGradient>
+            </defs>
+            <path d={p.area} fill={`url(#${gradientBase}-${si})`} />
+          </Fragment>
+        )}
+        <path d={p.line} fill="none" stroke={p.color} stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" />
+      </g>
+    ))}
+  </svg>
+  {showLegend && (
+    <div class={c.legend}>
+      {series.map((s, si) => (
+        <span class={c.legendItem}>
+          <i class={c.legendSwatch} style={`background:${geo.paths[si].color}`} aria-hidden="true" />
+          {s.name}
+        </span>
+      ))}
+    </div>
+  )}
+</div>

package/dist/astro-line-chart/index.ts

@@ -0,0 +1 @@
+export {}

package/dist/astro-page-header/PageHeader.astro

@@ -0,0 +1,46 @@
+---
+import {
+  createPageHeader,
+  pageHeaderClass,
+  pageHeaderTextClass,
+  pageHeaderKickerClass,
+  pageHeaderTitleClass,
+  pageHeaderDescriptionClass,
+  pageHeaderActionsClass,
+  type PageHeaderTitleLevel,
+} from '../page-header/index.ts'
+import { cn } from '../shared/index.ts'
+
+interface Props extends astroHTML.JSX.HTMLAttributes {
+  /** Optional eyebrow rendered above the title. */
+  kicker?: string
+  /** The page title. */
+  title: string
+  /** Optional supporting copy under the title (or use the `description` slot). */
+  description?: string
+  /** Heading element for the title. Defaults to `h1`. */
+  as?: PageHeaderTitleLevel
+}
+
+const { kicker, title, description, as: Title = 'h1', class: className, ...rest } = Astro.props
+const hasActions = Astro.slots.has('actions')
+const hasDescription = description != null || Astro.slots.has('description')
+const { dataAttributes } = createPageHeader({ hasActions })
+---
+
+<header class={cn(pageHeaderClass, className)} {...dataAttributes} {...rest}>
+  <div class={pageHeaderTextClass}>
+    {kicker && <p class={pageHeaderKickerClass}>{kicker}</p>}
+    <Title class={pageHeaderTitleClass}>{title}</Title>
+    {hasDescription && (
+      <div class={pageHeaderDescriptionClass}>
+        <slot name="description">{description}</slot>
+      </div>
+    )}
+  </div>
+  {hasActions && (
+    <div class={pageHeaderActionsClass}>
+      <slot name="actions" />
+    </div>
+  )}
+</header>

package/dist/astro-page-header/index.ts

@@ -0,0 +1 @@
+export {}

package/dist/avatar-group/avatar-group.styles.ts

@@ -50,7 +50,7 @@ export const avatarPresenceDotVariants = cva({
     },
     status: {
       online: 'bg-success',
-      offline: 'bg-gray-400',
+      offline: 'bg-neutral',
       away: 'bg-warning',
       busy: 'bg-destructive',
       dnd: 'bg-destructive',

package/dist/badge/badge.styles.ts

@@ -1,7 +1,7 @@
 import { cva } from '../shared/index.ts'
 
 export const badgeVariants = cva({
-  base: 'inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2',
+  base: 'inline-flex items-center rounded-full border font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2',
   variants: {
     variant: {
       default: 'border-transparent bg-primary text-primary-foreground shadow hover:bg-primary/80',
@@ -11,6 +11,11 @@ export const badgeVariants = cva({
       outline: 'text-foreground',
       success: 'border-transparent bg-success text-success-foreground shadow hover:bg-success/80 font-semibold',
       warning: 'border-transparent bg-warning text-warning-foreground shadow hover:bg-warning/80 font-semibold',
+      // Second brand accent + extended status roles (issue #485).
+      tertiary: 'border-transparent bg-tertiary text-tertiary-foreground shadow hover:bg-tertiary/80 font-semibold',
+      positive: 'border-transparent bg-positive text-positive-foreground shadow hover:bg-positive/80 font-semibold',
+      caution: 'border-transparent bg-caution text-caution-foreground shadow hover:bg-caution/80 font-semibold',
+      done: 'border-transparent bg-done text-info-foreground shadow hover:bg-done/80 font-semibold',
     },
     size: {
       sm: 'px-2 py-0 text-[10px]',

package/dist/badge/badge.ts

@@ -1,6 +1,18 @@
 import type { AccessibilityProps } from '../shared/index.ts'
 
-export type BadgeVariant = 'default' | 'primary' | 'secondary' | 'destructive' | 'outline' | 'success' | 'warning'
+export type BadgeVariant =
+  | 'default'
+  | 'primary'
+  | 'secondary'
+  | 'destructive'
+  | 'outline'
+  | 'success'
+  | 'warning'
+  // Issue #485 — second brand accent + extended status roles.
+  | 'tertiary'
+  | 'positive'
+  | 'caution'
+  | 'done'
 export type BadgeSize = 'sm' | 'md'
 
 export interface BadgeProps {
@@ -15,13 +27,23 @@ export interface BadgeAPI {
   dataAttributes: Record<string, string>
 }
 
-const statusVariants: BadgeVariant[] = ['success', 'warning', 'destructive']
+const statusVariants: BadgeVariant[] = [
+  'success',
+  'warning',
+  'destructive',
+  'positive',
+  'caution',
+  'done',
+]
 
 /** Icon name for status badge variants — non-color indicator for colorblind safety */
 const BADGE_ICONS: Partial<Record<BadgeVariant, string>> = {
   success: 'check',
   warning: 'alert',
   destructive: 'x',
+  positive: 'check',
+  caution: 'alert',
+  done: 'check',
 }
 
 /** Get the icon name for a badge variant (undefined for non-status variants) */

package/dist/button/button.styles.ts

@@ -13,7 +13,7 @@ export const buttonTokens: TokenContract = {
 }
 
 export const buttonVariants = cva({
-  base: 'inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0',
+  base: 'inline-flex items-center justify-center gap-2 whitespace-nowrap font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0',
   variants: {
     variant: {
       default: 'bg-primary text-primary-foreground shadow hover:bg-primary/90',
@@ -24,15 +24,21 @@ export const buttonVariants = cva({
       destructive: 'bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90',
       outline: 'border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground',
       secondary: 'bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80',
+      // Soft tinted brand fill — lower-emphasis primary action (issue #485).
+      soft: 'bg-primary-soft text-primary-soft-foreground shadow-sm hover:bg-primary-soft/80',
+      // Second brand accent (issue #485).
+      tertiary: 'bg-tertiary text-tertiary-foreground shadow-sm hover:bg-tertiary/90',
       ghost: 'hover:bg-accent hover:text-accent-foreground',
       link: 'text-primary underline-offset-4 hover:underline',
     },
     size: {
       xs: 'h-7 rounded px-2 text-xs',
       sm: 'h-8 rounded-md px-3 text-xs',
-      default: 'h-9 px-4 py-2',
-      lg: 'h-10 rounded-md px-8',
-      icon: 'h-9 w-9',
+      default: 'h-9 rounded-md px-4 py-2 text-sm',
+      lg: 'h-10 rounded-md px-8 text-sm',
+      icon: 'h-9 w-9 rounded-md text-sm',
+      'icon-sm': 'h-8 w-8 rounded-md text-xs',
+      'icon-xs': 'h-7 w-7 rounded text-xs',
     },
   },
   defaultVariants: {

package/dist/button/button.ts

@@ -14,6 +14,9 @@ export type ButtonVariant =
   | 'secondary'
   | 'ghost'
   | 'link'
+  // Issue #485 — soft tinted brand fill + a real second brand accent.
+  | 'soft'
+  | 'tertiary'
 
 /** Variants that map to the same visual style as `default`. */
 export const BUTTON_VARIANT_ALIASES: Partial<Record<ButtonVariant, ButtonVariant>> = {
@@ -25,7 +28,7 @@ export function resolveButtonVariant(variant: ButtonVariant | undefined): Button
   if (!variant) return variant
   return BUTTON_VARIANT_ALIASES[variant] ?? variant
 }
-export type ButtonSize = 'xs' | 'sm' | 'default' | 'lg' | 'icon'
+export type ButtonSize = 'xs' | 'sm' | 'default' | 'lg' | 'icon' | 'icon-sm' | 'icon-xs'
 
 export interface ButtonProps {
   variant?: ButtonVariant

package/dist/callout/callout.ts

@@ -1,8 +1,16 @@
 import type { AccessibilityProps } from '../shared/index.ts'
 
 export interface CalloutProps {
-  /** Optional accessible role override */
+  /** Explicit role; always wins. */
   role?: string
+  /** Destructive callouts are announced (`role="alert"`). */
+  destructive?: boolean
+  /**
+   * Whether the callout has an accessible name (`aria-label` /
+   * `aria-labelledby`). Only a named callout becomes a `region` landmark — an
+   * unnamed region is an axe violation and landmark noise.
+   */
+  labelled?: boolean
 }
 
 export interface CalloutAPI {
@@ -13,10 +21,11 @@ export interface CalloutAPI {
 export function createCallout(props: CalloutProps = {}): CalloutAPI {
   const ariaProps: Partial<AccessibilityProps> = {}
   
-  // Callouts are usually alert or region depending on severity
   if (props.role) {
     ariaProps.role = props.role
-  } else {
+  } else if (props.destructive) {
+    ariaProps.role = 'alert'
+  } else if (props.labelled) {
     ariaProps.role = 'region'
   }
 

package/dist/card/card.styles.ts

@@ -11,8 +11,16 @@ export const cardTokens: TokenContract = {
 }
 
 export const cardVariants = cva({
-  base: 'rounded-lg border bg-card text-card-foreground shadow',
+  base: 'rounded-lg border shadow',
   variants: {
+    variant: {
+      // Default — unchanged surface (bg-card + border via the global token).
+      default: 'bg-card text-card-foreground',
+      // Lower-emphasis container on the subtle surface token (issue #485).
+      subtle: 'bg-surface-subtle text-card-foreground',
+      // Tinted second-accent card (issue #485).
+      tertiary: 'border-transparent bg-tertiary-soft text-tertiary-soft-foreground',
+    },
     padding: {
       none: '',
       default: 'p-6',
@@ -20,6 +28,7 @@ export const cardVariants = cva({
     },
   },
   defaultVariants: {
+    variant: 'default',
     padding: 'none',
   },
 })

package/dist/card/card.ts

@@ -1,5 +1,19 @@
 import type { AccessibilityProps } from '../shared/index.ts'
 
+/**
+ * Visual tone of a card (issue #485).
+ * - `default` — the standard surface (activates the `--rfr-card-*` contract).
+ * - `subtle` — a lower-emphasis container on the subtle surface token.
+ * - `tertiary` — a tinted second-brand-accent card.
+ */
+export type CardVariant = 'default' | 'subtle' | 'tertiary'
+
+/** Built-in inner padding of the Card container. */
+export type CardPadding = 'none' | 'default' | 'compact'
+
+/** Heading element for CardTitle. */
+export type CardTitleLevel = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'
+
 export interface CardProps {
   /** Optional accessible role override */
   role?: string

package/dist/card/index.ts

@@ -7,6 +7,9 @@ export {
   createCardFooter,
   type CardProps,
   type CardAPI,
+  type CardVariant,
+  type CardPadding,
+  type CardTitleLevel,
 } from './card.js'
 
 export {

package/dist/diff-viewer/diff-viewer.styles.ts

@@ -9,6 +9,9 @@ export const diffViewerTokens: TokenContract = {
     sidebarBg: { variable: '--rfr-diff-sidebar-bg', fallback: 'hsl(var(--muted))' },
     headerBg: { variable: '--rfr-diff-header-bg', fallback: 'hsl(var(--muted))' },
     border: { variable: '--rfr-diff-border', fallback: 'hsl(var(--border))' },
+    // Diff add/del colors are syntax semantics (like code highlighting), not
+    // theme status tones — deliberately NOT routed through the success/
+    // destructive tokens. The --rfr-diff-* variables are the theming seam.
     addBg: { variable: '--rfr-diff-add-bg', fallback: 'rgba(46, 160, 67, 0.15)' },
     delBg: { variable: '--rfr-diff-del-bg', fallback: 'rgba(248, 81, 73, 0.15)' },
     addFg: { variable: '--rfr-diff-add-fg', fallback: '#3fb950' },