@getvitops/generator 6.0.0 → 8.0.0

package/assets/css/patterns/gallery.css

@@ -0,0 +1,64 @@
+/**
+ * Gallery — thumbnail grid whose triggers open a `.lightbox-dialog` (patterns/lightbox.css).
+ * Consumes the generated token cascade (src/css/generated/tokens.css).
+ *
+ * Split out of what used to be `.lightbox`'s grid half. The two are separate
+ * concerns — "a grid of images" and "view one full-screen" — and only the dialog
+ * half needs the `lightbox` name; the grid never was one.
+ *
+ * `<wc-gallery>` wraps this and the single `.lightbox-dialog` it opens, running the
+ * thumbnail → full-image view-transition morph; stepping between images is a
+ * `<wc-carousel>` scroll inside that dialog, not a second dialog. With no JS each
+ * `.gallery__trigger` is a real `<a href="#slide-id">` into the carousel's own
+ * `<li id="slide-id">`, and `:has(:target)` in lightbox.css is what reveals the
+ * dialog — so the grid + dialog already form a working modal lightbox, with
+ * prev/next, before any script runs.
+ */
+
+wc-gallery {
+  /* Unregistered custom elements default to `display: inline`, which forms an
+     inline box around this grid's block content until `elements.js` upgrades it. */
+  display: block;
+}
+
+.gallery {
+  --_br: var(--br-gallery, var(--br-gallery-group, var(--br-default)));
+
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(var(--gallery-thumb-size, 150px), 1fr));
+  gap: var(--gallery-gap, 0.5rem);
+}
+
+.gallery__item {
+  aspect-ratio: var(--gallery-aspect, 1);
+  overflow: hidden;
+  border-radius: var(--_br);
+}
+
+.gallery__trigger {
+  display: block;
+  inline-size: 100%;
+  block-size: 100%;
+  margin: 0;
+  padding: 0;
+  background: none;
+  border: none;
+  text-decoration: none;
+  cursor: pointer;
+
+  &:focus-visible {
+    outline: 2px solid var(--gallery-focus-color, currentColor);
+    outline-offset: 2px;
+  }
+}
+
+.gallery__thumb {
+  inline-size: 100%;
+  block-size: 100%;
+  object-fit: cover;
+  transition: scale 0.3s ease;
+}
+
+.gallery__trigger:hover .gallery__thumb {
+  scale: 1.05;
+}

package/assets/css/patterns/lightbox.css

@@ -1,42 +1,21 @@
 /**
- * Lightbox — pattern partial migrated from old-css-lib.
+ * Lightbox — the full-screen `<dialog>` a gallery trigger opens.
  * Consumes the generated token cascade (src/css/generated/tokens.css).
+ *
+ * The thumbnail grid that drives this lives in `patterns/gallery.css`
+ * (`.gallery` / `.gallery__item` / `.gallery__trigger` / `.gallery__thumb`) — this
+ * partial owns only the dialog a trigger opens. `<Gallery />` emits both; this
+ * file has no opinion on what triggers it.
+ *
+ * **One dialog, one carousel** — not one dialog per image. Stepping between
+ * images is a scroll inside an already-open dialog (`.carousel`, patterns/
+ * carousel.css), so there is no close-one/open-another sequence for the top-layer
+ * driver in animation.css to double-animate. `<wc-gallery>` only opens/closes;
+ * `<wc-carousel>` (nested inside, `<Gallery />` emits both tags) owns prev/next,
+ * dots, arrow keys and swipe — reused rather than re-implemented.
  */
 
