@podoba/react 0.0.28 → 0.0.29

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@podoba/react",
-	"version": "0.0.28",
+	"version": "0.0.29",
 	"type": "module",
 	"description": "podoba React components — React Aria Components + Tailwind primitives + layout, built with uic.",
 	"repository": {
@@ -16,17 +16,19 @@
 		".": "./src/index.ts"
 	},
 	"files": [
-		"src"
+		"src",
+		"!src/**/*.test.*"
 	],
 	"publishConfig": {
 		"access": "public"
 	},
 	"scripts": {
+		"test": "bun test src",
 		"typecheck": "tsc --build"
 	},
 	"dependencies": {
-		"@podoba/tokens": "^0.0.28",
-		"@podoba/tailwind": "^0.0.28",
+		"@podoba/tokens": "^0.0.29",
+		"@podoba/tailwind": "^0.0.29",
 		"react-aria-components": "1.18.0",
 		"class-variance-authority": "0.7.1",
 		"clsx": "2.1.1",

package/src/components/brand-page-header.tsx

@@ -30,6 +30,8 @@ export type BrandPageHeaderCrumb = {
 export type BrandPageHeaderProps = {
 	/** The large greeting / page-title slot (e.g. "Good morning Jonas 👋"). */
 	greeting: ReactNode
+	/** Semantic heading level. Use 2 or 3 when the header is nested below a page title. */
+	headingLevel?: 1 | 2 | 3
 	/**
 	 * gs-style "title to go back": a muted, clickable PARENT link rendered as the
 	 * line ABOVE the title (so the title reads "Parent ⏎ Current"). Pass a real
@@ -63,6 +65,7 @@ const PANEL_ID = 'brand-page-header-create-hub'
 
 export function BrandPageHeader({
 	greeting,
+	headingLevel = 1,
 	parentLink,
 	breadcrumbs,
 	cta,
@@ -78,6 +81,7 @@ export function BrandPageHeader({
 	const isControlled = expandedProp !== undefined
 	const expanded = isControlled ? expandedProp : internalExpanded
 	const hasExpandable = Boolean(createHub)
+	const Heading = `h${headingLevel}` as const
 
 	const setExpanded = (next: boolean) => {
 		if (!isControlled) setInternalExpanded(next)
@@ -116,7 +120,7 @@ export function BrandPageHeader({
 							))}
 						</nav>
 					) : null}
-					<h1 className="text-display font-medium leading-[1.12] tracking-wide text-fg">
+					<Heading className="text-display font-medium leading-[1.12] tracking-wide text-fg">
 						{parentLink ? (
 							// gs "title to go back": muted clickable parent line above the title.
 							// `[&_a]` styles the nested router <Link> (anchor) without @app/ui
@@ -129,7 +133,7 @@ export function BrandPageHeader({
 							</>
 						) : null}
 						{greeting}
-					</h1>
+					</Heading>
 				</div>
 
 				{cta ? (

package/src/components/cta-pill.tsx

@@ -8,15 +8,16 @@ import type { ReactNode } from 'react'
  * translate each per-locale while keeping the middle-word highlight. Presentational
  * only (hard rule #1): every string arrives via props — no i18n, no domain data.
  *
- * a11y NOTE: the background is the light brand-green (#6eddb1); the emphasised word is
- * rendered WHITE per the gs design — white-on-green is ~1.66:1, below WCAG AA, so it
- * reads as a decorative highlight (it also carries a bold weight), not load-bearing
- * copy. The surrounding text stays on the dark `fg` (~10:1).
+ * a11y NOTE: the background is the FIXED light brand-secondary (#6eddb1) — it does
+ * not flip with the theme, so every sentence fragment sits on `fg-on-brand` (stable
+ * dark ink, ~11:1 in both themes). The gs design's white emphasis word failed WCAG AA
+ * (~1.66:1) and turned the whole sentence white-on-green in a dark shell; the
+ * emphasis is now carried by weight alone.
  */
 export interface CtaPillProps {
 	/** Regular lead-in before the emphasised word (e.g. "Let's"). */
 	lead: ReactNode
-	/** The emphasised bold, white middle word (e.g. "create"). */
+	/** The emphasised bold middle word (e.g. "create"). */
 	emphasis: ReactNode
 	/** Regular trailing text after the emphasis (e.g. "something"). */
 	tail: ReactNode
@@ -27,8 +28,8 @@ export interface CtaPillProps {
 export function CtaPill({ lead, emphasis, tail, children }: CtaPillProps) {
 	return (
 		<div className="flex w-full items-center justify-between gap-4 rounded-lg bg-brand-secondary px-6 py-4">
-			<p className="min-w-0 text-heading4 font-medium leading-[22px] tracking-normal text-fg">
-				{lead} <span className="font-semibold text-white">{emphasis}</span> {tail}
+			<p className="min-w-0 text-heading4 font-medium leading-[22px] tracking-normal text-fg-on-brand">
+				{lead} <span className="font-semibold">{emphasis}</span> {tail}
 			</p>
 			<div className="shrink-0">{children}</div>
 		</div>

package/src/components/tile.tsx

@@ -31,10 +31,14 @@ export type TileAlign = 'top' | 'center'
 const THEME: Record<TileTheme, string> = {
 	// Light tiles carry a visible hairline; dark/colored use a transparent border so
 	// every tile keeps the same box size (no 1px shift between themes).
+	// Every surface pairs with ITS semantic foreground (never raw white / bare fg):
+	// `surface-inverted` flips with the theme so it needs the flipping `fg-inverted`;
+	// teal/yellow are FIXED light surfaces so they need the stable `fg-on-brand` ink
+	// (theme-flipping `fg` went white-on-pastel in a dark shell).
 	light: 'border border-border bg-surface-card text-fg',
-	dark: 'border border-transparent bg-surface-inverted text-white',
-	teal: 'border border-transparent bg-brand-secondary text-fg',
-	yellow: 'border border-transparent bg-accent-yellow text-fg',
+	dark: 'border border-transparent bg-surface-inverted text-fg-inverted',
+	teal: 'border border-transparent bg-brand-secondary text-fg-on-brand',
+	yellow: 'border border-transparent bg-accent-yellow text-fg-on-brand',
 }
 
 // The shared inner for EVERY tile (gs `DashboardContentCard`): 16px padding
@@ -95,10 +99,23 @@ export type TileProps = {
 export const tileStatClass = 'text-display font-medium leading-[30px] tracking-wide'
 
 function titleTone(theme: TileTheme, subtle: boolean): string {
-	if (theme === 'dark') return subtle ? 'text-white/60' : 'text-white'
+	if (theme === 'dark') return subtle ? 'text-fg-inverted/60' : 'text-fg-inverted'
+	if (theme === 'teal' || theme === 'yellow') return subtle ? 'text-fg-on-brand/70' : 'text-fg-on-brand'
 	return subtle ? 'text-fg-muted' : 'text-fg'
 }
 
+/**
+ * Muted supporting text / footer tone per surface. `fg-muted` is tuned for white —
+ * on the colored surfaces it drops below AA, so those blend their own paired ink
+ * instead (/60 · /70 keep ≥4.5:1 in both themes — verified by the contrast test
+ * in @podoba/tokens).
+ */
+function mutedTone(theme: TileTheme): string {
+	if (theme === 'dark') return 'text-fg-inverted/60'
+	if (theme === 'teal' || theme === 'yellow') return 'text-fg-on-brand/70'
+	return 'text-fg-muted'
+}
+
 /** head / content / tail bands — the normal (non-media) layout. */
 function TileBands({
 	theme,
@@ -123,7 +140,7 @@ function TileBands({
 		) : null
 	const textNode =
 		text != null ? (
-			<p className={`text-small leading-4 ${theme === 'dark' ? 'text-white/60' : 'text-fg-muted'} ${title != null ? 'mt-3' : ''}`}>
+			<p className={`text-small leading-4 ${mutedTone(theme)} ${title != null ? 'mt-3' : ''}`}>
 				{text}
 			</p>
 		) : null
@@ -153,8 +170,9 @@ function TileBands({
 	}
 
 	// Footer defaults to 14px muted (gs supporting text); self-styled footer content
-	// (links, buttons) overrides both size and colour.
-	const footerTone = theme === 'dark' ? 'text-white/50' : theme === 'light' ? 'text-fg-muted' : 'text-fg/70'
+	// (links, buttons) overrides both size and colour. Shares `mutedTone` — the old
+	// white/50 (dark) and fg/70 (teal/yellow) both broke AA in a dark shell.
+	const footerTone = mutedTone(theme)
 
 	return (
 		<>
@@ -197,7 +215,7 @@ function MediaHero({
 
 	return (
 		<div
-			className={['relative isolate h-full min-h-[200px] w-full overflow-hidden rounded-lg bg-surface-inverted', className]
+			className={['@container relative isolate h-full min-h-[200px] w-full overflow-hidden rounded-lg bg-surface-inverted', className]
 				.filter(Boolean)
 				.join(' ')}
 		>
@@ -239,20 +257,36 @@ function MediaHero({
 						/>
 					) : null}
 
-					{eyebrow ? (
-						<span className="pointer-events-none absolute left-6 top-6 z-10 text-compact font-medium text-white">{eyebrow}</span>
-					) : null}
-
-					{/* Content is click-through so pressing the title/badge falls to the
-					    press overlay; only `footer` re-enables its own pointer events. */}
-					<div className="pointer-events-none absolute inset-x-6 bottom-6 z-10 flex flex-col gap-4">
-						{title ? <h2 className="max-w-md text-display font-medium leading-tight text-white">{title}</h2> : null}
-						{footer != null || badge != null ? (
-							<div className="flex items-center justify-between gap-4">
-								<span className="pointer-events-auto">{footer}</span>
-								<span>{badge}</span>
-							</div>
+					{/* Keep every text overlay in one flex flow. The old independent
+					    top eyebrow and bottom title bands could overlap when a long title
+					    wrapped on a narrow card. Compact mobile insets/type preserve the
+					    200px floor; the spacious composition returns when the card itself,
+					    rather than merely the viewport, is wide enough. */}
+					<div
+						data-slot="media-overlay"
+						className="pointer-events-none absolute inset-4 z-10 flex min-h-0 flex-col @sm:inset-6"
+					>
+						{eyebrow ? (
+							<span data-slot="media-eyebrow" className="shrink-0 text-compact font-medium text-white">
+								{eyebrow}
+							</span>
 						) : null}
+
+						{/* Content is click-through so pressing the title/badge falls to the
+						    press overlay; only `footer` re-enables its own pointer events. */}
+						<div data-slot="media-content" className="mt-auto flex min-h-0 flex-col gap-2 @sm:gap-4">
+							{title ? (
+								<h2 className="max-w-md text-title font-medium leading-tight text-white @sm:text-display">
+									{title}
+								</h2>
+							) : null}
+							{footer != null || badge != null ? (
+								<div className="flex items-center justify-between gap-3 @sm:gap-4">
+									<span className="pointer-events-auto">{footer}</span>
+									<span>{badge}</span>
+								</div>
+							) : null}
+						</div>
 					</div>
 				</>
 			)}
@@ -350,10 +384,14 @@ export type BadgeColor = 'green' | 'yellow' | 'grey' | 'dark'
 const BADGE: Record<BadgeColor, string> = {
 	// gs `GSTag` green = the brand green (not the pale accent-mint). One saturated
 	// brand green for every green tag (New, Active, Published), matching gs 1:1.
-	green: 'bg-brand-green text-fg',
-	yellow: 'bg-accent-yellow text-fg',
-	grey: 'bg-surface-muted text-fg-muted',
-	dark: 'bg-surface-inverted text-white',
+	// Pairing rule (same as Tile THEME): fixed light surfaces take the stable
+	// `fg-on-brand` ink, the flipping inverted surface takes `fg-inverted`, and grey
+	// takes full `fg` — `fg-muted` on `surface-muted` was ~3.7:1, under the 4.5:1
+	// AA floor for caption-size text.
+	green: 'bg-brand-green text-fg-on-brand',
+	yellow: 'bg-accent-yellow text-fg-on-brand',
+	grey: 'bg-surface-muted text-fg',
+	dark: 'bg-surface-inverted text-fg-inverted',
 }
 
 export function Badge({ label, color = 'grey' }: { label: ReactNode; color?: BadgeColor }) {