@redseed/redseed-ui-tailwindcss 7.68.0 → 7.69.0

package/components/modal.css

@@ -61,8 +61,29 @@
     @apply sticky top-0 z-1 p-0 bg-background-secondary shrink-0 text-lg font-semibold;
 }
 
+/* ---------------------------------------------------------------------------
+   Padding, and why it is written as three shorthands rather than @apply p-*
+
+   Each region used to pay for all four of its own sides — `p-space-md` on all
+   three — so the 16px below the header met the 16px above the body: 32px
+   between a dialog's title and its first line, 32px again before the buttons,
+   against 16px at the edges. The seams ended up twice the margin, which is
+   what you get when neighbours both pay for the gap between them.
+
+   So the two INNER edges are zeroed and the body carries them. Each region
+   still behaves when one of the others is absent, which matters because all
+   three modifiers are independent props a consumer can turn off.
+
+   The values are Material's dialog: 24 at every edge, 16 from the headline to
+   the supporting text, 24 from the supporting text to the buttons.
+
+   Longhand rather than Tailwind's `p-*` utilities on purpose — these are
+   three-value shorthands with a different value per edge, and `@apply
+   pt-space-lg px-space-lg pb-0` is four utilities to say what one declaration
+   says, with the seam buried in the last one.
+   --------------------------------------------------------------------------- */
 .rsui-modal__header--padded {
-    @apply p-space-md;
+    padding: 1.5rem 1.5rem 0;
 }
 
 .rsui-modal__body {
@@ -71,8 +92,11 @@
     scrollbar-width: none;
 }
 
+/* Carries both seams — 16px up to the header, 24px down to the footer — as well
+   as its own side edges. With no footer the 24px is simply the bottom of the
+   dialog, which is the same number, so nothing special is needed for that case. */
 .rsui-modal__body--padded {
-    @apply p-space-md;
+    padding: 1rem 1.5rem 1.5rem;
 }
 
 .rsui-modal__body::-webkit-scrollbar {
@@ -85,9 +109,31 @@
     padding-bottom: max(0.5rem, env(safe-area-inset-bottom));
 }
 
+/* The footer pays for ALL FOUR of its own sides, unlike the header above.
+
+   That asymmetry is deliberate and it is about the banding. The header and body
+   share no visible boundary in the places it matters, so zeroing the header's
+   bottom edge and letting the body carry it reads as one gap. The footer does
+   not: it has its own background (background-secondary against the body's
+   primary), so the boundary is a visible edge and the buttons sit INSIDE a band
+   of their own. Borrowing the space above them from the body left them jammed
+   against the top of that band with 24px below — measured at 0 above, 24 below.
+
+   So the seam here is the body's 24px bottom plus the footer's 24px top. That is
+   more than the 24px between the title and the body, which is the right way
+   round: a button row is a different kind of thing from a paragraph, and the
+   band is already announcing that.
+
+   If the banding ever goes (the other half of #373), this should drop back to
+   `0 1.5rem 1.5rem` and let the body carry the seam, the way the header does.
+
+   The bottom keeps its safe-area floor — a footer is the last thing above the
+   home indicator on a phone, so the value is a minimum rather than a fixed
+   amount, and it rises with the padding (1rem -> 1.5rem) or a footer would sit
+   closer to the bottom edge than to its own buttons. */
 .rsui-modal__footer--padded {
-    @apply p-space-md;
-    padding-bottom: max(1rem, env(safe-area-inset-bottom));
+    padding: 1.5rem;
+    padding-bottom: max(1.5rem, env(safe-area-inset-bottom));
 }
 
 .rsui-modal__footer--start {

package/components/page_header.css

@@ -208,26 +208,107 @@
     @apply flex-1 flex flex-wrap gap-space-xs items-center justify-end;
 }
 
-.rsui-page-header__meta-action {
-    @apply flex lg:hidden;
-}
-
 .rsui-page-header__search {
     @apply w-full pt-space-xs lg:pt-0 lg:w-auto;
 }
 
