@redseed/redseed-ui-tailwindcss 7.70.0 → 7.73.0

package/components/dropdown_menu.css

@@ -50,3 +50,15 @@
     @apply origin-center right-1/2 translate-x-1/2;
     @apply sm:origin-top-right sm:right-0 sm:translate-x-0;
 }
+
+/* A rule between groups of options (#364).
+ *
+ * Sits in the container's `space-y-2`, so it needs no margin of its own — the 8px above
+ * and below comes from the same rule that spaces the options, and a divider that set its
+ * own margin would stack on top of it.
+ *
+ * border-t on a zero-height div rather than an <hr>: <hr> carries UA margins and a default
+ * border that would have to be reset first, and the reset is more code than the line. */
+.rsui-dropdown-divider {
+    @apply border-t border-border-primary;
+}

package/components/dropdown_option.css

@@ -7,4 +7,49 @@
 
     /* focus state */
     @apply focus-visible:bg-background-primary-invert focus-visible:outline-hidden;
-}
+}
+/* A destructive option, so Delete does not read like Copy link (#363).
+ *
+ * The base hover flips to `bg-background-primary-invert` (Grey 300), which pairs with the
+ * default ink and not with error red — hence its own pairing here rather than inheriting
+ * that one.
+ *
+ * Measured, because a pairing that looks obviously fine is exactly how #314 shipped a
+ * badge at 4.46:1:
+ *
+ *   #b42318 on white (rest)                    6.57:1   AA
+ *   #b42318 on #fecdca (hover/focus)           4.63:1   AA
+ *
+ * `background-error-invert` rather than the lighter `background-error` (#fef3f2) for the
+ * hover ground: against the white menu, #fef3f2 is 1.09:1 and barely registers as a state
+ * change, while #fecdca is 1.42:1 — which is what the existing grey hover measures (1.43:1).
+ * So the danger option's hover is exactly as perceptible as every other option's, and red
+ * instead of grey.
+ *
+ * Colour is not the only signal (WCAG 1.4.1) — the option is paired with a trash icon and
+ * an explicit verb at the call site. Stated in the prop docs, since CSS cannot enforce it. */
+.rsui-dropdown-option--danger {
+    @apply text-text-error;
+    @apply hover:bg-background-error-invert hover:text-text-error;
+    @apply focus-visible:bg-background-error-invert focus-visible:text-text-error;
+}
+
+/* The icon takes the option's tone, which it does not do on its own.
+ *
+ * `<Icon>` falls back to `primary` when no colour is named, and `.rsui-icon--primary > *`
+ * PAINTS the svg directly — a declaration beats the red this option sets, however specific
+ * the ancestor. So `<DropdownOption danger><Icon sm><TrashIcon /></Icon>` rendered a red
+ * label beside a near-black trash can, and a consuming app could not correct it: no class
+ * attribute, no style attribute.
+ *
+ * The prop docs require pairing danger with an icon for WCAG 1.4.1, so leaving that icon's
+ * colour to the call site made the component depend on external code to finish its own
+ * tone. (0,2,0) here beats icon.css's (0,1,0). currentColor so hover and focus follow the
+ * option without repeating the token.
+ *
+ * Fourth place this trap has bitten — the Toast close glyph, the Toast action, the Toast
+ * icon slot, and now here. Any component that sets a tone and accepts an <Icon> must paint
+ * it. */
+.rsui-dropdown-option--danger .rsui-icon > * {
+    color: currentColor;
+}

package/components/form_field_checkbox.css

@@ -46,6 +46,29 @@
     @apply text-text-on-color;
 }
 
+/* INDETERMINATE — some but not all. Fills the box exactly as checked does, because the
+   box is the thing being reported on and a hollow box reads as "none". The dash rather
+   than the tick is the whole distinction.
+
+   Driven by `:indeterminate`, which is a real CSS pseudo-class matching the DOM property
+   the component writes — so the glyph and what a screen reader announces ("mixed") come
+   from the same source and cannot disagree. */
+.rsui-form-field-checkbox__check input[type="checkbox"]:indeterminate {
+    @apply bg-text-primary border-text-primary;
+}
+
+.rsui-form-field-checkbox__check:has(input:indeterminate:not(:disabled)) svg {
+    @apply text-text-on-color;
+}
+
+/* No draw-on for the dash. The tick's animation strokes a path in; a two-point dash has
+   nothing to stroke, so the same keyframes just make it flicker. */
+.rsui-form-field-checkbox__check input:indeterminate ~ svg,
+.rsui-form-field-checkbox__check:has(input:indeterminate) svg {
+    animation: none;
+    stroke-dasharray: none;
+}
+
 @keyframes rsui-checkbox-tick {
     0% { stroke-dashoffset: 30; transform: scale(0.8); }
     60% { transform: scale(1.06); }

package/components/form_field_radio_group.css

@@ -33,11 +33,30 @@
     @apply sr-only;
 }
 
