@getvitops/generator 0.8.0 → 1.0.0

package/assets/css/patterns/comment.css

@@ -62,7 +62,7 @@
     grid-column: 1 / -1;
     margin-inline-start: var(--comment-indent, 2rem);
     padding-inline-start: var(--comment-indent, 2rem);
-    border-inline-start: 2px solid var(--color-surface-muted);
+    border-inline-start: 2px solid var(--color-bg-surface-muted);
     display: flex;
     flex-direction: column;
     gap: 1rem;

package/assets/css/patterns/copy.css

@@ -38,7 +38,7 @@
     }
 
     &:focus-visible {
-      outline: 2px solid var(--copy-focus-color, var(--color-brand-primary-muted));
+      outline: 2px solid var(--copy-focus-color, var(--color-border-focus));
       outline-offset: 2px;
     }
   }
@@ -66,8 +66,8 @@
     font-size: 0.75rem;
     border-radius: 0.25rem;
     white-space: nowrap;
-    background: var(--surface-text);
-    color: var(--surface-bg);
+    background: var(--color-text-surface);
+    color: var(--color-bg-surface);
     opacity: 0;
     visibility: hidden;
     transition:

package/assets/css/patterns/details.css

@@ -37,15 +37,31 @@ details,
     rotate: var(--_details-icon-rotate, 90deg);
   }
 
