@getvitops/generator 2.1.0 → 3.0.0

package/assets/css/layout.css

@@ -46,10 +46,82 @@
 .rhythm > * + * {
   margin-top: calc(var(--rhythm-base) * var(--rhythm-p-p));
 }
-.rhythm > :where(h1, h2, h3, h4, h5, h6) + p {
+/* The heading pairs are defined by what a heading IS, not by a list of what can
+   sit next to one.
+   These used to enumerate the other side (`p`, then `p, pre, blockquote, table,
+   dl, ul, ol`), and an enumeration is a list that is always one element short:
+   first a `<pre>` got paragraph-to-paragraph spacing before a heading, then a
+   `<div class="marquee">` did. Any block is content; only headings are special.
+   So the rules invert — `:not(<heading>) + <heading>` — and nothing has to be
+   added here again.
+
+   `:where()` keeps the whole selector at (0,1,0), the same weight as the generic
+   `* + *` above, so SOURCE ORDER is what makes these win. Keep them below it,
+   and keep the media pairs below these — `figure + h2` matches both, and the
+   media rule is meant to take it.
+
+   A heading is also a TYPE ROLE, not just a tag: this framework's own idiom is
+   `<p class="font-heading">` inside a card, which is a heading in every sense
+   that matters to rhythm.
+
+   Those three are matched with `[class~="…"]`, not `.font-heading`, and the
+   difference is not cosmetic. `LAYER_CONTRACT` asserts that a utility's class
+   name appears first in `vitops.utilities`; writing `.font-display` here — in a
+   partial that lands in `vitops.components` — reads to that guard exactly like a
+   utility defined in the wrong layer, and it fails the build. The attribute form
+   says what is true: this rule REFERENCES the class, it does not define it. */
+.rhythm
+  > :where(
+    h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    h6,
+    [class~='font-display'],
+    [class~='font-title'],
+    [class~='font-heading']
+  )
+  + :not(
+    :where(
+      h1,
+      h2,
+      h3,
+      h4,
+      h5,
+      h6,
+      [class~='font-display'],
+      [class~='font-title'],
+      [class~='font-heading']
+    )
+  ) {
   margin-top: calc(var(--rhythm-base) * var(--rhythm-h-p));
 }
-.rhythm > p + :where(h1, h2, h3, h4, h5, h6) {
+.rhythm
+  > :not(
+    :where(
+      h1,
+      h2,
+      h3,
+      h4,
+      h5,
+      h6,
+      [class~='font-display'],
+      [class~='font-title'],
+      [class~='font-heading']
+    )
+  )
+  + :where(
+    h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    h6,
+    [class~='font-display'],
+    [class~='font-title'],
+    [class~='font-heading']
+  ) {
   margin-top: calc(var(--rhythm-base) * var(--rhythm-p-h));
 }
 .rhythm > :where(h1, h2, h3, h4, h5, h6) + :where(h1, h2, h3, h4, h5, h6) {
@@ -81,6 +153,11 @@
   --width-measure: 65ch;
   --width-breakout: 90ch;
   --width-spotlight: 120ch;
+  /* A navigation column beside content (`navshell`). In `rem`, not `ch`, unlike
+     the three above: those are reading measures and scale with the text they
+     hold, while a nav column is chrome sized in the page's own rhythm — it
+     should not get wider because the prose font has a wide `0` glyph. */
+  --width-nav: 16rem;
   --gutter: clamp(1rem, 4cqi, 3rem);
 }
 
@@ -110,6 +187,14 @@ body {
 
 .centered > * {
   grid-column: measure;
+  /* A grid item's automatic minimum size is its MIN-CONTENT size, and every
+     track here is definite (`--_measure` is a min() of two lengths; the rest are
+     minmax(0, …)). So a track child holding something with a large min-content —
+     a wide <pre>, a long unbreakable token — pushes past its track and the whole
+     document scrolls sideways. This caps the container; wrapping or scrolling
+     the CONTENT (see global.css and patterns/code.css) is what stops the visual
+     overflow. */
+  min-inline-size: 0;
 }
 
 /* Vertical rhythm region (usually on the Section) */

package/assets/css/patterns/anchor-link.css

@@ -64,3 +64,39 @@ a[target='_blank'].link--external::after {
   mask-size: contain;
   mask-repeat: no-repeat;
 }
+
+/**
+ * Skip link — the first focusable thing on a page, jumping past the chrome to
+ * the main landmark. Every site needs one and every site was hand-rolling it.
+ *
+ * `clip-path` + a 1px box rather than the old `inset-inline-start: -100vw`
+ * idiom: `100vw` includes the scrollbar gutter (`global.css` sets
+ * `scrollbar-gutter: stable`), and a negatively-positioned box DOES contribute
+ * scrollable overflow in RTL, where the page then scrolls to nothing. This
+ * version has no position to get wrong in either direction.
+ *
+ * Not `.sr-only` — that name is in the generator's TW_CLASH list, so the
+ * tailwind format ships no rule for it and a consumer on that format would get a
+ * permanently visible skip link.
+ */
+.skip-link:not(:focus-visible) {
+  position: absolute;
+  inline-size: 1px;
+  block-size: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+  border: 0;
+}
+.skip-link:focus-visible {
+  position: absolute;
+  inset-inline-start: 0.5rem;
+  inset-block-start: 0.5rem;
+  z-index: var(--z-tier-top);
+  padding: 0.5rem 0.75rem;
+  background: var(--color-bg-surface);
+  color: var(--color-text-surface);
+  border-radius: var(--br-control, 0.375rem);
+}

package/assets/css/patterns/code.css

@@ -14,4 +14,28 @@
   color: var(--color-text-neutral);
   padding: 0.1em 0.4em;
   border-radius: var(--br-default);
+
+  /* `anywhere`, not the `break-word` global.css gives prose: an inline code span
+     is usually ONE token with no break opportunity at all — a 61-character CSS
+     selector or a package path — so `break-word` never fires and it overflows
+     the measure. Breaking mid-token is the right trade for code in running text.
+     `anywhere` does affect min-content sizing, which is the point here: it lets
+     an intrinsically sized ancestor shrink instead of being held open. */
+  overflow-wrap: anywhere;
+}
+
+/* ── Code blocks. The framework had NO `pre` rule, so every consumer re-derived
+   this — and a <pre> is the widest thing on a typical docs page.
+
+   Worth knowing, because it is the reverse of what the spec reads like: making a
+   <pre> a scroll container does NOT zero its min-content contribution in Chrome.
+   Measured at 390px on this repo's own docs site, a `pre` with `overflow-x: auto`
+   still reported a 797px min-content, its parent inherited 829px, and any
+   ancestor sized under `fit-content` resolved to THAT rather than the available
+   width. `max-inline-size: 100%` is what actually caps it. ── */
+:where(pre) {
+  max-inline-size: 100%;
+  overflow-x: auto;
+  /* Don't chain a horizontal flick out to the page once the block ends. */
+  overscroll-behavior-x: contain;
 }

package/assets/css/patterns/details.css

@@ -38,30 +38,42 @@ details,
   }
 
   /**
-   * Collapse without a transition — deliberately.
+   * Animated collapse — `block-size: 0 → auto`, backed by the
+   * `interpolate-size: allow-keywords` in patterns/reveal.css.
    *
-   * This carried the canonical open/close animation (`block-size: 0 → auto` with
-   * `content-visibility` under `allow-discrete`, backed by the
-   * `interpolate-size: allow-keywords` in patterns/reveal.css). In Chrome 149 that
-   * deadlocks: `content-visibility` stays `hidden`, so the content has no layout,
-   * so `auto` resolves to `0`, so the transition has nothing to run — and the
-   * disclosure never opens *at all*. Not "opens without animating": every
-   * `<details>` on the page becomes inert, which is a total content-loss bug.
+   * This was previously disabled with a long note saying the transition
+   * DEADLOCKS: `content-visibility` stays `hidden`, the content never gets
+   * layout, `auto` resolves to `0`, and the disclosure never opens at all —
+   * total content loss, not merely a missing animation.
    *
-   * Verified against a bare `<details>` with only this stylesheet, and bisected:
-   * `transition: none` is the only thing that restores it. Transitioning only
-   * `block-size`, only `content-visibility`, `calc-size(auto, size)`, and the
-   * `grid-template-rows: 0fr → 1fr` technique all fail the same way.
+   * Re-verified on Chrome 149.0.7827.200 by the standard that note itself set:
+   * a real dispatched click on a bare `<details>`, not an `@supports` query.
+   * It opens, and it animates both ways — measured 25 → 41 → 133 → 196px on
+   * open and 196 → 132 → 25px on close.
    *
-   * So: correctness over motion. Re-add the transition only with a live
-   * cross-browser check that a first click actually expands — a passing
-   * `@supports` query is not evidence, since the syntax is valid and supported;
-   * it's the interaction that breaks.
+   * Keep BOTH properties in the transition list. `content-visibility` with
+   * `allow-discrete` is the load-bearing half: it is precisely what lets the
+   * content take layout during the transition, and dropping it is what
+   * reproduces the deadlock. If this ever regresses, the tell is a `<details>`
+   * that will not open on the first click — check a real interaction, because
+   * the syntax stays valid either way.
    */
   &::details-content {
     display: block;
     overflow: hidden;
     block-size: 0;
+
+    /* Re-added and re-verified — see the note above, which this supersedes.
+       `content-visibility` MUST be in the transition list with `allow-discrete`:
+       that is the exact thing whose absence caused the deadlock, because
+       `content-visibility: hidden` leaves the content unlaid-out and `auto`
+       resolves to 0. Behind reduced-motion, so the no-preference case keeps the
+       instant open the previous version guaranteed. */
+    @media (prefers-reduced-motion: no-preference) {
+      transition:
+        block-size var(--animation-duration) var(--custom-ease-out),
+        content-visibility var(--animation-duration) allow-discrete;
+    }
   }
 
   > summary + * {

package/assets/css/patterns/dialog.css

@@ -29,16 +29,20 @@ dialog.dialog {
   color: var(--color-text-surface);
   max-block-size: calc(100vh - 2rem);
 
-  &::backdrop {
-    backdrop-filter: blur(4px);
-  }
+  /* The scrim itself is one rule in popover.css; this only says how it should
+     look for a dialog. It also fades in/out from there, so the bespoke
+     `dialog-backdrop-enter` keyframe that used to run here is gone (it only ever
+     animated the entry). */
+  --scrim-filter: blur(4px);
 
-  &[open] {
-    animation: dialog-enter 0.3s ease;
-  }
-  &[open]::backdrop {
-    animation: dialog-backdrop-enter 0.3s ease;
-  }
+  /* The entry, as effect vars rather than a keyframe. Same three endpoints the
+     `dialog-enter` keyframe used, now run by the top-layer driver in
+     animation.css — which means the dialog also animates OUT, which it never did
+     (an `animation:` on `[open]` only ever plays once, on open). */
+  --opacity-from: 0;
+  --scale-x-from: 0.95;
+  --scale-y-from: 0.95;
+  --translate-y-from: -1rem;
 
   .dialog__header {
     display: flex;
@@ -75,25 +79,3 @@ dialog.dialog {
     margin-block-start: 1.5rem;
   }
 }
-
-@keyframes dialog-enter {
-  from {
-    opacity: 0;
-    scale: 0.95;
-    translate: 0 -1rem;
-  }
-  to {
-    opacity: 1;
-    scale: 1;
-    translate: 0 0;
-  }
-}
-
-@keyframes dialog-backdrop-enter {
-  from {
-    opacity: 0;
-  }
-  to {
-    opacity: 1;
-  }
-}

package/assets/css/patterns/drawer.css

@@ -21,24 +21,30 @@
   max-block-size: none;
 
   &::backdrop {
-    backdrop-filter: blur(4px);
+    backdrop-filter: var(--scrim-filter, blur(4px));
   }
 
   /**
-   * Modeless — a panel you work *alongside* rather than through. Drops the
-   * scrim so the page behind stays legible, which is the whole point for a
-   * live editor or an inspector: you're watching what your edits do.
+   * Each edge states WHERE IT STARTS in the animation system's own vocabulary
+   * (`--translate-<axis>-from`) instead of owning a keyframe. Add `.transition`
+   * and the top-layer driver in animation.css animates it — both ways.
    *
-   * Pair with `popover="manual"`. An `auto` popover light-dismisses on the
-   * first click outside — i.e. exactly the interaction a modeless panel exists
-   * to allow — and `manual` also drops Esc, so give it an explicit close
-   * control (and wire Esc yourself if the panel warrants it).
+   * This replaced four `@keyframes drawer-slide-in-*` driven by `animation:`,
+   * which only ever played on OPEN: the drawer's close was instant, while
+   * sitenav's transition-based copy of the same idea animated both ways.
+   *
+   * The var is set here rather than asking authors for a `.slide-*` effect
+   * class, because both would trip them up: the effect names read backwards for
+   * an edge panel (a LEFT drawer starts off-screen left and travels right, i.e.
+   * `.slide-right`), and `--slide-distance` defaults to 2rem where a drawer
+   * needs the full 100%. An explicit effect class still overrides this.
+   *
+   * EVERY edge states BOTH axes. The unset axis does not inherit a sensible
+   * zero — it inherits whatever the bare `.drawer` default left there, and the
+   * default is the left edge's `-100%`. Setting only `--translate-y-from` on
+   * `.drawer--bottom` therefore produced `translate: -100% 100%` and the panel
+   * flew in diagonally from the bottom-left corner.
    */
-  &.drawer--modeless::backdrop {
-    background: none;
-    backdrop-filter: none;
-  }
-
   &,
   &.drawer--left {
     inset-block: 0;
@@ -46,11 +52,8 @@
     block-size: 100dvh;
     inline-size: min(100dvi, var(--drawer-max-inline-size, 280px));
     border-radius: 0;
-
-    &[open],
-    &:popover-open {
-      animation: drawer-slide-in-left 0.3s ease;
-    }
+    --translate-x-from: -100%;
+    --translate-y-from: 0;
   }
 
   &.drawer--right {
@@ -58,22 +61,16 @@
     inset-inline-end: 0;
     inset-inline-start: auto;
     inline-size: min(100dvi, var(--drawer-max-inline-size, 280px));
-
-    &[open],
-    &:popover-open {
-      animation: drawer-slide-in-right 0.3s ease;
-    }
+    --translate-x-from: 100%;
+    --translate-y-from: 0;
   }
 
   &.drawer--top {
     inset-block-start: 0;
     inset-inline: 0;
     block-size: min(100dvb, var(--drawer-max-block-size, 100dvb));
-
-    &[open],
-    &:popover-open {
-      animation: drawer-slide-in-top 0.3s ease;
-    }
+    --translate-x-from: 0;
+    --translate-y-from: -100%;
   }
 
   &.drawer--bottom {
@@ -81,43 +78,7 @@
     inset-block-start: auto;
     inset-inline: 0;
     block-size: min(100dvb, var(--drawer-max-block-size, 100dvb));
-
-    &[open],
-    &:popover-open {
-      animation: drawer-slide-in-bottom 0.3s ease;
-    }
-  }
-}
-
-@keyframes drawer-slide-in-left {
-  from {
-    translate: -100% 0;
-  }
-  to {
-    translate: 0 0;
-  }
-}
-@keyframes drawer-slide-in-right {
-  from {
-    translate: 100% 0;
-  }
-  to {
-    translate: 0 0;
-  }
-}
-@keyframes drawer-slide-in-top {
-  from {
-    translate: 0 -100%;
-  }
-  to {
-    translate: 0 0;
-  }
-}
-@keyframes drawer-slide-in-bottom {
-  from {
-    translate: 0 100%;
-  }
-  to {
-    translate: 0 0;
+    --translate-x-from: 0;
+    --translate-y-from: 100%;
   }
 }

package/assets/css/patterns/dropdown.css

@@ -19,7 +19,19 @@
       opacity 0.2s ease,
       translate 0.2s ease,
       visibility 0.2s allow-discrete;
+    /* `position: absolute`, anchored to the `position: relative` host above.
+       This is the whole reason a hover dropdown ever worked or didn't: a closed
+       popover is NOT in the top layer, but it keeps the UA's
+       `[popover] { position: fixed }`. Resetting only `inset` left it fixed to
+       the VIEWPORT at whatever static position it resolved to — measured 3300px
+       below its own trigger and off-screen, so the panel faithfully faded in
+       somewhere nobody was looking, which reads exactly like "hover does
+       nothing". Anchoring it puts it under the trigger and makes it follow on
+       scroll. */
+    position: absolute;
     inset: auto;
+    inset-block-start: 100%;
+    inset-inline-start: 0;
     margin: 0;
   }
 
@@ -39,7 +51,9 @@
     padding-block-start: var(--dropdown-gap, 0.5rem);
   }
 
