@breathe-ds/ui 0.5.4 → 0.6.0

package/components/FilterChips.tsx

@@ -0,0 +1,63 @@
+import type { ReactNode } from "react";
+
+export type FilterChip = {
+  value: string;
+  label: ReactNode;
+  /** Shown after the label, lighter ("Tratamento 8"). */
+  count?: number;
+};
+
+type Props = {
+  /** Names the group for screen readers ("Filtrar por tema"). */
+  label: string;
+  chips: FilterChip[];
+  /** The selected value; "" is the first chip ("Todos"). */
+  value: string;
+  onValueChange: (value: string) => void;
+  /** `wrap` (default): the chips wrap to new lines. `scroll`: on phones they
+   *  stay on one line and scroll sideways (bleeding to the screen edge), so a
+   *  long topic list does not push the content down; from `sm` they wrap. */
+  layout?: "wrap" | "scroll";
+  className?: string;
+};
+
+/**
+ * FilterChips — one-of-many filter over a list (the topics of a library, the
+ * categories of a blog). Toggle buttons with `aria-pressed` in a labelled
+ * group: they change what is shown, they do not navigate, so they are not
+ * links and not tabs. 44px tall for the finger.
+ *
+ * Off: the white pill of the family (`card`, soft shadow, `ink` text). On:
+ * filled `ink` with `surface` text (9.41:1 on ttcab). A small control never
+ * uses the action colour as its fill (see the Action dose rule).
+ */
+const SCROLL =
+  "max-sm:-mx-5 max-sm:flex-nowrap max-sm:overflow-x-auto max-sm:px-5 max-sm:py-1 max-sm:[scrollbar-width:none] max-sm:[&::-webkit-scrollbar]:hidden max-sm:snap-x max-sm:scroll-px-5 [&>button]:shrink-0 [&>button]:snap-start";
+
+export function FilterChips({ label, chips, value, onValueChange, layout = "wrap", className = "" }: Props) {
+  return (
+    <div role="group" aria-label={label} className={`flex flex-wrap gap-2 ${layout === "scroll" ? SCROLL : ""} ${className}`}>
+      {chips.map((c) => {
+        const on = c.value === value;
+        return (
+          <button
+            key={c.value || "all"}
+            type="button"
+            aria-pressed={on}
+            onClick={() => onValueChange(c.value)}
+            className={`inline-flex min-h-11 items-center gap-2 rounded-full px-4 text-sm font-semibold transition-colors duration-150 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ink active:scale-[0.98] motion-reduce:transition-none motion-reduce:active:scale-100 ${
+              on
+                ? "bg-ink text-surface"
+                : "bg-card text-ink shadow-[0_1px_2px_color-mix(in_srgb,var(--color-shadow)_18%,transparent)] hover:bg-tint"
+            }`}
+          >
+            {c.label}
+            {c.count !== undefined && (
+              <span className={`font-normal tabular-nums ${on ? "text-surface/80" : "text-ink-soft"}`}>{c.count}</span>
+            )}
+          </button>
+        );
+      })}
+    </div>
+  );
+}

package/components/FilterPill.tsx

@@ -0,0 +1,35 @@
+import type { ReactNode } from "react";
+import { X } from "lucide-react";
+
+type Props = {
+  /** What is filtered: "Santa Catarina". */
+  children: ReactNode;
+  onRemove: () => void;
+  /** aria-label of the pill ("Remover filtro Santa Catarina"). */
+  removeLabel: string;
+  className?: string;
+};
+
+/**
+ * FilterPill — one active filter, removable (the token in a search bar:
+ * "Santa Catarina ✕"). The whole pill is the button: a bigger target than a
+ * lone ✕, 36px tall inside a 44px row. `ink` fill with `surface` text, the
+ * same "on" state as FilterChips (9.41:1 on ttcab), so active filters read the
+ * same everywhere. Pair it with a "Clear filters" link when there can be more
+ * than one.
+ */
+export function FilterPill({ children, onRemove, removeLabel, className = "" }: Props) {
+  return (
+    <button
+      type="button"
+      onClick={onRemove}
+      aria-label={removeLabel}
+      className={`group/pill inline-flex min-h-9 items-center gap-1.5 rounded-full bg-ink py-1 pr-2 pl-3.5 text-sm font-semibold text-surface transition-colors duration-150 hover:bg-ink-soft focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ink active:scale-[0.98] motion-reduce:transition-none motion-reduce:active:scale-100 ${className}`}
+    >
+      <span aria-hidden="true">{children}</span>
+      <span aria-hidden="true" className="flex h-6 w-6 items-center justify-center rounded-full bg-surface/15 transition-colors duration-150 group-hover/pill:bg-surface/25">
+        <X size={14} strokeWidth={2.25} />
+      </span>
+    </button>
+  );
+}

