@breathe-ds/ui 0.1.1 → 0.3.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Felipe Genuino
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,197 +1,274 @@
 # Breathe
 
-**Breathe** — o design system da **família Cuidado Global** (ecossistema RTA / Mariangela:
-creeta, ttcab, metodorta…). Os sites **herdam** este pacote e aplicam a
-própria paleta sobre o mesmo contrato.
+**Breathe** — the design system of the **Cuidado Global family** (the RTA / Mariangela
+ecosystem: creeta, ttcab, metodorta…). The sites **inherit** this package and apply
+their own palette on top of the same contract.
 
-> Pacote npm: `@breathe-ds/ui` (endereço técnico). **Breathe** é o nome do sistema.
+> npm package: `@breathe-ds/ui` (the technical address). **Breathe** is the system's name.
 
-> **v0.1** — tokens + componentes (ver `components/`) + marcas dos sites.
-> Confira tudo renderizado no playground (abaixo).
+> **v0.1** — tokens + components (see `components/`) + the sites' brand marks.
+> See everything rendered in the playground (below).
 
-## Ideia
+## Idea
 
-Os sites da família **não compartilham paleta** (ttcab é petróleo/creme,
-creeta é petróleo/névoa/magenta). O que se compartilha são os **papéis de
-token** — `surface`, `ink`, `action`, `line`… — com nomes e estrutura iguais.
-Cada site define os valores (`--cg-*`) da sua paleta.
+The family's sites **do not share a palette** (ttcab is teal/cream,
+creeta is teal/mist/magenta). What they share are the **token roles** —
+`surface`, `ink`, `action`, `line`… — with the same names and structure.
+Each site defines the values (`--cg-*`) of its own palette.
 
-Token nunca é "a cor X": é **papel + contraste medido**. (O Felipe é daltônico;
-decisão de cor sempre por papel e contraste, nunca a olho.)
+A token is never "color X": it is **role + measured contrast**. (Felipe is color-blind;
+color decisions are always made by role and contrast, never by eye.)
 
-## Uso (Tailwind v4)
+## Install
 
-No `globals.css` do site:
+```bash
+npm i @breathe-ds/ui
+```
+
+Public package on npm: https://www.npmjs.com/package/@breathe-ds/ui · source at
+https://github.com/felipegenuino/breathe-ds (MIT license). The components ship as TSX source (no
+build step): in Next, add `transpilePackages: ["@breathe-ds/ui"]` to `next.config`.
+
+## Usage (Tailwind v4)
+
+In the site's `globals.css`:
 
 ```css
 @import "tailwindcss";
 @import "@breathe-ds/ui/theme.css";
-@import "@breathe-ds/ui/tokens/ttcab.css";   /* ou defina os --cg-* inline */
+@import "@breathe-ds/ui/tokens/ttcab.css";   /* or define the --cg-* inline */
 ```
 
-Depois, as utilitárias do Tailwind usam os papéis: `bg-surface`, `text-ink`,
+Then Tailwind utilities use the roles: `bg-surface`, `text-ink`,
 `border-line`, `bg-action`, `text-action-text`, `rounded-2xl`, etc.
 
-Para um site sem arquivo de tokens pronto, defina os papéis no próprio `:root`:
+For a site without a ready-made token file, define the roles on `:root` itself:
 
 ```css
 :root {
   --cg-surface: #fbf5e9;
   --cg-ink: #144753;
-  /* … ver tokens/ttcab.css para a lista completa */
+  /* … see tokens/ttcab.css for the full list */
 }
 ```
 
-## Papéis de token
+`theme.css` also sets the family's base behaviour: smooth scrolling for anchors
+(`html { scroll-behavior: smooth }`, switched off under `prefers-reduced-motion`)
+and `scroll-padding` (6rem top, 7rem bottom) so keyboard focus never lands
+hidden behind the sticky Header or the BottomNav (WCAG 2.4.11).
 
-| Token (Tailwind) | Papel | `--cg-*` |
+## Token roles
+
+| Token (Tailwind) | Role | `--cg-*` |
 |---|---|---|
