@getvitops/generator 8.2.0-alpha.0 → 8.3.0-alpha.0

package/assets/css/index.css

@@ -72,6 +72,13 @@
 @import './patterns/text-effects.css';
 @import './patterns/svg.css';
 @import './patterns/marquee.css';
+@import './patterns/tone.css';
+@import './patterns/section.css';
+@import './patterns/steps.css';
+@import './patterns/stats.css';
+@import './patterns/callout.css';
+@import './patterns/logos.css';
+@import './patterns/embed.css';
 @import './patterns/counter.css';
 @import './patterns/nav.css';
 @import './patterns/carousel.css';

package/assets/css/patterns/banner.css

@@ -69,3 +69,23 @@
 .banner[hidden] {
   display: none;
 }
+
+/*
+ * `<wc-dismissable>` wraps a banner or notification — block content — and animates its own
+ * opacity/scale on dismiss, so it needs a box of its own: `display: contents` would drop
+ * that animation. Pre-upgrade it would otherwise be an inline box around a block child.
+ */
+:where(wc-dismissable) {
+  display: block;
+}
+
+/*
+ * A dismiss button does nothing until `<wc-dismissable>` upgrades — an inert control that
+ * looks live is worse than none. `:not(:defined)` is true with no JS (and until elements.js
+ * has run), so the close affordance only appears once something can act on it. The banner
+ * itself stays fully readable. Markup that puts a `[data-dismiss]` button inside the element
+ * gets the same treatment, whatever its class.
+ */
+wc-dismissable:not(:defined) :is(.banner__close, .notification__close, [data-dismiss]) {
+  display: none;
+}

package/assets/css/patterns/callout.css

@@ -0,0 +1,39 @@
+/**
+ * Callout — a call-to-action band: a short message and the action it points at, set
+ * apart from the page. Not a banner: `banner` is a dismissible announcement; this is
+ * content that stays.
+ *
+ * Message left and actions right when there is room, stacked when there is not. Colour
+ * is `.tone` (tone.css); `--center` stacks and centres at every width.
+ */
+.callout {
+  display: grid;
+  gap: var(--callout-gap, 1rem 2rem);
+  align-items: center;
+  padding: var(--callout-padding, clamp(1.25rem, 4cqi, 2.5rem));
+  border: var(--b-card, var(--b-card-group, var(--b-default)));
+  border-radius: var(--br-card, var(--br-card-group, var(--br-default)));
+
+  .callout__body {
+    display: grid;
+    gap: 0.5rem;
+    min-inline-size: 0;
+  }
+
+  .callout__title,
+  .callout__text,
+  .callout__actions {
+    margin: 0;
+  }
+
+  &.callout--center {
+    text-align: center;
+    justify-items: center;
+  }
+}
+
+@container (min-width: 48rem) {
+  .callout:not(.callout--center) {
+    grid-template-columns: minmax(0, 1fr) auto;
+  }
+}

package/assets/css/patterns/copy.css

@@ -80,3 +80,8 @@
     visibility: visible;
   }
 }
+
+/* Matches `<wc-copy>`'s upgraded `:host` (inline-flex) so registering causes no reflow. */
+:where(wc-copy) {
+  display: inline-flex;
+}

package/assets/css/patterns/embed.css

@@ -0,0 +1,39 @@
+/**
+ * Embed — a third-party iframe (map, video) held at a fixed aspect ratio, behind consent.
+ *
+ * The iframe ships with NO `src`: the address rides on `data-consent-src`, and the consent
+ * runtime assigns it only once the visitor has granted the category. Until then the
+ * `.embed__placeholder` — a real link to the same content, so it is useful with no JS — is
+ * what the page shows; `[data-vitops-activated]` on the iframe (set by the runtime) hides
+ * it. No third-party request is made before consent.
+ */
+.embed {
+  position: relative;
+  aspect-ratio: var(--embed-ratio, 16 / 9);
+  overflow: hidden;
+  border: var(--b-card, var(--b-card-group, var(--b-default)));
+  border-radius: var(--br-card, var(--br-card-group, var(--br-default)));
+
+  .embed__frame {
+    position: absolute;
+    inset: 0;
+    inline-size: 100%;
+    block-size: 100%;
+    border: 0;
+  }
+
+  .embed__placeholder {
+    position: absolute;
+    inset: 0;
+    display: grid;
+    place-content: center;
+    gap: 0.5rem;
+    padding: 1rem;
+    text-align: center;
+  }
+
+  /* Once the runtime has loaded the frame, the placeholder has nothing left to say. */
+  .embed__frame[data-vitops-activated] ~ .embed__placeholder {
+    display: none;
+  }
+}