+  /**
+   * Collapse without a transition — deliberately.
+   *
+   * 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 utilities.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.
+   *
+   * 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.
+   *
+   * 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.
+   */
   &::details-content {
     display: block;
     overflow: hidden;
     block-size: 0;
-    opacity: 0;
-    transition:
-      block-size 0.3s ease,
-      opacity 0.3s ease,
-      content-visibility 0.3s allow-discrete;
   }
 
   > summary + * {
@@ -62,13 +78,16 @@ details,
 
   &[open]::details-content {
     block-size: auto;
-    opacity: 1;
   }
 
+  /* Leading marker. The default (trailing) icon uses `margin-inline-start: auto`
+     to push itself to the end; the mirrored `margin-inline-end: auto` here did
+     the same thing to everything *after* it, so the label got shoved to the
+     opposite edge and the variant read as right-aligned text. A leading marker
+     just wants both auto margins gone — `gap` on the summary does the spacing. */
   &.details--marker-start > summary > .details-icon {
     order: -1;
-    margin-inline-start: 0;
-    margin-inline-end: auto;
+    margin-inline: 0;
   }
 
   /* Plus/minus variant — toggle two sibling icon elements */

package/assets/css/patterns/dialog.css

@@ -25,8 +25,8 @@ dialog.dialog {
   border: var(--_b);
   border-radius: var(--_br);
   box-shadow: var(--_ds);
-  background: var(--surface-bg);
-  color: var(--surface-text);
+  background: var(--color-bg-surface);
+  color: var(--color-text-surface);
   max-block-size: calc(100vh - 2rem);
 
   &::backdrop {

package/assets/css/patterns/drawer.css

@@ -15,8 +15,8 @@
   padding: var(--_p);
   border: var(--_b);
   box-shadow: var(--_ds);
-  background: var(--surface-bg);
-  color: var(--surface-text);
+  background: var(--color-bg-surface);
+  color: var(--color-text-surface);
   max-inline-size: none;
   max-block-size: none;
 
@@ -24,6 +24,21 @@
     backdrop-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.
+   *
+   * 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).
+   */
+  &.drawer--modeless::backdrop {
+    background: none;
+    backdrop-filter: none;
+  }
+
   &,
   &.drawer--left {
     inset-block: 0;

package/assets/css/patterns/forms.css

@@ -32,7 +32,7 @@
 
   .form-group__error {
     font-size: var(--form-error-size, 0.75rem);
-    color: var(--color-danger-bold);
+    color: var(--color-text-danger);
     display: flex;
     align-items: center;
     gap: 0.25rem;
@@ -87,7 +87,7 @@ fieldset.fieldset,
   border: var(--_b);
   border-radius: var(--_br);
   padding: var(--_p);
-  background: var(--surface-bg);
+  background: var(--color-bg-surface);
 }
 
 /* ── Range + colour controls ───────────────────────────────────────────────── */
@@ -95,7 +95,7 @@ fieldset.fieldset,
  * natively, in both appearances, with no pseudo-element rewriting. The colour
  * swatch only needs its chrome removed so the well fills the control box. */
 input[type='range'] {
-  accent-color: var(--range-accent, var(--ui-primary-solid));
+  accent-color: var(--range-accent, var(--color-bg-ui-primary-solid));
   inline-size: 100%;
   min-inline-size: 0;
 }
@@ -202,7 +202,7 @@ input[type='color'] {
     block-size: var(--_check-size);
     border: var(--_b);
     border-radius: var(--_br);
-    background: var(--surface-bg);
+    background: var(--color-bg-surface);
     color: #fff;
     display: flex;
     align-items: center;
@@ -225,8 +225,8 @@ input[type='color'] {
   }
 
   input:checked + .custom-check__box {
-    background: var(--brand-primary-solid);
-    border-color: var(--brand-primary-solid);
+    background: var(--color-bg-brand-primary-solid);
+    border-color: var(--color-bg-brand-primary-solid);
 
     .custom-check__indicator {
       opacity: 1;
@@ -235,7 +235,7 @@ input[type='color'] {
   }
 
   input:focus-visible + .custom-check__box {
-    outline: 2px solid var(--check-focus-color, var(--color-brand-primary-muted));
+    outline: 2px solid var(--check-focus-color, var(--color-border-focus));
     outline-offset: 2px;
   }
 
@@ -288,7 +288,7 @@ input[type='color'] {
     inline-size: var(--_switch-width);
     block-size: var(--_switch-height);
     border-radius: var(--br-switch-track, var(--br-pill, 999px));
-    background: var(--color-surface-muted);
+    background: var(--color-bg-surface-muted);
     transition: background-color 0.2s ease;
   }
 
@@ -306,7 +306,7 @@ input[type='color'] {
   }
 
   input:checked + .switch__track {
-    background: var(--brand-primary-solid);
+    background: var(--color-bg-brand-primary-solid);
 
     .switch__thumb {
       inset-inline-start: calc(100% - var(--_switch-thumb-size) - 2px);
@@ -314,7 +314,7 @@ input[type='color'] {
   }
 
   input:focus-visible + .switch__track {
-    outline: 2px solid var(--switch-focus-color, var(--color-brand-primary-muted));
+    outline: 2px solid var(--switch-focus-color, var(--color-border-focus));
     outline-offset: 2px;
   }
 
@@ -360,7 +360,7 @@ select.custom-select {
   cursor: pointer;
 
   &:focus-visible {
-    outline: 2px solid var(--select-focus-color, var(--color-brand-primary-muted));
+    outline: 2px solid var(--select-focus-color, var(--color-border-focus));
     outline-offset: 2px;
   }
 }

package/assets/css/patterns/grouped.css

@@ -9,7 +9,7 @@
   --_bs: var(--bs, solid);
   border-width: var(--_bw);
   border-style: var(--_bs);
-  border-color: var(--bc, var(--color-surface-xl, currentColor));
+  border-color: var(--bc, var(--color-border-surface, currentColor));
 }
 
 /* ── Group — collapse border-radius (+ shared borders) across direct children ─

package/assets/css/patterns/icon.css

@@ -57,11 +57,11 @@
   transition: background-color 0.15s ease;
 
   &:hover {
-    background: var(--color-surface-muted);
+    background: var(--color-bg-surface-muted);
   }
 
   &:focus-visible {
-    outline: 2px solid var(--icon-button-focus-color, var(--color-brand-primary-muted));
+    outline: 2px solid var(--icon-button-focus-color, var(--color-border-focus));
     outline-offset: 2px;
   }
 

package/assets/css/patterns/list.css

@@ -62,7 +62,7 @@
   }
 
   &.list--divided .list__item + .list__item {
-    border-block-start: 1px solid var(--list-divider-color, var(--color-surface-muted));
+    border-block-start: 1px solid var(--list-divider-color, var(--color-bg-surface-muted));
   }
 
   &.list--bordered {
@@ -110,7 +110,7 @@
     font-size: 0.75em;
     padding: 0.125rem 0.375rem;
     border-radius: var(--br-count, var(--br-pill, 999px));
-    background: var(--color-surface-muted);
+    background: var(--color-bg-surface-muted);
   }
 
   .facet-list__item--active .facet-list__name {
@@ -140,7 +140,7 @@
     border-radius: var(--_br);
 
     &:focus {
-      outline: 2px solid var(--filter-focus-color, var(--color-brand-primary-muted));
+      outline: 2px solid var(--filter-focus-color, var(--color-border-focus));
       outline-offset: 2px;
     }
   }
@@ -185,7 +185,7 @@
   .filtered-list__match {
     padding-inline: 0.125rem;
     border-radius: 0.125rem;
-    background: var(--color-warning-muted);
+    background: var(--color-bg-warning-muted);
   }
 }
 
@@ -246,7 +246,7 @@
   }
 
   &:focus-within {
-    outline: 2px solid var(--tag-list-focus-color, var(--color-brand-primary-muted));
+    outline: 2px solid var(--tag-list-focus-color, var(--color-border-focus));
     outline-offset: 2px;
   }
 }

package/assets/css/patterns/media.css

@@ -43,7 +43,7 @@
   color: inherit;
 
   &:focus-visible {
-    outline: 2px solid var(--tile-focus-color, var(--color-brand-primary-muted));
+    outline: 2px solid var(--tile-focus-color, var(--color-border-focus));
     outline-offset: 2px;
   }
 

package/assets/css/patterns/nav.css

@@ -13,7 +13,7 @@ nav:has(> .nav-items) {
 
 .nav-header {
   padding-bottom: 1rem;
-  border-bottom: 1px solid var(--nav-border-color, var(--color-surface-muted));
+  border-bottom: 1px solid var(--nav-border-color, var(--color-bg-surface-muted));
 }
 
 .nav-items {
@@ -49,7 +49,7 @@ nav:has(> .nav-items) {
   flex-direction: column;
   gap: 1rem;
   padding-top: 1rem;
-  border-top: 1px solid var(--nav-border-color, var(--color-surface-muted));
+  border-top: 1px solid var(--nav-border-color, var(--color-bg-surface-muted));
 }
 
 /* ── Dropdown submenu ─────────────────────────────────────────────────────── */
@@ -106,7 +106,7 @@ nav:has(> .nav-items) {
     border-radius: 0.375rem;
 
     &:hover {
-      background-color: var(--color-surface-muted);
+      background-color: var(--color-bg-surface-muted);
     }
   }
 }
@@ -131,8 +131,8 @@ nav:has(> .nav-items) {
   inset: 0;
   height: 100dvh;
   width: 100%;
-  background: var(--surface-bg);
-  color: var(--surface-text);
+  background: var(--color-bg-surface);
+  color: var(--color-text-surface);
   opacity: 0;
   translate: -100%;
   transition-timing-function: var(--interact-easing, ease);

package/assets/css/patterns/notification.css

@@ -18,8 +18,8 @@
   border: var(--_b);
   border-radius: var(--_br);
   box-shadow: var(--_ds);
-  background: var(--surface-bg);
-  color: var(--surface-text);
+  background: var(--color-bg-surface);
+  color: var(--color-text-surface);
   animation: notification-enter 0.3s ease;
 
   &.notification--exiting {
@@ -77,7 +77,7 @@
     inset-block-end: 0;
     inset-inline: 0;
     block-size: 3px;
-    background: var(--brand-primary-solid);
+    background: var(--color-bg-brand-primary-solid);
     border-radius: 0 0 var(--_br) var(--_br);
     transform-origin: left;
     animation: notification-progress var(--notification-duration, 5s) linear forwards;

package/assets/css/patterns/scroll-based.css

@@ -123,7 +123,7 @@
 
   .scroll-progress__bar {
     block-size: 100%;
-    background: var(--scroll-progress-color, var(--brand-primary-solid));
+    background: var(--scroll-progress-color, var(--color-bg-brand-primary-solid));
     transform-origin: left;
     animation: scroll-progress-grow linear;
     animation-timeline: scroll(root);

package/assets/css/patterns/scroll-target.css

@@ -18,7 +18,7 @@
    (deferred.ts) on engines without `scroll-target-group` support. */
 .scroll-target-group a:target-current,
 .scroll-target-group a.is-current {
-  color: var(--scroll-target-active-color, var(--brand-primary-solid));
+  color: var(--scroll-target-active-color, var(--color-bg-brand-primary-solid));
 }
 
 .scroll-target-group--indicator a {
@@ -47,7 +47,7 @@
 .scroll-target-group--bar a:target-current::before,
 .scroll-target-group--indicator a.is-current::before,
 .scroll-target-group--bar a.is-current::before {
-  background-color: var(--scroll-target-active-color, var(--brand-primary-solid));
+  background-color: var(--scroll-target-active-color, var(--color-bg-brand-primary-solid));
 }
 
 .scroll-target-group--bar a {
@@ -107,7 +107,7 @@
 
 .toc-sidebar a:target-current,
 .toc-sidebar a.is-current {
-  color: var(--scroll-target-active-color, var(--brand-primary-solid));
+  color: var(--scroll-target-active-color, var(--color-bg-brand-primary-solid));
   font-weight: 500;
 }
 

package/assets/css/patterns/sitenav.css

@@ -47,11 +47,11 @@
   border-radius: var(--br-control, 0.375rem);
 
   &:hover {
-    background: var(--color-surface-muted);
+    background: var(--color-bg-surface-muted);
   }
 
   &:focus-visible {
-    outline: 2px solid var(--sitenav-focus-color, var(--color-brand-primary-muted));
+    outline: 2px solid var(--sitenav-focus-color, var(--color-border-focus));
     outline-offset: 2px;
   }
 }
@@ -73,8 +73,8 @@
   max-inline-size: 100dvw;
   padding: 1.5rem;
   padding-block-start: 3.5rem; /* clearance for the close button */
-  background: var(--surface-bg);
-  color: var(--surface-text);
+  background: var(--color-bg-surface);
+  color: var(--color-text-surface);
   border: none;
   box-shadow: var(--ds-panel);
   overflow-y: auto;
@@ -149,11 +149,11 @@
   border-radius: var(--br-control, 0.375rem);
 
   &:hover {
-    background: var(--color-surface-muted);
+    background: var(--color-bg-surface-muted);
   }
 
   &:focus-visible {
-    outline: 2px solid var(--sitenav-focus-color, var(--color-brand-primary-muted));
+    outline: 2px solid var(--sitenav-focus-color, var(--color-border-focus));
     outline-offset: 2px;
   }
 }
@@ -280,8 +280,8 @@
       min-inline-size: 13rem;
       padding: 0.5rem;
       overflow: visible;
-      background: var(--surface-bg);
-      color: var(--surface-text);
+      background: var(--color-bg-surface);
+      color: var(--color-text-surface);
       border: var(--b-panel);
       border-radius: var(--br-panel);
       box-shadow: var(--ds-panel);
@@ -366,8 +366,8 @@
       min-inline-size: 13rem;
       padding: 0.5rem;
       overflow: visible;
-      background: var(--surface-bg);
-      color: var(--surface-text);
+      background: var(--color-bg-surface);
+      color: var(--color-text-surface);
       border: var(--b-panel);
       border-radius: var(--br-panel);
       box-shadow: var(--ds-panel);
@@ -453,8 +453,8 @@
       min-inline-size: 13rem;
       padding: 0.5rem;
       overflow: visible;
-      background: var(--surface-bg);
-      color: var(--surface-text);
+      background: var(--color-bg-surface);
+      color: var(--color-text-surface);
       border: var(--b-panel);
       border-radius: var(--br-panel);
       box-shadow: var(--ds-panel);
@@ -540,8 +540,8 @@
       min-inline-size: 13rem;
       padding: 0.5rem;
       overflow: visible;
-      background: var(--surface-bg);
-      color: var(--surface-text);
+      background: var(--color-bg-surface);
+      color: var(--color-text-surface);
       border: var(--b-panel);
       border-radius: var(--br-panel);
       box-shadow: var(--ds-panel);

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

@@ -38,11 +38,11 @@
   transition: background-color 0.15s ease;
 
   &:hover {
-    background: var(--color-surface-muted);
+    background: var(--color-bg-surface-muted);
   }
 
   &:focus-visible {
-    outline: 2px solid var(--split-link-focus-color, var(--color-brand-primary-muted));
+    outline: 2px solid var(--split-link-focus-color, var(--color-border-focus));
     outline-offset: 2px;
   }
 
@@ -71,8 +71,8 @@
   border: var(--_b);
   border-radius: var(--_br);
   box-shadow: var(--_ds);
-  background: var(--surface-bg);
-  color: var(--surface-text);
+  background: var(--color-bg-surface);
+  color: var(--color-text-surface);
 }
 
 /* Top-layer popover: anchored + placed via position-area. */

package/assets/css/patterns/subgrid.css

@@ -3,51 +3,97 @@
  * Consumes the generated token cascade (src/css/generated/tokens.css).
  */
 
-/* ── Subgrid — content-aligned cards/tables via CSS subgrid ────────────────── */
+/* ── Subgrid — content-aligned cards/tables via CSS subgrid ────────────────────
+ *
+ * Each item spans `--subgrid-row-span` row tracks of the parent and re-declares
+ * them with `grid-template-rows: subgrid`, so the tranches inside every item —
+ * head, body, footer — land on the same row lines no matter how much content
+ * each one holds.
+ *
+ *   <ul class="subgrid" style="--subgrid-cols: 3; --subgrid-row-span: 3">
+ *
+ * Public custom properties:
+ *   --subgrid-cols      columns (default 3)
+ *   --subgrid-row-span  row tracks each item spans, i.e. tranches per item (2)
+ *   --subgrid-gap       the grid gap — between columns, and between tranches (1.5rem)
+ *   --subgrid-row-gap   EXTRA space between wrapped rows of items (0); see below
+ */
 .subgrid {
-  --_items-per-row: var(--items-per-row, 3);
-  --_rows-per-item: var(--rows-per-item, 2);
-  --_subgrid-gap: var(--subgrid-gap, 1.5rem);
+  --_cols: var(--subgrid-cols, 3);
+  --_row-span: var(--subgrid-row-span, 2);
+  --_gap: var(--subgrid-gap, 1.5rem);
+  --_row-gap: var(--subgrid-row-gap, 0px);
 
   display: grid;
-  grid-template-columns: repeat(var(--_items-per-row), 1fr);
-  gap: var(--_subgrid-gap);
+  grid-template-columns: repeat(var(--_cols), 1fr);
+  gap: var(--_gap);
 
   > * {
-    grid-row: span var(--_rows-per-item);
+    grid-row: span var(--_row-span);
     display: grid;
     grid-template-rows: subgrid;
   }
 
+  /* Spacing between items is the grid's job, not the flow's — neutralise the
+     `.rhythm :where(ul, ol) > li + li` margin, which reaches into any list
+     inside a prose container and outweighs `> *` on specificity. */
+  &:is(ul, ol) > li + li {
+    margin-block-start: 0;
+  }
+
+  /* The grid's own row gap is the gap between an item's *tranches*, so it can't
+     also be the gap between *rows of items* — items past the first row take an
+     extra margin instead. Computed in CSS rather than from a server-rendered
+     index because --_cols can change in a media query. Guarded the same way as
+     .stagger (animation.css): sibling-index() lacks only Firefox as of 2026,
+     and where it's missing the margin stays 0 and rows fall back to the grid
+     gap, rather than producing an invalid margin. The second selector repeats
+     the rule at the specificity rhythm forces above. */
+  @supports (--x: sibling-index()) {
+    > *,
+    &:is(ul, ol) > li + li {
+      --_row-index: round(down, calc((sibling-index() - 1) / var(--_cols)), 1);
+      margin-block-start: calc(clamp(0, var(--_row-index), 1) * var(--_row-gap));
+    }
+  }
+
+  /* Markerless when it's a list — a subgrid of cards is a list of things, and
+     the markers would sit in the gutter. */
+  &:is(ul, ol) {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+  }
+
   &.subgrid-cols-1 {
-    --_items-per-row: 1;
+    --_cols: 1;
   }
   &.subgrid-cols-2 {
-    --_items-per-row: 2;
+    --_cols: 2;
   }
   &.subgrid-cols-3 {
-    --_items-per-row: 3;
+    --_cols: 3;
   }
   &.subgrid-cols-4 {
-    --_items-per-row: 4;
+    --_cols: 4;
   }
 
   &.subgrid-rows-2 {
-    --_rows-per-item: 2;
+    --_row-span: 2;
   }
   &.subgrid-rows-3 {
-    --_rows-per-item: 3;
+    --_row-span: 3;
   }
   &.subgrid-rows-4 {
-    --_rows-per-item: 4;
+    --_row-span: 4;
   }
 
   &.subgrid-responsive {
     @media (width < 60rem) {
-      --_items-per-row: min(var(--items-per-row, 3), 2);
+      --_cols: min(var(--subgrid-cols, 3), 2);
     }
     @media (width < 40rem) {
-      --_items-per-row: 1;
+      --_cols: 1;
     }
   }
 }

package/assets/css/patterns/tag.css

@@ -41,7 +41,7 @@
   font-weight: 600;
   line-height: 1;
   border-radius: var(--br-badge-indicator, var(--br-pill, 999px));
-  background: var(--color-danger-bold);
+  background: var(--color-text-danger);
   color: #fff;
 
   &.badge-indicator--dot {

package/assets/css/patterns/text-effects.css

@@ -225,7 +225,7 @@
 
 /* ── Highlight sweep ──────────────────────────────────────────────────────── */
 .text-highlight {
-  --_highlight-color: var(--text-highlight-color, var(--color-warning-muted));
+  --_highlight-color: var(--text-highlight-color, var(--color-bg-warning-muted));
   --_highlight-duration: var(--text-highlight-duration, 0.5s);
   --_highlight-pad-block: var(--text-highlight-pad-block, 0.1em);
   --_highlight-pad-inline: var(--text-highlight-pad-inline, 0);