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

package/CHANGELOG.md

@@ -1,5 +1,28 @@
 # @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

package/dist/index.mjs

@@ -2513,7 +2513,7 @@ async function vitopsHosting(options = {}) {
 }
 
 // package.json
-var version = "2.0.0-alpha.4";
+var version = "2.0.0-alpha.5";
 
 // src/index.ts
 /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@getvitops/emdash",
-  "version": "2.0.0-alpha.4",
+  "version": "2.0.0-alpha.5",
   "description": "EmDash CMS native plugin for the Vitops design system — Portable Text block types editors can insert from the admin, rendered with the design-system web components and CSS framework.",
   "homepage": "https://docs.vitops.ca",
   "bugs": "https://github.com/getvitops/design-system/issues",
@@ -31,15 +31,15 @@
     "access": "public"
   },
   "dependencies": {
-    "@getvitops/generator": "8.3.0-alpha.4",
-    "@getvitops/utils": "8.3.0-alpha.4"
+    "@getvitops/generator": "8.3.0-alpha.5",
+    "@getvitops/utils": "8.3.0-alpha.5"
   },
   "devDependencies": {
     "@astrojs/cloudflare": "^14.0.0",
     "@astrojs/react": "^7.0.0",
     "@emdash-cms/cloudflare": "^1.4.0",
-    "@getvitops/astro": "8.3.0-alpha.4",
-    "@getvitops/core": "8.3.0-alpha.4",
+    "@getvitops/astro": "8.3.0-alpha.5",
+    "@getvitops/core": "8.3.0-alpha.5",
     "@types/react": "^19.3.0",
     "@types/react-dom": "^19.3.0",
     "astro": "^7.4.4",

package/src/astro/MegaPanel.astro

@@ -0,0 +1,25 @@
+---
+/**
+ * The extra column of a mega-menu panel, from an EmDash widget area. Pass it to `<SiteNav>`:
+ *
+ *   import { VitopsMegaPanel } from '@getvitops/emdash/astro';
+ *   <SiteNav {...nav} megaPanel={VitopsMegaPanel} />
+ *
+ * `<SiteNav>` renders it inside each top-level item's panel on the `primary-mega` tier, passing
+ * `{ item }`. The area is named `mega-<last URL segment>` (`/services/` → `mega-services`), or
+ * by a `mega-area:<name>` class on the menu item, which wins because labels are translated and
+ * so unstable. An item with neither, or whose area is missing or empty, renders nothing — an
+ * editor adds a column by creating the widget area, with no code change.
+ */
+import { megaAreaName, type NavItem } from '@getvitops/astro/components/sitenav.ts';
+import WidgetArea from './WidgetArea.astro';
+
+interface Props {
+  item: NavItem;
+}
+
+const { item } = Astro.props;
+const name = megaAreaName(item);
+---
+
+{name && <WidgetArea name={name} level={3} class="sitenav__mega-area" />}

package/src/astro/index.ts

@@ -67,6 +67,9 @@ export const blockTypeComponents = {
 /** The framework-styled widget area, for a site layout (the block form is `vitops_widgetArea`). */
 export { default as VitopsWidgetArea } from './WidgetArea.astro';
 
+/** A mega-menu panel's extra column from a widget area, for `<SiteNav megaPanel={VitopsMegaPanel} />`. */
+export { default as VitopsMegaPanel } from './MegaPanel.astro';
+
 /**
  * `themeAttrs('surface')` → `{ class, style }` for the layout's `<body>` (or any element a site owns):
  * the same backdrop-and-readable-text every block's `theme` field gives, from the site's own roles.