@getvitops/generator 0.7.0 → 0.9.0

package/CHANGELOG.md

@@ -1,5 +1,238 @@
 # @getvitops/generator
 
+## 0.9.0
+
+### Minor Changes
+
+- **The `tailwind` format now emits the full role colour vocabulary.** It previously emitted only
+  the functional role utilities, so 87 classes — `bg-<role>-x-muted`, `bg-<role>-bold`,
+  `bg-<role>-x-bold`, `text-<role>-bold`, `text-<role>-x-bold`,
+  `border-<role>-{muted,x-muted,x-bold}`, for every role — existed in the `css` and `bricks`
+  outputs and silently did nothing in `tailwind`. Nothing in the test suite built the tailwind
+  format, so the divergence was invisible; it was found by a consumer who hand-forked four
+  background planes into their own stylesheet to work around the absence.
+
+  All three formats now render from one emitter (`roleColorUtilities()`), which resolves the
+  plane-vs-stop namespace collision explicitly instead of relying on the CSS minifier dropping a
+  shadowed rule. No class changes meaning, and the `css`/`bricks` output is unchanged.
+
+  Also fixed in the tailwind format:
+  - `colors.utilities` is now honoured. It was hardcoded to `bg`/`text`/`border`, so enabling
+    `outline`/`fill`/`stroke` worked in `css`/`bricks` and was ignored here. (For raw hue scales
+    it remains a floor rather than a ceiling — those are `@theme` colours, and Tailwind derives
+    every colour family from them on demand.)
+  - **Component container queries are no longer stripped.** The pass that drops the framework's
+    pre-expanded `md-*` breakpoint utilities (Tailwind regenerates those as `@md:`) matched every
+    `@container (min-width: …)` block, including component behaviour — most visibly the
+    sitenav's, so `.sitenav--bp-{sm,md,lg,xl}` were removed and the nav stayed in its mobile
+    layout at every width.
+
+  New: **`vitops lint`** reports framework classes in your source that resolve to nothing — the
+  failure mode where an unknown utility looks exactly like a working one. It is format-aware
+  (`md-flex-row` is a real class in `css`/`bricks` and inert in `tailwind`) and only judges
+  classes anchored to your own config, so it stays quiet on Tailwind's utilities and your own.
+
+  ```
+  vitops lint --format tailwind --src src
+  ```
+
+- **The `css` and `bricks` bundles now ship cascade layers, so a utility can override a pattern.**
+
+  `class="card bg-danger-muted"` previously tinted the card in the `tailwind` format and silently
+  did nothing in `css`/`bricks`: every colour utility was emitted before every pattern and both sat
+  at `0-1-0`, so the pattern won on source order. The bundle now emits
+
+  ```css
+  @layer vitops.base, vitops.components, vitops.utilities;
+  ```
+
+  - `vitops.base` — the UA reset and the pure `:root` token blocks
+  - `vitops.components` — the animation engine, structural layout, and every pattern
+  - `vitops.utilities` — `bg-*`, `text-*`, `border-*`, `drop-shadow-*`, `font-*`, animation
+    effects, and the display/`sr-only` families
+
+  No rule changed — 1482 rules before, 1482 after — only precedence.
+
+  **What this changes for you.** Unlayered CSS beats every cascade layer regardless of specificity,
+  so your own stylesheet, an Astro scoped `<style>`, or a Bricks-authored class now overrides the
+  framework with no `!important` and no specificity escalation. That is the intended override story
+  and the reason to layer at all.
+
+  **Migration — only if you ship a reset.** An unlayered reset will now beat the framework
+  component rules it used to lose to; a bare `p { margin: 0 }` defeats `.rhythm`. Put it in a layer
+  and declare the order **before** the stylesheet loads:
+
+  ```html
+  <style>
+    @layer my.reset, vitops.base, vitops.components, vitops.utilities;
+  </style>
+  <link rel="stylesheet" href="/styles.css" />
+  ```
+
+  Declaring it _after_ the link makes `my.reset` a name introduced later, which sorts **last** —
+  highest priority — and the reset wins anyway. That ordering rule is the one non-obvious step.
+
+  The `tailwind` format is byte-identical. Its utilities are `@utility` definitions, which Tailwind
+  already places in a layer above `components` and which are what make `hover:`/`@md:` variants
+  work; wrapping them ourselves would win the cascade and lose the variants.
+
+  Known gap: `layout.css` mixes structural rules (`.rhythm`, `.centered`) with utilities (`.m-*`,
+  `.flex`, `.split-*`) in one partial, so it sits in `vitops.components` whole and its utility half
+  cannot yet override a pattern. Splitting it is tracked separately.
+
+### Patch Changes
+
+- **Fixed: `vitops init` and `vp create` scaffolded configs referencing tokens that no longer
+  exist.** `defaultConfig()` and the EmDash template still pointed at `--color-surface-xl` and
+  `--color-surface-xxl`, aliases from the named-step colour scale removed in 0.6. A scaffolded
+  project therefore got a `card` with no background and an invalid default border colour, with
+  nothing reporting it. Both now use `--surface-bg` / `--surface-bg-muted`. The EmDash template
+  also dropped its `patterns.radii.card` key, which collided with the `card` pattern on
+  `--br-card` — the collision `validate()` has been warning about (the `panel` group already
+  supplies the same radius, so nothing changes visually).
+
+  **Fixed: `.text-reveal` rendered invisible text.** Its gradient consumed
+  `--text-reveal-color-from`/`-to` with no defaults, so unless a consumer set both, the `var()`
+  substitution failed, `background` became invalid at computed-value time, and the accompanying
+  `color: transparent` left the text with no way to render. Both tones now default to the
+  functional text tokens.
+
+  **Fixed: `.bordered` fell back to `currentColor`** via a reference to `--color-surface-xl`,
+  which the generator never emitted. It now resolves `--surface-border`.
+
+  **New: `validate()` warns when a required role is missing.** `colors.roles` is an open map —
+  any name works and generates a full token set — but the shipped component CSS references
+  `brand-primary`, `danger`, `neutral`, `surface`, `ui-primary` and `warning` with no fallback,
+  so omitting one leaves those components uncoloured. This is a warning, not an error; the
+  required list is re-derived from the CSS partials by a test so it cannot drift.
+
+  `vitops docs` and `vitops agents` now surface config warnings (on stderr, so piping `docs` is
+  unaffected). They previously discarded them, unlike `generate` and `validate`.
+
+  Docs corrections, all in the generated bundle:
+  - **Raw scale classes are frozen and do not remap in dark mode** — stated explicitly for the
+    first time, with a migration table to the role equivalents. The dark-mode guarantee only ever
+    applied to functional role tokens, and nothing said so.
+  - **Roles are extensible over a required core** — the schema description and class reference
+    read as a closed enumeration, which is why a consumer forked their own colour layer rather
+    than adding a role.
+  - **The `md:` / `@md:` / `md-` distinction** in the tailwind format: `@md:` uses the framework's
+    breakpoints, `md:` works but uses Tailwind's (which differ — `sm:` is 40rem, `@sm:` is 30rem),
+    and `md-` is silently inert. Plus a note that registering `--container-*` also re-points
+    Tailwind's `max-w-*` scale.
+  - The css and bricks bundles now carry a `/*!` banner pointing at `npx vitops docs classes`
+    (the previous plain comment was stripped by the minifier, so it never reached the file).
+
+  Contrast checking now covers **every** background plane a role emits (`bg`, `bg-muted`, and
+  `bg-bold`), not just `bg` — body text on a `card` was previously unguaranteed.
+
+- Docs now name both dark-mode attributes. The generated colour docs still described the
+  dark flip as hanging off `:root[data-brx-theme="dark"]` alone, from before the selector
+  also matched `:root[data-theme="dark"]` (the attribute `<color-scheme-toggle>` writes) —
+  so a non-Bricks consumer reading `vitops docs color` would wire up an attribute that
+  nothing matches. The selector moved into `shared.ts` as `DARK_SEL` (also exported from
+  the package index) and the docs interpolate it, so the two can't drift again.
+- c949cae: `vitops init` no longer scaffolds a config that warns on its own output.
+
+  `defaultConfig()` declared `patterns.radii.card`, a key named after the `card` pattern — the exact
+  collision `validate()` started reporting in 0.8.0. The primitive won `--br-card`, shadowing the
+  pattern's override hook and leaving its `--br-card-group` alias unreachable, so a scaffolded project
+  was warned about a config it had just been given.
+
+  The key is dropped. This is **value-preserving**: `card` belongs to the `panel` group, which already
+  carries the same `0.5rem`, so `--br-card-group` → `--br-panel` → `0.5rem` renders identically.
+
+  **Migration:** none for existing configs — your `design-system.json` is not touched. If you copied
+  the scaffold and reference `var(--br-card)` directly in hand-written CSS, note it is now an
+  _override hook_ (undefined until you set it) rather than a defined primitive; read `--br-card-group`
+  instead, or keep your own `radii` key under a name no pattern uses.
+
+- **The theme editor no longer dims the page it's editing.**
+
+  The panel used `.drawer`'s scrim and `popover="auto"`, which fought the whole purpose of a live
+  editor: the page you were tuning sat behind a 4px blur, and the first click on it dismissed the
+  panel. It is now modeless — no scrim, and clicking through to the page keeps it open. Escape still
+  closes it (wired explicitly, since `popover="manual"` doesn't provide it), as does the × button.
+
+  **New: `.drawer--modeless`.** The same treatment is available to any drawer — a side panel you work
+  _alongside_ rather than through (an inspector, a live editor, a filter rail). Pair it with
+  `popover="manual"`:
+
+  ```html
+  <div class="drawer drawer--right drawer--modeless" popover="manual">…</div>
+  ```
+
+  An `auto` popover light-dismisses on the first outside click, which is exactly the interaction a
+  modeless panel exists to permit — so `manual` is part of the pattern, not an afterthought. It also
+  drops Escape, so give the panel a visible close control.
+
+  **Added:** a drift guard tying `<wc-theme-editor>`'s dark-override selector to the generator's
+  `DARK_SEL`. The two must match or the editor's dark-mode edits land on a rule the page never
+  matches — a failure that is invisible in light mode, so nothing would have caught it.
+  - @getvitops/utils@0.9.0
+
+## 0.8.0
+
+### Minor Changes
+
+- **New: `<wc-theme-editor>`, a live theme editor you can ship with your site.**
+
+  Tune the whole design system in the browser — palette, semantic roles, type roles, spacing, layout,
+  pattern geometry, radii, shadows — with no rebuild. Edits are layered as `:root` custom-property
+  overrides, persist to localStorage, and export as CSS or as a `design-system.json` patch. It follows
+  your site's colour scheme and drives the same `data-theme` + storage key as `<color-scheme-toggle>`,
+  so the two no longer fight.
+
+  It ships as a **separate, opt-in bundle** (`@getvitops/core/editor`, ~13 kB, no Lit) and is never
+  registered in `elements.js`: a page that doesn't ask for it pays nothing.
+
+  ```js
+  // astro.config.mjs
+  getvitops({
+    css: { input: 'design-system.json', format: 'css', out: 'src/styles' },
+    editor: true,
+  });
+  ```
+
+  ```html
+  <!-- anywhere in your layout -->
+  <wc-theme-editor></wc-theme-editor>
+  ```
+
+  `editor: true` copies `editor.js` into `public/vitops/`, loads it from `<Head />`, and mirrors
+  `design-manifest.json` to `/vitops/design-manifest.json` (override with the `manifest` attribute).
+  Outside Astro, load the bundle yourself and point `manifest` at the file.
+
+  **Save straight back to your config, in dev.** `@getvitops/vite` now serves a dev-only
+  `/__vitops/design-system` endpoint: the editor POSTs its patch, the plugin deep-merges it into your
+  `design-system.json`, validates the _merged_ result, writes it back preserving the file's formatting,
+  then regenerates and reloads. The endpoint exists only under `vite dev` — on a static deploy the
+  editor detects its absence and hides the button, while everything else still works.
+
+  **Added:** `colors.roleTokens` in `design-manifest.json` — the functional token set (bg / border /
+  solid / on-solid / text / emphasis stops) precomputed per hue, in `default` and `surface` variants for
+  both appearances. Re-pointing a role at another hue needs these: `solid` is chosen by scanning the hue
+  and `on-solid` is a computed contrast value, so neither is derivable by a browser client.
+
+  **Removed:** the dead `interaction` block from `design-manifest.json` — a hardcoded
+  `{duration, easing}` literal with no schema key, no reverse-index entry, and no corresponding CSS
+  variable. Nothing could have consumed it meaningfully. The real animation knobs are
+  `--animation-duration-*` / `--custom-ease-*`.
+
+  **Fixed:** a `[popover]` reset in `popover.css` was stripping the background, padding and border from
+  any pattern used as a popover. It is imported after `drawer.css`, so at equal specificity it beat
+  `.drawer` — and `dialog` (0-0-1) too — leaving a `.drawer[popover]` transparent and unpadded despite
+  drawer.css documenting popover as supported. The reset now sits in `:where()` at zero specificity, so
+  it still overrides the UA stylesheet but any pattern class takes its surface back. Open/closed
+  behaviour is unchanged.
+
+  **Added:** `input[type="range"]` and `input[type="color"]` now have baseline styling in `forms.css`
+  (accent colour from `--ui-primary-solid`; the colour swatch picks up the control border and radius).
+
+### Patch Changes
+
+- @getvitops/utils@0.8.0
+
 ## 0.7.0
 
 ### Patch Changes

package/assets/css/animation.css

@@ -303,6 +303,16 @@
    failure leaves readable text rather than blank space. Scroll-timeline is also
    guarded — without it the text simply shows the final (to) color, still legible. */
 .text-reveal {
+  /* Both tones MUST default, and NOT to currentColor. They are consumed by the
+     gradient below, where a var() substitution failure makes `background`
+     invalid at computed-value time — which, with the `color: transparent` in
+     that same block, renders the text completely invisible rather than
+     degrading. currentColor is unusable there for the same reason: inside the
+     @supports block it resolves to that transparent value. So default to the
+     functional text tokens (they flip with the appearance) with a literal
+     backstop, since this is precisely the declaration that must never fail. */
+  --_reveal-from: var(--text-reveal-color-from, var(--neutral-text-x-muted, #9099a8));
+  --_reveal-to: var(--text-reveal-color-to, var(--neutral-text, #05070d));
   /* Fallback baseline: ordinary visible text in the start color. */
   color: var(--text-reveal-color-from, currentColor);
 }
@@ -313,8 +323,8 @@
       --text-reveal-background,
       linear-gradient(
         var(--text-reveal-slant, 90deg),
-        var(--text-reveal-color-to) 50%,
-        var(--text-reveal-color-from) 50%
+        var(--_reveal-to) 50%,
+        var(--_reveal-from) 50%
       )
     );
     background-size: 200% 100%;

package/assets/css/global.css

@@ -8,6 +8,16 @@
   font-size: 100% !important;
 }
 
+/* Drop the UA's 8px body margin. The framework owns page gutters via `.centered`
+   (--gutter), so the UA default just offsets every full-bleed surface — sticky
+   headers and `bg-*` bands end up inset by 8px with a sliver of canvas showing
+   around them. This is the only UA reset the framework makes: it deliberately
+   does NOT ship a general reset (no global box-sizing change), because that
+   would silently reflow existing consumer layouts. */
+body {
+  margin: 0;
+}
+
 @media (prefers-reduced-motion: no-preference) {
   html {
     scrollbar-gutter: stable;

package/assets/css/index.css

@@ -56,3 +56,4 @@
 @import './patterns/nav.css';
 @import './patterns/carousel.css';
 @import './patterns/copy.css';
+@import './patterns/theme-editor.css';

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/drawer.css

@@ -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

@@ -90,6 +90,37 @@ fieldset.fieldset,
   background: var(--surface-bg);
 }
 
+/* ── Range + colour controls ───────────────────────────────────────────────── */
+/* `accent-color` is the whole job for range: it themes the track fill and thumb
+ * 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));
+  inline-size: 100%;
+  min-inline-size: 0;
+}
+
+input[type='color'] {
+  --_br: var(--br-input, var(--br-control, var(--br-default)));
+
+  inline-size: var(--color-swatch-size, 2rem);
+  block-size: var(--color-swatch-size, 2rem);
+  padding: 0;
+  border: var(--b-input, var(--b-control, var(--b-default)));
+  border-radius: var(--_br);
+  background: none;
+  cursor: pointer;
+
+  &::-webkit-color-swatch-wrapper {
+    padding: 2px;
+  }
+  &::-webkit-color-swatch,
+  &::-moz-color-swatch {
+    border: none;
+    border-radius: calc(var(--_br) - 2px);
+  }
+}
+
 /* ── Input group — input flanked by icons/addons ───────────────────────────── */
 .input-group {
   --_br: var(--br-input-group, var(--br-control, var(--br-default)));

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(--surface-border, currentColor));
 }
 
 /* ── Group — collapse border-radius (+ shared borders) across direct children ─

package/assets/css/patterns/popover.css

@@ -4,14 +4,31 @@
  */
 
 /* ── Popover — native Popover API reset + anchored position variants ───────── */
-[popover] {
+
+/**
+ * The UA gives `[popover]` a padding, border and canvas background; a bare
+ * popover wants none of that. But this partial is imported *after* drawer.css /
+ * dialog.css, so at plain `[popover]` specificity (0-1-0) the reset also beat
+ * `.drawer` (0-1-0, earlier) and `dialog` (0-0-1) — silently stripping the
+ * surface off any pattern used as a popover, which is exactly what drawer.css
+ * documents itself as supporting.
+ *
+ * So the reset sits in `:where()` at zero specificity: it still overrides the UA
+ * stylesheet, and *any* explicit class takes it back. Same mechanism the `btn`
+ * pattern uses with `:where(button, .btn)`. Keep the visual reset here and the
+ * open/closed behaviour below — that must stay at real specificity so a
+ * component's own rules can't accidentally reveal a closed popover.
+ */
+:where([popover]) {
   padding: 0;
   border: none;
   background: transparent;
   color: inherit;
   overflow: visible;
   inset: auto;
+}
 
+[popover] {
   &:popover-open {
     opacity: 1;
   }

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