@getvitops/generator 2.0.0 → 3.0.0

package/assets/css/layout-utilities.css

@@ -156,43 +156,57 @@
     grid-column: fullbleed;
   }
 }
+/* Every ratio publishes `--_flex-direction` alongside `flex-direction`. Only the
+   `.flex-*` utilities used to do that, so `class="split flex-col md-split-1-2"`
+   left the variable reading `column` at ALL widths — and patterns/grouped.css
+   resolves its collapsed-border axis from a `@container style(--_flex-direction:
+   column)` query, so a `.grouped` inside a re-rowed split collapsed on the wrong
+   axis with nothing to indicate why. */
 .split-1-2 {
   flex-direction: row;
+  --_flex-direction: row;
   --_split-a: 1;
   --_split-b: 2;
 }
 .split-2-1 {
   flex-direction: row;
+  --_flex-direction: row;
   --_split-a: 2;
   --_split-b: 1;
 }
 .split-1-3 {
   flex-direction: row;
+  --_flex-direction: row;
   --_split-a: 1;
   --_split-b: 3;
 }
 .split-3-1 {
   flex-direction: row;
+  --_flex-direction: row;
   --_split-a: 3;
   --_split-b: 1;
 }
 .split-1-4 {
   flex-direction: row;
+  --_flex-direction: row;
   --_split-a: 1;
   --_split-b: 4;
 }
 .split-4-1 {
   flex-direction: row;
+  --_flex-direction: row;
   --_split-a: 4;
   --_split-b: 1;
 }
 .split-2-3 {
   flex-direction: row;
+  --_flex-direction: row;
   --_split-a: 2;
   --_split-b: 3;
 }
 .split-3-2 {
   flex-direction: row;
+  --_flex-direction: row;
   --_split-a: 3;
   --_split-b: 2;
 }
@@ -393,41 +407,49 @@
 @container (min-width: 30rem) {
   .sm-split-1-2 {
     flex-direction: row;
+    --_flex-direction: row;
     --_split-a: 1;
     --_split-b: 2;
   }
   .sm-split-2-1 {
     flex-direction: row;
+    --_flex-direction: row;
     --_split-a: 2;
     --_split-b: 1;
   }
   .sm-split-1-3 {
     flex-direction: row;
+    --_flex-direction: row;
     --_split-a: 1;
     --_split-b: 3;
   }
   .sm-split-3-1 {
     flex-direction: row;
+    --_flex-direction: row;
     --_split-a: 3;
     --_split-b: 1;
   }
   .sm-split-1-4 {
     flex-direction: row;
+    --_flex-direction: row;
     --_split-a: 1;
     --_split-b: 4;
   }
   .sm-split-4-1 {
     flex-direction: row;
+    --_flex-direction: row;
     --_split-a: 4;
     --_split-b: 1;
   }
   .sm-split-2-3 {
     flex-direction: row;
+    --_flex-direction: row;
     --_split-a: 2;
     --_split-b: 3;
   }
   .sm-split-3-2 {
     flex-direction: row;
+    --_flex-direction: row;
     --_split-a: 3;
     --_split-b: 2;
   }
@@ -441,41 +463,49 @@
 @container (min-width: 48rem) {
   .md-split-1-2 {
     flex-direction: row;
+    --_flex-direction: row;
     --_split-a: 1;
     --_split-b: 2;
   }
   .md-split-2-1 {
     flex-direction: row;
+    --_flex-direction: row;
     --_split-a: 2;
     --_split-b: 1;
   }
   .md-split-1-3 {
     flex-direction: row;
+    --_flex-direction: row;
     --_split-a: 1;
     --_split-b: 3;
   }
   .md-split-3-1 {
     flex-direction: row;
+    --_flex-direction: row;
     --_split-a: 3;
     --_split-b: 1;
   }
   .md-split-1-4 {
     flex-direction: row;
+    --_flex-direction: row;
     --_split-a: 1;
     --_split-b: 4;
   }
   .md-split-4-1 {
     flex-direction: row;
+    --_flex-direction: row;
     --_split-a: 4;
     --_split-b: 1;
   }
   .md-split-2-3 {
     flex-direction: row;
+    --_flex-direction: row;
     --_split-a: 2;
     --_split-b: 3;
   }
   .md-split-3-2 {
     flex-direction: row;
+    --_flex-direction: row;
     --_split-a: 3;
     --_split-b: 2;
   }
@@ -489,41 +519,49 @@
 @container (min-width: 64rem) {
   .lg-split-1-2 {
     flex-direction: row;
+    --_flex-direction: row;
     --_split-a: 1;
     --_split-b: 2;
   }
   .lg-split-2-1 {
     flex-direction: row;
+    --_flex-direction: row;
     --_split-a: 2;
     --_split-b: 1;
   }
   .lg-split-1-3 {
     flex-direction: row;
+    --_flex-direction: row;
     --_split-a: 1;
     --_split-b: 3;
   }
   .lg-split-3-1 {
     flex-direction: row;
+    --_flex-direction: row;
     --_split-a: 3;
     --_split-b: 1;
   }
   .lg-split-1-4 {
     flex-direction: row;
+    --_flex-direction: row;
     --_split-a: 1;
     --_split-b: 4;
   }
   .lg-split-4-1 {
     flex-direction: row;
+    --_flex-direction: row;
     --_split-a: 4;
     --_split-b: 1;
   }
   .lg-split-2-3 {
     flex-direction: row;
+    --_flex-direction: row;
     --_split-a: 2;
     --_split-b: 3;
   }
   .lg-split-3-2 {
     flex-direction: row;
+    --_flex-direction: row;
     --_split-a: 3;
     --_split-b: 2;
   }
@@ -537,41 +575,49 @@
 @container (min-width: 80rem) {
   .xl-split-1-2 {
     flex-direction: row;
+    --_flex-direction: row;
     --_split-a: 1;
     --_split-b: 2;
   }
   .xl-split-2-1 {
     flex-direction: row;
+    --_flex-direction: row;
     --_split-a: 2;
     --_split-b: 1;
   }
   .xl-split-1-3 {
     flex-direction: row;
+    --_flex-direction: row;
     --_split-a: 1;
     --_split-b: 3;
   }
   .xl-split-3-1 {
     flex-direction: row;
+    --_flex-direction: row;
     --_split-a: 3;
     --_split-b: 1;
   }
   .xl-split-1-4 {
     flex-direction: row;
+    --_flex-direction: row;
     --_split-a: 1;
     --_split-b: 4;
   }
   .xl-split-4-1 {
     flex-direction: row;
+    --_flex-direction: row;
     --_split-a: 4;
     --_split-b: 1;
   }
   .xl-split-2-3 {
     flex-direction: row;
+    --_flex-direction: row;
     --_split-a: 2;
     --_split-b: 3;
   }
   .xl-split-3-2 {
     flex-direction: row;
+    --_flex-direction: row;
     --_split-a: 3;
     --_split-b: 2;
   }

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%;
   }
 }