-| `surface` | fundo base | `--cg-surface` |
-| `surface-panel` | painel escuro (footer, CTA final) | `--cg-surface-panel` |
-| `ink` | texto principal / títulos | `--cg-ink` |
-| `ink-soft` | texto secundário | `--cg-ink-soft` |
-| `ink-body` | corpo de leitura | `--cg-ink-body` |
-| `action` | CTA / destaque — **nunca texto puro** | `--cg-action` |
-| `action-text` | texto na cor de ação (AA) | `--cg-action-text` |
-| `line` | hairlines / bordas | `--cg-line` |
-| `font-heading` / `font-body` | tipografia | `--cg-font-*` |
-| `radius-xl/2xl/pill` · `ease-cg` | raio e curva de motion | fixos |
-
-## Contrastes medidos — TTCAB (`tokens/ttcab.css`)
-
-Valores pela fórmula WCAG padrão (os mesmos que o `preview/` calcula ao vivo):
-
-| Par | Contraste | Nível |
+| `surface` | base background | `--cg-surface` |
+| `surface-panel` | dark panel (footer, final CTA) | `--cg-surface-panel` |
+| `card` | raised surface: cards, pills, menus over the page (white on all three palettes) | `--cg-card` |
+| `ink` | primary text / headings | `--cg-ink` |
+| `ink-soft` | secondary text | `--cg-ink-soft` |
+| `ink-body` | reading body text | `--cg-ink-body` |
+| `action` | CTA / highlight — **never plain text** | `--cg-action` |
+| `action-text` | text in the action color (AA) | `--cg-action-text` |
+| `line` | hairlines / borders | `--cg-line` |
+| `font-heading` / `font-body` | typography | `--cg-font-*` |
+| `radius-xl/2xl/pill` · `ease-cg` | radius and motion curve | fixed |
+
+## Measured contrast — TTCAB (`tokens/ttcab.css`)
+
+Values from the standard WCAG formula (the same ones `preview/` computes live):
+
+| Pair | Contrast | Level |
 |---|---|---|
-| surface `#fbf5e9` / ink `#144753` | 9,41:1 | AAA |
-| surface `#fbf5e9` / ink-soft `#54707a` | 4,86:1 | AA |
-| surface `#fbf5e9` / ink-body `#1e4f5b` | 8,32:1 | AAA |
-| surface `#fbf5e9` / action-text `#9a5d07` | 4,90:1 | AA |
-| surface-panel `#144753` / texto creme | 9,41:1 | AAA |
+| surface `#fbf5e9` / ink `#144753` | 9.41:1 | AAA |
+| surface `#fbf5e9` / ink-soft `#54707a` | 4.86:1 | AA |
+| surface `#fbf5e9` / ink-body `#1e4f5b` | 8.32:1 | AAA |
+| surface `#fbf5e9` / action-text `#9a5d07` | 4.90:1 | AA |
+| surface-panel `#144753` / cream text | 9.41:1 | AAA |
 
-`action` `#f6a22a` é decorativo/CTA — não usar como texto sobre creme.
+`action` `#f6a22a` is decorative/CTA only — do not use it as text on cream.
 
-## Tipografia da família
+## Family typography
 
-Decisão (28/10/2026): **só fontes open-source** — nada de licenciadas (Gotham saiu).
+Decision (2026-10-28): **open-source fonts only** — no licensed ones (Gotham is out).
 
-| Papel | Fonte | Observação |
+| Role | Font | Note |
 |---|---|---|
-| `font-heading` | **Quicksand** | títulos, toda a família (Google Fonts) |
-| `font-body` | **Figtree** | corpo, toda a família (Google Fonts) |
-
-**Hierarquia/escala tipográfica:** usar a do **novo.creeta** como guia (bem trabalhada
-e refinada). _A extrair para tokens de tamanho/peso/entrelinha._
-
-## Primeiros consumidores
+| `font-heading` | **Quicksand** | headings, whole family (Google Fonts) |
+| `font-body` | **Figtree** | body, whole family (Google Fonts) |
 
-**ttcab** e **creeta**. A paleta do creeta em `tokens/creeta.css` está
-ilustrativa (marcada `[conferir]`) — fecha ao migrar o creeta.
+**Type hierarchy/scale:** use **novo.creeta**'s as the guide (well worked out
+and refined). _To be extracted into size/weight/line-height tokens._
 
