@breathe-ds/ui 0.5.1 → 0.6.0

package/components/SelectField.tsx

@@ -0,0 +1,75 @@
+import type { ReactNode, SelectHTMLAttributes } from "react";
+import { ChevronDown } from "lucide-react";
+import { FIELD, FIELD_LABEL } from "./SearchField";
+
+export type SelectOption = {
+  value: string;
+  label: string;
+  /** Count shown after the label ("São Paulo (51)"). Native options only take text. */
+  count?: number;
+};
+
+export type SelectGroup = { label: string; options: SelectOption[] };
+
+type Props = Omit<SelectHTMLAttributes<HTMLSelectElement>, "value" | "onChange" | "children"> & {
+  id: string;
+  label: ReactNode;
+  value: string;
+  onValueChange: (value: string) => void;
+  /** The first option, value "": "Todos os estados". */
+  placeholder: string;
+  /** Flat options, or groups (`<optgroup>`): pass one or the other. */
+  options?: SelectOption[];
+  groups?: SelectGroup[];
+  /** Keep the label for screen readers only, when a group label above already says
+   *  what the fields are (and the placeholder names the field: "Todos os estados"). */
+  hideLabel?: boolean;
+  /** `md` (default): the 56px field. `sm`: a 40px pill for a filter bar (Apple-like).
+   *  (Not `size`: that is the native <select> attribute.) */
+  density?: "md" | "sm";
+  className?: string;
+};
+
+const text = (o: SelectOption) => (o.count === undefined ? o.label : `${o.label} (${o.count})`);
+
+/**
+ * SelectField — a native `<select>` dressed as the family's field (same pill,
+ * hairline and shadow as SearchField), with a lucide chevron. Native on
+ * purpose: on phones it opens the system picker, which is faster and more
+ * accessible than any custom listbox for a list of states or cities.
+ */
+export function SelectField({ id, label, value, onValueChange, placeholder, options, groups, hideLabel = false, density = "md", className = "", ...rest }: Props) {
+  return (
+    <div className={className}>
+      <label htmlFor={id} className={hideLabel ? "sr-only" : FIELD_LABEL}>
+        {label}
+      </label>
+      <div className="relative">
+        <select
+          id={id}
+          value={value}
+          onChange={(e) => onValueChange(e.target.value)}
+          className={`${FIELD} cursor-pointer appearance-none truncate ${density === "sm" ? "!min-h-10 py-2 pr-9 pl-4 text-sm font-medium" : "pr-12 pl-5"}`}
+          {...rest}
+        >
+          <option value="">{placeholder}</option>
+          {options?.map((o) => (
+            <option key={o.value} value={o.value}>
+              {text(o)}
+            </option>
+          ))}
+          {groups?.map((g) => (
+            <optgroup key={g.label} label={g.label}>
+              {g.options.map((o) => (
+                <option key={o.value} value={o.value}>
+                  {text(o)}
+                </option>
+              ))}
+            </optgroup>
+          ))}
+        </select>
+        <ChevronDown aria-hidden="true" size={density === "sm" ? 16 : 18} className={`pointer-events-none absolute top-1/2 -translate-y-1/2 text-ink-soft ${density === "sm" ? "right-3.5" : "right-5"}`} />
+      </div>
+    </div>
+  );
+}

package/components/SidePanel.tsx