-/* Typography matches .rsui-form-field-radio-group__item-label — the anchors read as scale
-   options, not as field labels, and inherit their size the same way. They are not <label>
-   elements: an anchor names the end of the scale, not any one radio. */
+/* An anchor names the end of the scale, not any one radio, so it ranks under the question
+   rather than level with it.
+
+   Sized explicitly, because nothing in the radio-group chain set a size — not __items, not
+   the root, and __item-label has none either — so an anchor inherited the document's 16px.
+   Measured across the likert stories, before and after:
+
+     story              question        anchor before   anchor after
+     Likert             16px / 600      16px  (level)   14px  ranks under
+     LikertFivePoint    16px / 600      16px  (level)   14px  ranks under
+     LikertNarrow       14px / 500      16px  (LARGER)  14px  level, see below
+
+   The `lg` cases are the ones the issue was raised about and they now read correctly.
+
+   LikertNarrow is the residual: it passes no `lg`, so its question is already 14px and the
+   anchor lands level with it, separated by weight alone (500 against 400). That is still a
+   clear improvement — the anchor was BIGGER than its question before — and it is as far as
+   size can take it, because 12px would put the anchor under the brand's 14px caption floor.
+   Fixing it properly means the question growing, not the anchor shrinking.
+
+   Deliberately does NOT follow __item-label any more, which the previous comment tied it
+   to. That pairing is invisible in likert mode anyway, where __item-label is sr-only. */
 .rsui-form-field-radio-group__anchor {
-    @apply shrink-0 font-normal text-text-primary;
+    @apply shrink-0 font-normal text-sm text-text-primary;
 }
 
 .rsui-form-field-radio-group__item {

package/components/meta_info.css

@@ -164,3 +164,33 @@
 .rsui-meta-info--inline {
     @apply flex-row flex-wrap items-center gap-x-space-xs gap-y-space-xs;
 }
+
+/* A subordinate line under the value (#361). `#subtitle` is the library's convention —
+ * SectionHeader, CardHeader, SectionSlider, PageHeader, Table and CheckboxCard all have
+ * one, and MetaInfo was the only header-ish component without.
+ *
+ * It qualifies the value rather than competing with it, so it gives up the value's
+ * semibold and its near-black: normal weight, secondary tone. Same relationship the card
+ * and section subtitles have to their titles.
+ *
+ * No margin — the root is a flex column whose row gap already puts the same 4px here as it
+ * does between the label and the value. A margin would stack on top of it.
+ *
+ * Not supported with `inline`: that modifier makes the root a wrapping ROW, so a subtitle
+ * joins the row instead of sitting under the value. The two say opposite things about the
+ * shape of the field, so this is documented rather than fought with CSS. */
+.rsui-meta-info__subtitle {
+    @apply font-normal text-text-secondary;
+}
+
+.rsui-meta-info--sm .rsui-meta-info__subtitle {
+    @apply text-xs;
+}
+
+.rsui-meta-info--md .rsui-meta-info__subtitle {
+    @apply text-sm;
+}
+
+.rsui-meta-info--lg .rsui-meta-info__subtitle {
+    @apply text-base;
+}

package/components/page_header.css

@@ -22,9 +22,18 @@
     @apply w-full flex flex-col justify-between gap-y-space-md;
 }
 
+/* lg:gap-y-space-md, not lg:gap-y-0 (#265). This row is flex-wrap at every width, so once
+   the title block is wide enough that the actions cannot sit beside it — roughly the
+   1024-1279 band, or any lg header with a long subtitle — the actions wrap to a second
+   line and used to land flush against the text above them.
+
+   row-gap only applies BETWEEN wrapped lines, so the ordinary single-row lg header is
+   pixel-unchanged; there is no second line for it to open up. That is why the fix is a
+   row gap rather than padding or a margin, and why lg:gap-y-0 could be dropped outright
+   instead of being made conditional. */
 .rsui-page-header__top {
     @apply w-full flex flex-col items-start gap-y-space-xs flex-wrap;
-    @apply lg:flex-row lg:gap-y-0 lg:items-center;
+    @apply lg:flex-row lg:gap-y-space-md lg:items-center;
 }
 
 /* 16px avatar -> title, matching the card family's avatar gap, and set once as a gap
@@ -57,7 +66,7 @@
    lg:mr-4 removed. __title-text-container already supplies a 24px gap between the title
    and the status slot, so the margin added to it and the rendered gap was 40px — the
    same accidental sum the avatar had. */
