@redseed/redseed-ui-tailwindcss 7.34.0 → 7.35.0

package/components/card_horizontal.css

@@ -0,0 +1,201 @@
+/* CardHorizontal: responsive layout.
+   Mobile (outer element width < 512px): stacked — image header above body (like a normal card).
+   Desktop (outer element width >= 512px): horizontal rail — fixed-width thumbnail left, body right.
+   Image renders at rail width × NATURAL height, pinned top-left.
+   Non-square sources (landscape 16:9, portrait 9:16) render without crop or letterbox.
+   No black background.
+
+   Breakpoint strategy: CSS container queries (container-type: inline-size on the card root).
+   The layout responds to the ELEMENT width, not the viewport width — this ensures the
+   MobileViewport story (max-width:375px at desktop viewport) renders the stacked mobile
+   layout correctly, and in general makes the card layout-agnostic.
+
+   BREAKPOINT: --container-lg = 32rem = 512px outer width.
+   Container queries measure the CONTENT-BOX inline-size. With the default 1px border on
+   each side (box-sizing: border-box), content-box = outer-size − 2px. The CSS rule uses
+   calc(32rem - 2px) so a 512px-wide outer container (content-box 510px) triggers rail layout:
+     outer container width < 512px  →  content-box < 510px  →  stacked
+     outer container width >= 512px →  content-box >= 510px →  horizontal rail
+   (32rem references --container-lg from theme.css; non-bordered variant fires at 510px+)
+   NOTE: @container conditions cannot use var() — calc(32rem - 2px) must be updated
+   manually at every @container site in this file when the breakpoint changes.
+
+   "sm+" in the comments below means the ≥512px CONTAINER state (rail layout).
+   This is NOT Tailwind's `sm` viewport breakpoint (640px). The switch is driven by
+   the card's own inline-size container query, so it fires at 512px element width
+   regardless of the viewport size. A 375px-wide card in a 1920px viewport is "mobile".
+
+   Corner rounding strategy (sm+):
+   The grid content wrapper (.rsui-card__content) gets overflow:hidden + border-radius
+   matching the card outer corner. This single layer clips all four outer card corners:
+   - tl: always clipped (image top-left at card corner).
+   - bl: image's bl IS at card bottom when image drives grid height (square, portrait).
+         When body is taller (landscape/tall-body), image bl is interior — no clip there.
+         Result: bl-radius appears exactly when image reaches card bottom-left. ✓
+   - br: body column background is clipped at card br. Image br is at the 160px column
+         boundary (interior). When the image is shorter than the card (floating state), a
+         JS-driven --floating class applies border-bottom-right-radius directly to the image
+         so it shows a visible rounded corner at its own bottom-right edge.
+   The action-layer (focus ring) is a sibling of .rsui-card__content, not a child —
+   overflow:hidden on .rsui-card__content does NOT clip the focus ring. ✓
+
+   Portrait images let the card grow to the full natural height (align-self:start on the
+   thumbnail so the portrait image drives the grid row height rather than being clipped).
+
+   Design token --ch-thumbnail-size (160px) sets the desktop rail width and the
+   desktop card min-height. Override on .rsui-card-horizontal to change. */
+
+.rsui-card-horizontal {
+    --ch-thumbnail-size: 160px;
+    /* Named container so @container queries below bind to this card, not an ancestor. */
+    @apply @container/card-horizontal;
+}
+
+/* ─────────────────────────────────────────────────
+   Content wrapper: flex-col (mobile) → grid (sm+)
+   ───────────────────────────────────────────────── */
+
+/* Child selector (not descendant) prevents leaking into nested Cards in slots.
+   flex-none overrides rsui-card__content's flex-1 so the card is content-driven. */
+.rsui-card-horizontal > .rsui-card__content {
+    /* Mobile: stack thumbnail above body */
+    @apply flex flex-col flex-none;
+}
+
+/* sm+: switch to horizontal grid with fixed thumbnail column.
+   Fixed column eliminates the flex/aspect-ratio circular-dependency that
+   caused Chrome's intrinsic-sizing bug. min-height = rail width guarantees
+   a square slot when body content is short.
+   overflow:hidden + border-radius clips all four card outer corners (see file header). */
+@container card-horizontal (min-width: calc(32rem - 2px)) /* --container-lg (32rem=512px) - 2px border */ {
+    .rsui-card-horizontal > .rsui-card__content {
+        @apply grid gap-0 overflow-hidden rounded-xl;
+        @apply grid-cols-[var(--ch-thumbnail-size)_1fr]; /* arbitrary col: token var → 160px rail + flexible body */
+        @apply min-h-(--ch-thumbnail-size); /* v4 var shorthand → min-height: var(--ch-thumbnail-size) */
+    }
+}
+
+/* ─────────────────────────────────────────────────
+   Thumbnail + image wrapper (rsui-image component in the slot)
+   ───────────────────────────────────────────────── */
+
+.rsui-card-horizontal__thumbnail {
+    /* Mobile: full-width 16:9 header at the top of the card */
+    @apply w-full overflow-hidden rounded-t-xl aspect-video;
+}
+
+/* Mobile: image fills the full 16:9 thumbnail container — no letterbox. */
+.rsui-card-horizontal__thumbnail .rsui-image {
+    @apply relative overflow-hidden w-full h-full shrink-0;
+}
+
+.rsui-card-horizontal__thumbnail .rsui-image picture {
+    /* Mobile: fills the 16:9 aspect-video container. sm+: natural height. */
+    @apply block w-full h-full;
+}
+
+.rsui-card-horizontal__thumbnail .rsui-image img {
+    /* Mobile: fill the 16:9 container with center-crop. sm+: natural ratio. */
+    @apply w-full h-full object-cover;
+}
+
+/* Raw <img> passed directly into the slot (no rsui-image wrapper) */
+.rsui-card-horizontal__thumbnail > img {
+    @apply w-full h-full object-cover shrink-0;
+}
+
+/* Fallback empty state: icon centred inside the container */
+.rsui-card-horizontal__thumbnail .rsui-image__empty {
+    @apply absolute inset-0 flex items-center justify-center;
+}
+
+/* sm+: thumbnail switches to narrow fixed-width rail; image elements switch to natural-ratio layout.
+   All five selectors grouped here so rail-layout overrides are a single-site edit. */
+@container card-horizontal (min-width: calc(32rem - 2px)) /* --container-lg (32rem=512px) - 2px border */ {
+    /* sm+: narrow fixed-width rail.
+       self-start lets a portrait image drive the grid row height (card grows).
+       rounded-tl-xl rounds the top-left corner (outer card corner).
+       bl rounding is omitted here — the grid content wrapper's overflow:hidden handles
+       the bl clip conditionally: only when the image actually reaches the card bottom.
+       flex + items-start pins the image to the top-left corner. */
+    .rsui-card-horizontal__thumbnail {
+        @apply w-auto aspect-auto self-start rounded-none rounded-tl-xl flex items-start;
+    }
+
+    /* sm+: image renders at natural aspect ratio (rail-width × natural-height), anchored top-left.
+       h-auto lets the image shrink (landscape) or grow (portrait) to its intrinsic height.
+       min-height keeps the 160px structural height when no image src is provided, so the
+       rsui-image__empty placeholder (absolute inset-0) still fills the rail correctly.
+       items-start overrides the base rsui-image flex centering so the image is
+       pinned to the top of the rail, not centred — critical for images shorter than 160px. */
+    .rsui-card-horizontal__thumbnail .rsui-image {
+        @apply h-auto items-start; /* items-start: pin image top-flush; base rsui-image uses items-center */
+        @apply min-h-(--ch-thumbnail-size); /* v4 var shorthand → min-height: var(--ch-thumbnail-size) */
+    }
+
+    .rsui-card-horizontal__thumbnail .rsui-image picture {
+        @apply h-auto;
+    }
+
+    .rsui-card-horizontal__thumbnail .rsui-image img {
+        /* Natural ratio: h-auto scales proportionally to the element width.
+           object-cover from the base rule is harmless here — the element box
+           is already at the image's natural aspect ratio so no cropping occurs. */
+        @apply h-auto;
+    }
+
+    .rsui-card-horizontal__thumbnail > img {
+        @apply h-auto; /* natural ratio at sm+ */
+    }
+}
+
+/* ─────────────────────────────────────────────────
+   Floating thumbnail (image shorter than the card)
+   Added by JS (ResizeObserver) when either:
+     • the rendered img is shorter than the 160px rail (landscape, empty state), or
+     • the body column pushes the grid row taller than the thumbnail (tall-body).
+   Applies border-bottom-right-radius to the image/container so the image shows a
+   visible rounded bottom-right corner at its floating bottom edge.
+   Scoped to sm+ because mobile uses overflow:hidden on the thumbnail itself.
+   ───────────────────────────────────────────────── */
+
+@container card-horizontal (min-width: calc(32rem - 2px)) /* --container-lg (32rem=512px) - 2px border */ {
+    /* Round all three image targets when floating: rsui-image container, its <img>, and raw direct <img>. */
+    .rsui-card-horizontal__thumbnail--floating .rsui-image,
+    .rsui-card-horizontal__thumbnail--floating .rsui-image img,
+    .rsui-card-horizontal__thumbnail--floating > img {
+        @apply rounded-br-xl;
+    }
+}
+
+/* ─────────────────────────────────────────────────
+   Body
+   ───────────────────────────────────────────────── */
+
+.rsui-card-horizontal__body {
+    /* Mobile: body fills full width below the image (self-stretch default).
+       sm+: self-start so body drives the grid row height (not stretches to it). */
+    @apply flex flex-col gap-y-2 p-4 min-w-0;
+}
+
+@container card-horizontal (min-width: calc(32rem - 2px)) /* --container-lg (32rem=512px) - 2px border */ {
+    .rsui-card-horizontal__body {
+        @apply self-start;
+    }
+}
+
+.rsui-card-horizontal__content {
+    @apply flex flex-col gap-y-1;
+}
+
+.rsui-card-horizontal__title {
+    @apply text-base font-semibold text-text-primary leading-snug;
+}
+
+.rsui-card-horizontal__description {
+    @apply text-sm text-text-secondary;
+}
+
+.rsui-card-horizontal__meta {
+    @apply flex flex-wrap items-center gap-x-3 gap-y-1;
+}

package/components.css

@@ -20,6 +20,7 @@ Please be careful when adding new components and updating the order.
 @import './components/card_group.css';
 @import './components/card.css';
 @import './components/card_header.css';
+@import './components/card_horizontal.css';
 @import './components/checkbox_card.css';
 @import './components/column_picker.css';
 @import './components/comments.css';

package/package.json

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