@@ -34,7 +34,10 @@ export function SidePanel({ open, onClose, title, actions, children, labels, cla
   const box = useRef<HTMLDialogElement>(null);
   const headingId = useId();
 
-  // open/close follow the prop; the way out waits for the slide to finish
+  // open/close follow the prop; the way out waits for the slide to finish.
+  // Closed, the dialog is display:none (hidden open:flex): a plain `flex` would
+  // keep it rendered off-screen, its shadow bleeding into the right edge and its
+  // content reachable.
   useEffect(() => {
     const d = box.current;
     if (!d) return;
@@ -76,14 +79,14 @@ export function SidePanel({ open, onClose, title, actions, children, labels, cla
     <dialog
       ref={box}
       aria-labelledby={headingId}
-      className={`fixed inset-y-0 right-0 left-auto m-0 flex h-dvh max-h-none w-[min(100vw,32rem)] max-w-none translate-x-full flex-col overflow-hidden bg-card p-0 text-ink shadow-2xl [transition:translate_280ms_var(--ease-cg)] data-open:translate-x-0 motion-reduce:transition-none backdrop:bg-ink/50 backdrop:backdrop-blur-sm backdrop:opacity-0 backdrop:[transition:opacity_240ms_ease-out] [&[data-open]::backdrop]:opacity-100 ${className}`}
+      className={`fixed inset-y-0 right-0 left-auto m-0 hidden open:flex h-dvh max-h-none w-[min(100vw,32rem)] max-w-none translate-x-full flex-col overflow-hidden bg-card p-0 text-ink shadow-2xl [transition:translate_280ms_var(--ease-cg)] data-open:translate-x-0 motion-reduce:transition-none backdrop:bg-ink/50 backdrop:backdrop-blur-sm backdrop:opacity-0 backdrop:[transition:opacity_240ms_ease-out] [&[data-open]::backdrop]:opacity-100 ${className}`}
     >
       <h2 id={headingId} className="sr-only">{title}</h2>
       <div className="flex shrink-0 items-center justify-between gap-3 border-b border-ink/10 px-4 py-3">
         <button
           type="button"
           onClick={onClose}
-          className="flex h-11 w-11 items-center justify-center rounded-full text-ink transition-colors duration-150 hover:bg-ink/[0.06] focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ink motion-reduce:transition-none"
+          className="flex h-11 w-11 items-center justify-center rounded-full text-ink transition-colors duration-150 hover:bg-tint focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ink motion-reduce:transition-none"
         >
           <X aria-hidden="true" size={20} strokeWidth={2} />
           <span className="sr-only">{t.close}</span>

package/components/StickyGroupHeading.tsx

@@ -0,0 +1,38 @@
+import type { ReactNode } from "react";
+
+type Props = {
+  children: ReactNode;
+  /** Lighter info after the title, e.g. the count ("51 profissionais"). */
+  meta?: ReactNode;
+  id?: string;
+  /** h2 by default; h3 inside a section that already has an h2. */
+  as?: "h2" | "h3";
+  /** Where it sticks: below the site's sticky header. Pass a literal Tailwind
+   *  class written in your source (`top-20` = an 80px header), so it gets generated. */
+  stickyTop?: string;
+  className?: string;
+};
+
+/**
+ * StickyGroupHeading — the title of a group in a long list that stays at the
+ * top while its items scroll by, and is pushed away by the next group's title
+ * (the section headers of Apple's lists, Contacts A–Z). Used on ttcab's
+ * professionals directory, one group per state.
+ *
+ * It sticks inside its own group: put it as the first child of the group's
+ * wrapper (a <section>), so the next wrapper pushes it out. The band bleeds
+ * 16/24px past the content so the hairline and the blurred page colour cover
+ * the cards passing under it; `surface` at 90% keeps the title at full
+ * contrast (ink on surface, 9.41:1 on ttcab) even without backdrop-filter.
+ */
+export function StickyGroupHeading({ children, meta, id, as: Tag = "h2", stickyTop = "top-20", className = "" }: Props) {
+  return (
+    <Tag
+      id={id}
+      className={`sticky ${stickyTop} z-10 -mx-4 flex items-baseline gap-3 border-b border-line bg-surface/90 px-4 py-3 font-heading text-xl font-medium text-ink backdrop-blur-md md:-mx-6 md:px-6 ${className}`}
+    >
+      {children}
+      {meta && <span className="text-sm font-normal text-ink-soft tabular-nums">{meta}</span>}
+    </Tag>
+  );
+}

package/components/TestimonialCard.tsx

@@ -1,16 +1,30 @@
 "use client";
 
-import { useState, type ElementType, type ReactNode } from "react";
+import { useLayoutEffect, useRef, useState, type ElementType, type ReactNode } from "react";
 import { Play } from "lucide-react";
+import { Avatar } from "./Avatar";
 import { Byline } from "./Byline";
+import { SidePanel } from "./SidePanel";
 
 type Labels = {
   /** sr-only text of the play button: "Watch: {description}". */
   watch: (description: string) => string;
   /** sr-only after the outbound link. */
   newTab: string;
+  /** Button under a clamped quote that opens the whole testimonial. */
+  readMore: string;
+  /** Same button when the panel holds the video (mediaPlacement="panel"). */
+  watchFull: string;
+  /** Close button of the side panel. */
+  close: string;
+};
+const EN: Labels = {
+  watch: (description) => `Watch: ${description}`,
+  newTab: " (opens in a new tab)",
+  readMore: "Read the full testimonial",
+  watchFull: "Watch the testimonial",
+  close: "Close",
 };
-const EN: Labels = { watch: (description) => `Watch: ${description}`, newTab: " (opens in a new tab)" };
 
 export type TestimonialCaptions = {
   /** WebVTT file in the page's language. Drawn by the browser over the video:
@@ -23,10 +37,13 @@ export type TestimonialCaptions = {
 };
 
 export type TestimonialVideo = {
-  /** The clip. Downloaded only on tap. */
-  src: string;
-  /** Still frame shown until the person taps. */
-  poster: string;
+  /** The clip (the site's own mp4). Downloaded only on tap. */
+  src?: string;
+  /** Or a YouTube id: the player (youtube-nocookie) loads only on tap. */
+  youtubeId?: string;
+  /** Still frame shown until the person taps. With `youtubeId` and no poster,
+   *  YouTube's own thumbnail. */
+  poster?: string;
   /** What the video shows, for screen readers ("Tereza's mother tells… (1 min 39 s)"). */
   description: string;
   /** Plays with audio (testimonials have speech). Default: true. The play is
@@ -50,8 +67,34 @@ type Props = {
   authors?: { name: string; photo?: string; avatar?: ReactNode }[];
   /** The public source of the quote ("View on Instagram ↗"), opened in a new tab. */
   link?: { href: string; label: ReactNode };
-  /** The family's video, on the left. */
-  video: TestimonialVideo;
+  /** The family's video, on the left. Omit it for a text testimonial (quote +
+   *  portrait), as on ttcab: the card becomes a single column. */
+  video?: TestimonialVideo;
+  /** A still portrait on the left, in the video's place (text testimonials with a
+   *  real photo). `media` replaces the <img> (the site's image component; must
+   *  fill the box). */
+  photo?: { src: string; alt: string; position?: string; media?: ReactNode };
+  /** Where the photo or the video shows: on the card and in the panel (default),
+   *  or only in the panel — the card stays a clean quote with the avatar. */
+  mediaPlacement?: "card" | "panel";
+  /** The card shows only this excerpt, large, as a pull quote (the person's own
+   *  words, never rewritten); the whole `quote` goes to the panel. */
+  excerpt?: ReactNode;
+  /** Quote marks around the excerpt. false for a context line that is not the
+   *  person's speech (e.g. the description of a video). Default: true. */
+  excerptMarks?: boolean;
+  /** Every card opens the whole testimonial in the SidePanel (the button always
+   *  shows): a header saying what it is (`eyebrow`, e.g. "Testimonial") with the
+   *  names, the video or the photo, then the full quote. */
+  panel?: { eyebrow: ReactNode };
+  /** Joiners between two or more names (", " and " e " in Portuguese). */
+  joiners?: { sep: string; last: string };
+  /** Small line under the name(s) ("Physiotherapist", "Tereza's mother"). */
+  role?: ReactNode;
+  /** Long testimonials: the quote on the card stops after this many lines and
+   *  a "Read the full testimonial" button opens it whole in the SidePanel. The
+   *  button only shows when the text really overflows. */
+  clampLines?: number;
   /** Element rendered as the card root (default <div>); `li` inside a <ul>. */
   as?: ElementType;
   labels?: Partial<Labels>;
@@ -62,9 +105,25 @@ type Props = {
  *  play button (creeta's `VideoAoToque`). Before the tap it is just the poster:
  *  the browser's controls (0:00, volume) over the image clashed. No aspect
  *  ratio: the height comes from the grid row (the text beside it). */
-function TapVideo({ src, poster, description, withSound = true, captions, media, label }: TestimonialVideo & { label: string }) {
+function TapVideo({ src, youtubeId, poster: posterProp, description, withSound = true, captions, media, label, frameClass }: TestimonialVideo & { label: string; frameClass?: string }) {
   const [playing, setPlaying] = useState(false);
-  const frame = "relative min-h-[16rem] overflow-hidden bg-ink";
+  // stacked on phones: 16:9 (videos are landscape); side by side: the row's height
+  const frame = frameClass ?? "relative aspect-video overflow-hidden bg-ink sm:aspect-auto sm:min-h-[16rem]";
+  const poster = posterProp ?? (youtubeId ? `https://i.ytimg.com/vi/${youtubeId}/hqdefault.jpg` : "");
+
+  if (playing && youtubeId) {
+    return (
+      <div className={frame}>
+        <iframe
+          src={`https://www.youtube-nocookie.com/embed/${youtubeId}?autoplay=1&rel=0&modestbranding=1&playsinline=1`}
+          title={description}
+          allow="autoplay; encrypted-media; fullscreen; picture-in-picture"
+          allowFullScreen
+          className="absolute inset-0 h-full w-full border-0"
+        />
+      </div>
+    );
+  }
 
   if (playing) {
     return (
@@ -116,23 +175,120 @@ function TapVideo({ src, poster, description, withSound = true, captions, media,
  * check the source. The quote is a real <blockquote> with <cite>: it is someone
  * else's words and the screen reader announces it as such.
  */
-export function TestimonialCard({ quote, author, authorPhoto, authorAvatar, authors, link, video, as: Root = "div", labels, className = "" }: Props) {
+// whole class names, so Tailwind generates them
+const CLAMP: Record<number, string> = { 3: "line-clamp-3", 4: "line-clamp-4", 5: "line-clamp-5", 6: "line-clamp-6", 8: "line-clamp-8" };
+
+export function TestimonialCard({ quote, author, authorPhoto, authorAvatar, authors, link, video, photo, mediaPlacement = "card", role, joiners, panel, excerpt, excerptMarks = true, clampLines, as: Root = "div", labels, className = "" }: Props) {
   const t = { ...EN, ...labels };
   const people = authors ?? [{ name: author ?? "", photo: authorPhoto, avatar: authorAvatar }];
+  const cardPhoto = mediaPlacement === "card" ? photo : undefined;
+  const cardVideo = mediaPlacement === "card" ? video : undefined;
+  const quoteRef = useRef<HTMLQuoteElement>(null);
+  const [overflows, setOverflows] = useState(false);
+  const [open, setOpen] = useState(false);
+  useLayoutEffect(() => {
+    const el = quoteRef.current;
+    if (!el || !clampLines) return;
+    const check = () => setOverflows(el.scrollHeight > el.clientHeight + 1);
+    check();
+    if (typeof ResizeObserver !== "function") return;
+    const ro = new ResizeObserver(check);
+    ro.observe(el);
+    return () => ro.disconnect();
+  }, [clampLines]);
+  const sep = joiners ?? { sep: ", ", last: " and " };
+  const names = people.map((p) => p.name).reduce((acc, n, i, all) => (i === 0 ? n : acc + (i === all.length - 1 ? sep.last : sep.sep) + n), "");
+  const byline = (
+    <Byline
+      cite
+      people={people}
+      action={link ? { label: link.label, href: link.href, external: true } : undefined}
+      newTabLabel={t.newTab.trim()}
+      subtitle={role}
+      joiners={joiners}
+    />
+  );
   return (
-    <Root className={`grid grid-cols-[minmax(0,2fr)_minmax(0,3fr)] overflow-hidden rounded-[28px] bg-card ${className}`}>
-      <TapVideo {...video} label={t.watch(video.description)} />
-      <figure className="flex flex-col justify-between gap-5 p-5 md:p-7">
-        <blockquote className="font-heading text-[0.9375rem] font-medium leading-relaxed text-ink md:text-base">{quote}</blockquote>
-        <figcaption>
-          <Byline
-            cite
-            people={people}
-            action={link ? { label: link.label, href: link.href, external: true } : undefined}
-            newTabLabel={t.newTab.trim()}
-          />
-        </figcaption>
+    <Root className={`${cardVideo || cardPhoto ? "grid grid-cols-1 sm:grid-cols-[minmax(0,2fr)_minmax(0,3fr)]" : "flex"} overflow-hidden rounded-[28px] bg-card ${className}`}>
+      {cardVideo ? (
+        <TapVideo {...cardVideo} label={t.watch(cardVideo.description)} />
+      ) : cardPhoto ? (
+        <div className="relative aspect-[4/3] overflow-hidden bg-tint sm:aspect-auto sm:min-h-[16rem]">
+          {cardPhoto.media ?? (
+            // eslint-disable-next-line @next/next/no-img-element
+            <img src={cardPhoto.src} alt={cardPhoto.alt} loading="lazy" decoding="async" className="absolute inset-0 h-full w-full object-cover" style={{ objectPosition: cardPhoto.position }} />
+          )}
+        </div>
+      ) : null}
+      <figure className={`flex flex-1 flex-col justify-between gap-5 ${cardVideo || cardPhoto ? "p-5 md:p-7" : "p-6 md:p-8"}`}>
+        <div>
+          {excerpt ? (
+            <blockquote className="m-0">
+              {/* the family's drawn mark (same as PullQuote) above the line; the line itself stays clean */}
+              {excerptMarks && (
+                <svg aria-hidden="true" viewBox="0 0 48 36" className="mb-4 block h-6 w-8 fill-action-line">
+                  <path d="M0 36V22C0 10.5 6 2.6 18.2 0l2.3 5.2C14.6 7.4 11.4 11 11 16h8.6v20H0Zm27.4 0V22c0-11.5 6-19.4 18.2-22l2.3 5.2C42 7.4 38.8 11 38.4 16H47v20H27.4Z" />
+                </svg>
+              )}
+              <p className="m-0 font-heading text-[1.3rem] leading-snug font-semibold text-balance text-ink md:text-[1.5rem]">{excerpt}</p>
+            </blockquote>
+          ) : (
+            <blockquote
+              ref={quoteRef}
+              className={`font-heading text-[0.9375rem] font-medium leading-relaxed text-ink md:text-base ${clampLines ? (CLAMP[clampLines] ?? "line-clamp-5") : ""}`}
+            >
+              {quote}
+            </blockquote>
+          )}
+          {(overflows || panel) && (
+            <button
+              type="button"
+              onClick={() => setOpen(true)}
+              className="mt-3 inline-flex min-h-11 items-center gap-1 text-left font-semibold text-ink underline underline-offset-4 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ink"
+            >
+              {video && !cardVideo ? t.watchFull : t.readMore}
+            </button>
+          )}
+        </div>
+        <figcaption>{byline}</figcaption>
       </figure>
+      {(clampLines || panel) && (
+        <SidePanel open={open} onClose={() => setOpen(false)} title={names} labels={{ close: t.close }}>
+          <article className="flex flex-col gap-6 px-6 pt-2 pb-10 md:px-8">
+            {panel && video ? (
+              <div className="overflow-hidden rounded-2xl">
+                <TapVideo {...video} label={t.watch(video.description)} frameClass="relative aspect-video overflow-hidden bg-ink" />
+              </div>
+            ) : panel && photo ? (
+              <div className="overflow-hidden rounded-2xl bg-tint">
+                {/* eslint-disable-next-line @next/next/no-img-element */}
+                <img src={photo.src} alt={photo.alt} className="aspect-[4/5] max-h-[55vh] w-full object-cover" style={{ objectPosition: photo.position }} />
+              </div>
+            ) : null}
+            {panel && (
+              <header>
+                <p className="m-0 font-heading text-[0.82rem] font-bold tracking-[0.14em] text-ink-soft uppercase">{panel.eyebrow}</p>
+                {/* the same portraits as on the card: the panel is the full version of it */}
+                <div className="mt-3 flex items-center gap-3">
+                  <span aria-hidden="true" className={`flex shrink-0 ${people.length > 1 ? "-space-x-2" : ""}`}>
+                    {people.map((p) => (
+                      <Avatar key={p.name} name={p.name} photo={p.photo} size={48} ring={people.length > 1}>{p.avatar}</Avatar>
+                    ))}
+                  </span>
+                  <div className="min-w-0">
+                    <h2 className="m-0 font-heading text-2xl leading-tight font-semibold text-ink">{names}</h2>
+                    {role && <p className="m-0 mt-0.5 text-sm text-ink-soft">{role}</p>}
+                  </div>
+                </div>
+              </header>
+            )}
+            <figure className="m-0 flex flex-col gap-6">
+              <blockquote className="font-heading text-lg leading-relaxed font-medium text-ink">{quote}</blockquote>
+              {!panel && <figcaption>{byline}</figcaption>}
+            </figure>
+          </article>
+        </SidePanel>
+      )}
     </Root>
   );
 }

package/components/Text.tsx

@@ -27,5 +27,5 @@ export function Text({ as: Tag = "p", variant = "body", children, className = ""
 
 /** Prose — a run of paragraphs at reading width: 1rem between them, relaxed leading, `ink-body`. */
 export function Prose({ children, className = "" }: { children: ReactNode; className?: string }) {
-  return <div className={`max-w-2xl space-y-4 leading-relaxed text-ink-body [&>p]:m-0 ${className}`}>{children}</div>;
+  return <div className={`flex max-w-2xl flex-col gap-4 leading-relaxed text-ink-body [&>p]:m-0 ${className}`}>{children}</div>;
 }

package/components/Timeline.tsx

@@ -43,7 +43,7 @@ export function Timeline({ steps, headingLevel = "h3", linkComponent, newTabLabe
           <li key={i} className={`relative grid grid-cols-[2.75rem_minmax(0,1fr)] gap-x-4 ${last ? "" : "pb-7"}`}>
             {/* the line linking this drawing to the next */}
             {!last && <span aria-hidden="true" className="absolute bottom-1 left-[1.375rem] top-12 w-px -translate-x-1/2 bg-ink/15" />}
-            <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>
             <div>

package/components/VideoInviteCard.tsx

@@ -13,6 +13,8 @@ export type InviteLoop = {
   /** Still frame: shown before the clip loads, without JS, and with reduced motion. */
   poster: string;
   posterLarge?: string;
+  /** object-position of the loop (e.g. "center 20%" keeps the face when the frame crops it). */
+  position?: string;
 };
 
 /** Text track drawn by the browser over the full video (.vtt). */
@@ -57,8 +59,17 @@ export type VideoInviteCardProps = {
   description?: ReactNode;
   /** Idle phase: muted looping clip. */
   loop: InviteLoop;
-  /** Tap phase: the full video with sound, browser controls and captions. */
-  video: InviteVideo;
+  /** Tap phase: the full video with sound, browser controls and captions.
+   *  Omit it when there is no fitting speech yet: the card stays a silent,
+   *  looping portrait (with its pause button) and shows no play circle. */
+  video?: InviteVideo;
+  /** `plain` (default): ink text straight over the video, for footage with a light
+   *  wall behind the title. `pill`: the title on a white pill, legible over any
+   *  frame (e.g. when the face reaches the top of the crop). */
+  captionStyle?: "plain" | "pill";
+  /** Where the title sits on the idle loop: `top` (default) or `bottom` — when the
+   *  face fills the top of the frame. The play circle stays bottom-right. */
+  captionAt?: "top" | "bottom";
   /** Called when the person taps play (e.g. to pause other media on the page). */
   onPlay?: () => void;
   /** Called when the full video ends and the card goes back to the loop. */
@@ -88,7 +99,7 @@ function PlayGlyph({ size = 22 }: { size?: number }) {
  * (`rounded-2xl` in the DS scale); the consumer sets aspect/min-height via
  * `className`.
  */
-export function VideoInviteCard({ title, description, loop, video, onPlay, onEnded, labels, className = "" }: VideoInviteCardProps) {
+export function VideoInviteCard({ title, description, loop, video, captionStyle = "plain", captionAt = "top", onPlay, onEnded, labels, className = "" }: VideoInviteCardProps) {
   const [inviting, setInviting] = useState(false);
   const t = { ...EN, ...labels };
 
@@ -97,7 +108,7 @@ export function VideoInviteCard({ title, description, loop, video, onPlay, onEnd
      median on the loop, 5.86:1 on the invitation). The light text-shadow
      holds it on the darker frames. */
   const caption = (
-    <p className="inline-block text-sm font-medium leading-snug text-ink [text-shadow:0_1px_2px_rgba(255,255,255,0.5)]">
+    <p className={`inline-block text-sm font-medium leading-snug text-ink ${captionStyle === "pill" ? "rounded-2xl bg-card/90 px-3 py-2 backdrop-blur-sm" : "[text-shadow:0_1px_2px_rgba(255,255,255,0.5)]"}`}>
       <span className="block">{title}</span>
       {description && <span className="block font-normal">{description}</span>}
     </p>
@@ -105,7 +116,7 @@ export function VideoInviteCard({ title, description, loop, video, onPlay, onEnd
 
   const frame = `relative overflow-hidden rounded-2xl bg-ink ${className}`;
 
-  if (inviting) {
+  if (inviting && video) {
     return (
       <div className={frame}>
         <video
@@ -145,13 +156,15 @@ export function VideoInviteCard({ title, description, loop, video, onPlay, onEnd
         from={loop.from}
         poster={loop.poster}
         posterLarge={loop.posterLarge}
+        objectPosition={loop.position}
         labels={{ pause: t.pause, play: t.play }}
         className="absolute inset-0"
       />
       {/* right-16: the loop's pause button sits in the top-right corner. */}
-      <div className="pointer-events-none absolute top-4 left-4 right-16">{caption}</div>
+      <div className={`pointer-events-none absolute left-4 ${captionAt === "bottom" ? "bottom-4 right-24" : "top-4 right-16"}`}>{caption}</div>
       {/* Only the circle is a button, so the loop's pause button (top corner)
           stays reachable. Bottom-right, outside the face. */}
+      {video && (
       <button
         type="button"
         onClick={() => {
@@ -163,6 +176,7 @@ export function VideoInviteCard({ title, description, loop, video, onPlay, onEnd
         <PlayGlyph size={22} />
         <span className="sr-only">{t.listen}</span>
       </button>
+      )}
     </div>
   );
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@breathe-ds/ui",
-  "version": "0.5.1",
+  "version": "0.6.0",
   "description": "Breathe DS — the design system of the Cuidado Global family of sites (creeta, ttcab, metodorta). Themeable tokens + React components.",
   "license": "MIT",
   "type": "module",
@@ -60,6 +60,15 @@
     "./components/LanguageSwitcher": "./components/LanguageSwitcher.tsx",
     "./components/List": "./components/List.tsx",
     "./components/Rows": "./components/Rows.tsx",
+    "./components/SearchField": "./components/SearchField.tsx",
+    "./components/SelectField": "./components/SelectField.tsx",
+    "./components/EmptyState": "./components/EmptyState.tsx",
+    "./components/FilterChips": "./components/FilterChips.tsx",
+    "./components/StickyGroupHeading": "./components/StickyGroupHeading.tsx",
+    "./components/PublicationCard": "./components/PublicationCard.tsx",
+    "./components/PageHero": "./components/PageHero.tsx",
+    "./components/ContactRow": "./components/ContactRow.tsx",
+    "./components/FilterPill": "./components/FilterPill.tsx",
     "./components/Rail": "./components/Rail.tsx",
     "./components/Avatar": "./components/Avatar.tsx",
     "./components/Byline": "./components/Byline.tsx",
@@ -87,7 +96,10 @@
     "./components/EventList": "./components/EventList.tsx",
     "./components/EventFacts": "./components/EventFacts.tsx",
     "./components/RegistrationBox": "./components/RegistrationBox.tsx",
-    "./components/SidePanel": "./components/SidePanel.tsx"
+    "./components/SidePanel": "./components/SidePanel.tsx",
+    "./components/PullQuote": "./components/PullQuote.tsx",
+    "./components/ProfileSpotlight": "./components/ProfileSpotlight.tsx",
+    "./components/FilterBar": "./components/FilterBar.tsx"
   },
   "publishConfig": {
     "access": "public"

package/theme.css

@@ -28,6 +28,9 @@
   --color-action-tint: var(--cg-action-tint, var(--cg-surface));  /* highlighted panel/card: a 6% wash of the action color */
   --color-action-line: var(--cg-action-line, var(--cg-action));   /* border of a highlighted card (3:1 on surface) */
   --color-line: var(--cg-line);                    /* hairlines/borders */
+  --color-surface-alt: var(--cg-surface-alt, var(--cg-surface)); /* alternate section band (rhythm), a step deeper than surface */
+  --color-tint: var(--cg-tint, color-mix(in srgb, var(--cg-ink) 8%, transparent)); /* neutral fill: icon bubbles, pills, image placeholders */
+  --color-shadow: var(--cg-shadow, rgb(20 71 83));  /* hue of soft shadows (used at low alpha via color-mix) */
 
   /* ── Typography (roles; actual family comes from --cg-font-*) ── */
   --font-heading: var(--cg-font-heading, system-ui, sans-serif);
@@ -59,6 +62,20 @@
       scroll-behavior: auto;
     }
   }
+  /* No orphans or widows anywhere in the family (Felipe, 31/10/2026).
+     Headings balance their lines; running text avoids a lone word on the last
+     line (text-wrap: pretty, Chrome/Edge 117+, Safari 26+; elsewhere it falls
+     back to normal wrapping). In multi-column layouts (the testimonials
+     masonry) a paragraph never leaves a single line at the foot or the head
+     of a column. A component's own text-balance/text-pretty still wins. */
+  h1, h2, h3, h4, h5, h6, legend, caption {
+    text-wrap: balance;
+  }
+  p, li, dd, dt, blockquote, figcaption, summary, label, td, th {
+    text-wrap: pretty;
+    orphans: 2;
+    widows: 2;
+  }
   /* Tailwind v4's reset leaves buttons with the default cursor; in the family
      everything that can be tapped shows the hand: buttons, links, the summary
      of a collapse, labels of controls, selects. Disabled ones keep the arrow. */
@@ -244,3 +261,36 @@
     display: none;
   }
 }
+
+/* Paper grain: a barely-there noise in the ink color over a background (body,
+   section bands). Opt-in per site. Cards (bg-card) stay clean on top of it.
+   It does not change any text contrast (the noise averages ~3% of ink). */
+.cg-grain {
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.08 0 0 0 0 0.28 0 0 0 0 0.33 0 0 0 .11 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
+  background-repeat: repeat;
+}
+
+/* Dot grid (Cloudflare-like texture): tiny ink dots on a 16px grid. `.cg-dots`
+   covers the whole background; `.cg-dots-edges` keeps the dots only on the side
+   gutters, fading out before the content column, so reading areas stay clean.
+   Layered over whatever background the element already has (needs `relative`
+   on the element; the dots sit under its children). */
+.cg-dots,
+.cg-dots-edges {
+  position: relative;
+  isolation: isolate;
+}
+.cg-dots::before,
+.cg-dots-edges::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  z-index: -1;
+  pointer-events: none;
+  background-image: radial-gradient(color-mix(in srgb, var(--color-ink) 22%, transparent) 1px, transparent 1.2px);
+  background-size: 16px 16px;
+}
+.cg-dots-edges::before {
+  -webkit-mask-image: linear-gradient(to right, #000 0, #000 7%, transparent 17%, transparent 83%, #000 93%, #000 100%);
+  mask-image: linear-gradient(to right, #000 0, #000 7%, transparent 17%, transparent 83%, #000 93%, #000 100%);
+}

package/tokens/creeta.css

@@ -19,6 +19,7 @@
   --cg-action-tint: #eae7ed;  /* 6% magenta over mist: highlighted card */
   --cg-action-line: #ab2781;    /* magenta itself: 5.62:1 on mist */
   --cg-on-action: #ffffff;      /* white on magenta */
+  --cg-surface-alt: #e4ecee;  /* section band: ink 8.53:1 · ink-soft 5.41:1 · action-text 6.79:1 */
   --cg-line: rgb(20 71 83 / 0.16);
   --cg-font-heading: var(--font-quicksand), system-ui, sans-serif;  /* Quicksand */
   --cg-font-body: var(--font-figtree), system-ui, sans-serif;       /* Figtree */

package/tokens/ttcab.css

@@ -25,7 +25,12 @@
   --cg-action-text: #bd3f0c;   /* 4.98:1 on cream, 4.64:1 on the tint */
   --cg-action-tint: #faebdd;   /* 6% action over cream: highlighted card (ink 8.75:1) */
   --cg-action-line: #e8541e;   /* the action color itself: 3.38:1 on cream */
-  --cg-line: rgb(20 71 83 / 0.16);
+  --cg-surface-alt: #f6eedd;  /* section band: ink 8.85:1 · ink-soft 4.58:1 · action-text 4.69:1 */
+  /* Warm neutrals (30/10/2026): lines, fills and shadows come from the logo's
+     orange family (hue ~36°), never grey — the cream and the brown stay one family. */
+  --cg-line: rgb(150 108 62 / 0.22);   /* warm hairline */
+  --cg-tint: #f7ecd8;   /* icon bubbles, pills, placeholders: ink 8.73:1 · ink-soft 4.51:1 */
+  --cg-shadow: rgb(107 74 55);   /* mocha: soft shadows, used at low alpha */
   --cg-font-heading: var(--font-quicksand), system-ui, sans-serif;  /* Quicksand */
   --cg-font-body: var(--font-figtree), system-ui, sans-serif;      /* Figtree */
 }