package/components/Footer.tsx

@@ -77,7 +77,7 @@ const link =
 const strongLink =
   "inline-flex min-h-11 items-center gap-1.5 font-semibold text-ink underline underline-offset-4 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ink";
 const chip =
-  "inline-flex min-h-11 items-center gap-2 rounded-full bg-ink/[0.08] px-4 text-sm font-medium text-ink transition-colors duration-200 hover:bg-ink hover:text-surface motion-reduce:transition-none focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ink";
+  "inline-flex min-h-11 items-center gap-2 rounded-full bg-tint px-4 text-sm font-medium text-ink transition-colors duration-200 hover:bg-ink hover:text-surface motion-reduce:transition-none focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ink";
 
 /**
  * Footer of the Cuidado Global family — the site-footer of novo.creeta, by

package/components/Header.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { useState, type ReactNode, type ElementType } from "react";
+import { useId, useRef, useState, type ReactNode, type ElementType } from "react";
 
 export type NavChild = {
   label: ReactNode;
@@ -20,6 +20,12 @@ export type NavItem = {
   /** Final link of the dropdown. Arrow → (goes to another page of the site); with
    *  `external` it becomes ↗ (leaves to another site), as in the other components. */
   seeAll?: { label: ReactNode; href: string; external?: boolean };
