@getvitops/core 8.0.0 → 8.0.1

package/CHANGELOG.md

@@ -1,5 +1,7 @@
 # @getvitops/core
 
+## 8.0.1
+
 ## 8.0.0
 
 ### Major Changes

package/css/patterns/lightbox.css

@@ -70,18 +70,31 @@ dialog.lightbox-dialog {
 
   .lightbox-dialog__track {
     max-inline-size: 100%;
+    /* Inert: `.carousel`'s implicit grid row is `auto`, so this percentage is
+       cyclic (CSS Sizing 3 §5.2) — it resolves against the row's own
+       content-derived size, i.e. against itself, and can never actually clamp
+       it. Kept only to state intent; the `<img>`/`<picture>` cap below is what
+       does the real work by capping the thing with an intrinsic size instead
+       of trying to cap a box that is sized BY that intrinsic size. */
     max-block-size: 100%;
 
+    /* One source of truth for the slide's breathing room: the padding below
+       and the image's block cap both read these, so they cannot drift apart. */
+    --lightbox-pad-block: 5dvh;
+    --lightbox-pad-inline: 5dvw;
+
     /* `.carousel__media`'s own rule reads this for its `object-fit` (default
        `cover`, right for a thumbnail strip, wrong for a full image — nothing
        here should be cropped). Nesting under `dialog.lightbox-dialog` gives
        this whole block higher specificity than carousel.css's bare
-       `.carousel__media` rule regardless of import order, so it always wins. */
+       `.carousel__media` rule regardless of import order, so it always wins.
+       Belt-and-braces only now: the image rule below sizes the box to the
+       image, so there's normally nothing left for `object-fit` to do. */
     --carousel-media-fit: contain;
 
-    .carousel__track {
-      max-block-size: 100%;
-    }
+    /* No `.carousel__track { max-block-size: 100% }` override here — same
+       cyclic-percentage trap as above, against `.carousel`'s own implicit
+       `auto` row. It has never applied. */
 
     /* Breathing room against the edge-to-edge dialog, on the SLIDE rather than
        the media box — a slide is the grid item `align-items: stretch` fills to
@@ -89,21 +102,31 @@ dialog.lightbox-dialog {
        glass instead of the media box's aspect-ratio doing it. */
     .carousel__slide {
       box-sizing: border-box;
-      padding: 5vh 5vw;
+      padding: var(--lightbox-pad-block) var(--lightbox-pad-inline);
+
+      /* carousel.css gives a slide `align-content: start` so a `cover`ed media
+         box (which fills the row) hugs the top. Here the media box is
+         deliberately SMALLER than the slide — it's sized to the image, not the
+         other way around — so it must be centred instead, or a 16/9 image
+         would hang from the top of a row sized by a 9/16 neighbour. */
+      align-content: center;
     }
 
     .carousel__media {
-      /* Full images vary wildly in ratio; let each fill its slide instead of
-         carousel.css's fixed 16/9 box (right for a thumbnail strip, wrong
-         here). */
+      /* Full images vary wildly in ratio; drop carousel.css's fixed 16/9 box
+         (right for a thumbnail strip, wrong here) and let the image below
+         determine the box's size. carousel.css's `block-size: 100%` is
+         deliberately NOT reinstated here: against this slide's content-sized
+         `auto` row it's the same cyclic percentage as the caps above, and it
+         only ever resolved back to the content height it was meant to cap. */
       aspect-ratio: unset;
-      block-size: 100%;
 
       /* Painted the instant a slide is visible, whether or not the full image
          has loaded yet — the morph target is never an empty box. Set per-slide
          by `<Gallery />` from the thumbnail URL; declared as a var rather than
          a bare property so a slide that omits a thumb (no placeholder) simply
-         paints nothing extra. */
+         paints nothing extra. `contain` + `center` lands on the same rect the
+         image below resolves to, so the placeholder doesn't jump on load. */
       background-image: var(--lightbox-placeholder, none);
       background-size: contain;
       background-position: center;
@@ -118,6 +141,42 @@ dialog.lightbox-dialog {
          a `view-transition-name` on the image here statically. */
     }
 
+    /* THE FIX. carousel.css sizes the media to fill its box
+       (`inline-size`/`block-size: 100%`) so `object-fit: cover` has something
+       to crop — right for a thumbnail strip, backwards for a lightbox, where
+       the BOX should instead be sized to the image. With both axes `auto` and
+       both maxes set, the browser's replaced-element min/max algorithm
+       (CSS 2.1 §10.4) does a ratio-preserving clamp against whichever axis
+       binds — so the element's border box IS the visible image, with no
+       cyclic percentages and no dependency on how many rows the grid above
+       ends up with. That also matters for two things beyond sizing: it's the
+       `view-transition-name` target (WCGallery.ts), so the morph must not
+       land on an oversized box; and it keeps the letterbox area click-through
+       for the dialog's `closedby="any"`.
+
+       A DESCENDANT selector, not a direct-child `>`: an `ImageMetadata` src
+       renders `<picture><img></picture>` (ResponsiveImage.astro), and
+       carousel.css's own rule only reaches the non-replaced `<picture>` via
+       `> :is(img, picture, …)` — `object-fit` is a no-op there, and the real
+       `<img>` inside gets no sizing at all. This selector covers both the
+       bare-`<img>` demo and the `<picture>`-wrapped case. */
+    .carousel__media :is(img, picture) {
+      /* Undo carousel.css's `inline-size/block-size: 100%` — a fixed size on
+         either axis would defeat the ratio-preserving clamp below. */
+      inline-size: auto;
+      block-size: auto;
+      max-inline-size: 100%; /* of the padded slide, i.e. ~90dvw */
+      /* The one cap that actually binds (not a percentage, so not cyclic).
+         `--lightbox-caption-space` is 0 by default — nothing here uses a
+         caption today, but `<figcaption>` stacks below the image inside this
+         same box (Gallery.astro), so a captioned gallery must set it to
+         reserve room or the slide can exceed the viewport by that height. */
+      max-block-size: calc(
+        100dvh - 2 * var(--lightbox-pad-block) - var(--lightbox-caption-space, 0px)
+      );
+      margin-inline: auto; /* centre in the full-width figure; vertical centring is the slide's align-content */
+    }
+
     .carousel__caption {
       color: inherit;
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@getvitops/core",
-  "version": "8.0.0",
+  "version": "8.0.1",
   "description": "The Vitops design-system framework — CSS partials, Lit web components, and browser polyfills.",
   "homepage": "https://docs.vitops.ca",
   "bugs": "https://github.com/getvitops/design-system/issues",
@@ -46,7 +46,7 @@
     "scroll-timeline-polyfill": "^1.1.0",
     "temporal-polyfill": "^1.0.1",
     "vitest": "4.1.9",
-    "@getvitops/utils": "8.0.0"
+    "@getvitops/utils": "8.0.1"
   },
   "engines": {
     "node": ">=24"