package/assets/css/patterns/forms.css

@@ -364,3 +364,22 @@ select.custom-select {
     outline-offset: 2px;
   }
 }
+
+/* `<wc-multi-field>` is a group of controls, a block. Its shadow `:host` declares no display. */
+:where(wc-multi-field) {
+  display: block;
+}
+
+/* `<wc-turnstile>` wraps a fallback paragraph and the widget box, both blocks (light DOM, no `:host`). */
+:where(wc-turnstile) {
+  display: block;
+}
+
+/*
+ * A message shown only when the URL fragment names it. A prerendered page cannot know whether a
+ * no-JS post succeeded, so a form's success and error notices are always in the markup and the
+ * endpoint's redirect (`#form-sent` / `#form-error`) reveals one.
+ */
+.form-notice--target:not(:target) {
+  display: none;
+}

package/assets/css/patterns/logos.css

@@ -0,0 +1,45 @@
+/**
+ * Logos — a static grid of partner/client marks. `marquee` is the scrolling version;
+ * this one holds still, which is what most "key partners" rows should do (nothing to
+ * pause, nothing to track, no motion to opt out of).
+ *
+ * Each item is a plain image, or a link around one. Marks are normalised to a common
+ * height rather than a common width, because logos vary far more in aspect ratio than
+ * in how tall they should read. `--grayscale` quiets them until hover or focus.
+ */
+.logos {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: var(--logos-justify, center);
+  gap: var(--logos-gap, 1.5rem 2.5rem);
+  margin: 0;
+  padding: 0;
+  list-style: none;
+
+  .logos__item {
+    display: grid;
+    place-items: center;
+    margin: 0;
+  }
+
+  .logos__item img {
+    block-size: var(--logos-height, 2.5rem);
+    inline-size: auto;
+    max-inline-size: 100%;
+    object-fit: contain;
+  }
+
+  &.logos--grayscale .logos__item img {
+    filter: grayscale(1);
+    opacity: 0.7;
+    transition:
+      filter 0.2s,
+      opacity 0.2s;
+  }
+
+  &.logos--grayscale .logos__item:is(:hover, :focus-within) img {
+    filter: none;
+    opacity: 1;
+  }
+}

package/assets/css/patterns/marquee.css

@@ -56,6 +56,13 @@
     animation-play-state: paused;
   }
 
+  /* Keyboard users can't hover; focusing anything inside (a link in an item) also pauses, and
+     `<wc-marquee>`'s pause button sets `data-paused` (WCAG 2.2.2). */
+  &:focus-within .marquee__content,
+  &[data-paused] .marquee__content {
+    animation-play-state: paused;
+  }
+
   &.marquee--reverse {
     --_marquee-direction: reverse;
   }
@@ -100,3 +107,12 @@
     translate: 0 calc(-1 * var(--_marquee-distance, calc(100% + var(--marquee-gap, 1rem))));
   }
 }
+
+/*
+ * The `.marquee` class carries `display: flex` when present (the Astro component always sets
+ * it). This is the fallback for a hand-written `<wc-marquee>` without the class, and it is
+ * zero specificity so `.marquee` still wins.
+ */
+:where(wc-marquee) {
+  display: block;
+}

package/assets/css/patterns/section.css