+  /** Instead of `children`: labelled groups of links (e.g. "Navigation", "Content"). */
+  groups?: { label: ReactNode; children: NavChild[] }[];
+  /** Long dropdowns: 2 columns of compact rows (max 2, as in the rest of the DS). */
+  columns?: 1 | 2;
+  /** Which edge of the trigger the dropdown aligns to; "end" keeps a wide menu inside the viewport. */
+  align?: "start" | "end";
 };
 
 type Labels = {
@@ -72,11 +78,44 @@ const linkCls = (active?: boolean) =>
 
 function Dropdown({ item, L, t }: { item: NavItem; L: ElementType; t: Labels }) {
   const [open, setOpen] = useState(false);
+  const two = item.columns === 2;
+  const gid = useId();
+  // a mouse that hovered already opened the menu: its click on the chevron must not close it
+  const hovering = useRef(false);
+  const renderChild = (c: NavChild) => (
+    <L
+      href={c.href}
+      onClick={() => setOpen(false)}
+      // with a description the icon sits with the label's first line (creeta);
+      // label only: centred on the bubble, and a two-line label stays tight
+      className={`flex ${c.description ? "items-start" : "items-center"} gap-3 rounded-xl px-2.5 ${item.groups ? "py-1" : two ? "py-1.5" : "py-2"} transition-colors hover:bg-ink/[0.05] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ink`}
+    >
+      {c.icon && (
+        <span className="flex h-9 w-9 flex-none items-center justify-center rounded-full bg-tint text-ink">
+          {c.icon}
+        </span>
+      )}
+      <span>
+        <span className={`block font-heading ${two ? "text-[0.9rem]" : "text-[0.95rem]"} leading-snug font-semibold text-ink`}>
+          {c.label}
+        </span>
+        {c.description && (
+          <span className="mt-0.5 block text-sm text-ink-soft">{c.description}</span>
+        )}
+      </span>
+    </L>
+  );
   return (
     <div
       className="relative"
-      onMouseEnter={() => setOpen(true)}
-      onMouseLeave={() => setOpen(false)}
+      onMouseEnter={() => {
+        hovering.current = true;
+        setOpen(true);
+      }}
+      onMouseLeave={() => {
+        hovering.current = false;
+        setOpen(false);
+      }}
       onBlur={(e) => {
         if (!e.currentTarget.contains(e.relatedTarget as Node)) setOpen(false);
       }}
@@ -94,46 +133,35 @@ function Dropdown({ item, L, t }: { item: NavItem; L: ElementType; t: Labels })
           type="button"
           aria-expanded={open}
           aria-label={t.openSubmenu}
-          onClick={() => setOpen((o) => !o)}
+          onClick={() => setOpen((o) => (hovering.current ? true : !o))}
           className="flex min-h-11 items-center rounded-md px-0.5 text-ink/70 transition-colors hover:text-ink focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ink"
         >
           <Chevron open={open} />
         </button>
       </span>
 
-      <div className={`absolute top-full left-0 z-50 pt-2 ${open ? "" : "pointer-events-none"}`}>
+      <div className={`absolute top-full ${item.align === "end" ? "right-0" : "left-0"} z-50 pt-2 ${open ? "" : "pointer-events-none"}`}>
         <ul
-          className={`w-[19rem] list-none rounded-2xl border border-line bg-surface p-2 shadow-[0_18px_40px_-16px_rgba(20,71,83,0.4)] transition duration-150 ease-out motion-reduce:transition-none ${
+          className={`${two ? (item.groups ? "w-[34rem] columns-2 gap-x-4" : "grid w-[34rem] grid-cols-2 gap-x-1") : "w-[19rem]"} list-none rounded-2xl border border-line bg-surface p-2 shadow-[0_18px_40px_-16px_color-mix(in_srgb,var(--color-shadow)_40%,transparent)] transition duration-150 ease-out motion-reduce:transition-none ${
             open ? "visible scale-100 opacity-100" : "invisible -translate-y-1 scale-[0.98] opacity-0"
           }`}
         >
-          {item.children!.map((c, i) => (
-            <li key={i}>
-              <L
-                href={c.href}
-                onClick={() => setOpen(false)}
-                // with a description the icon sits with the label's first line (creeta);
-                // label only: centred on the bubble, and a two-line label stays tight
-                className={`flex ${c.description ? "items-start" : "items-center"} gap-3 rounded-xl px-2.5 py-2 transition-colors hover:bg-ink/[0.05] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ink`}
-              >
-                {c.icon && (
-                  <span className="flex h-9 w-9 flex-none items-center justify-center rounded-full bg-ink/[0.08] text-ink">
-                    {c.icon}
-                  </span>
-                )}
-                <span>
-                  <span className="block font-heading text-[0.95rem] leading-snug font-semibold text-ink">
-                    {c.label}
-                  </span>
-                  {c.description && (
-                    <span className="mt-0.5 block text-sm text-ink-soft">{c.description}</span>
-                  )}
-                </span>
-              </L>
-            </li>
-          ))}
+          {item.groups
+            ? item.groups.map((g, gi) => (
+                <li key={gi} className="break-inside-avoid pb-5 last:pb-1">
+                  <p id={`${gid}-${gi}`} className="px-2.5 pt-2 pb-0.5 font-heading text-[0.7rem] font-bold tracking-[0.12em] text-ink-soft uppercase">
+                    {g.label}
+                  </p>
+                  <ul aria-labelledby={`${gid}-${gi}`} className="list-none">
+                    {g.children.map((c, i) => (
+                      <li key={i}>{renderChild(c)}</li>
+                    ))}
+                  </ul>
+                </li>
+              ))
+            : item.children!.map((c, i) => <li key={i}>{renderChild(c)}</li>)}
           {item.seeAll && (
-            <li className="mt-1 border-t border-line pt-1">
+            <li className={`mt-1 border-t border-line pt-1 ${two ? "col-span-2 [column-span:all]" : ""}`}>
               <L
                 href={item.seeAll.href}
                 onClick={() => setOpen(false)}
@@ -168,7 +196,7 @@ export function Header({ logo, items, linkComponent, cta, localeSwitcher, labels
 
         <nav aria-label={t.nav} className="hidden items-center gap-6 lg:flex xl:gap-7">
           {items.map((item, i) =>
-            item.children?.length ? (
+            item.children?.length || item.groups?.length ? (
               <Dropdown key={i} item={item} L={L} t={t} />
             ) : (
               <L key={i} href={item.href} aria-current={item.active ? "page" : undefined} className={linkCls(item.active)}>

package/components/Heading.tsx

@@ -1,6 +1,7 @@
 import type { ReactNode } from "react";
 
-type Level = "h1" | "h2" | "h3" | "h4";
+// "p": heading look without being a heading (a pull quote, a display line)
+type Level = "h1" | "h2" | "h3" | "h4" | "p";
 /** The family's heading scale (novo.creeta):
  *  display — page title (SectionHeading as h1) · hero — title over a full-bleed photo/video
  *  section — section title (h2) · card — title inside a card · small — h3 */
@@ -13,7 +14,7 @@ export const HEADING_SIZE: Record<HeadingSize, string> = {
   card: "text-[1.375rem] leading-snug md:text-2xl",
   small: "text-xl leading-snug",
 };
-const DEFAULT_SIZE: Record<Level, HeadingSize> = { h1: "display", h2: "section", h3: "small", h4: "small" };
+const DEFAULT_SIZE: Record<Level, HeadingSize> = { h1: "display", h2: "section", h3: "small", h4: "small", p: "section" };
 
 type HeadingProps = {
   as?: Level;

package/components/InfoCard.tsx

@@ -40,6 +40,11 @@ const ArrowUpRight = () => (
   <svg aria-hidden="true" viewBox="0 0 24 24" width={18} height={18} className="cg-arrow-go" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M7 17 17 7M9 7h8v8" /></svg>
 );
 
+// internal page link: arrow forward (the ↗ is reserved for leaving the site, as in the other components)
+const ArrowRight = () => (
+  <svg aria-hidden="true" viewBox="0 0 24 24" width={18} height={18} className="cg-arrow-go" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M5 12h14M13 6l6 6-6 6" /></svg>
+);
+
 const body = "mt-2 leading-relaxed text-ink/80";
 const link =
   "mt-4 inline-flex min-h-11 items-center gap-1.5 font-semibold text-ink underline underline-offset-4 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ink";
@@ -71,7 +76,7 @@ export function InfoCard({
 
   return (
     <Tag className={`rounded-2xl bg-card p-6 md:p-8 ${className}`}>
-      <span aria-hidden="true" className="flex h-11 w-11 items-center justify-center rounded-full bg-ink/[0.12] text-ink">
+      <span aria-hidden="true" className="flex h-11 w-11 items-center justify-center rounded-full bg-tint text-ink">
         <Icon size={20} strokeWidth={1.75} />
       </span>
       <Heading className="mt-4 font-heading text-xl font-medium text-ink">{title}</Heading>
@@ -106,7 +111,7 @@ export function InfoCard({
           ) : (
             <L href={l.href} className={link}>
               {l.label}
-              <ArrowUpRight />
+              <ArrowRight />
             </L>
           )}
         </span>

package/components/List.tsx

@@ -43,7 +43,7 @@ const ArrowUpRight = () => (
 export function List({ items, marker = "check", linkComponent, newTabLabel = "(opens in a new tab)", className = "" }: Props) {
   const L: ElementType = linkComponent ?? "a";
   const bubble = (
-    <span aria-hidden="true" className="mt-0.5 flex h-6 w-6 shrink-0 items-center justify-center rounded-full bg-ink/[0.12] text-ink">
+    <span aria-hidden="true" className="mt-0.5 flex h-6 w-6 shrink-0 items-center justify-center rounded-full bg-tint text-ink">
       <Check />
     </span>
   );

package/components/PageHero.tsx

@@ -0,0 +1,74 @@
+import type { ReactNode } from "react";
+import { Heading } from "./Heading";
+
+type Props = {
+  title: ReactNode;
+  /** Supporting paragraph under the title. */
+  lead?: ReactNode;
+  /** A smaller line under the lead ("Os artigos estão no idioma original…"). */
+  note?: ReactNode;
+  /** Above the title: a Breadcrumb. */
+  breadcrumb?: ReactNode;
+  /** The page's main controls (search, filters), inside the panel: the hero
+   *  and the tools that act on the page read as one region. */
+  children?: ReactNode;
+  /** The site's graphic device, low in the corner (e.g. the brand symbol at
+   *  6% in `ink`). Decorative: rendered aria-hidden. */
+  watermark?: ReactNode;
+  /** `alt` (default): the section band colour (`surface-alt`), light, ink
+   *  text at full contrast (8.85:1 on ttcab). `card`: white. */
+  tone?: "alt" | "card";
+  /** `panel` (default): the rounded band with the tools inside. `centered`: the
+   *  Apple search page — no box, title and lead centred, one search below on the
+   *  page colour; refining filters live outside, after the results begin. */
+  variant?: "panel" | "centered";
+  className?: string;
+};
+
+/**
+ * PageHero — the opening panel of an inner page (a library, a directory).
+ * Wide, in novo.creeta's proportion (up to 1600px, 16/24px from the screen
+ * edge), rounded 28/32px, with the content aligned to the site's column
+ * (max-w-6xl) so the title lines up with the list below.
+ *
+ * Light on purpose: the white search field and chips stand out on the band,
+ * and the panel groups title, explanation and controls (common region)
+ * without the weight of a dark panel.
+ */
+export function PageHero({ title, lead, note, breadcrumb, children, watermark, tone = "alt", variant = "panel", className = "" }: Props) {
+  if (variant === "centered") {
+    return (
+      <section className={`px-4 pt-[clamp(40px,7vw,96px)] pb-[clamp(28px,4vw,48px)] text-center md:px-6 ${className}`}>
+        <div className="mx-auto w-full max-w-3xl">
+          {breadcrumb && <div className="mb-6 flex justify-center">{breadcrumb}</div>}
+          <Heading as="h1" size="display" className="text-balance">
+            {title}
+          </Heading>
+          {lead && <p className="mx-auto m-0 mt-4 max-w-xl text-lg leading-relaxed text-balance text-ink-body">{lead}</p>}
+          {note && <p className="mx-auto m-0 mt-3 max-w-xl text-sm leading-relaxed text-ink-soft">{note}</p>}
+          {children && <div className="mx-auto mt-[clamp(24px,4vw,40px)] max-w-2xl text-left">{children}</div>}
+        </div>
+      </section>
+    );
+  }
+  return (
+    <div className={`px-4 pt-2 md:px-6 md:pt-4 ${className}`}>
+      <section className={`relative isolate mx-auto max-w-[1600px] overflow-hidden rounded-[28px] md:rounded-[32px] ${tone === "card" ? "bg-card" : "bg-surface-alt"}`}>
+        {watermark && (
+          <span aria-hidden="true" className="pointer-events-none absolute -right-10 -bottom-16 -z-10 hidden w-[min(34vw,420px)] md:block">
+            {watermark}
+          </span>
+        )}
+        <div className="mx-auto w-full max-w-6xl px-5 py-[clamp(36px,6vw,72px)] sm:px-6 lg:px-8">
+          {breadcrumb && <div className="mb-6">{breadcrumb}</div>}
+          <Heading as="h1" size="display" className="text-balance">
+            {title}
+          </Heading>
+          {lead && <p className="m-0 mt-4 max-w-xl text-lg leading-relaxed text-ink-body">{lead}</p>}
+          {note && <p className="m-0 mt-3 max-w-xl text-sm leading-relaxed text-ink-soft">{note}</p>}
+          {children && <div className="mt-[clamp(24px,4vw,40px)]">{children}</div>}
+        </div>
+      </section>
+    </div>
+  );
+}

package/components/PageVideoHero.tsx

@@ -67,6 +67,9 @@ type Props = {
   /** Labels of the background pause button (player mode, muted preview). */
   previewLabels?: { pause?: string; play?: string };
   videoTitle?: string;
+  /** The page's AnchorNav comes right after the hero: the hero gives up the
+   *  capsule's height so both fit in the first fold. */
+  withAnchorNav?: boolean;
 };
 
 function PlayGlyph({ size = 20 }: { size?: number }) {
@@ -175,8 +178,14 @@ export function PageVideoHero({
   closeLabel = "Close video",
   previewLabels,
   videoTitle,
+  withAnchorNav = false,
 }: Props) {
   const isPlayer = video.mode === "player";
+  // something sits in the bottom-right corner: the panel leaves room for it (md+)
+  const corner = actions === null ? false : actions ? true : isPlayer;
+  // phones: with a panel, the default watch button moves to the top-left corner
+  // and the panel keeps room for it (pt-24), so the two never overlap
+  const watchOnTop = Boolean(panel) && !topLeft && actions === undefined && isPlayer;
   const [playing, setPlaying] = useState(false);
   const watchRef = useRef<HTMLButtonElement>(null);
   const playedOnce = useRef(false);
@@ -191,7 +200,7 @@ export function PageVideoHero({
 
   return (
     <div className="px-4 pt-2 md:px-6 md:pt-6">
-      <section className="relative isolate mx-auto flex min-h-[min(calc(100svh-7.5rem),560px)] max-w-[1600px] flex-col justify-end overflow-hidden rounded-[32px] bg-ink text-surface lg:min-h-[min(calc(100svh-7.5rem),820px)]">
+      <section className={`relative isolate mx-auto flex max-w-[1600px] flex-col justify-end overflow-hidden rounded-[32px] bg-ink text-surface ${withAnchorNav ? "min-h-[min(calc(100svh-13.5rem),560px)] lg:min-h-[min(calc(100svh-13.5rem),820px)]" : "min-h-[min(calc(100svh-7.5rem),560px)] lg:min-h-[min(calc(100svh-7.5rem),820px)]"}`}>
         {/* media — background (preview) or, when playing, the full video with sound */}
         <div className={`absolute inset-x-0 top-0 ${playing ? "bottom-[4.5rem]" : "bottom-0 -z-10"}`}>
           {playing ? (
@@ -267,9 +276,9 @@ export function PageVideoHero({
             {topLeft && <div className="absolute top-4 left-4 z-10">{topLeft}</div>}
 
             {/* panel / caption — in flow (justify-end), m-6 */}
-            <div className="relative z-10 p-6 md:m-6 md:p-0">
+            <div className={`relative z-10 p-6 md:m-6 md:p-0 ${watchOnTop ? "pt-24" : ""}`}>
               {panel ? (
-                <div className={`inline-flex max-w-full items-center rounded-[24px] bg-ink/75 px-6 py-4 backdrop-blur-md lg:px-7 lg:py-5 ${panel.actions && actions === undefined ? "" : "md:max-w-[calc(100%-16rem)]"}`}>
+                <div className={`inline-flex max-w-full items-center rounded-[24px] bg-ink/75 px-6 py-4 backdrop-blur-md lg:px-7 lg:py-5 ${corner ? "md:max-w-[calc(100%-16rem)]" : ""}`}>
                   <div>
                     {panel.kicker && (
                       <p className="mb-3 font-heading text-[0.82rem] font-bold tracking-[0.1em] text-surface/80 uppercase">{panel.kicker}</p>
@@ -286,7 +295,8 @@ export function PageVideoHero({
               ) : null}
             </div>
 
-            {/* bottom-right action */}
+            {/* bottom-right action (on phones, with a panel, the watch button goes to the
+                free top-left corner so it never covers the panel's buttons) */}
             {actions === null ? null : actions ? (
               <div className="absolute right-4 bottom-4 z-10 flex flex-wrap items-center justify-end gap-2 md:right-6 md:bottom-6">{actions}</div>
             ) : isPlayer ? (
@@ -294,7 +304,7 @@ export function PageVideoHero({
                 ref={watchRef}
                 type="button"
                 onClick={() => setPlaying(true)}
-                className="absolute right-4 bottom-4 z-10 flex items-center gap-3 rounded-full border border-surface/15 bg-ink/80 py-2 pr-7 pl-2 font-body font-semibold text-surface backdrop-blur-md transition-colors duration-200 hover:bg-ink/90 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-surface motion-reduce:transition-none md:right-6 md:bottom-6"
+                className={`absolute z-10 flex items-center gap-3 rounded-full border border-surface/15 bg-ink/80 py-2 pr-7 pl-2 font-body font-semibold text-surface backdrop-blur-md transition-colors duration-200 hover:bg-ink/90 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-surface motion-reduce:transition-none md:top-auto md:left-auto md:right-6 md:bottom-6 ${watchOnTop ? "top-4 left-4" : "right-4 bottom-4"}`}
               >
                 <span className="relative flex h-12 w-12 items-center justify-center rounded-full bg-surface text-ink">
                   <PlayGlyph size={20} />

package/components/PersonChip.tsx

@@ -40,7 +40,7 @@ export function PersonChip({ name, description, photo, avatar, href, linkCompone
       className={`${box} pr-1.5 transition-transform duration-150 ease-out active:scale-[0.98] focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ink motion-reduce:transition-none motion-reduce:active:scale-100 ${className}`}
     >
       {inner}
-      <span aria-hidden="true" className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-ink/[0.12] text-ink">
+      <span aria-hidden="true" className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-tint text-ink">
         <svg viewBox="0 0 24 24" width={15} height={15} className="cg-arrow-go" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M7 17 17 7M9 7h8v8" /></svg>
       </span>
     </L>

package/components/Pill.tsx

@@ -29,7 +29,7 @@ export function Pill({ href, children, meta, linkComponent, className = "" }: Pr
       <span
         aria-hidden="true"
         data-arrow={onPage ? "down" : "other-page"}
-        className="ml-0.5 flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-ink/[0.12] transition-colors duration-200 group-hover:bg-surface/15 motion-reduce:transition-none"
+        className="ml-0.5 flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-tint transition-colors duration-200 group-hover:bg-surface/15 motion-reduce:transition-none"
       >
         {onPage ? (
           <svg viewBox="0 0 24 24" width={16} height={16} className="cg-arrow-down" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M12 5v14M19 12l-7 7-7-7" /></svg>

package/components/ProfessionalCard.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { useEffect, useRef, useState, type ElementType, type ReactNode } from "react";
-import { initials } from "./Avatar";
+import { Avatar, initials } from "./Avatar";
 import { ProfessionalModal, type ProfessionalModalLabels, type ProfessionalPresentation } from "./ProfessionalModal";
 import { CollapseRow, LinkRow, RowList, type RowLink } from "./Rows";
 
@@ -56,6 +56,19 @@ export type ProfessionalCardRow =
       icon?: ReactNode;
     };
 
+/** One contact line of the `listing` card: a LinkRow with the lucide glyph on
+ *  the right (phone, mail, WhatsApp). The label is the visible number/address;
+ *  `srLabel` says who it reaches ("Ligar para Ana Souza"). */
+export type ProfessionalContact = {
+  label: ReactNode;
+  href: string;
+  icon?: ReactNode;
+  srLabel?: ReactNode;
+  external?: boolean;
+  /** Long unbroken text (an e-mail) may wrap anywhere, only when it does not fit. */
+  breakAll?: boolean;
+};
+
 export type ProfessionalCardLabels = ProfessionalModalLabels & {
   /** alt of the portrait. */
   portrait: (name: string) => string;
@@ -263,7 +276,12 @@ type Props = {
    *  (living portrait and "Meet" badge on hover). `micro`: the "who treats"
    *  row — 72px photo, name and role, also a link. The small sizes render the
    *  link as the root; wrap them in your <li> (RailItem). */
-  size?: "full" | "medium" | "micro";
+  size?: "full" | "medium" | "micro" | "listing";
+  /** `listing` only: the contact rows (phone, e-mail). */
+  contacts?: ProfessionalContact[];
+  /** `listing` only: the name as rendered, e.g. with the search match marked.
+   *  `name` stays the plain text (initials, alt). */
+  nameDisplay?: ReactNode;
   /** Where the small sizes lead: the full card on the team page ("/team/#slug"). */
   href?: string;
   /** Name shown on the medium card (the site uses the first two words). */
@@ -304,6 +322,8 @@ export function ProfessionalCard({
   rows,
   id,
   size = "full",
+  contacts,
+  nameDisplay,
   href = "#",
   shortName,
   headingLevel: Heading = "h2",
@@ -317,6 +337,41 @@ export function ProfessionalCard({
   const alt = photo?.alt ?? t.portrait(name);
   const hasPortrait = Boolean(photo || media || living);
 
+  if (size === "listing") {
+    // the directory card (ttcab "Encontre um profissional"): many people, no
+    // photos. The family's solid white card, the initials in a tint bubble,
+    // name, place (in `role`) and the registration, then the contacts as
+    // 48px rows. The card itself is not a link: the rows are the actions.
+    return (
+      <As id={id} data-cg-professional-card="" className={`flex h-full flex-col rounded-[22px] bg-card px-5 pt-5 pb-1.5 ${className}`}>
+        <div className="flex items-start gap-4">
+          {photo ? <Avatar name={name} photo={photo.src} size={48} /> : <Avatar name={name} size={48} />}
+          <div className="min-w-0 pt-0.5">
+            <Heading className="font-heading text-lg leading-snug font-medium text-pretty text-ink">{nameDisplay ?? name}</Heading>
+            {role && <p className="mt-1 text-sm text-ink-soft">{role}</p>}
+            {registration && <p className="mt-1 text-xs text-ink/80">{registration}</p>}
+          </div>
+        </div>
+        {contacts && contacts.length > 0 && (
+          <div className="mt-auto pt-5">
+          <RowList>
+            {contacts.map((c, i) => (
+              <LinkRow
+                key={i}
+                label={<span className={c.breakAll ? "[overflow-wrap:anywhere]" : undefined}>{c.label}</span>}
+                srLabel={c.srLabel}
+                href={c.href}
+                icon={c.icon}
+                external={c.external}
+              />
+            ))}
+          </RowList>
+          </div>
+        )}
+      </As>
+    );
+  }
+
   if (size === "micro") {
     // the "who treats" row of a treatment page (creeta telas/tratamento.tsx):
     // the text beside says who it is, so the photo is decoration
@@ -331,7 +386,7 @@ export function ProfessionalCard({
         ) : media ? (
           <span className="block h-[72px] w-[72px] shrink-0 overflow-hidden rounded-2xl">{media}</span>
         ) : (
-          <span aria-hidden="true" className="flex h-[72px] w-[72px] shrink-0 items-center justify-center rounded-2xl bg-ink/[0.12] font-heading text-xl font-medium text-ink">
+          <span aria-hidden="true" className="flex h-[72px] w-[72px] shrink-0 items-center justify-center rounded-2xl bg-tint font-heading text-xl font-medium text-ink">
             {initials(name)}
           </span>
         )}
@@ -359,7 +414,7 @@ export function ProfessionalCard({
           {hasPortrait ? (
             <Portrait name={name} photo={photo ? { ...photo, sizes: photo.sizes ?? "(min-width: 768px) 16vw, 42vw" } : undefined} media={media} living={living} alt={alt} decorative className={ZOOM_MEDIUM} />
           ) : (
-            <span aria-hidden="true" className="flex aspect-[3/4] w-full items-center justify-center bg-ink/[0.12] font-heading text-3xl font-medium text-ink">
+            <span aria-hidden="true" className="flex aspect-[3/4] w-full items-center justify-center bg-tint font-heading text-3xl font-medium text-ink">
               {initials(name)}
             </span>
           )}
@@ -401,7 +456,7 @@ export function ProfessionalCard({
         <div
           data-testid="initials"
           aria-hidden="true"
-          className="flex aspect-[3/4] w-full items-center justify-center rounded-[20px] bg-ink/[0.12]"
+          className="flex aspect-[3/4] w-full items-center justify-center rounded-[20px] bg-tint"
         >
           <span className="font-heading text-4xl font-bold text-ink">{initials(name)}</span>
         </div>