@getvitops/emdash 2.0.0-alpha.3 → 2.0.0-alpha.5

package/CHANGELOG.md

@@ -1,5 +1,65 @@
 # @getvitops/emdash
 
+## 2.0.0-alpha.5
+
+### Minor Changes
+
+- 4d94c8b: **Added: `site.chrome` — a configurable masthead and nav behaviour.** Non-breaking.
+
+  - `site.chrome.masthead` (new `@getvitops/config` schema): `position` (`static|sticky|fixed`), `behavior` (`always|hide-on-scroll`), `surface` (`solid|glass|transparent|transparent-until-scrolled`), `tone` (a `colors.roles` key), `layout` (`full|inset|floating`), `width`, `elevation` (`shadow`, `border`, `onScroll`), `height` and `inset`. `height` and `inset` take fluid lengths (`calc()`, `clamp()`, `min()`, `max()`, with `cqi`/`vw`/… units), checked against a closed grammar because they are written into CSS. `validateConfig` rejects a `tone` or `shadow` the design system does not define (only when the default theme states them directly, not via `extends`).
+  - `site.chrome.nav`: `compact` (`drawer|dropdown`), `drawerSide`, `breakpoint`/`mobileBreakpoint`/`megaBreakpoint`, `depth`, `megaDepth`.
+  - `<Masthead config={site}>` (`@getvitops/astro`, slots `brand`/default/`actions`) and `resolveMasthead()` / `resolveNavOptions()`. A prop overrides one field per layout. The key is `chrome`/`masthead` on purpose: `<header>` is valid in any section and `banner` already means the announcement bar and the landmark role.
+  - `<SiteNav>` gains `compact="dropdown"` (a columnar panel anchored under the toggle), `drawerSide` (previously hardcoded to the end edge in Astro), `megaDepth` and `megaPanel`. `.sitenav--mega` now styles second-level items as column headings and has an optional featured column.
+  - `@getvitops/emdash`: `VitopsMegaPanel` fills that column from the widget area `mega-<item url slug>` (or a `mega-area:<name>` class on the menu item). No area means no column.
+  - `@getvitops/create` (emdash template): the layout renders through `<Masthead>`; `site.json` ships a sticky glass masthead with a shadow once scrolled. The hand-written `.navbar { block-size: 64px }` is gone (use `masthead.height`).
+  - CSS (`patterns/masthead.css`, `patterns/sitenav.css`): **all formats**, including tailwind, where the patterns are inlined into `@layer components`. Hide-on-scroll and the `*-on-scroll` states are `scroll-state()` container queries that only subtract from a settled (solid, elevated, visible) bar, so a browser without them (Firefox today) shows that bar rather than a transparent one. A sticky or fixed masthead sets `--header-offset` / `--top-offset` so anchors land below it.
+  - `@getvitops/generator`: new `TIERS.masthead`; `TIERS.sitenav` documents the new props.
+
+### Patch Changes
+
+- Updated dependencies [785b8b3]
+- Updated dependencies [bb61a35]
+- Updated dependencies [4d94c8b]
+  - @getvitops/utils@8.3.0-alpha.5
+  - @getvitops/generator@8.3.0-alpha.5
+
+## 2.0.0-alpha.4
+
+### Minor Changes
+
+- 99e66a2: Fixes from the vitops.ca build (alpha.3 findings 1–5, 19, 29).
+
+  - **Scaffold patterns.** Both templates now define `cta`, `link` and `details` in `patterns.items` (a `content` group too), and a `ui-accent` role. `.cta` had no CSS at all, so every hero, card and callout button rendered as plain text; a test now fails if a template omits a pattern the blocks emit. `vitops_accordion` renders a sprite chevron like `vitops_details`, and `details.css` styles an `.accordion` group (a divider and padded summaries from the `details` pattern tokens) — all formats.
+  - **Tone paints only on surfaces.** `.tone` now sets colour variables and `border-color`; the background comes from `.tone--tint` (callout, panel card, hero card, toned section/hero/nav/reviews, `theme`) or `.tone--solid`. A steps, stats or form block with a tone is no longer turned into a band. `ResolvedTone` gains `surface` (`tone tone--tint`). **If you styled `.tone` directly,** add `tone--tint` where you want the background. A `.cta` inside a tinted or filled tone takes the tone's solid. all formats.
+  - **`colors.tint: { mix: "8%" }`** derives the tint from the role's solid (`--tone-tint`) instead of its `muted` step, which turns brown for amber on a dark page. Off by default; not covered by the contrast contract.
+  - **Per-card backdrop.** `vitops_cards` and `vitops_hero` rows take a `theme` (tint or fill of a site colour), so one card of a pair can be tinted.
+  - **`colors.roles.<r>.acknowledgeContrast`**: a number of Lc a pairing may miss its APCA bar by and still only warn (e.g. pine's solid at Lc 59.5 against 60). A larger miss still fails.
+  - **Select:** where `appearance: base-select` is supported the wrapper's own chevron is hidden, so a select no longer shows two arrows, and the wrapper and control fill the field (`.custom-select` is `display: block`; add `display: inline-block` if you used it inline). all formats.
+
+- d64fb20: Layout and spacing fixes from the vitops.ca build (findings 6–9).
+
+  - **`vitops_section` is the page opener.** New fields `cta_label`/`cta_href`/`secondary_label`/`secondary_href` (a `.cta` and a `.link` in the head), `*accent*` runs in the heading, and `stack: rhythm`, which puts `.rhythm` on `.section__inner` so head and body use the vertical-rhythm scale. With level 1 it replaces nesting a `vitops_hero` in a section, which rendered `section > .centered > … > section > .centered`. `vitops_hero` stays for a stand-alone hero with option cards. A plain (`stack: grid`) section also puts a gap between head and body now (`--section-gap`, default 2rem) instead of sitting flush. css/bricks/tailwind.
+  - **`.rhythm` spaces blocks.** A card row (`wc-cards`, classed `ul`/`ol`), accordion, `details`, form, table, figure or `.section__body` directly under a `.rhythm` is `--rhythm-block` (2) apart, not a paragraph apart; a button row (`p.cluster`) is `--rhythm-block-action` (1.6). Classless lists stay prose and a form's own field spacing is unchanged. A bare `<a>` that is a direct child of `.rhythm` is now `display: block; inline-size: fit-content`, since an inline box ignored `margin-top` and sat flush under the paragraph above (`.cta` and `.btn` are unaffected). all formats.
+  - **`rhythm-flex`** utility: an opt-in flex-column stack for the case the margin stack does not suit; margins apply to any child. all formats (`@utility` in tailwind).
+
+- 322dd6a: Block fixes from the vitops.ca build (findings 11–13, 15, 17, 18, 21).
+
+  - **Steps.** The marker is an outlined disc in the tone (number and ring in `--tone-solid`, falling back to `currentColor`), so a steps block with no tone no longer shows black discs with no number. Items keep `align-content: start` and no `.rhythm li + li` margin, so markers in a row line up. Two modifiers through the block's `className`: `steps--cards` (each step in a card) and `steps--animated` (the connector draws and the marker fills as each step scrolls in; static under reduced motion or without scroll-driven animations). `steps` is now a config pattern: `patterns.items.steps` in `site.json` owns the card geometry (`content` group tokens) and the marker size (`--steps-marker-size`, `--steps-line-width`); both templates and the reference config ship an entry. all formats.
+  - **Stats.** `<wc-counter>` leaves a figure it cannot count as authored (`"1 in 6"`, `"24/7"`, `"—"`) instead of counting down from zero to a wrong value. `animate: false` on the block still turns the count-up off for a whole block.
+  - **Logos.** `vitops_logos` takes an optional `kicker`, `note` and `linkLabel`/`linkHref`; with any of them set, the row is wrapped in `.logos-block`. The list keeps the block's attributes either way.
+  - **Pricing.** Plans take `yearly` (a second price line) and `note` (under the plan name).
+  - **`<SiteFooter>`** has a `brand` named slot, rendered as the first column (`.sitefooter__brand`) in the site's own markup.
+
+### Patch Changes
+
+- Updated dependencies [99e66a2]
+- Updated dependencies [00a9d86]
+- Updated dependencies [d64fb20]
+- Updated dependencies [322dd6a]
+- Updated dependencies [322dd6a]
+  - @getvitops/generator@8.3.0-alpha.4
+  - @getvitops/utils@8.3.0-alpha.4
+
 ## 2.0.0-alpha.3
 
 ### Patch Changes

package/dist/index.d.mts

@@ -82,6 +82,8 @@ export declare function toneChain(tone: unknown): string[];
 interface ResolvedTone {
   /** Always `tone`; a block adds `tone--solid` itself when it fills rather than tints. */
   className: string;
+  /** `tone tone--tint`: what a block that is a surface (callout, card, band) puts on its root. */
+  surface: string;
   /** Inline `style` value of `--tone-*` properties (no trailing semicolon). Empty when unset. */
   style: string;
 }

package/dist/index.d.mts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.mts","names":[],"sources":["../src/blocks.ts","../src/design-system-route.ts","../src/blocks-doc.ts","../src/form-template.ts","../src/block-types.ts","../src/astro/blocks/tone.ts","../src/hosting.ts","../src/index.ts"],"mappings":";;;KAwBY,mBAAmB,QAC7B,YAAY;EAEV;;KAWQ,uBAAuB,KAAK;EACtC,SAAS;;qBAqlCE,QAAQ;;UAMJ;;EAEf;;EAEA;;;;;;;EAOA,QAAQ;;;;;;;;wBASM,aAAa,YAAW,iBAAsB;UC/lC7C;;;;;;;;EAQf;;EAEA;;;;;;;wBC9Bc,gBAAgB,kBAAiB;;UCjBhC;EACf;EACA;EACA;EACA;EACA;IAAY;IAAe;;;UAGZ;EACf;EACA;EACA;EACA;EACA,QAAQ;;;wBAIM,sBAAsB,iBAAiB;;qBCZ1C;;qBAoEA,oBAAoB;;;;;;wBAejB,oBAAoB;;wBCrDpB,UAAU;UAcT;;EAEf;;EAEA;;;;;;;;wBASc,YAAY,gBAAgB,kBAAkB;KChDlD;UAIK;;EAEf,SAAS;EACT;;IAEE;;IAEA;;IAEA;;;;;;;IAOA;;EAEF;;IAEE;;IAEA;;IAEA;;IAEA;;;UAIa;EACf,QAAQ;EACR,SAAS;;EAET;;EAEA;;wBAoBoB,cAAc,UAAS,uBAA4B,QAAQ;iBCfhE;;;;;;;;;;;EAWf;;EAEA;;;;;;;;;EASA,qBAAqB;;;;;;EAMrB,SAAS;;;;;;;EAOT;;;;;;wBAOc,aAAa,UAAS,sBAA2B;;wBAmBjD,aAAa,UAAS,uCAAwB,gCAAA"}
+{"version":3,"file":"index.d.mts","names":[],"sources":["../src/blocks.ts","../src/design-system-route.ts","../src/blocks-doc.ts","../src/form-template.ts","../src/block-types.ts","../src/astro/blocks/tone.ts","../src/hosting.ts","../src/index.ts"],"mappings":";;;KAwBY,mBAAmB,QAC7B,YAAY;EAEV;;KAWQ,uBAAuB,KAAK;EACtC,SAAS;;qBAqnCE,QAAQ;;UAMJ;;EAEf;;EAEA;;;;;;;EAOA,QAAQ;;;;;;;;wBASM,aAAa,YAAW,iBAAsB;UC/nC7C;;;;;;;;EAQf;;EAEA;;;;;;;wBC9Bc,gBAAgB,kBAAiB;;UCjBhC;EACf;EACA;EACA;EACA;EACA;IAAY;IAAe;;;UAGZ;EACf;EACA;EACA;EACA;EACA,QAAQ;;;wBAIM,sBAAsB,iBAAiB;;qBCZ1C;;qBA8EA,oBAAoB;;;;;;wBAejB,oBAAoB;;wBC/DpB,UAAU;UAcT;;EAEf;;EAEA;;EAEA;;;;;;;;wBASc,YAAY,gBAAgB,kBAAkB;KClDlD;UAIK;;EAEf,SAAS;EACT;;IAEE;;IAEA;;IAEA;;;;;;;IAOA;;EAEF;;IAEE;;IAEA;;IAEA;;IAEA;;;UAIa;EACf,QAAQ;EACR,SAAS;;EAET;;EAEA;;wBAoBoB,cAAc,UAAS,uBAA4B,QAAQ;iBCfhE;;;;;;;;;;;EAWf;;EAEA;;;;;;;;;EASA,qBAAqB;;;;;;EAMrB,SAAS;;;;;;;EAOT;;;;;;wBAOc,aAAa,UAAS,sBAA2B;;wBAmBjD,aAAa,UAAS,uCAAwB,gCAAA"}

package/dist/index.mjs

@@ -109,6 +109,7 @@ function resolveTone(tone, color) {
 		const flip = (light, dark) => `light-dark(${at(light)}, ${at(dark)})`;
 		return {
 			className: "tone",
+			surface: "tone tone--tint",
 			style: [
 				`--tone-bg: ${flip("100", "900")}`,
 				`--tone-fg: ${flip("900", "100")}`,
@@ -120,12 +121,14 @@ function resolveTone(tone, color) {
 	}
 	if (!hasTone) return {
 		className: "tone",
+		surface: "tone",
 		style: ""
 	};
 	const roles = toneChain(tone);
 	const of = (prefix, suffix = "") => chain(roles.map((r) => `--color-${prefix}-${r}${suffix}`));
 	return {
 		className: "tone",
+		surface: "tone tone--tint",
 		style: [
 			`--tone-bg: ${of("bg", "-muted")}`,
 			`--tone-fg: ${of("text")}`,
@@ -191,6 +194,26 @@ const SECTION_FIELDS = [
 		label: "Lead-in text under the heading",
 		type: "text"
 	},
+	{
+		slug: "cta_label",
+		label: "Button text (filled)",
+		type: "string"
+	},
+	{
+		slug: "cta_href",
+		label: "Button URL",
+		type: "string"
+	},
+	{
+		slug: "secondary_label",
+		label: "Second link text",
+		type: "string"
+	},
+	{
+		slug: "secondary_href",
+		label: "Second link URL",
+		type: "string"
+	},
 	{
 		slug: "body",
 		label: "Content (any blocks)",
@@ -201,6 +224,7 @@ const SECTION_FIELDS = [
 		"center",
 		"split"
 	], "stack"),
+	select("stack", "Spacing (rhythm: head and body use the vertical-rhythm scale, as a page opener or prose stack)", ["grid", "rhythm"], "grid"),
 	select("width", "Width", [
 		"measure",
 		"breakout",
@@ -1028,6 +1052,26 @@ const BASE_BLOCKS = [
 				label: "Accessible name",
 				initial_value: "Partners"
 			},
+			{
+				type: "text_input",
+				action_id: "kicker",
+				label: "Line above the row (optional)"
+			},
+			{
+				type: "text_input",
+				action_id: "note",
+				label: "Closing note under the row (optional)"
+			},
+			{
+				type: "text_input",
+				action_id: "linkLabel",
+				label: "Link text under the row (optional)"
+			},
+			{
+				type: "text_input",
+				action_id: "linkHref",
+				label: "Link URL"
+			},
 			{
 				type: "repeater",
 				action_id: "logos",
@@ -1316,6 +1360,16 @@ const BASE_BLOCKS = [
 					action_id: "period",
 					label: "Period (e.g. per month)"
 				},
+				{
+					type: "text_input",
+					action_id: "yearly",
+					label: "Yearly price line (e.g. $34 paid yearly), shown under the price"
+				},
+				{
+					type: "text_input",
+					action_id: "note",
+					label: "Note under the plan name (e.g. Best for small teams)"
+				},
 				{
 					type: "text_input",
 					action_id: "features",
@@ -1830,23 +1884,44 @@ const ROW_TONE = {
 	vitops_hero: "cards"
 };
 /** Extra row fields for one repeater, beyond the shared tone pair. */
-const ROW_EXTRA = { vitops_hero: { cards: [
-	{
-		type: "text_input",
-		action_id: "eyebrow",
-		label: "Eyebrow (small line above the title)"
-	},
-	{
-		type: "text_input",
-		action_id: "ctaLabel",
-		label: "Button text"
-	},
-	{
-		type: "text_input",
-		action_id: "ctaHref",
-		label: "Button URL"
-	}
-] } };
+const rowThemeField = () => ({
+	type: "select",
+	action_id: "theme",
+	label: "Backdrop for this item (a tint or fill of a site colour; wins over tone)",
+	initial_value: "",
+	options: [{
+		label: "None",
+		value: ""
+	}, ...THEME_ROLES.flatMap((r) => [{
+		label: r.replace(/-/g, " "),
+		value: r
+	}, {
+		label: `${r.replace(/-/g, " ")} (filled)`,
+		value: `${r}:solid`
+	}])],
+	optionsRoute: THEMES_ROUTE
+});
+const ROW_EXTRA = {
+	vitops_cards: { cards: [rowThemeField()] },
+	vitops_hero: { cards: [
+		rowThemeField(),
+		{
+			type: "text_input",
+			action_id: "eyebrow",
+			label: "Eyebrow (small line above the title)"
+		},
+		{
+			type: "text_input",
+			action_id: "ctaLabel",
+			label: "Button text"
+		},
+		{
+			type: "text_input",
+			action_id: "ctaHref",
+			label: "Button URL"
+		}
+	] }
+};
 const rowToneFields = () => [{
 	type: "select",
 	action_id: "tone",
@@ -2179,7 +2254,9 @@ function renderBlocksDoc(blocks = BLOCKS) {
 		"class built from the value. Rows of `hero.cards`, `cards`, `stats` and `steps` (and `badges.items`)",
 		"take their own `tone`/`color`; blank inherits the block's, and a row's colour never reaches its",
 		"siblings, so mixed colours need no extra block. Multiline fields that accept links take",
-		"`[text](/url)`; hero headings accent words wrapped in `*stars*`.",
+		"`[text](/url)`; hero and section headings accent words wrapped in `*stars*` (coloured by the",
+		"`ui-accent` role, or `--accent-color` in the block's `style`). `hero.cards` and `cards` rows also take a",
+		"`theme` (a tint or fill of a site colour) so one card can differ from its neighbours.",
 		"",
 		"## Theme",
 		"",
@@ -2193,6 +2270,9 @@ function renderBlocksDoc(blocks = BLOCKS) {
 		"configured size, so one block can resize its titles through its `style` field",
 		"(`--heading-fs: 1.125rem`) with no site CSS; set it on an ancestor to resize a region. It is inherited,",
 		"so it reaches every use of that role inside the block. `style` accepts custom properties only.",
+		"Steps take two modifiers through `className`: `steps--cards` (each step in a card; its geometry is the",
+		"`steps` entry of `patterns.items` in site.json) and `steps--animated` (the connector draws and the marker fills",
+		"on scroll; static with reduced motion). `rhythm-flex` is an opt-in flex stack for any block.",
 		"Steps, stats and cards also have per-part hooks: `--steps-title-size` (default one step below the",
 		"heading role), `--stats-figure-size` and `--card-title-size`.",
 		""
@@ -2433,7 +2513,7 @@ async function vitopsHosting(options = {}) {
 }
 
 // package.json
-var version = "2.0.0-alpha.3";
+var version = "2.0.0-alpha.5";
 
 // src/index.ts
 /**