-.rsui-page-header__meta-modal {
-    @apply lg:hidden;
+/* ---------------------------------------------------------------------------
+   Meta
+
+   Visible at every width. It was `hidden lg:flex`, so the facts a header exists
+   to carry vanished below 1024px and a modal reproduced them — on a phone, where
+   a reader has least context to spare and least patience for a dialog.
+
+   A grid, not a flex row, and content-width rather than full-bleed: meta reads
+   as one cluster beside the title rather than a band across the page. Four
+   columns from sm up; two on a phone, because four 16px labels in 375px is not a
+   grid, it is a queue.
+
+   The cap is `:nth-child` rather than a count in JS. `#meta` is a slot and every
+   consumer fills it with a `v-for`, so the component cannot know how many facts
+   there are — but CSS does not need to know. Past the fourth, they are hidden
+   until the toggle expands the row.
+   --------------------------------------------------------------------------- */
+/* The region is the grid. The facts sit inside a `display: contents` wrapper so
+   they become direct grid items without the toggle joining their `:nth-child`
+   sequence — see the note in PageHeader.vue. */
+.rsui-page-header__meta-region {
+    @apply grid w-fit max-w-full items-start;
+    @apply gap-x-space-lg gap-y-space-md;
+
+    /* Columns sized to content, and the SAME count in both states.
+
+       An earlier version went five columns collapsed and four expanded, so the
+       toggle would sit in the row rather than wrap. That moved every fact
+       sideways when pressed — 13.7px with `1fr`, up to 40px with `max-content`,
+       because both make a column's width depend on something the toggle changes.
+       Holding the count fixed removes the question: the toggle occupies the
+       fifth cell while collapsed, and the fifth fact takes it once expanded.
+
+       The width has to be FIXED, not `max-content`. Holding the count steady is
+       not enough on its own: `max-content` sizes each column to whatever lands in
+       it, and expanding puts different facts in different columns, so they still
+       moved — 27px, measured. A fixed track depends on neither the count nor the
+       content.
+
+       6rem, against a widest-ink measurement of 90px across every label and value
+       in the busiest real header. Anything longer wraps inside its own cell
+       rather than pushing its neighbours. */
+    grid-template-columns: repeat(2, 6rem);
 }
 
-.rsui-page-header__meta-modal__body {
-    @apply flex flex-col gap-y-space-md;
+@media (min-width: 40rem) {
+    .rsui-page-header__meta-region {
+        grid-template-columns: repeat(5, 6rem);
+    }
 }
 
 .rsui-page-header__meta {
-    @apply hidden lg:flex gap-x-space-xl;
+    display: contents;
+}
+
+/* Past the cap, hidden until expanded. `> *` rather than a component class so it
+   does not care what a consumer puts in the slot — MetaInfo today, something
+   else tomorrow. The toggle is excluded by its own rule below, which comes
+   later and wins. */
+.rsui-page-header__meta > *:nth-child(n + 5) {
+    @apply hidden;
+}
+
+.rsui-page-header__meta--expanded > *:nth-child(n + 5) {
+    @apply block;
 }
 
+/* The toggle sits where the fifth fact would be, so pressing it expands the row
+   around it rather than moving it. Always shown, whatever the cap is doing. */
+.rsui-page-header__meta-toggle {
+    /* Centred against the fact beside it, not `self-start`. A fact is a two-line
+       unit — a 16px label over a 16px value, 36px in all — so a 20px toggle
+       pinned to the top reads as belonging to the LABELS rather than to the pair.
+       Centre also survives the expanded state, where the toggle wraps to its own
+       row and has no value to sit level with. */
+    @apply inline-flex w-fit items-center whitespace-nowrap self-center;
+    @apply text-sm font-semibold no-underline cursor-pointer transition-colors;
+    @apply text-button-tertiary hover:text-button-tertiary-hover;
+    @apply hover:underline underline-offset-4 decoration-2;
+    @apply focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-button-tertiary outline-hidden;
+
+    /* min-width, because the label changes length as it toggles — "+2 more"
+       against "Show fewer" — and without a floor the row shifts sideways under
+       the pointer mid-press. Same fix CategoryList carries (#355). */
+    @apply min-w-20 justify-center;
+
+    /* The negative margin pulls it back from the grid's 32px column gap to the
+       16px CategoryList uses. 32px is right between two FACTS, which read as
+       separate label/value pairs; it is too far for an affordance trailing them,
+       and the two rows sit one above the other in the same header — `+4 more`
+       under categories and `+3 more` under meta must not be spaced differently. */
+    @apply -ms-space-md;
+}
+
+
+
+
 .rsui-page-header__avatar {
     @apply shrink-0 size-12;
 }
@@ -439,7 +520,10 @@
     color: var(--rsui-page-header-accent, var(--rsui-page-header-ink));
 }
 
-.rsui-page-header--toned .rsui-page-header__meta {
+/* On the REGION, not on `__meta`. The facts element is `display: contents` so it
+   generates no box at all — a border declared there paints nothing, and this
+   separator silently disappeared when the grid moved up a level. Measured. */
+.rsui-page-header--toned .rsui-page-header__meta-region {
     border-top: 1px solid var(--rsui-page-header-rule);
 
     @apply mt-space-md pt-space-md;
@@ -484,3 +568,19 @@
 .rsui-page-header--toned .rsui-category-list__more {
     color: var(--rsui-page-header-ink);
 }
+
+/* The meta toggle borrows the same tertiary green and disappears on the same dark
+   band — measured as near-invisible on Journey Green 800. Same fix, same reason:
+   an invisible control is worse than reaching for the tone's ink.
+
+   Hover included, because the hover colour is a second tertiary green and would
+   make the control vanish again the moment a pointer reached it. */
+.rsui-page-header--toned .rsui-page-header__meta-toggle {
+    color: var(--rsui-page-header-ink);
+}
+
+/* Hover separately: the hover colour is a second tertiary green, so without this
+   the control vanishes again the moment a pointer reaches it. */
+.rsui-page-header--toned .rsui-page-header__meta-toggle:hover {
+    color: var(--rsui-page-header-ink);
+}

package/components/section_header.css

@@ -22,8 +22,19 @@
     @apply border-border-primary;
 }
 
+/* A clickable header is a control, so it takes the library's focus ring rather
+   than the browser's. Without `outline-hidden` a `tabindex="0"` div falls through
+   to the UA default ring, which is the wrong colour and shape for this library.
+
+   Keyboard only, verified with a real click rather than a dispatched event: the
+   browser knows a genuine mouse press from a synthetic one, and `:focus-visible`
+   is false after the real thing. (A dispatched MouseEvent reports true even on a
+   plain <button>, so a probe built that way proves nothing.)
+
+   Same declaration CardHeader already carries for the same situation. */
 .rsui-section-header--clickable {
     @apply cursor-pointer;
+    @apply focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-border-primary outline-hidden;
 }
 
 .rsui-section-header__header {

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@redseed/redseed-ui-tailwindcss",
-    "version": "7.68.0",
+    "version": "7.69.0",
     "description": "RedSeed UI Tailwindcss",
     "main": "index.js",
     "style": "index.css",