-/* ── Lightbox — thumbnail grid + full-screen dialog w/ view transitions ────── */
-.lightbox {
-  --_br: var(--br-lightbox, var(--br-lightbox-group, var(--br-default)));
-
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(var(--lightbox-thumb-size, 150px), 1fr));
-  gap: var(--lightbox-gap, 0.5rem);
-
-  .lightbox__item {
-    position: relative;
-    aspect-ratio: var(--lightbox-aspect, 1);
-    overflow: hidden;
-    border-radius: var(--_br);
-    cursor: pointer;
-
-    &:focus-visible {
-      outline: 2px solid var(--lightbox-focus-color, currentColor);
-      outline-offset: 2px;
-    }
-  }
-
-  .lightbox__thumb {
-    inline-size: 100%;
-    block-size: 100%;
-    object-fit: cover;
-    transition: scale 0.3s ease;
-    view-transition-name: match-element;
-  }
-
-  .lightbox__item:hover .lightbox__thumb {
-    scale: 1.05;
-  }
-}
-
+/* ── Lightbox dialog — full-screen, w/ view transitions ─────────────────────── */
 dialog.lightbox-dialog {
   position: fixed;
   inset: 0;
@@ -50,30 +29,98 @@ dialog.lightbox-dialog {
   background: var(--lightbox-dialog-bg, oklch(0 0 0 / 0.92));
   color: #fff;
   display: grid;
-  place-items: center;
+  place-items: stretch;
 
   /* No scrim. Stated through popover.css's token rather than overriding its
      ::backdrop rule, so it keeps the shared fade timing. */
   --scrim: transparent;
 
+  /* The entry, as effect vars rather than a keyframe — same approach as
+     dialog.css, and for the same reason: the top-layer driver in animation.css
+     then animates this OUT too, which an `animation:` on `[open]` never does
+     (it only ever plays once, on open). Runs on real open/close ONLY — stepping
+     between slides never opens or closes this dialog, so it can never fire here. */
+  --opacity-from: 0;
+  --scale-x-from: 0.95;
+  --scale-y-from: 0.95;
+
   &[open] {
     display: grid;
   }
 
-  .lightbox-dialog__content {
-    position: relative;
-    max-inline-size: 90vw;
-    max-block-size: 90vh;
-    display: flex;
-    align-items: center;
-    justify-content: center;
+  /* ── No-JS fallback: `:target` + `:has()` ──────────────────────────────────
+     A `.gallery__trigger` is a real `<a href="#slide-id">`. Following it makes
+     that slide's `<li>` match `:target`, which this rule alone is what reveals
+     the dialog — no Invoker Commands, no polyfill, in every engine that has
+     `:has()` (Safari 15.4+, Chromium 105+, Firefox 121+). The browser's own
+     fragment-navigation scroll then lands the carousel on the right slide,
+     because the target lives inside `.carousel__track`.
+
+     `:not([open])` is load-bearing: once `<wc-gallery>` opens this for real via
+     `showModal()`, `[open]` is present and this rule must yield to it — a stale
+     `:target` from a previous no-JS visit must not fight the real modal, and
+     must not keep the dialog "open" by this rule alone once JS is stepping
+     between slides (which never changes the URL fragment). */
+  &:not([open]):has(:target) {
+    display: grid;
+    position: fixed;
+    inset: 0;
+    z-index: var(--lightbox-z, 100);
   }
 
-  .lightbox-dialog__image {
+  .lightbox-dialog__track {
     max-inline-size: 100%;
-    max-block-size: 90vh;
-    object-fit: contain;
-    view-transition-name: match-element;
+    max-block-size: 100%;
+
+    /* `.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-fit: contain;
+
+    .carousel__track {
+      max-block-size: 100%;
+    }
+
+    /* 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
+       the track's full height, so padding here is what keeps the image off the
+       glass instead of the media box's aspect-ratio doing it. */
+    .carousel__slide {
+      box-sizing: border-box;
+      padding: 5vh 5vw;
+    }
+
+    .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). */
+      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. */
+      background-image: var(--lightbox-placeholder, none);
+      background-size: contain;
+      background-position: center;
+      background-repeat: no-repeat;
+
+      /* `<wc-gallery>` assigns `view-transition-name: lightbox-active` to the
+         slide's `<img>` and the originating thumbnail at the moment it opens,
+         then clears it on close — that shared, runtime-assigned name is what
+         morphs one into the other. `match-element` (the auto-generated
+         per-element name) does NOT do this: it names each element uniquely,
+         so it can never morph a thumbnail into a different `<img>`. Do not put
+         a `view-transition-name` on the image here statically. */
+    }
+
+    .carousel__caption {
+      color: inherit;
+    }
   }
 
   .lightbox-dialog__close {
@@ -91,6 +138,9 @@ dialog.lightbox-dialog {
     display: flex;
     align-items: center;
     justify-content: center;
+    text-decoration: none;
+    font-size: 1.5rem;
+    line-height: 1;
     transition: background-color 0.15s ease;
     z-index: 10;
 
@@ -102,55 +152,4 @@ dialog.lightbox-dialog {
       outline-offset: 2px;
     }
   }
-
-  .lightbox-dialog__nav {
-    position: absolute;
-    inset-block: 0;
-    display: flex;
-    align-items: center;
-    padding: 1rem;
-
-    &[data-direction='prev'] {
-      inset-inline-start: 0;
-    }
-    &[data-direction='next'] {
-      inset-inline-end: 0;
-    }
-  }
-
-  .lightbox-dialog__nav-button {
-    inline-size: 3rem;
-    block-size: 3rem;
-    padding: 0;
-    background: var(--lightbox-nav-bg, transparent);
-    border: none;
-    border-radius: 50%;
-    color: inherit;
-    cursor: pointer;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    transition: background-color 0.15s ease;
-
-    &:hover {
-      background: var(--lightbox-nav-hover-bg, oklch(1 0 0 / 0.15));
-    }
-    &:disabled {
-      opacity: 0.3;
-      cursor: not-allowed;
-    }
-  }
-
-  .lightbox-dialog__caption {
-    position: absolute;
-    inset-block-end: 0;
-    inset-inline: 0;
-    padding: 1rem 2rem;
-    text-align: center;
-  }
-}
-
-::view-transition-old(*),
-::view-transition-new(*) {
-  animation-duration: 0.3s;
 }

package/assets/css/patterns/list.css

@@ -117,7 +117,7 @@
     flex-shrink: 0;
     font-size: 0.75em;
     padding: 0.125rem 0.375rem;
-    border-radius: var(--br-count, var(--br-pill, 999px));
+    border-radius: var(--br-count, 999px);
     background: var(--color-bg-surface-muted);
   }
 

package/assets/css/patterns/review.css

@@ -0,0 +1,91 @@
+/**
+ * Review — the `.review` card's structure only.
+ *
+ * Box chrome (border/padding/background/shadow) is CONFIG-GENERATED
+ * (`patterns.items.review` in design-system.json), the same split `card.css`
+ * documents. This partial holds what the framework owns: the internal layout —
+ * rating, identity, body, reply, source link.
+ */
+
+.review {
+  .review__header {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 0.75rem;
+  }
+
+  .review__avatar {
+    inline-size: 2.5rem;
+    block-size: 2.5rem;
+    border-radius: 50%;
+    object-fit: cover;
+  }
+
+  /* Shown instead of `.review__avatar` when `avatars` is off (the default) — see
+     the config-generated pattern's rationale in AGENTS.md's Reviews section. */
+  .review__initials {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    inline-size: 2.5rem;
+    block-size: 2.5rem;
+    border-radius: 50%;
+    background: var(--color-bg-neutral-muted);
+    color: var(--color-text-neutral);
+    font-weight: 600;
+    font-size: 0.875em;
+  }
+
+  .review__identity {
+    display: flex;
+    flex-direction: column;
+    gap: 0.125rem;
+  }
+
+  .review__author {
+    font-weight: 600;
+  }
+
+  .review__date {
+    font-size: 0.875em;
+    opacity: 0.7;
+  }
+
+  .review__stars {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.125rem;
+    margin-inline-start: auto;
+  }
+
+  .review__star--empty {
+    opacity: 0.35;
+  }
+
+  .review__body {
+    margin: 0;
+  }
+
+  .review__reply {
+    margin-inline-start: 1.5rem;
+    padding-inline-start: 1rem;
+    border-inline-start: 2px solid var(--color-bg-surface-muted);
+  }
+
+  .review__reply-author {
+    font-weight: 600;
+    font-size: 0.875em;
+  }
+
+  .review__source {
+    font-size: 0.875em;
+    align-self: start;
+  }
+}
+
+.review-list {
+  display: flex;
+  flex-direction: column;
+  gap: 1.5rem;
+}

package/assets/css/patterns/tag.css

@@ -29,7 +29,6 @@
 /* ── Badge indicator — numeric notification bubble (distinct from .badge) ──── */
 .badge-indicator {
   --_size: var(--badge-size, 1.25rem);
-  --_br: var(--br-badge, var(--br-badge-group, var(--br-default)));
 
   display: inline-flex;
   align-items: center;
@@ -40,7 +39,7 @@
   font-size: var(--fs-badge, var(--fs-badge-group, var(--fs-default)));
   font-weight: 600;
   line-height: 1;
-  border-radius: var(--br-badge-indicator, var(--br-pill, 999px));
+  border-radius: var(--br-badge-indicator, 999px);
   background: var(--color-text-danger);
   color: #fff;
 

package/assets/css/patterns/tree.css

@@ -44,10 +44,16 @@ wc-tree {
     position: relative;
   }
 
-  /* Nested list indent. Two shapes are supported: the item may BE the
-     `<details>`, or be an `<li>` wrapping one — the latter is what `<Tree />`
-     emits, because `<ul>`/`<li>` is what gives assistive tech list position and
-     depth. Keep both; the flat shape is the pattern's original contract.
+  /* Nested list indent. Two shapes are supported IN THE NO-JS FALLBACK: the
+     item may BE the `<details>`, or be an `<li>` wrapping one — the latter is
+     what `<Tree />` emits, because `<ul>`/`<li>` is what gives assistive tech
+     list position and depth. `<wc-tree>` unwraps both shapes to one structure
+     on upgrade (`.tree__item` > `.tree__summary`/`.tree__content` + optional
+     nested `.tree`), which is why the first selector below already matches
+     the ENHANCED state for both former shapes with no changes — only the
+     second (`.tree__item > details > .tree`) is fallback-only now, kept for
+     the no-JS list shape. Same split applies to every other
+     `details`/`summary`-keyed selector in this file below.
 
      Indent is ONE `--tree-indent` per level, not two. This used to set both
      `margin-inline-start` and `padding-inline-start` to it, putting the guide
@@ -85,6 +91,7 @@ wc-tree {
   }
 
   .tree__content,
+  .tree__summary,
   details.tree__item > summary,
   .tree__item > details > summary {
     display: flex;
@@ -100,6 +107,26 @@ wc-tree {
     padding-inline-start: var(--_leaf-indent);
   }
 
+  /* `.tree__summary` — the enhanced-state row `<wc-tree>` builds on upgrade,
+     replacing `<summary>`. Not `.tree__content`: that class's
+     `padding-inline-start: var(--_leaf-indent)` exists specifically to make a
+     TOGGLE-LESS row line up with one that has a toggle — applying it to a row
+     that DOES have a toggle would double-indent every branch, the mirror
+     image of the 24px-misalignment bug the comment above this block
+     documents fixing. */
+  .tree__summary {
+    cursor: pointer;
+    /* Only source of this in the enhanced state — `<summary>`'s own
+       `user-select: none` came from `details.css`'s bare `details` selector,
+       which no longer matches once `<details>` is gone. Without it, a
+       drag-select across a label also fires a `click` and toggles the row. */
+    user-select: none;
+  }
+
+  /* Fallback-only from here: no-JS renders `<details>`/`<summary>`, which
+     `<wc-tree>` unwraps on upgrade (see the class docblock in `WCTree.ts`).
+     Kept for the two SSR'd shapes; nothing in the enhanced state matches
+     these. */
   details.tree__item > summary,
   .tree__item > details > summary {
     cursor: pointer;
@@ -127,6 +154,13 @@ wc-tree {
     transition: transform 0.2s ease;
   }
 
+  /* Enhanced state: `aria-expanded` is the mirror `#setExpanded` writes
+     alongside the group's `hidden`, kept in sync with it — see WCTree.ts. */
+  .tree__item[aria-expanded='true'] > .tree__summary .tree__toggle {
+    transform: rotate(90deg);
+  }
+
+  /* Fallback-only — see the note above `details.tree__item > summary`. */
   details.tree__item[open] > summary .tree__toggle,
   .tree__item > details[open] > summary .tree__toggle {
     transform: rotate(90deg);
@@ -165,8 +199,12 @@ wc-tree {
     transition: opacity 0.15s ease;
   }
 
-  .tree__item:hover .tree__actions,
-  .tree__item:focus-within .tree__actions {
+  /* `>`, not a descendant selector: `.tree__item` now carries the roving
+     tabindex directly, so arrow-keying to a deep item would otherwise light
+     up every ANCESTOR branch's own actions row too, not just the row hovered
+     or focused. */
+  .tree__item:hover > .tree__actions,
+  .tree__item:focus-within > .tree__actions {
     opacity: 1;
   }
 
@@ -174,6 +212,65 @@ wc-tree {
     opacity: 0.5;
   }
 
+  /* Focus now lands on `.tree__item` itself (the roving tabindex target), a
+     block box that — for an expanded branch — wraps its entire subtree. An
+     outline on it would ring every descendant, so it's suppressed there and
+     drawn on the ROW instead. */
+  .tree__item:focus {
+    outline: none;
+  }
+
+  /* `:focus-visible` alone under-covers a real case: script-moved focus only
+     matches `:focus-visible` if the PREVIOUSLY focused element did, so a
+     mouse click (which doesn't match) followed immediately by an arrow key
+     shows no ring at all in Chrome/Safari until the visitor tabs fully out
+     and back in. `[data-tree-keyboard]` is `<wc-tree>`'s own signal — set on
+     any handled navigation keydown, cleared on `pointerdown` — and covers
+     exactly that gap; `happy-dom` implements neither `:focus-visible` nor
+     layout, so this needs a manual browser check, not a unit test. */
+  .tree__item:focus-visible > .tree__summary,
+  .tree__item:focus-visible > .tree__content,
+  &[data-tree-keyboard] .tree__item:focus > .tree__summary,
+  &[data-tree-keyboard] .tree__item:focus > .tree__content {
+    outline: 2px solid var(--tree-focus-color, currentColor);
+    /* Inset, not the pattern's usual positive offset: the nested group below
+       clips its content (`overflow: clip`, next rule), so a positive offset
+       on the first or last row of an expanded subtree would be cut off by
+       its own ancestor. */
+    outline-offset: -2px;
+  }
+
+  /* Animated collapse — the enhanced-state replacement for `details.css`'s
+     `::details-content` transition, which no longer applies once `<details>`
+     is gone. Keyed on `[hidden]` itself, NOT on `[aria-expanded]`: the
+     browser's own find-in-page / fragment-navigation reveal removes `hidden`
+     directly or CSS anchored to a JS-set `aria-expanded` mirror would leave a
+     UA-revealed branch visually still collapsed until a `beforematch` handler
+     caught up (see WCTree.ts). Same idiom `details.css` verified working, and
+     the same warning applies: the tell of a regression is a branch that
+     doesn't open on the FIRST click, not a syntax error — check a real
+     interaction. */
+  .tree__item > .tree {
+    /* `clip` + a small margin, not `hidden`: an `overflow: hidden` group
+       would clip the focus ring (`outline-offset: -2px` above still needs a
+       few px of headroom) of its own first/last child row. */
+    overflow: clip;
+    overflow-clip-margin: 3px;
+
+    @media (prefers-reduced-motion: no-preference) {
+      block-size: auto;
+      transition:
+        block-size var(--animation-duration) var(--custom-ease-out),
+        content-visibility var(--animation-duration) allow-discrete;
+    }
+  }
+
+  @media (prefers-reduced-motion: no-preference) {
+    .tree__item > .tree[hidden] {
+      block-size: 0;
+    }
+  }
+
   &.tree--lines .tree__item {
     position: relative;
 
@@ -195,10 +292,16 @@ wc-tree {
 
   /* A node's own prose. `.tree__label` is `nowrap` + ellipsis for file-tree-style
      single-line names, so a description can't live in it — it sits below the
-     summary row and wraps. Indented to the label, past the toggle. */
+     summary row and wraps. Indented to the label, past the toggle.
+
+     `margin-inline-end` is set here rather than left to come from an
+     ancestor: a BRANCH description used to get it incidentally from
+     `details.css`'s `<details>` margins (now gone — see the class docblock in
+     `WCTree.ts`), while a LEAF description, never inside a `<details>`, never
+     got one at all. Self-contained now, and consistent between the two. */
   .tree__desc {
     margin-block: 0.125rem 0.25rem;
-    margin-inline-start: var(--_leaf-indent);
+    margin-inline: var(--_leaf-indent) 0.25rem;
     color: var(--color-text-surface-muted);
     text-wrap: pretty;
   }

package/assets/css/utilities.css

@@ -284,3 +284,20 @@
 .relative {
   position: relative;
 }
+
+/* ── Shape — the two geometric absolutes, Tailwind-named ──
+   Everything between "square" and "fully round" stays owned by the token
+   cascade (`patterns.radii`, group `br`, per-pattern `--br-<name>`) — these two
+   are the only radii with no design-token meaning of their own, which is why
+   they're utilities and not tokens. No responsive (`md-rounded-full`) variants:
+   a responsive radius is rare enough that Tailwind's own `@md:rounded-full`
+   covers it on that side.
+
+   Names + values are Tailwind-exact; Tailwind ships them natively, so they are
+   in TW_CLASH and the tailwind format drops these copies. */
+.rounded-none {
+  border-radius: 0;
+}
+.rounded-full {
+  border-radius: 999px;
+}