@@ -0,0 +1,53 @@
+/**
+ * Section — the editorial wrapper most pages are made of: an optional kicker, a heading,
+ * a lead-in line, then a body of other blocks.
+ *
+ * Composed from the layout primitives rather than reinventing them: the outer element
+ * is `.region` (vertical rhythm) and the content sits on `.centered`'s tracks, so this
+ * partial only adds what neither has — the head's own rhythm and the `--split` layout,
+ * which puts the head beside the body (heading-left) above the container breakpoint.
+ * Backdrop and colour come from `.tone` (tone.css), never from here.
+ */
+.section {
+  .section__head {
+    display: grid;
+    gap: var(--section-head-gap, 0.75rem);
+    align-content: start;
+  }
+
+  .section__kicker,
+  .section__title {
+    margin: 0;
+  }
+
+  .section__sub {
+    margin: 0;
+    max-inline-size: var(--width-measure, 65ch);
+  }
+
+  .section__body {
+    display: grid;
+    gap: var(--section-body-gap, 1.5rem);
+    min-inline-size: 0;
+  }
+
+  /* Head and body stack until there is room for two columns (below). */
+  &.section--split .section__inner {
+    display: grid;
+    gap: var(--section-split-gap, clamp(1.5rem, 4cqi, 3rem));
+  }
+
+  &.section--center .section__head {
+    text-align: center;
+    justify-items: center;
+  }
+}
+
+@container (min-width: 48rem) {
+  .section.section--split .section__inner {
+    grid-template-columns:
+      minmax(0, var(--section-split-head, 1fr))
+      minmax(0, var(--section-split-body, 2fr));
+    align-items: start;
+  }
+}

package/assets/css/patterns/sitenav.css

@@ -425,3 +425,265 @@
     display: none;
   }
 }