-## O que muda por tema (e o que é fixo)
+## First consumers
 
-**Muda por tema:** apenas **cores** e **grafismos** (ThreadRail, OrganicFrame,
-marca d'água…). Cada site/marca da família tem a sua cor e os seus grafismos.
+**ttcab** and **creeta**. The creeta palette in `tokens/creeta.css` is
+illustrative (marked `[conferir]`) — to be finalized when creeta migrates.
 
-**Fixo em toda a família:** **tipografia** (Quicksand nos títulos + Figtree no
-corpo, em qualquer tema — inclusive o Neutro) e os **ícones** (lucide). Botões
-usam a fonte de corpo semibold (o 600 da Quicksand rende leve demais).
+## What changes per theme (and what is fixed)
 
-## Decisão — estilo de card
+**Changes per theme:** only **colors** and **graphic devices** (ThreadRail, OrganicFrame,
+watermark…). Each site/brand in the family has its own color and its own graphic devices.
 
-Linguagem de card do DS: **bordas discretas + sombra discreta** (referência: "Famílias
- contam" do novo.creeta). Nada de borda forte ou sombra pesada. _A virar tokens `--shadow-card` + `--border`._
+**Fixed across the whole family:** **typography** (Quicksand for headings + Figtree for
+body, in any theme — including Neutral) and the **icons** (lucide). Buttons
+use the body font at semibold (Quicksand's 600 renders too light).
 
-## Decisão — estilo de card
+## Decision — card style
 
-Linguagem de card do DS: **bordas discretas + sombra discreta** (referência: "Famílias contam" do novo.creeta). Nada de borda forte ou sombra pesada. _A virar tokens `--shadow-card` + `--border`._
+The DS card language: **subtle borders + subtle shadow** (reference: "Famílias contam" on novo.creeta). No strong borders or heavy shadows. _To become `--shadow-card` + `--border` tokens._
 
-## Decisão — largura de hero
+## Decision — hero width
 
-Heros **mais largos / full-bleed**, na proporção do **novo.creeta** (mais imersivos, menos
-margem lateral). Vale para `PageVideoHero` e `PageHero`. O hero atual do ttcab é mais contido
-— alargar para o padrão creeta ao migrar. _Vira token/escala de largura de hero._
+**Wider / full-bleed** heroes, in **novo.creeta**'s proportion (more immersive, less
+side margin). Applies to `PageVideoHero` and `PageHero`. ttcab's current hero is more contained
+— widen it to the creeta standard when migrating. _Becomes a hero-width token/scale._
 
-## Marcas dos sites (`components/marks/`)
+## Site brand marks (`components/marks/`)
 
-Cada site da família tem o símbolo e o wordmark reais, copiados dos arquivos de
-marca (`public/brand`) dos repositórios, separados em dois componentes para a
-`Cortina` e o `Lockup` montarem os arranjos:
+Each site in the family has its real symbol and wordmark, copied from the brand
+files (`public/brand`) in the repositories, split into two components so the
+`Curtain` and the `Lockup` can compose the arrangements:
 
-| Site | Símbolo | Wordmark | Import |
+| Site | Symbol | Wordmark | Import |
 |---|---|---|---|
-| TTCAB | `TtcabSymbol` (mãe + bebê, laranja `#F6A22A`) | `TtcabWordmark` (caixa-alta, `currentColor`) | `@breathe-ds/ui/components/marks/ttcab` |
-| Creeta | `CreetaSymbol` (três ondas + ponto, cores da marca) | `CreetaWordmark` (minúsculas, `currentColor`) | `@breathe-ds/ui/components/marks/creeta` |
+| TTCAB | `TtcabSymbol` (mother + baby, orange `#F6A22A`) | `TtcabWordmark` (uppercase, `currentColor`) | `@breathe-ds/ui/components/marks/ttcab` |
+| Creeta | `CreetaSymbol` (three waves + dot, brand colors) | `CreetaWordmark` (lowercase, `currentColor`) | `@breathe-ds/ui/components/marks/creeta` |
 
 ```tsx
-<Cortina logo={<TtcabSymbol />} name={<TtcabWordmark />} wordmarkRatio={TTCAB_LOCKUP.wordmarkPerSymbol} tagline="…" />
+<Curtain logo={<TtcabSymbol />} name={<TtcabWordmark />} wordmarkRatio={TTCAB_LOCKUP.wordmarkPerSymbol} tagline="…" />
 <Lockup variant="horizontal" size="md" logo={<CreetaSymbol />} wordmark={<CreetaWordmark />} wordmarkRatio={CREETA_LOCKUP.wordmarkPerSymbol} name="creeta" />
 ```
 
-**Proporção vem do manual, não do olho.** Cada arquivo de marca exporta
-`*_LOCKUP.wordmarkPerSymbol` (altura do wordmark ÷ altura do símbolo no
-logotipo horizontal: TTCAB 0,557 · creeta 0,469) e `symbolSide` (no TTCAB o
-símbolo fica à **direita** do nome; no creeta e nos demais, à esquerda). O `Lockup` e a `Cortina`
-passam isso ao svg pela variável `--cg-wordmark`; o símbolo injetado recebe a
-altura do tamanho (`size`). Medido nos sites (29/10/2026): no header dos dois o
-símbolo tem **44px** de altura — é o `size="md"` do Lockup. O símbolo aceita
-`color` para versão monocromática (branco sobre painel escuro). O desenho não se
-edita à mão: é o do manual de cada marca.
-
-`Lockup` com `entrance` (e `entranceDelay` em ms) faz a entrada do header do
-novo.creeta: símbolo, depois o nome, depois a tagline; com movimento reduzido vira
-um fade curto.
-
-## Navegação
-
-- **Header**: marca (o app passa o link para a home) · itens · item com dropdown
-  (ícones nos subitens; link final com seta → ou ↗ se `external`) · idioma · CTA.
-  Padrão dos sites: "Início" é só a casa (`icon` + `iconOnly`), rótulo para
-  leitor de tela.
-- **BottomNav**: no celular/tablet a navegação sai do header e vira a barra
-  flutuante inferior. É o código da BarraNavegacao do novo.creeta (= BottomNav
-  do ttcab), neutro por tokens: recebe TODAS as páginas em ordem de importância
-  (`pages`, com o `Icon` lucide) e mostra quantas couberem (64px por aba,
-  ResizeObserver); o resto e as saídas externas (`extras`, com o domínio escrito
-  e seta ↗) vão para o painel "Mais", um popover nativo (Esc, toque fora, sem
-  JS). Véu de gradiente atrás da barra. `hideFrom` = `md` (creeta) ou `lg`
-  (ttcab). `labels` para outro idioma. `embedded` para a moldura da demo.
-- **AnchorNav**: cápsula flutuante de âncoras da página (scroll-spy + indicador
-  deslizante), extraída do TreatmentAnchorNav do ttcab. As seções-alvo precisam
-  de `scroll-mt-*` compatível com o sticky.
-
-## Playground (ver os componentes)
-
-`cd playground && npm install && npm run dev` → kitchen-sink em http://localhost:5177 com os componentes reais renderizados (paleta ttcab).
+**The proportion comes from the brand manual, not from the eye.** Each brand file exports
+`*_LOCKUP.wordmarkPerSymbol` (wordmark height ÷ symbol height in the
+horizontal logo: TTCAB 0.557 · creeta 0.469) and `symbolSide` (in TTCAB the
+symbol sits to the **right** of the name; in creeta and the others, to the left). The `Lockup` and the `Curtain`
+pass this to the svg through the `--cg-wordmark` variable; the injected symbol takes the
+height of the size (`size`). Measured on the sites (2026-10-29): in both headers the
+symbol is **44px** tall — that is the Lockup's `size="md"`. The symbol accepts
+`color` for a monochrome version (white on a dark panel). The artwork is never
+edited by hand: it is the one from each brand's manual.
+
+`Lockup` with `entrance` (and `entranceDelay` in ms) reproduces the header entrance of
+novo.creeta: symbol, then name, then tagline; with reduced motion it becomes
+a short fade.
+
+## Typography
+
+The family's scale, from novo.creeta, as components: `Heading` (sizes
+`display` 2.5rem→6xl · `hero` · `section` 1.75rem→4xl · `card` · `small`;
+Quicksand medium in `ink`) with an optional `accent` — the second sentence of
+the same heading on its own line, one tone below in `ink-soft` — and
+`SectionHeading` (eyebrow/number line, title + accent, lead). `Text` for
+paragraphs (`lead`, `body`, `small`, `eyebrow`, Figtree) and `Prose` for a run
+of paragraphs at reading width. Two tones, one element: the hierarchy comes
+from color, not from extra markup.
+
+## Navigation
+
+- **Header**: brand (the app passes the link to the home page) · items · item with dropdown
+  (icons on sub-items; final link with a → arrow, or ↗ if `external`) · language · CTA.
+  Site convention: "Home" is just the house (`icon` + `iconOnly`), with a label for
+  screen readers.
+- **BottomNav**: on phone/tablet, navigation leaves the header and becomes the
+  floating bottom bar. It is the code of novo.creeta's BarraNavegacao (= ttcab's
+  BottomNav), made neutral through tokens: it receives ALL pages in order of importance
+  (`pages`, with the lucide `Icon`) and shows as many as fit (64px per tab,
+  ResizeObserver); the rest and the external exits (`extras`, with the domain spelled out
+  and a ↗ arrow) go to the "More" panel, a native popover (Esc, tap outside, no
+  JS). Gradient veil behind the bar. `hideFrom` = `md` (creeta) or `lg`
+  (ttcab). `labels` for another language. `embedded` for the demo frame.
+- **AnchorNav**: floating capsule of page anchors (scroll-spy + sliding
+  indicator), extracted from ttcab's TreatmentAnchorNav. Target sections need
+  a `scroll-mt-*` compatible with the sticky header.
+- **LanguageSwitcher**: the SeletorDeIdioma of novo.creeta — `menu` (button with
+  the code, opens the three languages; header) or `list` (plain links; the Footer
+  uses it). Same page in the other language, each language written in itself,
+  current marked by ✓ and `aria-current`.
+- **List**: the family's list with a marker in front of each item (novo.creeta):
+  `marker="check"` (24px bubble, "what we assess / what we treat") or
+  `marker="arrow"` (corner arrow, one sentence per item, as in the Footer
+  notice). An item with `href` is a link: semibold, underline, outbound arrow.
+- **Timeline**: the "Como cuidamos" of novo.creeta — ordered steps, each with a
+  44px icon bubble, a title and a paragraph; a thin line links the drawings. A
+  step may end with a link (strong link + outbound arrow).
+- **RowList** / **CollapseRow** / **LinkRow**: the list of equal rows at the foot
+  of a card (the Trajectory / Guidance / Instagram block of the ProfessionalCard),
+  generic. 48px rows with hairlines; a CollapseRow is a native `<details>` with a
+  text or a list of links (`links`, count beside the label); a LinkRow goes
+  somewhere (↗ another page, ↓ anchor, `external` for a new tab, `icon` to
+  replace the arrow). The ProfessionalCard is built on them.
+- **ProfessionalCard** / **ProfessionalModal** / **CaptionBand**: the team card of
+  novo.creeta — portrait (plain, living clip on hover, or with the "Presentation"
+  chip), name, role, registration (**always**: COFFITO 414/2012), trajectory /
+  guidance / Instagram rows; the modal plays the presentation with sound, the
+  live caption band (active WebVTT cue) above the name, and the full bio.
+- **Byline** / **PersonChip** / **Avatar**: who signs or explains content
+  (novo.creeta) — stacked portraits + eyebrow + linked names, or portrait + name
+  + "Watch the video ↗"; the person chip (portrait, name, role · registration,
+  arrow bubble when it links to the person's card). No photo → initials bubble.
+- **Breadcrumb**: the article trail "← Section › Parent" (current page not listed).
+- **FactStrip**: the three facts under the hero of novo.creeta — icon bubble +
+  two lines of equal weight per fact, thin dividers between columns (rows on
+  phones); the separator between the lines is read by screen readers only.
+- **InfoCard**: the white info cards of the clinic page (icon bubble, title,
+  lines/address, note, outbound links "Directions ↗ · Waze ↗").
+- **MediaCard**: photo or muted clip behind a title, badge top-left, arrow button
+  top-right, whole card a link; Ken Burns zoom on hover (mouse only), clip plays
+  while visible or on hover; pause hooks exported for a page-level pause button.
+  The portrait variant ("Who created the method"): `eyebrow` + title + `linkLabel`
+  ("See the team ↗") with `arrowButton={false}`.
+- **VideoStoryCard**: the vertical Instagram-style video card (poster, play
+  button, duration badge; gradient grows and the lead appears on hover/focus;
+  tap plays with sound in place; optional muted hover preview). When the clip
+  ends the card returns to the poster with a "Watched" badge (check + word,
+  top-right): `watched` sets it from the site, `onWatched` fires once at the end,
+  `remember` keeps the set of watched clips in localStorage (by `src`). Exports
+  the page-level pause contract (`CARD_VIDEOS_PAUSE_EVENT` / `CARD_VIDEOS_PAUSED_ATTR`).
+- **TestimonialCard**: clip with a play button on the left, quote + author +
+  outbound link on the right ("Famílias contam").
+- **MapCard**: the Mapa of novo.creeta — a still preview fading into the card,
+  the address, "View the map" and the outbound "Directions" link; Google is only
+  called after the tap (no consent banner, lighter page). Open, the map fills
+  the card with the same close bar as the hero video.
+- **CtaCard** / **VideoInviteCard**: the final call of a novo.creeta page — white
+  card (title, lead, CTA slot) beside a video card: muted loop with the speaker's
+  name over it, pause control, play button that plays the full video with sound.
+- **Footer**: the site-footer of novo.creeta, by tokens — full width like the
+  Header, with the signed brand + sentence, "Pages" (title on the first line, links in two
+  columns), "Where we are" (address, hours, "Directions ↗ · Waze ↗"), an optional
+  notice band on `surface`, the legal line with the **CNPJ (always required in
+  the family)** plus the contact chips, and the languages as plain links.
+  `navHiddenFrom` keeps room at the bottom for the BottomNav.
+
+## Playground (see the components)
+
+`cd playground && npm install && npm run dev` → kitchen sink at http://localhost:5177 with the real components rendered (ttcab palette).
 
 ## Roadmap
 
-- [x] v0.1 — tokens (preset + paletas ttcab/creeta) + preview
-- [x] Accordion (1º componente; padrão de deps injetáveis)
-- [x] Tipografia da família (Quicksand + Figtree, só livres)
-- [ ] **Escalas do novo.creeta** (referência total, aprovado): **tipografia** (tamanhos/pesos/entrelinha)
-      **+ espaçamento/ritmo** (padding de seção, gaps) **+ border-radius padrão** → viram tokens do DS
-- [ ] **Ícones**: empacotar o conjunto do lucide usado pela família, para os
-      componentes importarem/injetarem (sem cada site depender do lucide direto)
-- [ ] **MediaCard** (vídeo/imagem atrás + badge de ícone + título + lead + seta;
-      variante **carrossel horizontal no mobile** com barra de progresso + pause) — aprovado
-- [ ] **TestimonialCard** (depoimento) — aprovado. Variantes: **citação** (card de texto),
-      **vídeo hero** (full-bleed com citação sobreposta), **vídeo ao lado** ("Famílias contam": vídeo + texto).
-      Avaliar um **mix** das duas. **Já existe no ttcab** (TestimonialVideoHero/Card) → extrair/generalizar.
-- [ ] **VideoStoryCard** (vídeo curto, vertical) — aprovado. Play + badge de duração +
-      título + lead + **"Ler a transcrição"** (colapso, reusa o Accordion). Padrão da página de Vídeos.
-      _Nota: o card ainda pode melhorar num update futuro (ok deixar pra depois)._
-- [ ] **ProfessionalCard** (equipe) — aprovado. Duas versões: **small** (foto + nome, fila/linha)
-      e **big** (foto + nome + função + CREFITO + accordions "Trajetória"/"Orientações").
-      Variante com **vídeo**: badge "Apresentação", hover anima o vídeo, e **modal** (vídeo + bio).
-      **Regra de dado:** todo profissional PRECISA ter **CREFITO** vinculado (exigência COFFITO).
-- [x] **PillList** (chips tipo "Condições que atendemos": rótulo + seta, grade que quebra, link "Ver todos")
-- [x] **AnchorNav** (cápsula flutuante de âncoras, scroll-spy + indicador deslizante) — extraída do ttcab (29/10)
-- [x] **Footer** · **PageVideoHero** (loop e player) · **Header** (dropdown, casa) · **BottomNav** · **Cortina** · **Lockup** (5 arranjos) · **BreatheMark**
-- [x] **Marcas dos sites** (`components/marks/`): símbolo + wordmark reais do TTCAB e do Creeta (29/10)
-- [ ] **ThreadRail** (grafismo lateral — fio que desce pela esquerda ligando seções) — aprovado,
-      **já existe no ttcab** → extrair.
-- [ ] **OrganicFrame** (recorte de imagem orgânico, tipo blob) — registrado como **OPÇÃO**
-      (não default pra todos os sites). **Já existe no ttcab** → extrair como variante opcional.
-- [x] Primitivos: Button (com variant link), Container, SectionKicker, Card
-- [ ] Migrar ttcab e creeta para consumir o pacote + `npm publish`
+- [x] v0.1 — tokens (preset + ttcab/creeta palettes) + preview
+- [x] Accordion (1st component; injectable-deps pattern) — the Perguntas of novo.creeta: white card (`bg-card`), 22px radius, no border
+- [x] Family typography (Quicksand + Figtree, free fonts only)
+- [ ] **novo.creeta scales** (full reference, approved): **typography** (sizes/weights/line-height)
+      **+ spacing/rhythm** (section padding, gaps) **+ default border-radius** → become DS tokens
+- [ ] **Icons**: package the lucide set used by the family, so components can
+      import/inject it (without each site depending on lucide directly)
+- [ ] **MediaCard** (video/image behind + icon badge + title + lead + arrow;
+      **horizontal carousel on mobile** variant with progress bar + pause) — approved
+- [x] **TestimonialCard** — from novo.creeta (10/29): clip + play on the left, quote/author/link on the right. The "video hero" and "video beside" variants from ttcab are still open
+- [x] **VideoStoryCard** — from novo.creeta (10/29): vertical card, play + duration badge, lead on hover/focus, plays with sound in place; "Read the transcript" goes in `children` (Accordion)
+- [x] **ProfessionalCard** (team) — from novo.creeta (10/29): small = PersonChip/Byline, big = the card with living portrait, presentation modal + captions. Original note: Two versions: **small** (photo + name, in a row)
+      and **big** (photo + name + role + CREFITO + "Trajetória"/"Orientações" accordions).
+      **Video** variant: "Apresentação" badge, hover plays the video, and a **modal** (video + bio).
+      **Data rule:** every professional MUST have a **CREFITO** attached (COFFITO requirement).
+- [x] **Pill / PillList** — the Atalho of novo.creeta (white 44px pill, arrow bubble: ↓ anchor, ↗ other page, optional meta); wrapping row + "See all"
+- [x] **AnchorNav** (floating capsule of anchors, scroll-spy + sliding indicator) — extracted from ttcab (10/29)
+- [x] **Footer** · **PageVideoHero** (loop and player) · **Header** (dropdown, house) · **BottomNav** · **Curtain** · **Lockup** (5 arrangements) · **BreatheMark**
+- [x] **Site brand marks** (`components/marks/`): real symbol + wordmark for TTCAB and Creeta (10/29)
+- [ ] **ThreadRail** (side graphic device — a thread running down the left linking sections) — approved,
+      **already exists in ttcab** → extract.
+- [ ] **OrganicFrame** (organic, blob-like image crop) — recorded as an **OPTION**
+      (not the default for every site). **Already exists in ttcab** → extract as an optional variant.
+- [x] Primitives: Button (with link variant), Container, SectionKicker, Card
+- [ ] Migrate ttcab and creeta to consume the package + `npm publish`

package/components/Accordion.tsx

@@ -10,20 +10,21 @@ export type AccordionItem = {
 
 type Props = {
   items: AccordionItem[];
-  /** id aberto inicialmente (padrão: o primeiro). null = todos fechados. */
+  /** id open initially (default: the first). null = all closed. */
   defaultOpenId?: string | null;
-  /** true (padrão): só um aberto por vez, como no creeta. */
+  /** true (default): only one open at a time, as on creeta. */
   single?: boolean;
 };
 
 /**
- * Accordion / collapse da família Cuidado Global. Cartões em `surface` com
- * borda `line`, título `ink` e chevron que gira ao abrir. Sem dependência de
- * app: o ícone é um SVG inline. Anima a altura pelo truque grid-rows (0fr→1fr),
- * sem medir nada em JS, e respeita prefers-reduced-motion.
+ * Accordion / collapse of the Cuidado Global family. Cards in `surface` with
+ * `line` border, `ink` title and a chevron that rotates on open. No app
+ * dependency: the icon is an inline SVG. Animates height with the grid-rows
+ * trick (0fr→1fr), without measuring anything in JS, and respects
+ * prefers-reduced-motion.
  *
- * Cores: texto `ink` sobre `surface` (contraste do papel definido pelo site).
- * Consome os tokens via classes do Tailwind (surface/ink/line) — ver theme.css.
+ * Colors: `ink` text on `surface` (contrast of the role defined by the site).
+ * Consumes the tokens via Tailwind classes (surface/ink/line) — see theme.css.
  */
 export function Accordion({ items, defaultOpenId, single = true }: Props) {
   const initial =
@@ -50,7 +51,8 @@ export function Accordion({ items, defaultOpenId, single = true }: Props) {
         return (
           <div
             key={it.id}
-            className="overflow-hidden rounded-2xl border border-line bg-surface"
+            // the Perguntas of novo.creeta: a white card (bg-card), 22px radius, no border — it reads by tone over the page
+            className="overflow-hidden rounded-[22px] bg-card px-5 md:px-7"
           >
             <h3 className="m-0">
               <button
@@ -59,13 +61,13 @@ export function Accordion({ items, defaultOpenId, single = true }: Props) {
                 aria-expanded={isOpen}
                 aria-controls={panelId}
                 onClick={() => toggle(it.id)}
-                className="flex w-full items-center justify-between gap-4 px-[clamp(18px,3vw,28px)] py-[clamp(16px,2.4vw,22px)] text-left font-heading text-[1.05rem] font-semibold text-ink transition-colors focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-ink"
+                className="flex min-h-14 w-full items-center justify-between gap-4 py-1 text-left font-heading text-lg font-medium text-ink transition-colors focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ink"
               >
                 <span>{it.title}</span>
                 <svg
                   aria-hidden="true"
                   viewBox="0 0 24 24"
-                  className={`h-5 w-5 flex-none text-ink-soft transition-transform duration-200 ease-[cubic-bezier(.2,.8,.2,1)] motion-reduce:transition-none ${
+                  className={`h-5 w-5 flex-none text-ink transition-transform duration-200 ease-[cubic-bezier(.2,.8,.2,1)] motion-reduce:transition-none ${
                     isOpen ? "rotate-180" : ""
                   }`}
                   fill="none"
@@ -78,19 +80,20 @@ export function Accordion({ items, defaultOpenId, single = true }: Props) {
                 </svg>
               </button>
             </h3>
-            {/* grid-rows 0fr→1fr: anima a altura sem medir em JS */}
+            {/* grid-rows 0fr→1fr: animates height without measuring in JS */}
             <div
               id={panelId}
               role="region"
               aria-labelledby={btnId}
-              // React 18 não conhece `inert` como booleano: string vazia liga, undefined desliga (no 19 o booleano funciona igual).
+              // React 18 does not know `inert` as a boolean: empty string turns it on, undefined turns it off (in 19 the boolean works the same way).
               {...({ inert: isOpen ? undefined : "" } as Record<string, unknown>)}
               className={`grid transition-[grid-template-rows] duration-300 ease-[cubic-bezier(.2,.8,.2,1)] motion-reduce:transition-none ${
                 isOpen ? "grid-rows-[1fr]" : "grid-rows-[0fr]"
               }`}
             >
               <div className="min-h-0 overflow-hidden">
-                <div className="px-[clamp(18px,3vw,28px)] pt-0 pb-[clamp(18px,2.6vw,26px)] text-ink-body">
+                {/* full-width item, reading-width body (max-w-2xl), as the Perguntas of novo.creeta */}
+                <div className="max-w-2xl pb-5 leading-relaxed text-ink/80">
                   {it.content}
                 </div>
               </div>