-.rsui-page-header__title h1 {
+.rsui-page-header__title .rsui-page-header__heading {
     @apply text-[1.75rem] leading-[1.2] font-bold text-text-primary;
     @apply lg:text-[2.5rem] lg:leading-[1.15] lg:tracking-[-0.01em] lg:font-black;
 }
@@ -310,30 +319,40 @@
     @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.
+    /* Sized to content, and a cluster rather than a band. Straight from the standard:
+       "A grid four columns wide, only as wide as its content, so meta reads as one
+       cluster beside the title rather than a band across the page."
 
-       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.
+       That sentence rules out both things this rule has been at different times.
 
-       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.
+       It was `repeat(5, 6rem)` — a flat track, chosen because it depends on neither the
+       column count nor the content, so pressing the toggle could not move anything. But a
+       track that ignores content also ignores the room available: at 96px a real date,
+       "26 Sept 2026, 15:30 · 30 minutes", wrapped onto three lines with most of the header
+       empty beside it. A phone-width decision applied at every width.
 
-       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);
+       Then it was briefly `w-full` with `minmax(6rem, 16rem)`, which fixed the wrapping by
+       making the region span the page — precisely the band the standard rejects.
+
+       `max-content` with a 6rem floor is what the standard describes: each column as wide
+       as the fact in it, the whole cluster only as wide as it needs, and the floor keeping
+       short facts from collapsing to nothing.
+
+       The toggle-press resize comes back, and that is correct — the standard expects it
+       and gives the numbers: "Open it and the remaining five fill out the grid: 118px
+       becomes 188px, still a cluster beside the title." A grid sized to its content has to
+       change size when its content changes. Holding it still was solving a problem the
+       standard does not have.
+
+       Five tracks, not four: four for facts, and the fifth is where the toggle sits — "a
+       toggle sitting where the fifth would be, at every width". Two on a phone, because
+       four labels across 375px is a queue, not a grid. */
+    grid-template-columns: repeat(2, minmax(6rem, max-content));
 }
 
 @media (min-width: 40rem) {
     .rsui-page-header__meta-region {
-        grid-template-columns: repeat(5, 6rem);
+        grid-template-columns: repeat(5, minmax(6rem, max-content));
     }
 }
 
@@ -539,7 +558,7 @@
 
 /* Ink application is tone-agnostic: only the variable values differ, so the
    light tone resolves these to dark ink through the same rules. */