+
+/* ── Tiers (`<SiteNav>`'s optional `primary-mobile` / `primary-mega` menus) ──────
+   Each tier is its own `<nav>` in a `.sitenav-tier` wrapper, and a wrapper is
+   `display: none` outside its container-width window — so exactly one tier is ever
+   in the accessibility tree. Same container as the `--bp-*` flag above (the nearest
+   ancestor `container-type`, `body` per layout.css), so the hand-over width and the
+   drawer→navbar flip can never disagree. One pair per breakpoint; `sitenav.ts`'s
+   `VISIBILITY_CLASSES` lists them and `sitenav.test.ts` checks each is defined here. */
+@container (width < 30rem) {
+  .sitenav-tier--from-sm {
+    display: none;
+  }
+}
+@container (width >= 30rem) {
+  .sitenav-tier--below-sm {
+    display: none;
+  }
+}
+@container (width < 48rem) {
+  .sitenav-tier--from-md {
+    display: none;
+  }
+}
+@container (width >= 48rem) {
+  .sitenav-tier--below-md {
+    display: none;
+  }
+}
+@container (width < 64rem) {
+  .sitenav-tier--from-lg {
+    display: none;
+  }
+}
+@container (width >= 64rem) {
+  .sitenav-tier--below-lg {
+    display: none;
+  }
+}
+@container (width < 80rem) {
+  .sitenav-tier--from-xl {
+    display: none;
+  }
+}
+@container (width >= 80rem) {
+  .sitenav-tier--below-xl {
+    display: none;
+  }
+}
+
+/* ── Item description (EmDash `titleAttr` convention — see SiteNav.astro) ───── */
+.sitenav__link--described {
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 0.125rem;
+}
+
+.sitenav__desc {
+  font-size: 0.875em;
+  opacity: 0.75;
+  font-weight: normal;
+}
+
+/* The current page. Text-weight + a non-colour cue, so it survives forced-colors. */
+.sitenav__link[aria-current='page'] {
+  font-weight: 600;
+  text-decoration: underline;
+  text-underline-offset: 0.25em;
+}
+
+/* ── Mega variant — WIDE ONLY ───────────────────────────────────────────────
+   Top-level submenus become full-width panels of columns under the nav row. The
+   branch item stops being the positioning context so the panel anchors to
+   `.sitenav--mega` instead. Inside the wide branch, with the same reasoning as the
+   rest of the file: a rule here competes at its bare selector weight. */
+@container style(--_sitenav-wide: 1) {
+  .sitenav--mega {
+    position: relative;
+  }
+  .sitenav--mega .sitenav__list > .sitenav__item--branch {
+    position: static;
+  }
+  .sitenav--mega .sitenav__list > .sitenav__item--branch > .sitenav__submenu {
+    inset-inline: 0;
+    inline-size: 100%;
+    flex-direction: row;
+    flex-wrap: wrap;
+    align-items: flex-start;
+    gap: 1.5rem;
+    padding: 1.5rem;
+  }
+  /* Third level is a column inside the panel, not a fly-out. */
+  .sitenav--mega .sitenav__submenu .sitenav__item--branch {
+    position: static;
+    display: block;
+  }
+  .sitenav--mega .sitenav__submenu .sitenav__item--branch > .sitenav__submenu {
+    position: static;
+    opacity: 1;
+    visibility: visible;
+    pointer-events: auto;
+    translate: none;
+    box-shadow: none;
+    border: none;
+    padding: 0.25rem 0 0;
+    min-inline-size: 0;
+  }
+  .sitenav--mega .sitenav__submenu .sitenav__disclosure {
+    display: none;
+  }
+}
+
+/* ── In-page menu (`vitops.nav` block) ─────────────────────────────────────────
+ *
+ * A menu read in the body of a page — a site map, a section's links, footer-style columns —
+ * as plain nested lists. No disclosure and no drawer: that is the header's job (`.sitenav`).
+ *
+ *   <nav aria-label="Services"><ul class="navlist navlist--columns">
+ *     <li class="navlist__item"><a class="navlist__link">…</a><ul class="navlist__sub">…</ul></li>
+ *
+ * Modifiers: `--inline` (one wrapping row) and `--columns` (an auto-fit grid, each top-level
+ * item a column with its sub-links beneath it). */
+.navlist,
+.navlist__sub {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+}
+
+/* The rhythm utility's `li + li` margin is the flow's job; the list's own gap does it here. */
+.navlist__item {
+  margin: 0;
+}
+
+.navlist__sub {
+  margin-block-start: 0.25rem;
+  padding-inline-start: 1rem;
+}
+
+.navlist__link {
+  color: inherit;
+  text-decoration: underline;
+  text-underline-offset: 0.2em;
+  padding-block: 0.25rem;
+  border-radius: var(--br-control, 0.25rem);
+
+  &:focus-visible {
+    outline: 2px solid var(--sitenav-focus-color, var(--color-border-focus));
+    outline-offset: 2px;
+  }
+
+  &[aria-current='page'] {
+    font-weight: 600;
+  }
+}
+
+.navlist__label {
+  font-weight: 600;
+}
+
+.navlist--inline {
+  flex-direction: row;
+  flex-wrap: wrap;
+  gap: 0.25rem 1.25rem;
+}
+
+.navlist--columns {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(min(12rem, 100%), 1fr));
+  gap: 1.5rem;
+
+  > .navlist__item > :is(.navlist__link, .navlist__label) {
+    font-weight: 600;
+  }
+
+  > .navlist__item > .navlist__sub {
+    padding-inline-start: 0;
+  }
+}
+
+@media (forced-colors: active) {
+  .navlist__link:focus-visible {
+    outline-color: Highlight;
+  }
+}
+
+/* ── Footer (`<SiteFooter>`) ───────────────────────────────────────────────── */
+.sitefooter {
+  margin-block-start: var(--space-2xl, 3rem);
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  padding-block: var(--space-l, 2rem);
+  border-block-start: 1px solid var(--color-border-neutral, currentColor);
+}
+
+.sitefooter__nav {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 1rem 3rem;
+  justify-content: space-between;
+}
+
+.sitefooter__list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.25rem 1.25rem;
+}
+
+.sitefooter__link {
+  color: inherit;
+  text-decoration: underline;
+  text-underline-offset: 0.2em;
+  padding-block: 0.25rem;
+  border-radius: var(--br-control, 0.25rem);
+
+  &:focus-visible {
+    outline: 2px solid var(--sitenav-focus-color, var(--color-border-focus));
+    outline-offset: 2px;
+  }
+
+  &[aria-current='page'] {
+    font-weight: 600;
+  }
+}
+
+.sitefooter__copy {
+  margin: 0;
+  font-size: 0.875em;
+  opacity: 0.8;
+}
+
+/* ── Motion + forced colours (both site-nav and footer) ────────────────────── */
+@media (prefers-reduced-motion: reduce) {
+  .sitenav__panel,
+  .sitenav__panel::backdrop,
+  .sitenav__submenu,
+  .sitenav__item--branch {
+    transition: none;
+  }
+}
+
+@media (forced-colors: active) {
+  .sitenav__link:focus-visible,
+  .sitenav__toggle:focus-visible,
+  .sitenav__close:focus-visible,
+  .sitefooter__link:focus-visible {
+    outline-color: Highlight;
+  }
+  .sitenav__panel,
+  .sitenav__submenu {
+    border: 1px solid CanvasText;
+  }
+  .sitenav__link[aria-current='page'] {
+    text-decoration-thickness: 2px;
+  }
+}

