@redseed/redseed-ui-tailwindcss 7.61.0 → 7.63.0

package/components/card.css

@@ -263,8 +263,17 @@
     @apply flex-1 flex flex-col relative gap-y-space-md;
 }
 
+/* No min-height. This carried a 64px floor from the original SFC-to-Tailwind migration,
+   and it was quietly setting the height of every compact card rather than protecting
+   anything: measured across all 108 docs pages, the ONLY cards it changed were
+   CheckboxCards — 8px of dead space on a body holding one row of meta (56px natural,
+   floored to 64), and 24px on a body holding nothing at all.
+
+   A card should be as tall as what is in it. A floor here also hides the real bug when a
+   body renders empty, which is that it should not have rendered — see CheckboxCard's
+   headerOnlyCard. */
 .rsui-card__content--padded {
-    @apply py-space-lg min-h-16;
+    @apply py-space-lg;
 }
 
 /* The space between the header block and the body is an INTERNAL gap, so it takes the

package/components/checkbox_card.css

@@ -74,6 +74,29 @@
 .rsui-checkbox-card__badge {
     @apply flex gap-space-xs;
 }
+/* ── The task title steps DOWN off Header 4 ─────────────────────────────────────────
+   The card family's title is Header 4 (20px semibold) and stays there. A task row is
+   not that shape: it is a list item, and at 20px semibold it was the same size as the
+   title of the card CONTAINING the list, so a task and the panel holding it carried
+   equal weight.
+
+   16px is the next step on the brand scale (16 / 20 / 28 / 40 / 64) and the last one
+   before the body floor — there is nothing below it. It is also exactly what Material
+   3 specifies for a list-item headline, and what M3 gives a card's Title Medium; the
+   card family only sits above it because a 16px title would collapse into the 16px
+   body beneath it. A task card has no body text to collapse into, so the reason for
+   the step up does not apply here.
+
+   The title still leads: semibold against a 12px medium-weight label, in primary ink
+   against tertiary.
+
+   Set on __title rather than __title-text so the whole line box comes down with it —
+   at 24px the box now matches the checkbox's own 24px exactly, so the control and the
+   text are one row rather than a control with text beside it. */
+.rsui-checkbox-card .rsui-card-header__title {
+    @apply text-base leading-6;
+}
+
 .rsui-checkbox-card__title-text--strikethrough {
     @apply line-through;
 }

package/components/meta_info.css

@@ -23,8 +23,63 @@
     @apply flex gap-x-space-xs items-center;
 }
 
+/* ── The label icon is a DECORATION OF THE LABEL, so it may never be bigger than the
+   line it sits on ───────────────────────────────────────────────────────────────────
+   It had no size rule at all, so it rendered at whatever the consumer's SVG brought
+   with it. Measured on the CustomLabelIcon story: a 20px icon against a 12px label
+   with a 16px line box. Three things wrong with that, all visible:
+
+     - the icon was 25% taller than the field's own line, so it — not the type — set
+       the row height, and the label sat off the field's rhythm
+     - at 20px against 12px type the icon read as a control rather than as part of the
+       label, which is why a bare pin or calendar in a card's meta looks like a second
+       column of buttons next to the checkbox
+     - it inherited near-black `text-primary` while the label it decorates is grey
+       `text-tertiary` — so the decoration was emphasised OVER the thing it decorates.
+       Exactly the hierarchy inversion the label/value rule below already fixed once.
+
+   The size is therefore pinned to the line box of the step it is in: 16/20/24px for
+   sm/md/lg, matching text-xs/sm/base's line-height exactly. An icon that is exactly one
+   line box tall can never change the row's height.
+
+   This deliberately overrides a size the consumer put on `<Icon>`. Every usage in the
+   library wraps the icon that way, and letting each caller pick meant the meta row's
+   height depended on the call site. Same call `.rsui-card-header__avatar` makes by
+   fixing its own width. Reach past `<Icon>`'s wrapper to the svg so a raw heroicon —
+   which is what a consumer reaches for first — works too, instead of collapsing to 0x0. */
 .rsui-meta-info__label-icon {
-    @apply flex items-center justify-center;
+    @apply flex items-center justify-center shrink-0;
+    @apply text-text-tertiary;
+}
+
+.rsui-meta-info__label-icon svg {
+    @apply size-full;
+}
+
+/* Colour, for the DEFAULT icon only. Setting `text-text-tertiary` on the box above is
+   enough for a raw svg, which inherits — but `<Icon>` paints its child directly
+   (`.rsui-icon--primary > * { color }`), and a declaration always beats an inherited
+   value however specific the ancestor. IconSlot falls back to `primary` when the
+   consumer names no colour, so the near-black was the DEFAULT, not a choice.
+
+   Scoped to --primary on purpose. `<Icon success>` or `<Icon warning>` on a meta label
+   is intent — a status marker — and keeps its colour; only the unchosen default is
+   pulled back to match the label it decorates. */
+.rsui-meta-info__label-icon .rsui-icon--primary > * {
+    @apply text-text-tertiary;
+}
+
+/* ── An avatar in the VALUE is content, not decoration ───────────────────────────────
+   So the opposite rule applies: it is allowed to set the row's height, because it is
+   part of what the field is saying rather than a marker on the label. "Connected to
+   (R) Riley" is a person, and a 16px sliver of a face is not one.
+
+   `.rsui-avatar-circle` is `w-full h-full` — AvatarText fills whatever box it is given
+   and has no size of its own, so without this it collapses in the value's flex row.
+   The initials scale with the circle; at these sizes they are a single character. */
+.rsui-meta-info__value .rsui-avatar-circle,
+.rsui-meta-info__value > img {
+    @apply shrink-0 rounded-full object-cover;
 }
 
 /* The label is the descriptor, so it recedes: medium weight in the tertiary tone. It used to
@@ -77,6 +132,35 @@
     @apply text-base;
 }
 
+/* Icon = exactly one line box of its step (text-xs/sm/base are 16/20/24px), so it
+   never inflates the row. Avatar = one step larger, because it carries content. */
+.rsui-meta-info--sm .rsui-meta-info__label-icon {
+    @apply size-4;
+}
+
+.rsui-meta-info--md .rsui-meta-info__label-icon {
+    @apply size-5;
+}
+
+.rsui-meta-info--lg .rsui-meta-info__label-icon {
+    @apply size-6;
+}
+
+.rsui-meta-info--sm .rsui-meta-info__value .rsui-avatar-circle,
+.rsui-meta-info--sm .rsui-meta-info__value > img {
+    @apply size-5 text-[0.625rem];
+}
+
+.rsui-meta-info--md .rsui-meta-info__value .rsui-avatar-circle,
+.rsui-meta-info--md .rsui-meta-info__value > img {
+    @apply size-6 text-xs;
+}
+
+.rsui-meta-info--lg .rsui-meta-info__value .rsui-avatar-circle,
+.rsui-meta-info--lg .rsui-meta-info__value > img {
+    @apply size-7 text-sm;
+}
+
 .rsui-meta-info--inline {
     @apply flex-row flex-wrap items-center gap-x-space-xs gap-y-space-xs;
 }

package/package.json

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