-.rsui-page-header--toned .rsui-page-header__title h1 {
+.rsui-page-header--toned .rsui-page-header__title .rsui-page-header__heading {
     color: var(--rsui-page-header-ink);
 }
 
@@ -567,7 +586,7 @@
 
    27px below lg, 36px from lg up — the twin's two sizes.
    --------------------------------------------------------------------------- */
-.rsui-page-header--tone-bloom .rsui-page-header__title h1 {
+.rsui-page-header--tone-bloom .rsui-page-header__title .rsui-page-header__heading {
     @apply font-redseed-heading text-[1.6875rem] font-semibold;
     @apply leading-[1.1] tracking-[-0.01em];
     @apply lg:text-[2.25rem] lg:leading-[1.1] lg:font-semibold;

package/components/section_header.css

@@ -1,17 +1,26 @@
+/* min-w-0, not overflow-hidden, for the useResponsiveWidth feedback loop (mobile width
+   briefly misreported, widened content re-triggers the observer, locking the broken
+   layout in).
+
+   Both were added together in 64bcce98 for that one loop: `overflow-hidden` here and
+   `min-w-0` on __header below. Only the min-width half does the work. An overflow-hidden
+   box is a scroll container, so its automatic minimum size drops to zero — that is the
+   whole mechanism, and `min-w-0` states it directly instead of buying it as a side effect
+   of clipping. Measured in a 320px flex container: overflow-hidden 318px, nothing 344.84px
+   (the loop), min-width:0 318px. Identical protection.
+
+   The clipping was never wanted and has cost twice. It clipped an open dropdown menu in
+   the header (c3c2a994 added a :has() carve-out, deleted here along with the rule it was
+   carving out of), and it clips the actions themselves: a default-size button leaves the
+   header exactly 0px of headroom, so its 4px focus ring is cropped flat — measured, and
+   the reason #385 sees a button lose its bottom edge. A header must render what it was
+   handed, and a focus ring is not optional. */
 .rsui-section-header {
-    @apply flex flex-col gap-x-space-md gap-y-space-md transition-all;
+    @apply flex flex-col gap-x-space-md gap-y-space-md transition-all min-w-0;
     @apply md:flex-row md:justify-between md:items-center;
     @apply border-b border-transparent;
 }
 
-/* overflow-hidden guards against a useResponsiveWidth feedback loop (mobile
-   width briefly misreported, widened content re-triggers the observer,
-   locking the broken layout in). Opt out while a dropdown menu is open in
-   the header — otherwise the menu gets clipped by this boundary. */
-.rsui-section-header:not(:has(.rsui-dropdown-menu__container--open)) {
-    @apply overflow-hidden;
-}
-
 /* The --divider class was being set by SectionHeader.vue with no rule behind it, so
    showDivider did nothing. Implemented the way CardHeader does it — a transparent
    bottom border on the base, coloured here — and the prop's default flips to false in

package/components/table.css

@@ -60,3 +60,21 @@
 .rsui-table__footer {
     @apply w-full border-t border-border-primary overflow-hidden py-space-sm px-space-lg;
 }
+
+/* The selection column. Content-width, because a checkbox does not need a share of the
+   table and a column that grows pushes the data it sits beside off the screen first.
+   Centred so the boxes form a straight line down the page rather than tracking the
+   varying width of whatever is in the cell. */
+.rsui-table__select-cell {
+    @apply w-px whitespace-nowrap text-center align-middle;
+}
+
+/* The checkbox brings its own field spacing, which is right in a form and wrong in a table
+   cell — it made the selection column taller than every other row. */
+.rsui-table__select-cell .rsui-form-field-slot {
+    @apply gap-0;
+}
+
+.rsui-table__select-cell .rsui-form-field-checkbox__checkbox {
+    @apply justify-center;
+}

package/components/toast.css

@@ -32,24 +32,34 @@
     @apply text-sm font-medium;
     @apply bg-background-primary-contrast text-text-on-color border border-transparent;
 
-    /* BOTTOM-LEFT, and it must clear two things the toast cannot see.
-
-       --rsui-toast-offset is the sticky action bar. The standards are explicit that a
-       toast sits ABOVE such a bar and never over it — the bar owns the bottom edge —
-       but only the page knows whether it has one, and how tall. Set it on :root, NOT on
-       a wrapper: the toast is teleported to the body, so a custom property declared on
-       an ancestor in the consumer's tree never reaches it. The default of 0 means an
-       ordinary page needs nothing.
+    /* BOTTOM-LEFT, and it must clear three things the toast cannot see. Both offsets
+       below go on :root, NOT on a wrapper: the toast is teleported to the body, so a
+       custom property declared anywhere in the consumer's component tree never reaches
+       it. Both default to 0, so an ordinary page sets neither.
+
+       --rsui-toast-offset moves it UP. Written for a sticky action bar — the standards
+       are explicit that a toast sits above one and never over it, because the bar owns
+       the bottom edge — but it serves any furniture parked in that corner. In the LMS
+       that is the Help Scout Beacon launcher.
+
+       --rsui-toast-offset-inline moves it IN, and exists for the same reason one corner
+       can hold two things: clearing a launcher vertically is not enough if the toast then
+       sits flush to the viewport edge while the launcher is indented, because the two
+       read as misaligned rather than stacked. The page knows its own left gutter; the
+       toast cannot. (Unsuffixed is the vertical axis, for backwards compatibility with
+       the name that shipped in 10.1.0.)
 
        env(safe-area-inset-bottom) is the home indicator. A toast is the last thing above
        the bottom edge on a phone, so the inset is a FLOOR under the spacing rather than
        an addition to it — the same max() shape drawer.css and modal.css already use. */
-    left: 1rem;
+    left: calc(1rem + var(--rsui-toast-offset-inline, 0px));
     bottom: calc(max(1rem, env(safe-area-inset-bottom)) + var(--rsui-toast-offset, 0px));
 
     /* Brief, so it is never a paragraph. Wide enough for a sentence, capped so it does
-       not stretch across a desktop, and held off both edges on a narrow screen. */
-    max-width: min(28rem, calc(100vw - 2rem));
+       not stretch across a desktop, and held off both edges on a narrow screen — the
+       inline offset is subtracted too, or pushing the toast right would run it off the
+       opposite edge on a phone. */
+    max-width: min(28rem, calc(100vw - 2rem - var(--rsui-toast-offset-inline, 0px)));
 }
 
 /* The message is the only part allowed to grow, so the action and the close button keep

package/package.json

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