@breathe-ds/ui 0.6.6 → 0.6.8

package/README.md

@@ -162,6 +162,8 @@ files (`public/brand`) in the repositories, split into two components so the
 
 ```tsx
 <Curtain logo={<TtcabSymbol />} name={<TtcabWordmark />} wordmarkRatio={TTCAB_LOCKUP.wordmarkPerSymbol} tagline="…" />
+// once per session: the head script, from its own module (callable in a server layout, 0.6.8)
+// import { curtainHeadScript } from "@breathe-ds/ui/components/curtainHeadScript";
 <Lockup variant="horizontal" size="md" logo={<CreetaSymbol />} wordmark={<CreetaWordmark />} wordmarkRatio={CREETA_LOCKUP.wordmarkPerSymbol} name="creeta" />
 ```
 
@@ -246,7 +248,7 @@ from color, not from extra markup.
   shrinks the tap targets); 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. `collapseOnScroll` (reading mode): scrolling down shrinks it to a slim icon strip; scrolling up, a tap or keyboard focus brings it back; full at the top and the end (`scrollContainer` when the window is not what scrolls).
+  (ttcab). `labels` for another language. `embedded` for the demo frame. `collapseOnScroll` (reading mode): scrolling down shrinks it to a slim icon strip; scrolling up, a tap or keyboard focus brings it back; full at the top and the end (`scrollContainer` when the window is not what scrolls). `group` on a page lists it under a section title in "More" (sticky while the list scrolls).
 - **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. White capsule (`card`);
@@ -306,6 +308,12 @@ from color, not from extra markup.
   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").
+  **Rule (0.6.8): in a grid of testimonials with `panel`, the card is ONLY a quote**
+  — a short excerpt in the person's own words, large, with the drawn quote mark;
+  the whole testimonial (and its video or photo) opens in the panel on click. Pass
+  the `excerpt` the client chose (`excerptMarks={false}` for a context line that is
+  not the person's speech); without one, the card takes the first sentence.
+  Never show the long text clamped on the card.
 - **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

package/components/BottomNav.tsx

@@ -16,6 +16,9 @@ export type BottomPage = {
   Icon: IconType;
   /** Is this the current page? (the app decides: route/locale are its own) */
   active?: boolean;
+  /** Section title in the "More" panel. Pages with the same group are listed
+   *  together under it, in order of first appearance. Without it: one plain list. */
+  group?: string;
 };
 
 /** Extra exit in the "More" panel (e.g. courses on another site): address written
@@ -111,6 +114,9 @@ const tab = (active: boolean, collapsed = false) =>
 // label under the icon: in the slim bar it folds away (still read by screen readers)
 const LABEL = "w-full truncate text-center transition-all duration-200 motion-reduce:transition-none";
 
+const GROUP_TITLE =
+  "sticky -top-2 z-10 -mx-2 bg-card px-5 pt-3 pb-1.5 font-heading text-[0.7rem] font-semibold tracking-[0.12em] text-ink-soft uppercase";
+
 const row = (active?: boolean) =>
   `flex min-h-14 items-center gap-3 rounded-[18px] px-3 font-medium transition-colors duration-150 active:bg-surface focus-visible:outline focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-ink motion-reduce:transition-none ${
     active ? "bg-surface text-ink" : "text-ink"
@@ -177,7 +183,20 @@ export function BottomNav({ pages, extras = [], linkComponent, hideFrom = "lg",
       cancelAnimationFrame(raf);
     };
   }, [collapseOnScroll, scrollContainer]);
-  const slim = collapsed && !open;
+  // native popover (site mode): the panel's real state, so the bar stays full while it's open
+  const [popOpen, setPopOpen] = useState(false);
+  useEffect(() => {
+    const el = panel.current;
+    if (!el) return;
+    const onToggle = (e: Event) => {
+      const isOpen = (e as Event & { newState?: string }).newState === "open";
+      setPopOpen(isOpen);
+      if (isOpen) setCollapsed(false);
+    };
+    el.addEventListener("toggle", onToggle);
+    return () => el.removeEventListener("toggle", onToggle);
+  }, []);
+  const slim = collapsed && !open && !popOpen;
 
   useEffect(() => {
     const ul = list.current;
@@ -225,6 +244,13 @@ export function BottomNav({ pages, extras = [], linkComponent, hideFrom = "lg",
 
   const onBar = pages.slice(0, visible);
   const inMore = pages.slice(visible);
+  // "More" pages by group (order of first appearance); ungrouped ones form a group without title
+  const groups: { title?: string; items: BottomPage[] }[] = [];
+  for (const p of inMore) {
+    const g = groups.find((x) => x.title === p.group);
+    if (g) g.items.push(p);
+    else groups.push({ title: p.group, items: [p] });
+  }
   const moreActive = inMore.some((p) => p.active) || extras.some((x) => x.active);
   const pos = embedded ? "absolute" : "fixed";
   // full class names (Tailwind only generates what it finds written in the code)
@@ -233,18 +259,25 @@ export function BottomNav({ pages, extras = [], linkComponent, hideFrom = "lg",
   const panelInner = (
     <nav aria-label={t.morePages}>
       {/* One item per row: in two columns the panel got confusing. */}