+  /* Was `!important`, to beat popover.css's then plain-specificity ::backdrop.
+     That rule is `:where()` (0,0,0) now, so ordinary specificity is enough. */
   > [popover]::backdrop {
-    background: transparent !important;
+    background: transparent;
   }
 }

package/assets/css/patterns/lightbox.css

@@ -52,9 +52,9 @@ dialog.lightbox-dialog {
   display: grid;
   place-items: center;
 
-  &::backdrop {
-    background: transparent;
-  }
+  /* No scrim. Stated through popover.css's token rather than overriding its
+     ::backdrop rule, so it keeps the shared fade timing. */
+  --scrim: transparent;
 
   &[open] {
     display: grid;

package/assets/css/patterns/marquee.css

@@ -1,21 +1,47 @@
 /**
  * Marquee — CSS-only infinite scrolling row/column migrated from old-css-lib.
- * Duplicate the .marquee__content for a seamless loop. Pauses on hover with the
- * --pause-hover modifier; reverses / goes vertical via modifiers.
+ *
+ *   <div class="marquee marquee--pause-hover">
+ *     <div class="marquee__content"><span class="marquee__item">…</span></div>
+ *     <div class="marquee__content" aria-hidden="true">…the same items…</div>
+ *   </div>
+ *
+ * TWO `.marquee__content` blocks, not one. Each is `min-inline-size: 100%` and the
+ * keyframe travels exactly its own width, so the second copy is what occupies the
+ * space the first vacates. With a single copy the track scrolls off and leaves
+ * blank space — which reads as "the marquee isn't working" rather than as a
+ * missing duplicate.
+ *
+ * Spacing is `--marquee-gap`, and it has to be applied in BOTH places: between
+ * items inside a copy, and between the two copies. The keyframe then travels
+ * `100% + gap`, because the seam between copies is one more gap that has to be
+ * consumed for the loop to be seamless — translate by a bare `-100%` and the
+ * items visibly bunch up once per revolution.
  */
 
 .marquee {
   --_marquee-direction: var(--marquee-direction, normal);
 
+  /* `<wc-marquee>` overrides this to `auto`, releasing the 100% floor. */
+  --_marquee-min: 100%;
+
   display: flex;
+  gap: var(--marquee-gap, 1rem);
   overflow: hidden;
   user-select: none;
   mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
 
   .marquee__content {
     display: flex;
+    gap: var(--marquee-gap, 1rem);
     flex-shrink: 0;
-    min-inline-size: 100%;
+    /* 100% pads a short copy out to the track width, which puts the leftover
+       space at the end of every copy and makes the seam gap wider than the item
+       gaps. `<wc-marquee>` sets `--_marquee-min: auto` and clones enough copies to
+       cover the track, so the copy can be its own width and every gap matches.
+       Without the element this stays 100% — the CSS-only loop still works, it
+       just needs the author to duplicate the content. */
+    min-inline-size: var(--_marquee-min, 100%);
     animation: marquee-scroll var(--marquee-duration, 20s) linear infinite;
     animation-direction: var(--_marquee-direction);
   }
@@ -54,7 +80,9 @@
     translate: 0 0;
   }
   to {
-    translate: -100% 0;
+    /* One copy + one gap. `--_marquee-distance` is the measured px value when
+       the element is present; the percentage is the CSS-only equivalent. */
+    translate: calc(-1 * var(--_marquee-distance, calc(100% + var(--marquee-gap, 1rem)))) 0;
   }
 }
 
@@ -63,6 +91,6 @@
     translate: 0 0;
   }
   to {
-    translate: 0 -100%;
+    translate: 0 calc(-1 * var(--_marquee-distance, calc(100% + var(--marquee-gap, 1rem))));
   }
 }

