@breathe-ds/ui 0.6.6 → 0.6.7

package/README.md

@@ -246,7 +246,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`);

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@breathe-ds/ui",
-  "version": "0.6.6",
+  "version": "0.6.7",
   "description": "Breathe DS — the design system of the Cuidado Global family of sites (creeta, ttcab, metodorta). Themeable tokens + React components.",
   "license": "MIT",
   "type": "module",