-      {inMore.length > 0 && (
-        <ul className="grid list-none gap-1">
-          {inMore.map(({ href, label, Icon, active }, i) => (
-            <li key={`${i}-${href}`}>
-              <L href={href} aria-current={active ? "page" : undefined} onClick={close} className={row(active)}>
-                <span className={bubble}><Icon aria-hidden="true" size={19} strokeWidth={1.75} /></span>
-                {label}
-              </L>
-            </li>
-          ))}
-        </ul>
-      )}
+      {groups.map(({ title, items }, gi) => {
+        const headId = `${panelId}-g${gi}`;
+        return (
+          <div key={gi} className={gi > 0 ? "mt-1 border-t border-ink/10 pt-1" : undefined}>
+            {/* title sticks to the top of the panel while its list scrolls by */}
+            {title && <p id={headId} className={GROUP_TITLE}>{title}</p>}
+            <ul className="grid list-none gap-1" aria-labelledby={title ? headId : undefined}>
+              {items.map(({ href, label, Icon, active }, i) => (
+                <li key={`${i}-${href}`}>
+                  <L href={href} aria-current={active ? "page" : undefined} onClick={close} className={row(active)}>
+                    <span className={bubble}><Icon aria-hidden="true" size={19} strokeWidth={1.75} /></span>
+                    {label}
+                  </L>
+                </li>
+              ))}
+            </ul>
+          </div>
+        );
+      })}
       {extras.length > 0 && (
         <ul className={`grid list-none gap-1${inMore.length > 0 ? " mt-1 border-t border-ink/10 pt-1" : ""}`}>
           {extras.map(({ href, label, Icon, description, external, active }, i) => {
@@ -289,7 +322,13 @@ export function BottomNav({ pages, extras = [], linkComponent, hideFrom = "lg",
         className={`${pos} inset-x-3 ${slim ? "bottom-1.5" : "bottom-3"} z-50 pb-[env(safe-area-inset-bottom)] transition-[bottom] duration-200 ease-[cubic-bezier(.23,1,.32,1)] motion-reduce:transition-none [view-transition-name:barra]${hide}`}
         // slim: a tap anywhere on the bar only brings it back (doesn't navigate);
         // keyboard focus brings it back too (a mouse/touch focus doesn't, or the tap would navigate)
-        onClickCapture={slim ? (e) => { e.preventDefault(); e.stopPropagation(); setCollapsed(false); } : undefined}
+        // …except "More": the hamburger is a clear intent, it expands AND opens the panel in one tap
+        onClickCapture={slim ? (e) => {
+          setCollapsed(false);
+          if ((e.target as Element).closest?.("[data-more]")) return;
+          e.preventDefault();
+          e.stopPropagation();
+        } : undefined}
         onFocus={(e) => { if ((e.target as Element).matches?.(":focus-visible")) setCollapsed(false); }}
       >
         <ul
@@ -308,6 +347,7 @@ export function BottomNav({ pages, extras = [], linkComponent, hideFrom = "lg",
             {/* React 19 knows `popoverTarget`; React 18 only passes the lowercase attribute through as is. */}
             <button
               type="button"
+              data-more=""
               {...(embedded ? { "aria-expanded": open, "aria-controls": panelId, onClick: () => setOpen((o) => !o) } : { [POPOVER_TARGET]: panelId })}
               className={tab(embedded ? open || moreActive : moreActive, slim)}
             >
@@ -340,6 +380,10 @@ const CSS = `
 .cg-more-panel{
   position:fixed; inset:auto .75rem calc(5.75rem + env(safe-area-inset-bottom)) .75rem;
   width:auto; margin:0; border:0; border-radius:26px; padding:.5rem;
+  /* long list (many pages): the panel stops below the top of the screen and
+     scrolls inside, instead of running off the top with the first items lost */
+  max-height:calc(100dvh - 5.75rem - env(safe-area-inset-bottom) - .75rem);
+  overflow-y:auto; overscroll-behavior:contain; scrollbar-width:thin;
   background:var(--color-card); color:var(--color-ink);
   box-shadow:0 20px 48px -16px rgb(0 0 0 / .35), 0 1px 2px rgb(0 0 0 / .1);
   opacity:0; transform:translateY(8px) scale(.97); transform-origin:88% 100%;
@@ -348,7 +392,7 @@ const CSS = `
 .cg-more-panel:popover-open, .cg-more-panel--embedded{ opacity:1; transform:none; }
 @starting-style{ .cg-more-panel:popover-open, .cg-more-panel--embedded{ opacity:0; transform:translateY(8px) scale(.97); } }
 .cg-more-panel::backdrop{ background:transparent; }
-.cg-more-panel--embedded{ position:absolute; z-index:50; }
+.cg-more-panel--embedded{ position:absolute; z-index:50; max-height:calc(100% - 6.5rem); }
 @media (prefers-reduced-motion:reduce){
   .cg-more-panel{ transform:none; transition:opacity 120ms ease; }
   @starting-style{ .cg-more-panel:popover-open, .cg-more-panel--embedded{ transform:none; } }

package/components/Curtain.tsx

@@ -98,16 +98,11 @@ export function Curtain({ name, tagline, logo, wordmarkRatio, symbolSide = "left
 }
 
 /**
- * Script for the <head> (before paint): marks the curtain as seen in this
- * session, so it does not repeat on navigation or reload. Without it, the
- * curtain shows on every load.
- *   // Next (app/layout):
- *   <script dangerouslySetInnerHTML={{ __html: curtainHeadScript("cg-curtain") }} />
+ * Script for the <head>: moved to `components/curtainHeadScript.ts` (2026-11-05)
+ * so a server layout can call it (this file is "use client"). Kept here for old
+ * imports from client code.
  */
-export function curtainHeadScript(storageKey = "cg-curtain") {
-  const k = JSON.stringify(storageKey);
-  return `try{var d=document.documentElement;if(sessionStorage.getItem(${k})){d.setAttribute('data-cg-curtain','seen')}else{sessionStorage.setItem(${k},'1')}}catch(e){}`;
-}
+export { curtainHeadScript } from "./curtainHeadScript";
 
 const CURTAIN_CSS = `
 .cg-curtain{

package/components/TestimonialCard.tsx

@@ -79,7 +79,11 @@ type Props = {
    *  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. */
+   *  words, never rewritten); the whole `quote` goes to the panel.
+   *  RULE (2026-11-05, Felipe): with `panel`, the card is ONLY a quote — never
+   *  the long text clamped. Pass the excerpt the client chose; without one, the
+   *  card takes the first sentence of a string `quote` (cut at a word, with "…",
+   *  when it runs long). The whole testimonial always opens in 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. */
@@ -179,8 +183,21 @@ function TapVideo({ src, youtubeId, poster: posterProp, description, withSound =
 // 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" };
 
+/** First sentence of a testimonial, for the card when no excerpt was chosen.
+ *  Long sentences are cut at a word (≤ 140 characters) with "…". */
+export function firstSentence(text: string, max = 140): string {
+  const clean = text.replace(/\s+/g, " ").trim();
+  const m = /^(.+?[.!?])(\s|$)/.exec(clean);
+  const s = m ? m[1] : clean;
+  if (s.length <= max) return s;
+  const cut = s.slice(0, max);
+  return `${cut.slice(0, cut.lastIndexOf(" ")).replace(/[,;:\s]+$/, "")}…`;
+}
+
 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 };
+  // with a panel the card is only a quote: the given excerpt, or the first sentence
+  const shownExcerpt = excerpt ?? (panel && typeof quote === "string" ? firstSentence(quote) : undefined);
   const watch = (d: string) => (typeof t.watch === "function" ? t.watch(d) : t.watch.replace("{description}", d));
   const people = authors ?? [{ name: author ?? "", photo: authorPhoto, avatar: authorAvatar }];
   const cardPhoto = mediaPlacement === "card" ? photo : undefined;
@@ -227,7 +244,7 @@ export function TestimonialCard({ quote, author, authorPhoto, authorAvatar, auth
       ) : 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 ? (
+          {shownExcerpt ? (
             <blockquote className="m-0">
               {/* the family's drawn mark (same as PullQuote) above the line; the line itself stays clean */}
               {excerptMarks && (
@@ -235,7 +252,7 @@ export function TestimonialCard({ quote, author, authorPhoto, authorAvatar, auth
                   <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>
+              <p className="m-0 font-heading text-[1.3rem] leading-snug font-semibold text-balance text-ink md:text-[1.5rem]">{shownExcerpt}</p>
             </blockquote>
           ) : (
             <blockquote

package/components/curtainHeadScript.ts

@@ -0,0 +1,13 @@
+/**
+ * Script for the <head> (before paint) of the Curtain: marks the curtain as seen
+ * in this session, so it does not repeat on navigation or reload. Without it, the
+ * curtain shows on every load. Plain module (no "use client"): a server layout
+ * can call it.
+ *   // Next (app/layout):
+ *   import { curtainHeadScript } from "@breathe-ds/ui/components/curtainHeadScript";
+ *   <script dangerouslySetInnerHTML={{ __html: curtainHeadScript("cg-curtain") }} />
+ */
+export function curtainHeadScript(storageKey = "cg-curtain") {
+  const k = JSON.stringify(storageKey);
+  return `try{var d=document.documentElement;if(sessionStorage.getItem(${k})){d.setAttribute('data-cg-curtain','seen')}else{sessionStorage.setItem(${k},'1')}}catch(e){}`;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@breathe-ds/ui",
-  "version": "0.6.6",
+  "version": "0.6.8",
   "description": "Breathe DS — the design system of the Cuidado Global family of sites (creeta, ttcab, metodorta). Themeable tokens + React components.",
   "license": "MIT",
   "type": "module",
@@ -50,6 +50,7 @@
     "./components/BottomNav": "./components/BottomNav.tsx",
     "./components/BreatheMark": "./components/BreatheMark.tsx",
     "./components/Curtain": "./components/Curtain.tsx",
+    "./components/curtainHeadScript": "./components/curtainHeadScript.ts",
     "./components/Lockup": "./components/Lockup.tsx",
     "./tokens/neutral.css": {
       "style": "./tokens/neutral.css",