package/assets/css/patterns/nav.css

@@ -1,8 +1,18 @@
 /**
- * Nav — base / navbar / drawer / collapse navigation presentations migrated
- * from old-css-lib. CSS shell: drawer + submenu use the Popover API / <details>
- * with @starting-style transitions (polyfilled). The open/close toggle wiring
- * arrives with the Lit nav component; the CSS degrades to plain links without it.
+ * Nav — LEGACY. Base / drawer / collapse navigation presentations migrated from
+ * old-css-lib, superseded by the three patterns below. Kept because it ships in
+ * a published major; removal is its own breaking change.
+ *
+ * This header used to say "the open/close toggle wiring arrives with the Lit nav
+ * component". No such component was ever written, and none is planned — the
+ * house pattern is native (`popovertarget` + `[popover]`, `<details>`), which
+ * needs no JS at all beyond the Popover polyfill.
+ *
+ * Which one you actually want:
+ *   · `patterns/navbar.css`  — a horizontal row of links, with alignment.
+ *   · `patterns/sitenav.css` — navbar at width ⇄ toggle + drawer below it.
+ *   · `patterns/navshell.css` — a nav ASIDE beside main content, collapsing to a
+ *                               toggle + drawer. Nestable (site nav + on-page nav).
  */
 
 nav:has(> .nav-items) {
@@ -133,48 +143,20 @@ nav:has(> .nav-items) {
   width: 100%;
   background: var(--color-bg-surface);
   color: var(--color-text-surface);
-  opacity: 0;
-  translate: -100%;
-  transition-timing-function: var(--interact-easing, ease);
-  transition:
-    opacity 0.4s,
-    translate 0.4s,
-    overlay 0.4s allow-discrete,
-    display 0.4s allow-discrete;
+
+  /* Entry direction only. The transition, the `@starting-style` and the scrim
+     used to be restated here in full; they now come from the top-layer driver in
+     animation.css and the single `::backdrop` in popover.css. Add an effect
+     class to change the motion (`class="drawer-menu open-fade-in"`).
+
+     Timing moved with them: this was a hand-set 0.4s / 0.7s pair and is now the
+     framework's `--animation-duration` + `--custom-ease-out`, like every other
+     transition in the system. */
+  --translate-x-from: -100%;
 
   &[open],
   &:popover-open {
     display: flex;
-    opacity: 1;
-    translate: 0%;
-  }
-
-  @starting-style {
-    &[open],
-    &:popover-open {
-      opacity: 0;
-      translate: -100%;
-    }
-  }
-
-  &::backdrop {
-    background-color: transparent;
-    transition:
-      display 0.7s allow-discrete,
-      overlay 0.7s allow-discrete,
-      background-color 0.7s;
-  }
-
-  &[open]::backdrop,
-  &:popover-open::backdrop {
-    background-color: rgb(0 0 0 / 25%);
-  }
-
-  @starting-style {
-    &[open]::backdrop,
-    &:popover-open::backdrop {
-      background-color: transparent;
-    }
   }
 }
 
@@ -193,43 +175,9 @@ nav:has(> .nav-items) {
   overflow-y: auto;
 }
 
-/* ── Navbar presentation ──────────────────────────────────────────────────── */
-.navbar {
-  display: flex;
-  align-items: center;
-  gap: 2rem;
-
-  nav {
-    flex: 1;
-    flex-direction: row;
-  }
-
-  .nav-items {
-    flex: 1;
-    flex-direction: row;
-    gap: 2.25rem;
-    border-bottom: none;
-    padding-bottom: 0;
-  }
-
-  .nav-actions {
-    flex-direction: row;
-    gap: 2.25rem;
-    border-top: none;
-    padding-top: 0;
-  }
-
-  .nav-header {
-    border-bottom: none;
-    padding-bottom: 0;
-  }
-}
-
-.navbar-sticky {
-  position: sticky;
-  top: 0;
-  z-index: var(--z-tier-sticky);
-}
+/* Navbar presentation moved to patterns/navbar.css, where it is a primitive
+   rather than one half of this file's drawer⇄navbar pair. `.navbar-sticky`
+   is aliased there so existing markup keeps working. */
 
 .nav-split {
   margin-block-start: auto;