@getvitops/generator 1.0.0 → 2.0.0

package/README.md

@@ -10,7 +10,7 @@ This is the library that powers
 import { generate, validate, defaultConfig } from '@getvitops/generator';
 
 await generate({
-  input: './design-system.json', // path or a config object
+  input: './design-system.json', // path or object; a design-system.json OR a site config
   format: 'tailwind', // 'tailwind' | 'bricks' | 'design' | 'css'
   outDir: './src/styles',
 });
@@ -19,6 +19,13 @@ await generate({
 ## API
 
 - `generate({ input, format, outDir })` → writes the chosen format into `outDir`.
+  `input` may be a `design-system.json` **or** the larger site config that embeds one — told apart
+  by shape, not by filename. For a site config the design system is `designSystem.themes[theme]`
+  with its `extends` chain resolved (`theme`, else the config's `defaultTheme`, else `default`), and
+  the site config also supplies `site`, so the colour scheme, legal documents and icon sprite it
+  asks for need no second path.
+- `resolveInput(raw, { theme, siteEnv })` / `isSiteConfig(raw)` → the discriminator itself, for
+  tools that need to do the same routing.
 - `validate(configOrObject)` → `{ ok, errors }` against the schema.
 - `defaultConfig()` → a complete starter `DesignSystem`.
 - `DesignSystemSchema` / `jsonSchema` / `SCHEMA_URL` — the `zod/mini` schema, its JSON Schema,

package/assets/bricks/elements/icon.php

@@ -0,0 +1,102 @@
+<?php
+/**
+ * Vitops — Icon element (Bricks Builder).
+ *
+ * Renders one icon from the generated sprite (dist/icons.svg) as
+ * `<span class="icon"><svg><use href="…#id"></svg></span>`. Pure markup: no
+ * JavaScript, no request to an icon API, and the glyph inherits `currentColor`,
+ * so a colour utility on this element or an ancestor just works.
+ *
+ * The sprite only exists when the site config sets `icons.sprite` — without it
+ * this renders an empty box rather than failing, which is the same thing a
+ * missing icon name does.
+ *
+ * Two id forms resolve: a semantic name ('menu'), which the build also emits as
+ * a set-independent alias so the page survives an icon-set change, and a
+ * qualified one ('ph:list' / 'ph--list'). Rendering is delegated to
+ * vitops_icon() in load.php so the element, the shortcode and any theme PHP all
+ * emit identical markup.
+ *
+ * Non-nestable: PHP render() runs in the builder canvas too, so the icon appears
+ * live while editing.
+ *
+ * Owned by the framework repo (vitops: bricks/elements/); copied into the theme's
+ * dist/bricks/ on build — do not hand-edit in the theme.
+ */
+
+if ( ! defined( 'ABSPATH' ) ) {
+	exit;
+}
+
+class Vitops_Element_Icon extends \Bricks\Element {
+	public $category     = 'vitops';
+	public $name         = 'vitops-icon';
+	public $icon         = 'ti-star';
+	public $css_selector = '.icon';
+
+	public function get_label() {
+		return esc_html__( 'Icon', 'bricks' );
+	}
+
+	public function get_keywords() {
+		return array( 'icon', 'svg', 'sprite', 'symbol', 'vitops' );
+	}
+
+	public function set_controls() {
+		$this->controls['name'] = array(
+			'tab'         => 'content',
+			'label'       => esc_html__( 'Icon name', 'bricks' ),
+			'type'        => 'text',
+			'placeholder' => 'menu',
+			'description' => esc_html__(
+				'A semantic name (menu, close, arrow-right) or a set-specific one (ph:list). Only icons listed in the site config are in the sprite.',
+				'bricks'
+			),
+		);
+
+		$this->controls['size'] = array(
+			'tab'         => 'content',
+			'label'       => esc_html__( 'Size', 'bricks' ),
+			'type'        => 'text',
+			'placeholder' => '1.25em',
+			'description' => esc_html__(
+				'Any CSS length. Sets --icon-size; em units track the surrounding text.',
+				'bricks'
+			),
+		);
+
+		$this->controls['label'] = array(
+			'tab'         => 'content',
+			'label'       => esc_html__( 'Accessible label', 'bricks' ),
+			'type'        => 'text',
+			'description' => esc_html__(
+				'Leave empty for decorative icons — they are then hidden from screen readers. Fill it in only when the icon carries meaning on its own.',
+				'bricks'
+			),
+		);
+	}
+
+	public function render() {
+		$settings = $this->settings;
+		$name     = isset( $settings['name'] ) ? $settings['name'] : '';
+
+		if ( ! function_exists( 'vitops_icon' ) ) {
+			return;
+		}
+
+		// The root attributes carry Bricks' own classes and any the author added,
+		// so they are merged onto the same wrapper vitops_icon() emits rather than
+		// wrapping it in a second element.
+		$this->set_attribute( '_root', 'class', 'icon' );
+
+		echo '<div ' . $this->render_attributes( '_root' ) . '>'
+			. vitops_icon(
+				$name,
+				array(
+					'size'  => isset( $settings['size'] ) ? $settings['size'] : '',
+					'label' => isset( $settings['label'] ) ? $settings['label'] : '',
+				)
+			)
+			. '</div>';
+	}
+}

package/assets/bricks/elements/split.php

@@ -2,10 +2,13 @@
 /**
  * Vitops — Split layout element (Bricks Builder).
  *
- * A nestable flex row rendering the framework's `.split` (src/css/layout.css) — equal
- * columns by default. Set a ratio by adding a class in the CSS-classes field:
- * `split-1-2` / `2-1` / `1-3` / `3-1` / `1-4` / `4-1` / `2-3` / `3-2`, each with an
- * optional `-sm/-md/-lg/-xl` suffix to engage the ratio from a container breakpoint.
+ * A nestable flex row rendering the framework's `.split` (layout.css) — equal columns
+ * by default. Set a ratio by adding a class in the CSS-classes field: `split-1-2` /
+ * `2-1` / `1-3` / `3-1` / `1-4` / `4-1` / `2-3` / `3-2`, each with an optional
+ * `sm-`/`md-`/`lg-`/`xl-` PREFIX to engage the ratio from a container breakpoint.
+ * `flex-col` stacks the columns below that breakpoint; `split-reverse` (also
+ * breakpoint-prefixable) swaps the two panels. Reversing puts visual order out of
+ * step with DOM order, so keep focusable content in only one of the two columns.
  *
  * The `.split` base rides on the built-in "CSS classes" setting (defaulted below) so it
  * shows in the builder canvas (assembled from settings) and the frontend.
@@ -57,7 +60,7 @@ class Vitops_Element_Split extends \Bricks\Element {
 		$this->controls['ratioInfo'] = [
 			'tab'     => 'content',
 			'type'    => 'info',
-			'content' => esc_html__( 'Equal columns by default. Add a class in "CSS classes" for a ratio: split-1-2, 2-1, 1-3, 3-1, 1-4, 4-1, 2-3, 3-2 (append -sm/-md/-lg/-xl to engage it from a breakpoint).', 'bricks' ),
+			'content' => esc_html__( 'Equal columns by default. Add a class in "CSS classes" for a ratio: split-1-2, 2-1, 1-3, 3-1, 1-4, 4-1, 2-3, 3-2 (prefix with sm-/md-/lg-/xl- to engage it from a breakpoint). Add flex-col to stack the columns below that breakpoint, and split-reverse to swap the two panels — when reversing, keep focusable content in only one column so the tab order stays linear.', 'bricks' ),
 		];
 
 		// Base flex class, defaulted onto the built-in "CSS classes" setting so it

package/assets/bricks/load.php

@@ -15,6 +15,7 @@
  *   3. Registers a "Vitops" builder category so the elements group together.
  *   4. Defaults the design system to dark mode.
  *   5. Registers [vitops_legal] for the generated legal documents.
+ *   6. Registers vitops_icon() + [vitops_icon] for the generated SVG sprite.
  *
  * Owned by the framework repo (vitops: bricks/); copied into the theme's
  * dist/bricks/ on build — do not hand-edit in the theme.
@@ -172,3 +173,93 @@ add_shortcode(
 		return file_get_contents( $path );
 	}
 );
+
+/**
+ * 6. vitops_icon() / [vitops_icon name="menu"] — render an icon from the sprite.
+ *
+ * The build emits dist/icons.svg (a hidden <svg> of <symbol>s) when the site
+ * config sets `icons.sprite`. Referencing one is a plain `<use>`: no JavaScript,
+ * no request to an icon API, and it inherits `currentColor` like any other glyph.
+ *
+ * Two ids resolve. A qualified icon is `ph--caret-down` (the `prefix:name`
+ * separator becomes `--`, since `:` is not valid in a fragment identifier), and
+ * a semantic name also gets a set-independent `icon-menu` alias — so markup
+ * written here survives changing icon sets, the same guarantee the Astro
+ * components get from resolveIcon().
+ *
+ * IMPORTANT: an external-file <use> is same-origin only, and dead under file://.
+ * That is fine for a theme-relative dist/, but if you ever serve dist/ from a
+ * CDN on another origin the icons vanish silently — no console error, just
+ * empty boxes. Inline the sprite into the page instead if that day comes.
+ *
+ * `$name` is charset-gated rather than allowlisted (unlike [vitops_legal], whose
+ * value lands in a filesystem read): here it only ever reaches an HTML
+ * attribute, so restricting it to id-safe characters plus escaping is the
+ * matching level of care.
+ */
+if ( ! defined( 'VITOPS_SPRITE_URI' ) ) {
+	define( 'VITOPS_SPRITE_URI', get_stylesheet_directory_uri() . '/dist/icons.svg' );
+}
+
+/**
+ * @param string $name  Sprite id — 'menu' (semantic) or 'ph--list' (qualified).
+ * @param array  $args  'size' => any CSS length, 'label' => accessible name,
+ *                      'class' => extra classes on the wrapper.
+ * @return string HTML, or '' when the name is unusable.
+ */
+function vitops_icon( $name, $args = array() ) {
+	$name = is_string( $name ) ? strtolower( trim( $name ) ) : '';
+
+	// Sprite ids are ASCII word characters, hyphens and colons only. Anything
+	// else is a mistake, and echoing it would put author input into markup.
+	if ( '' === $name || ! preg_match( '/^[a-z0-9:_-]+$/', $name ) ) {
+		return '';
+	}
+
+	// Accept a qualified `prefix:name` too, and normalise it to the sprite's id.
+	$id = str_replace( ':', '--', $name );
+
+	$defaults = array(
+		'size'  => '',
+		'label' => '',
+		'class' => '',
+	);
+	$args     = array_merge( $defaults, is_array( $args ) ? $args : array() );
+
+	$classes = trim( 'icon ' . $args['class'] );
+	$style   = '' !== $args['size'] ? ' style="--icon-size:' . esc_attr( $args['size'] ) . '"' : '';
+
+	// Decorative by default — an icon beside a label must not be announced twice.
+	$a11y = '' !== $args['label']
+		? ' role="img" aria-label="' . esc_attr( $args['label'] ) . '"'
+		: ' aria-hidden="true"';
+
+	return '<span class="' . esc_attr( $classes ) . '"' . $style . $a11y . '>'
+		. '<svg><use href="' . esc_url( VITOPS_SPRITE_URI ) . '#' . esc_attr( $id ) . '"></use></svg>'
+		. '</span>';
+}
+
+add_shortcode(
+	'vitops_icon',
+	function ( $atts ) {
+		$atts = shortcode_atts(
+			array(
+				'name'  => '',
+				'size'  => '',
+				'label' => '',
+				'class' => '',
+			),
+			$atts,
+			'vitops_icon'
+		);
+
+		return vitops_icon(
+			$atts['name'],
+			array(
+				'size'  => $atts['size'],
+				'label' => $atts['label'],
+				'class' => $atts['class'],
+			)
+		);
+	}
+);

package/assets/css/animation.css

@@ -11,15 +11,18 @@
  *     · animate-view / animate-scroll — keyframe linked to a scroll timeline
  *     · animate-trigger              — keyframe, time-based; plays once when
  *                                      .is-active / [data-active] is set
- *     · transition-active / -hover   — TRANSITION (not keyframe) over the same
- *                                      from/to vars, so it reverses on state flip
+ *     · transition + hover-/focus-/  — TRANSITION (not keyframe) over the same
+ *       active-<fx>                    from/to vars, so it reverses on state flip.
+ *                                      Each state matches the element OR its
+ *                                      direct parent, so an effect that clips
+ *                                      itself away (reveal-*) is still reachable.
  *   Both driver families read the same `--<prop>-*` vars, so one effect
  *   (e.g. .fade-in) works in every mode with no redefinition.
  *
  * Effects by rendering stage (cheapest → most expensive):
  *   composite: fade-in/out, slide-up/down/left/right, scale-up/down, rotate-cw/ccw
  *   paint:     blur-in/out, elevate-up/down, reveal-left/right/up/down
- *   layout:    size-grow, size-shrink            (keyframe-only — auto height)
+ *   layout:    size-grow, size-shrink            (auto height; needs interpolate-size)
  *   journey:   fade-journey, slide-journey, …    (multi-phase; view timeline)
  * One keyframe per element: same-stage effects compose via vars (fade-in +
  * scale-up); cross-stage (fade + blur) needs nested elements.
@@ -31,8 +34,8 @@
  * Usage:
  *   <div class="fade-in slide-up animate-view">     <!-- scroll-into-view -->
  *   <div class="fade-in scale-up animate-trigger">  <!-- play once on enter -->
- *   <button class="scale-up transition-hover">      <!-- grow on hover -->
- *   <div class="fade-in slide-up transition-active"><!-- flip via .is-active -->
+ *   <button class="transition hover-scale-up">      <!-- grow on hover -->
+ *   <div class="transition active-fade-in">         <!-- flip via .is-active -->
  */
 
 /* ===========================================
@@ -220,11 +223,20 @@
 /* ===========================================
  * Trigger Play-State
  * Paused until activated. deferred.ts adds .is-active via IntersectionObserver,
- * but [data-active] / .is-active can also be toggled by any state logic. Gated
- * on JS (no-js → animation runs immediately, so content is never stuck hidden).
+ * but [data-active] / .is-active can also be toggled by any state logic.
+ *
+ * Gated on `scripting: enabled` because pausing is only safe when something can
+ * un-pause it: with no JS, .is-active is never added, and a paused entrance
+ * animation is `opacity: 0` — i.e. invisible content, permanently. Note which way
+ * this fails. An engine that doesn't know the media feature drops the whole block
+ * and the animation simply runs on load: an enhancement lost, nothing hidden.
+ * That is the right direction, and it is why this is a media query rather than
+ * the `:root:not(.no-js)` class it replaced — that spelling needed a class in the
+ * consumer's own <html>, which the Astro integration cannot put there, so every
+ * Astro site was silently failing the other way.
  * =========================================== */
 
-:where(:root:not(.no-js)) {
+@media (scripting: enabled) {
   .animate-trigger {
     animation-play-state: paused;
   }
@@ -261,6 +273,21 @@
  * Stagger Support
  * =========================================== */
 
+/* Both are per-element positions, never something a child should inherit — an
+   unregistered custom property would leak the parent's index into every
+   descendant that happens to carry a driver. */
+@property --_stagger-index {
+  syntax: '<number>';
+  inherits: false;
+  initial-value: 0;
+}
+
+@property --_anim-range-offset {
+  syntax: '<length-percentage>';
+  inherits: false;
+  initial-value: 0%;
+}
+
 .stagger {
   --_stagger-amount: var(--stagger-amount, 0.1s);
 }
@@ -270,15 +297,36 @@
      --_stagger-index inline, which wins. Where sibling-index() is supported
      it provides a JS-free fallback via the @supports block below. */
   --_stagger-index: 0;
+
+  /* Time-based drivers (.animate-trigger, .float) stagger on delay. */
   animation-delay: calc(var(--_stagger-index) * var(--_stagger-amount));
-}
 
-/* sibling-index() is near-baseline (lacking only Firefox as of 2026). Guarded so
-   that on unsupported engines the declaration is skipped and delay stays 0
-   (items animate together) rather than producing an invalid animation-delay. */
-@supports (--x: sibling-index()) {
+  /* Scroll-driven drivers do NOT: animation-delay is time-based and is ignored
+     outright on a progress-based timeline, which is why `.stagger > .animate-view`
+     used to arrive all at once. Offsetting the view RANGE by the same index is the
+     equivalent move — each child starts its entrance a little further into its own
+     entry phase. .animate-view folds this into its default range, so one .stagger
+     works under both driver families. Journeys set an explicit animation-range and
+     opt out by construction.
+
+     The step is a VIEWPORT length, matching the window it shifts: .animate-view
+     now spans 10vh → 25vh of the element's midpoint travel, so a step expressed
+     as a percentage of the element's own height (which is what a bare `%` means
+     inside the entry range) would be a few pixels against an ~80px window — a
+     stagger too small to read, and one that changed meaning with tile size. */
+  --_anim-range-offset: calc(var(--_stagger-index) * var(--stagger-range-step, 5vh));
+}
+
+/* sibling-index() is near-baseline (lacking only Firefox as of 2026). The test
+   must be a REAL property — `@supports (--x: sibling-index())` is always true,
+   because any token stream is a valid custom-property value, so it guarded
+   nothing. Where it is unsupported the declaration is skipped and the index stays
+   0 (items animate together) rather than producing an invalid delay/range.
+   `- 1` because applyRowStagger writes a 0-based index and sibling-index() is
+   1-based; the two must agree or the JS and CSS paths differ by one step. */
+@supports (animation-delay: calc(sibling-index() * 1s)) {
   .stagger > * {
-    --_stagger-index: sibling-index();
+    --_stagger-index: calc(sibling-index() - 1);
   }
 }
 
@@ -355,11 +403,34 @@
 .animate-view {
   animation-name: var(--_anim);
   animation-timeline: view();
-  /* Finish the entrance early — by default within the first 20% of the element's
-     ENTRY into the viewport — so it's done just after it appears (fill: both
-     holds the end state). Override the stops via --anim-range; journey effects
-     set their own `entry exit` range and are unaffected. */
-  animation-range: var(--anim-range, entry 0% entry 20%);
+  /* Timed off the element's MIDPOINT, measured into the viewport — the only
+     framing that behaves the same for a 4rem card and a full-bleed section.
+
+     The pivot is `entry 50%`. The entry phase runs from "leading edge at the
+     viewport's trailing edge" to "trailing edge at the viewport's trailing
+     edge", a scroll of exactly one element height — so at its halfway point the
+     element's midpoint sits precisely ON the viewport edge, whatever the element
+     measures. Everything after that is stated in viewport units: `+ 10vh` is
+     "midpoint 10% of the viewport further in".
+
+     So the default plays from midpoint 15% in to midpoint 25% in. Both stops are
+     the ELEMENT's position on screen, not a fraction of its own height, which is
+     what the previous defaults got wrong in both directions: `entry 20%` was ~17px
+     of scroll for a small tile (over before it appeared), and `entry 100%` still
+     finished with the element flush against the bottom edge.
+
+     Percentages here resolve against the entry range (the element's height) and
+     lengths against the scrollport, so the two mix in one calc() by design.
+
+     --anim-start / --anim-end move the window without restating the pivot;
+     --anim-range replaces it outright; --_anim-range-offset shifts both stops
+     together (that's how .stagger offsets scroll-driven children — see Stagger
+     Support). Journeys declare their own range and ignore all of it. */
+  animation-range: var(
+    --anim-range,
+    entry calc(50% + var(--anim-start, 10vh) + var(--_anim-range-offset, 0%)) entry
+      calc(50% + var(--anim-end, 25vh) + var(--_anim-range-offset, 0%))
+  );
 }
 
 .animate-scroll {
@@ -372,13 +443,21 @@
   animation-duration: var(--trigger-animation-duration);
 }
 
-/* Fallback: when scroll-driven timelines are unsupported, deferred.ts adds
-   .no-scroll-timeline to <html>. Without a timeline, view()/scroll() animations
-   never advance and elements would stick at their `from` keyframe (e.g.
-   opacity:0, clipped, blurred). Cancel the animation so they render in their
-   natural, fully-visible state. Trigger animations are unaffected (JS-driven). */
-:root.no-scroll-timeline :where(.animate-view, .animate-scroll) {
-  animation: none;
+/* Fallback: without a scroll-driven timeline, view()/scroll() animations never
+   advance and their elements stick at the `from` keyframe (opacity:0, clipped,
+   blurred) — an entrance animation that never runs is invisible content. Cancel
+   the animation so they render in their natural, fully-visible state. Trigger
+   animations are unaffected (JS-driven, see Trigger Play-State above).
+
+   Same probe as the `.text-reveal` block above, in its negative form — no JS, so
+   it holds with scripting disabled, which the `.no-scroll-timeline` class this
+   replaced could not (a class only JS can add cannot help a page with no JS).
+   `.animate-scroll` uses scroll() rather than view(), but no engine has shipped
+   one without the other, so one probe covers both. */
+@supports not (animation-timeline: view()) {
+  :where(.animate-view, .animate-scroll) {
+    animation: none;
+  }
 }
 
 /* ===========================================
@@ -388,7 +467,8 @@
  * active-<fx> in animation-effects.css) set those vars per state, so different
  * effects bind to different states on one element:
  *   <div class="transition hover-slide-up active-elevate-up">
- * Covers compositor + the full paint chain; layout (auto height) is keyframe-only.
+ * Covers compositor, the full paint chain, and — where `interpolate-size` is
+ * supported — the layout stage (auto height) too.
  * =========================================== */
 
 .transition {
@@ -409,13 +489,44 @@
     saturate(var(--t-saturate, var(--saturate-from, 1))) sepia(var(--t-sepia, var(--sepia-from, 0)))
     hue-rotate(var(--t-hue-rotate, var(--hue-rotate-from, 0deg)));
   clip-path: var(--t-clip, var(--clip-from, none));
-  transition:
-    opacity var(--animation-duration) var(--custom-ease-out),
-    translate var(--animation-duration) var(--custom-ease-out),
-    scale var(--animation-duration) var(--custom-ease-out),
-    rotate var(--animation-duration) var(--custom-ease-out),
-    filter var(--animation-duration) var(--custom-ease-out),
-    clip-path var(--animation-duration) var(--custom-ease-out);
+  /* Longhands rather than the `transition` shorthand: every property here shares
+     one duration and one easing, so listing them once lets the @supports block
+     below APPEND height without restating the whole list (a shorthand would
+     replace it, and transition-property has no additive form). */
+  transition-property: opacity, translate, scale, rotate, filter, clip-path;
+  transition-duration: var(--animation-duration);
+  transition-timing-function: var(--custom-ease-out);
+}
+
+/* Layout stage — `height`, the only one that reflows, and the only one that
+   needs a feature gate.
+
+   `height: 0 → auto` is not interpolable on its own: `auto` isn't a length, so
+   the pair falls back to discrete and the transition doesn't run.
+   `interpolate-size: allow-keywords` (set on :root in utilities.css) is what
+   makes `auto` a real endpoint — NOT `transition-behavior: allow-discrete`,
+   which only permits genuinely discrete properties (display,
+   content-visibility, overlay) to transition and would at best snap at the
+   midpoint here. Gated so engines without it keep no height transition rather
+   than that snap. The same dependency applies to the `layout` KEYFRAME, so this
+   is not a weaker path than a driver — it is the same requirement, stated once.
+
+   Declaring `height: auto` on every .transition element is safe because auto is
+   the initial value and animation.css is imported second in index.css — before
+   layout.css, every pattern and utilities.css — so anything later at equal
+   specificity still wins.
+
+   Caveat worth keeping: patterns/details.css records that transitioning
+   block-size to `auto` on ::details-content DEADLOCKS in Chrome 149
+   (content-visibility: hidden → no layout → `auto` resolves to 0 → nothing
+   runs). That is specific to ::details-content, but the lesson generalises — a
+   passing @supports query is not evidence the interaction works. Verify a real
+   hover before trusting a change here. */
+@supports (interpolate-size: allow-keywords) {
+  .transition {
+    height: var(--t-height, var(--height-from, auto));
+    transition-property: opacity, translate, scale, rotate, filter, clip-path, height;
+  }
 }
 
 /* Respect reduced-motion: drop keyframes, transitions, and continuous floats so

package/assets/css/global.css

@@ -8,12 +8,28 @@
   font-size: 100% !important;
 }
 
+/* Border-box sizing, everywhere.
+   The framework used to refuse this on the grounds that a global reset would
+   silently reflow consumer layouts. Two things changed. It is now LAYERED (this
+   file is `vitops.base`, the lowest of the three), so it loses to any unlayered
+   consumer rule — the opt-out is `*, *::before, *::after { box-sizing:
+   content-box }` in your own stylesheet, and a consumer who already ships a
+   border-box reset (Tailwind preflight, normalize, almost any modern base) sees
+   no change at all. And several patterns are only CORRECT under border-box: the
+   `.split` ratio is a flex basis, which sizes the border box, so under
+   content-box a padded column came out wider than its sibling by exactly its
+   padding. Stating the assumption beats each pattern re-asserting it and the
+   ones that forget being quietly wrong. */
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
 /* 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. */
+   around them. */
 body {
   margin: 0;
 }

package/assets/css/index.css

@@ -7,6 +7,11 @@
 @import './generated/tokens.css';
 @import './generated/typography.css';
 @import './layout.css';
+/* Must precede utilities.css: both are `vitops.utilities`, and utilities.css
+   re-emits `.<bp>-flex` AFTER its own `.hidden` so `class="hidden md-flex"`
+   reveals. That re-emit is only load-bearing because this file's `.md-flex`
+   comes first. */
+@import './layout-utilities.css';
 /* was layout-extra.css */
 @import './patterns/cluster.css';
 @import './patterns/grouped.css';
@@ -17,7 +22,9 @@
 @import './patterns/sticky.css';
 @import './patterns/stack.css';
 @import './patterns/splitter.css';
+@import './patterns/reveal.css';
 @import './utilities.css';
+@import './generated/spacing.css';
 @import './generated/patterns.css';
 /* was overlays.css */
 @import './patterns/dialog.css';
@@ -38,6 +45,7 @@
 @import './patterns/details.css';
 @import './patterns/comment.css';
 @import './patterns/banner.css';
+@import './patterns/consent.css';
 @import './patterns/list.css';
 @import './patterns/tree.css';
 /* was typographic.css */