package/assets/css/patterns/splitter.css

@@ -210,3 +210,14 @@
     }
   }
 }
+
+/*
+ * Pre-upgrade display for the two elements that live in this partial — see the note on
+ * `wc-entries` in table.css. Both are a framed block of content (two panes; two images),
+ * and `wc-image-compare`'s upgraded `:host` is already `display: block`, so declaring it
+ * here removes the layout shift when it registers. `wc-split-panel` has no `:host` display
+ * at all, so this also fixes it after upgrade.
+ */
+:where(wc-split-panel, wc-image-compare) {
+  display: block;
+}

package/assets/css/patterns/stats.css

@@ -0,0 +1,61 @@
+/**
+ * Stats — a row of headline figures ("11 hrs/week", "82%") and, as `.stats--tiles`, a
+ * grid of labelled tiles with a group, a delta and a state (the generic kernel of a
+ * dashboard mock: "Open jobs  24  +3 this week").
+ *
+ * The figure is the `.counter` pattern, so the count-up is `<wc-counter>`'s; this
+ * partial only lays the figures out. With no JS and no CSS each figure is plain text
+ * beside its label.
+ *
+ * `data-state` on a tile (`up` / `down`) drives the delta's colour through the semantic
+ * roles, so "good" and "bad" follow the site's own success/danger rather than a hard-coded
+ * green and red. The delta's words stay in the text: colour is never the only carrier.
+ */
+.stats {
+  display: grid;
+  gap: var(--stats-gap, 1.5rem);
+  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--stats-min, 12rem)), 1fr));
+  margin: 0;
+  padding: 0;
+  list-style: none;
+
+  .stats__item {
+    display: grid;
+    gap: 0.25rem;
+    align-content: start;
+    margin: 0;
+  }
+
+  .stats__figure,
+  .stats__label,
+  .stats__group,
+  .stats__delta {
+    margin: 0;
+  }
+
+  .stats__figure {
+    color: var(--tone-fg, inherit);
+    font-variant-numeric: tabular-nums;
+  }
+
+  .stats__group {
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    opacity: 0.8;
+  }
+
+  .stats__item[data-state='up'] .stats__delta {
+    color: var(--color-text-success, inherit);
+  }
+
+  .stats__item[data-state='down'] .stats__delta {
+    color: var(--color-text-danger, inherit);
+  }
+
+  &.stats--tiles .stats__item {
+    padding: var(--stats-tile-padding, 1rem 1.25rem);
+    border: var(--b-card, var(--b-card-group, var(--b-default)));
+    border-radius: var(--br-card, var(--br-card-group, var(--br-default)));
+    background-color: var(--tone-bg, transparent);
+  }
+}