@luz-ds/cms 0.0.0-stage → 0.2.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024–2026 Fernando Muñoz
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,3 +1,94 @@
-# Temporary Holding Version
+# @luz-ds/cms
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+The page structure of one kind of site, a blog, a newspaper or any site of articles, built with any CMS and any stack: the header (a bar or a newspaper's masthead), the page header, the article header, the table of contents beside the text, and the footer. Each is a class on a native element, laid out in the markup by `@luz-ds/core`'s objects (`.o-page`, `.o-sticky`, `.o-container`, `.o-row`, `.o-stack`) and its navbar; cms adds only its skin. `@luz-ds/catalog` is optional: its search and language switch go in the header's actions.
+
+> **Beta, version 0.x.** CMS has a version of its own, apart from tokens, core and catalog, and grows in minor versions while it is 0.x: any of them may change a class. Pin an exact version and read the changelog before you upgrade.
+
+## When to use it
+
+- You publish articles, posts or stories, each with a title, an author and a date, some long enough to need a table of contents.
+- Not for a landing page (`@luz-ds/landing`), documentation or an app.
+
+The classes go on any element, so a template of any CMS can write them (in a block-editor template, a block's `className`). The post card, the post listing, related posts and the author box need no CSS of their own: they are markup to copy, built from core's card, avatar and pagination, on the [CMS templates](https://nandovejer.github.io/luz/docs/cms/templates/) page of the docs.
+
+## Prerequisites
+
+Requires `@luz-ds/tokens` and `@luz-ds/core`, version `^0.1.0 || ^0.2.0`, declared as peer dependencies, loaded in that order before this package. `@luz-ds/catalog` (`^0.1.0 || ^0.2.0`) is an optional peer: load it before this package if you use its pieces; the patterns work without it.
+
+## Installation
+
+```bash
+npm install @luz-ds/tokens @luz-ds/core @luz-ds/catalog @luz-ds/cms
+```
+
+## Usage
+
+### Via npm/bundler
+
+```js
+import '@luz-ds/tokens/css'
+import '@luz-ds/core/css'
+import '@luz-ds/catalog/css'
+import '@luz-ds/cms/css'
+```
+
+### Via CDN
+
+```html
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@luz-ds/tokens@0.1.0/dist/luz-tokens.min.css">
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@luz-ds/core@0.1.0/dist/luz.min.css">
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@luz-ds/catalog@0.1.0/dist/catalog.min.css">
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@luz-ds/cms@0.1.0/dist/cms.min.css">
+```
+
+There is no script: the header's menu is a native popover. Core's script is optional: with it, the table of contents marks the section in view (core's scroll spy, on the in-page links inside an element with `data-luz-spy`).
+
+The body of a story is core's `.luz-prose` (line length and the space between blocks) and its date and reading time are core's `.luz-meta`; lists of posts are core's `.o-grid` or `.o-stack` on a `<ul>`. None of them needs a rule of yours.
+
+## Package exports
+
+- **`./css`** → `cms.css` — the patterns, in the cascade layer `luz.cms`, after `luz.catalog` (`./css/min` for the minified twin)
+- **`./components/*`** → `dist/components/` — one stylesheet per pattern, `<name>.css` and `<name>.min.css`, each in `luz.cms`, for a page that loads only what it uses
+
+## Classes included
+
+- `.luz-cms-header` (`__brand`, `__actions`; `--masthead` with `__top`, `__date`, `__sections`) — The top of every page: the publication's name, its sections in core's navbar and the actions, in one row that stays at the top with core's `.o-sticky`; or, with `--masthead`, a newspaper's three rows (date and search, the name, the sections), not sticky. [Docs](https://nandovejer.github.io/luz/docs/cms/header/)
+- `.luz-cms-page-header` (`__title`, `__lead`) — The title of a page that is not an article (about, contact) and one sentence about what it is for. [Docs](https://nandovejer.github.io/luz/docs/cms/page-header/)
+
+- `.luz-cms-article-header` (`__kicker`, `__title`, `__standfirst`, `__byline`, `__media`) — The top of a story: its section, the title, the standfirst, who wrote it and when, and an optional lead picture. [Docs](https://nandovejer.github.io/luz/docs/cms/article-header/)
+- `.luz-cms-article` (`__layout`) and `.luz-cms-toc` (`__title`, `__list`) — The story and its table of contents: beside the text, staying in view, when the article is 46rem wide or more; above it below that. `--luz-cms-toc-top` sets the space above it while it stays in view (by default under a `.o-sticky` bar of core's `--luz-bar-h`). [Docs](https://nandovejer.github.io/luz/docs/cms/toc/)
+- `.luz-cms-footer` — The end of every page: a rule above, who publishes it and a few links at the two ends of a row; a column at 768 px and below. [Docs](https://nandovejer.github.io/luz/docs/cms/footer/)
+
+<!-- luz:ai-agents:start -->
+## For AI agents
+
+`@luz-ds/cms` 0.2.0 is in beta: any release may break anything. Read the breaking changes below before you update, and use only what the files under "Read first" list.
+
+### Breaking changes
+
+#### Breaking: `@luz-ds/site` is now `@luz-ds/catalog`, the name the home and the docs already gave to level 3. Install `@luz-ds/catalog` and load `catalog.css` / `catalog.min.css` and `catalog.js` / `catalog.min.js` where you loaded the `site.*` files; its subpaths (`/search`, `/consent`, `/mode`, `/css`, `/css/min`, `/print.css`, `/components/*`, `/classes.json`, `/custom-elements.json`) keep their names. The cascade layer is `luz.catalog` instead of `luz.site`, in the order statement every stylesheet repeats (so tokens and core change too). The landing, cms, app and docs packages take `@luz-ds/catalog` as their optional peer. `luz-check` reads the new names and its `load/order` rule says tokens, core, catalog. The docs of the package are at `/docs/catalog/` (was `/docs/site/`). The tags (`<luz-search>`, `<luz-consent>`, `<luz-mode>`, `<luz-lang-switch>`, `<luz-submenu>`, `<luz-banner>`) and their classes do not change.
+
+Older versions: https://github.com/nandovejer/luz/blob/main/packages/cms/CHANGELOG.md
+
+### Read first
+
+1. `dist/classes.json` in this package: the classes and custom properties its CSS defines. Write only those.
+2. https://nandovejer.github.io/luz/llms.txt: the index of the documentation, short enough for a small context.
+3. https://nandovejer.github.io/luz/llms-full.txt: the same pages in full.
+4. https://nandovejer.github.io/luz/examples/: one standalone page of markup for each component and pattern.
+
+### Load order
+
+This package needs `@luz-ds/tokens` and `@luz-ds/core` loaded first.
+
+`@luz-ds/catalog` is optional: the CSS of this package works with the packages above alone.
+
+### Check what you write
+
+Run `npx @luz-ds/check <files>` on every HTML and CSS file you write, and fix what it reports. To copy the accessibility reviewer into your project: `npx @luz-ds/check agent > .claude/agents/luz-accessibility-reviewer.md`.
+
+<!-- luz:ai-agents:end -->
+
+## License
+
+MIT

package/dist/classes.json

@@ -0,0 +1,35 @@
+{
+  "schema": 1,
+  "package": "@luz-ds/cms",
+  "version": "0.2.0",
+  "classes": [
+    { "name": "luz-cms-article", "kind": "pattern", "layer": "luz.cms", "files": ["components/article.css"], "defined": true, "block": "luz-cms-article" },
+    { "name": "luz-cms-article-header", "kind": "pattern", "layer": "luz.cms", "files": ["components/article-header.css"], "defined": true, "block": "luz-cms-article-header" },
+    { "name": "luz-cms-article-header__byline", "kind": "pattern", "layer": "luz.cms", "files": ["components/article-header.css"], "defined": true, "block": "luz-cms-article-header", "part": "byline" },
+    { "name": "luz-cms-article-header__kicker", "kind": "pattern", "layer": "luz.cms", "files": ["components/article-header.css"], "defined": true, "block": "luz-cms-article-header", "part": "kicker" },
+    { "name": "luz-cms-article-header__media", "kind": "pattern", "layer": "luz.cms", "files": ["components/article-header.css"], "defined": true, "block": "luz-cms-article-header", "part": "media" },
+    { "name": "luz-cms-article-header__standfirst", "kind": "pattern", "layer": "luz.cms", "files": ["components/article-header.css"], "defined": true, "block": "luz-cms-article-header", "part": "standfirst" },
+    { "name": "luz-cms-article-header__title", "kind": "pattern", "layer": "luz.cms", "files": ["components/article-header.css"], "defined": true, "block": "luz-cms-article-header", "part": "title" },
+    { "name": "luz-cms-article__layout", "kind": "pattern", "layer": "luz.cms", "files": ["components/article.css"], "defined": true, "block": "luz-cms-article", "part": "layout" },
+    { "name": "luz-cms-footer", "kind": "pattern", "layer": "luz.cms", "files": ["components/footer.css"], "defined": true, "block": "luz-cms-footer" },
+    { "name": "luz-cms-header", "kind": "pattern", "layer": "luz.cms", "files": ["components/header.css"], "defined": true, "block": "luz-cms-header" },
+    { "name": "luz-cms-header--masthead", "kind": "pattern", "layer": "luz.cms", "files": ["components/header.css"], "defined": true, "block": "luz-cms-header", "modifier": "masthead" },
+    { "name": "luz-cms-header__actions", "kind": "pattern", "layer": "luz.cms", "files": ["components/header.css"], "defined": true, "block": "luz-cms-header", "part": "actions" },
+    { "name": "luz-cms-header__brand", "kind": "pattern", "layer": "luz.cms", "files": ["components/header.css"], "defined": true, "block": "luz-cms-header", "part": "brand" },
+    { "name": "luz-cms-header__date", "kind": "pattern", "layer": "luz.cms", "files": ["components/header.css"], "defined": true, "block": "luz-cms-header", "part": "date" },
+    { "name": "luz-cms-header__sections", "kind": "pattern", "layer": "luz.cms", "files": ["components/header.css"], "defined": true, "block": "luz-cms-header", "part": "sections" },
+    { "name": "luz-cms-header__top", "kind": "pattern", "layer": "luz.cms", "files": ["components/header.css"], "defined": true, "block": "luz-cms-header", "part": "top" },
+    { "name": "luz-cms-page-header", "kind": "pattern", "layer": "luz.cms", "files": ["components/page-header.css"], "defined": true, "block": "luz-cms-page-header" },
+    { "name": "luz-cms-page-header__lead", "kind": "pattern", "layer": "luz.cms", "files": ["components/page-header.css"], "defined": true, "block": "luz-cms-page-header", "part": "lead" },
+    { "name": "luz-cms-page-header__title", "kind": "pattern", "layer": "luz.cms", "files": ["components/page-header.css"], "defined": true, "block": "luz-cms-page-header", "part": "title" },
+    { "name": "luz-cms-toc", "kind": "pattern", "layer": "luz.cms", "files": ["components/article.css"], "defined": true, "block": "luz-cms-toc" },
+    { "name": "luz-cms-toc__list", "kind": "pattern", "layer": "luz.cms", "files": ["components/article.css"], "defined": true, "block": "luz-cms-toc", "part": "list" },
+    { "name": "luz-cms-toc__title", "kind": "pattern", "layer": "luz.cms", "files": ["components/article.css"], "defined": true, "block": "luz-cms-toc", "part": "title" },
+    { "name": "o-row", "kind": "object", "layer": "luz.cms", "files": ["components/footer.css", "components/header.css"], "defined": false, "block": "o-row" },
+    { "name": "o-sticky", "kind": "object", "layer": "luz.cms", "files": ["components/article.css"], "defined": false, "block": "o-sticky" }
+  ],
+  "properties": [
+    { "name": "--luz-cms-toc-top", "scope": "component", "layer": "luz.cms", "files": ["components/article.css"] },
+    { "name": "--luz-lang-switch-top", "scope": "component", "layer": "luz.cms", "files": ["components/header.css"] }
+  ]
+}

package/dist/cms.css

@@ -0,0 +1,409 @@
+@layer luz.tokens, luz.themes, luz.settings, luz.generic, luz.elements, luz.objects, luz.components, luz.utilities, luz.catalog, luz.landing, luz.cms, luz.app, luz.docs, luz.print;
+@layer luz.cms {
+/* ==========================================================================
+   LUZ CMS
+   The page structure of one kind of site, a blog, a newspaper or any CMS:
+   its header, page header, article header, article with its contents, and
+   footer. Each is a class of cms on a native element, laid out in the
+   markup by core's objects (.o-page, .o-sticky, .o-container, .o-row,
+   .o-stack). Any stack: the classes go on any element, so a template of
+   any CMS can emit them.
+   Requires: @luz-ds/tokens and @luz-ds/core loaded first; @luz-ds/catalog
+   optional, loaded before this file.
+   ========================================================================== */
+
+/* ==========================================================================
+	 LUZ CMS: header.
+	 The blog bar: header.luz-cms-header.o-sticky >
+	 div.o-container.o-container--inline.o-row holding core's .luz-nav-toggle,
+	 the __brand link, core's nav.luz-navbar[popover] and a div.o-row.__actions
+	 (site's <luz-search>, then an optional <luz-lang-switch>). Core gives the
+	 stickiness, the width, the row and the collapsing links; cms adds the
+	 surface, the divider, the masthead brand and the gaps.
+	 --masthead, the newspaper: three rows in an .o-stack (__top with the
+	 __date and the __actions, the large centred __brand, and __sections with
+	 the toggle and the navbar between two rules), not sticky.
+	 ========================================================================== */
+
+/* A one-row bar of 44px controls is core's --luz-bar-h tall: two 2xs
+   paddings, the row and the divider. With enlarged text the row wraps
+   and the bar grows. */
+.luz-cms-header {
+	padding-block: var(--luz-space-2xs);
+	border-block-end: 1px solid var(--luz-divider);
+	background: var(--luz-surface-page);
+}
+
+/* The row wraps rather than overflow (WCAG 1.4.4, 1.4.10); its gutters are
+   the page's, so the brand starts where the content starts */
+.luz-cms-header > .o-row {
+	gap: var(--luz-space-xs) var(--luz-space-md);
+}
+
+/* The publication's name: a link, never a heading (the story's title is
+   the h1). It wraps, never ellipsised, and takes the free room of the row,
+   which pushes the links and the actions to the end */
+.luz-cms-header__brand {
+	display: inline-flex;
+	align-items: center;
+	min-block-size: var(--luz-control-lg);
+	margin-inline-end: auto;
+	color: var(--luz-text-primary);
+	font-family: var(--luz-font-heading);
+	font-size: var(--luz-text-xl);
+	font-weight: 600;
+	text-decoration: none;
+}
+
+.luz-cms-header__brand:hover {
+	text-decoration: underline;
+}
+
+/* A logo: an <img> whose alt is the publication's name */
+.luz-cms-header__brand :where(img) {
+	block-size: var(--luz-control-lg);
+	inline-size: auto;
+}
+
+.luz-cms-header__actions {
+	gap: var(--luz-space-xs);
+}
+
+/* The language list of site's <luz-lang-switch> opens under this bar */
+.luz-cms-header :where(luz-lang-switch) {
+	--luz-lang-switch-top: var(--luz-bar-h);
+}
+
+/* --masthead: room around three rows that scroll away with the page */
+.luz-cms-header--masthead {
+	padding-block: var(--luz-space-md);
+	border-block-end: 0;
+}
+
+/* The date gives way to the search: it shrinks and wraps, the search keeps
+   its row */
+.luz-cms-header__top {
+	flex-wrap: nowrap;
+	justify-content: space-between;
+}
+
+.luz-cms-header__date {
+	flex: 1 1 0;
+	min-inline-size: 0;
+	margin: 0;
+	color: var(--luz-text-secondary);
+	font-family: var(--luz-font-sans);
+	font-size: var(--luz-text-sm);
+}
+
+.luz-cms-header--masthead .luz-cms-header__brand {
+	display: block;
+	margin: 0;
+	font-size: var(--luz-text-4xl);
+	line-height: 1.1;
+	text-align: center;
+}
+
+.luz-cms-header--masthead .luz-cms-header__brand :where(img) {
+	block-size: calc(var(--luz-control-lg) * 2);
+}
+
+/* The rules keep clear of the menu button's border */
+.luz-cms-header__sections {
+	padding-block: var(--luz-space-2xs);
+	border-block: 1px solid var(--luz-divider);
+}
+
+@media (min-width: 769px) {
+	.luz-cms-header > .o-row {
+		column-gap: var(--luz-space-lg);
+	}
+
+	.luz-cms-header__sections {
+		justify-content: center;
+	}
+}
+
+/* With the links in the panel, the brand fills the room between the toggle
+   and the actions and wraps there, so the bar stays one row of controls */
+@media (max-width: 768px) {
+	.luz-cms-header > .o-row > .luz-cms-header__brand {
+		flex: 1 1 0;
+	}
+}
+
+@media (max-width: 1023px) {
+	.luz-cms-header--masthead .luz-cms-header__brand {
+		font-size: var(--luz-text-3xl);
+	}
+}
+
+@media (max-width: 640px) {
+	.luz-cms-header__brand {
+		font-size: var(--luz-text-lg);
+	}
+
+	.luz-cms-header--masthead .luz-cms-header__brand {
+		font-size: var(--luz-text-2xl);
+	}
+}
+
+/* With anchor positioning the panels opened inside the bar (core's navbar,
+   the language list) open at its block end, on two rows as on one; in the
+   masthead, the navbar's panel opens under the sections row. Scoped, so
+   with two bars on a page each panel finds its own */
+@supports (anchor-name: --luz-bar) {
+	.luz-cms-header,
+	.luz-cms-header__sections {
+		anchor-name: --luz-bar;
+		anchor-scope: --luz-bar;
+	}
+
+	.luz-cms-header :where(luz-lang-switch) {
+		--luz-lang-switch-top: anchor(--luz-bar end, var(--luz-bar-h));
+	}
+}
+
+/* ==========================================================================
+	 LUZ CMS: page header.
+	 The title of a page that is not an article (about, contact):
+	 .luz-cms-page-header > h1.__title + p.__lead, the one sentence that says
+	 what the page is for. An article has .luz-cms-article-header instead.
+	 ========================================================================== */
+
+.luz-cms-page-header {
+	margin-block-end: var(--luz-space-xl);
+}
+
+.luz-cms-page-header__title {
+	margin-block-end: var(--luz-space-2xs);
+	color: var(--luz-text-primary);
+	font-family: var(--luz-font-heading);
+	font-size: var(--luz-text-3xl);
+	font-weight: 300;
+	letter-spacing: -1px;
+}
+
+.luz-cms-page-header__lead {
+	max-inline-size: 600px;
+	color: var(--luz-text-secondary);
+	font-size: var(--luz-text-base);
+}
+
+@media (max-width: 640px) {
+	.luz-cms-page-header__title {
+		font-size: var(--luz-text-2xl);
+		letter-spacing: -0.5px;
+	}
+}
+
+/* Spacing between letters breaks the joins of Arabic script */
+.luz-cms-page-header__title:lang(ar) {
+	letter-spacing: 0;
+}
+
+/* ==========================================================================
+	 LUZ CMS: article header.
+	 The top of a post or a story: its section, the title, the standfirst,
+	 the byline and an optional lead picture. The classes go on any element,
+	 so a template of any CMS can emit them (in WordPress, a block's
+	 className); each part styles its text by inheritance, so a wrapper
+	 around a paragraph works as well as the paragraph.
+	 ========================================================================== */
+
+.luz-cms-article-header {
+	display: grid;
+	gap: var(--luz-space-sm);
+	margin-block-end: var(--luz-space-xl);
+}
+
+/* The section above the title, in the voice of site's hero eyebrow, so a
+   story and a home page start alike. A link in it stays a link. */
+.luz-cms-article-header__kicker {
+	font-family: var(--luz-font-mono);
+	font-size: var(--luz-text-xs);
+	font-weight: 500;
+	line-height: 1.5;
+	letter-spacing: 0.1em;
+	text-transform: uppercase;
+	color: var(--luz-text-secondary);
+}
+
+/* The mono has no Arabic letters; spacing between letters breaks the joins */
+.luz-cms-article-header__kicker:lang(ar) {
+	font-family: var(--luz-font-sans);
+}
+
+.luz-cms-article-header__kicker:lang(ar),
+.luz-cms-article-header__title:lang(ar) {
+	letter-spacing: 0;
+}
+
+/* The title of a story runs long: balanced lines, a little tighter. The
+   heading's look is set here too, so a template that writes the title in
+   another element (a link in a <p>, a block's wrapper) keeps it. */
+.luz-cms-article-header__title {
+	font-family: var(--luz-font-heading);
+	font-size: var(--luz-text-3xl);
+	font-weight: 300;
+	line-height: 1.15;
+	letter-spacing: -0.02em;
+	text-wrap: balance;
+	color: var(--luz-text-primary);
+}
+
+/* The standfirst: what the story says, in a sentence or two */
+.luz-cms-article-header__standfirst {
+	max-inline-size: 70ch;
+	font-size: var(--luz-text-lg);
+	line-height: 1.4;
+	text-wrap: pretty;
+	color: var(--luz-text-secondary);
+}
+
+/* Who wrote it and when: an avatar, then its lines. Facts, not prose: the
+   sans, as navigation and labels are */
+.luz-cms-article-header__byline {
+	display: flex;
+	flex-wrap: wrap;
+	align-items: center;
+	gap: var(--luz-space-xs) var(--luz-space-sm);
+	margin-block-start: var(--luz-space-xs);
+	font-family: var(--luz-font-sans);
+	font-size: var(--luz-text-md);
+	line-height: 1.5;
+	color: var(--luz-text-secondary);
+}
+
+/* The lead picture and its caption, edge to edge: core's bare <figure> is
+   a tinted panel, which would frame the photo twice */
+.luz-cms-article-header__media {
+	margin-block: var(--luz-space-sm) 0;
+	margin-inline: 0;
+	padding: 0;
+	background: none;
+}
+
+@media (max-width: 640px) {
+	.luz-cms-article-header__title {
+		font-size: var(--luz-text-2xl);
+	}
+
+	.luz-cms-article-header__standfirst {
+		font-size: var(--luz-text-base);
+	}
+}
+
+/* ==========================================================================
+	 LUZ CMS: article and its table of contents.
+	 .luz-cms-article is the room the story has (a size container). Its
+	 __layout puts the contents beside the text, at the inline end, when that
+	 room is 46rem or more, and above the text below that; beside it, the
+	 contents stay in view while the text scrolls. The contents come first in
+	 the source, so they are read and reached first in both layouts.
+	 No JavaScript of its own: with data-luz-spy on the contents, core's
+	 scroll spy (initSidebar, run by luz.js) marks the link of the section in
+	 view with aria-current="true".
+	 ========================================================================== */
+
+.luz-cms-article {
+	container-type: inline-size;
+}
+
+.luz-cms-article__layout {
+	display: grid;
+	grid-template-columns: minmax(0, 1fr);
+	gap: var(--luz-space-xl) var(--luz-space-2xl);
+}
+
+.luz-cms-toc__title {
+	margin-block-end: var(--luz-space-xs);
+	font-family: var(--luz-font-sans);
+	font-size: var(--luz-text-base);
+	font-weight: 600;
+	letter-spacing: 0;
+}
+
+/* A rule along the list; the current link draws its bar over it */
+.luz-cms-toc__list {
+	list-style: none;
+	border-inline-start: 1px solid var(--luz-divider);
+}
+
+/* One link a line, on the page's colours */
+.luz-cms-toc__list a {
+	display: block;
+	margin-inline-start: -1px;
+	padding: var(--luz-space-2xs) var(--luz-space-sm);
+	border-inline-start: 2px solid transparent;
+	font-size: var(--luz-text-md);
+	color: var(--luz-text-secondary);
+}
+
+.luz-cms-toc__list a:hover {
+	background: var(--luz-surface-muted);
+	color: var(--luz-text-primary);
+}
+
+/* The section in view: a bar and the weight, never colour alone */
+.luz-cms-toc__list a[aria-current="true"] {
+	border-inline-start-color: var(--luz-brand-primary);
+	color: var(--luz-text-primary);
+	font-weight: 600;
+}
+
+/* Beside the text: 13rem, as wide as the docs' "On this page" rail, which
+   keeps 30rem or more for the text. A list longer than the window scrolls
+   inside the contents. */
+@container (min-width: 46rem) {
+	.luz-cms-article__layout {
+		grid-template-columns: minmax(0, 1fr) 13rem;
+	}
+
+	.luz-cms-toc {
+		position: sticky;
+		inset-block-start: var(--luz-cms-toc-top, var(--luz-space-lg));
+		grid-column: 2;
+		grid-row: 1;
+		align-self: start;
+		max-block-size: calc(100dvh - var(--luz-cms-toc-top, var(--luz-space-lg)) - var(--luz-space-lg));
+		overflow-y: auto;
+	}
+}
+
+/* Under a sticky bar (core's .o-sticky, one row of --luz-bar-h), where it
+   sticks (the same query) */
+@media (min-height: 30rem) {
+	:root:has(.o-sticky) .luz-cms-toc {
+		--luz-cms-toc-top: calc(var(--luz-bar-h) + var(--luz-space-lg));
+	}
+}
+
+/* ==========================================================================
+	 LUZ CMS: footer.
+	 footer.luz-cms-footer > div.o-container.o-container--inline.o-row: a
+	 divider above, its items at the two ends of the row; at 768px and below
+	 a column aligned to the start.
+	 ========================================================================== */
+
+.luz-cms-footer {
+	padding-block: var(--luz-space-lg) var(--luz-space-xl);
+	border-block-start: 1px solid var(--luz-divider);
+}
+
+.luz-cms-footer > .o-row {
+	justify-content: space-between;
+	gap: var(--luz-space-md);
+}
+
+/* A column that does not wrap: a wrapping column nested in grids makes
+   Chromium's layout take tens of seconds */
+@media (max-width: 768px) {
+	.luz-cms-footer > .o-row {
+		flex-flow: column nowrap;
+		align-items: flex-start;
+	}
+}
+
+
+}

package/dist/cms.min.css

@@ -0,0 +1 @@
+@layer luz.tokens,luz.themes,luz.settings,luz.generic,luz.elements,luz.objects,luz.components,luz.utilities,luz.catalog,luz.landing,luz.cms,luz.app,luz.docs,luz.print;@layer luz.cms{.luz-cms-header{padding-block:var(--luz-space-2xs);border-block-end:1px solid var(--luz-divider);background:var(--luz-surface-page)}.luz-cms-header>.o-row{gap:var(--luz-space-xs) var(--luz-space-md)}.luz-cms-header__brand{display:inline-flex;align-items:center;min-block-size:var(--luz-control-lg);margin-inline-end:auto;color:var(--luz-text-primary);font-family:var(--luz-font-heading);font-size:var(--luz-text-xl);font-weight:600;text-decoration:none}.luz-cms-header__brand:hover{text-decoration:underline}.luz-cms-header__brand :where(img){block-size:var(--luz-control-lg);inline-size:auto}.luz-cms-header__actions{gap:var(--luz-space-xs)}.luz-cms-header :where(luz-lang-switch){--luz-lang-switch-top: var(--luz-bar-h)}.luz-cms-header--masthead{padding-block:var(--luz-space-md);border-block-end:0}.luz-cms-header__top{flex-wrap:nowrap;justify-content:space-between}.luz-cms-header__date{flex:1 1 0;min-inline-size:0;margin:0;color:var(--luz-text-secondary);font-family:var(--luz-font-sans);font-size:var(--luz-text-sm)}.luz-cms-header--masthead .luz-cms-header__brand{display:block;margin:0;font-size:var(--luz-text-4xl);line-height:1.1;text-align:center}.luz-cms-header--masthead .luz-cms-header__brand :where(img){block-size:calc(var(--luz-control-lg) * 2)}.luz-cms-header__sections{padding-block:var(--luz-space-2xs);border-block:1px solid var(--luz-divider)}@media(min-width:769px){.luz-cms-header>.o-row{column-gap:var(--luz-space-lg)}.luz-cms-header__sections{justify-content:center}}@media(max-width:768px){.luz-cms-header>.o-row>.luz-cms-header__brand{flex:1 1 0}}@media(max-width:1023px){.luz-cms-header--masthead .luz-cms-header__brand{font-size:var(--luz-text-3xl)}}@media(max-width:640px){.luz-cms-header__brand{font-size:var(--luz-text-lg)}.luz-cms-header--masthead .luz-cms-header__brand{font-size:var(--luz-text-2xl)}}@supports (anchor-name: --luz-bar){.luz-cms-header,.luz-cms-header__sections{anchor-name:--luz-bar;anchor-scope:--luz-bar}.luz-cms-header :where(luz-lang-switch){--luz-lang-switch-top: anchor(--luz-bar end, var(--luz-bar-h))}}.luz-cms-page-header{margin-block-end:var(--luz-space-xl)}.luz-cms-page-header__title{margin-block-end:var(--luz-space-2xs);color:var(--luz-text-primary);font-family:var(--luz-font-heading);font-size:var(--luz-text-3xl);font-weight:300;letter-spacing:-1px}.luz-cms-page-header__lead{max-inline-size:600px;color:var(--luz-text-secondary);font-size:var(--luz-text-base)}@media(max-width:640px){.luz-cms-page-header__title{font-size:var(--luz-text-2xl);letter-spacing:-.5px}}.luz-cms-page-header__title:lang(ar){letter-spacing:0}.luz-cms-article-header{display:grid;gap:var(--luz-space-sm);margin-block-end:var(--luz-space-xl)}.luz-cms-article-header__kicker{font-family:var(--luz-font-mono);font-size:var(--luz-text-xs);font-weight:500;line-height:1.5;letter-spacing:.1em;text-transform:uppercase;color:var(--luz-text-secondary)}.luz-cms-article-header__kicker:lang(ar){font-family:var(--luz-font-sans)}.luz-cms-article-header__kicker:lang(ar),.luz-cms-article-header__title:lang(ar){letter-spacing:0}.luz-cms-article-header__title{font-family:var(--luz-font-heading);font-size:var(--luz-text-3xl);font-weight:300;line-height:1.15;letter-spacing:-.02em;text-wrap:balance;color:var(--luz-text-primary)}.luz-cms-article-header__standfirst{max-inline-size:70ch;font-size:var(--luz-text-lg);line-height:1.4;text-wrap:pretty;color:var(--luz-text-secondary)}.luz-cms-article-header__byline{display:flex;flex-wrap:wrap;align-items:center;gap:var(--luz-space-xs) var(--luz-space-sm);margin-block-start:var(--luz-space-xs);font-family:var(--luz-font-sans);font-size:var(--luz-text-md);line-height:1.5;color:var(--luz-text-secondary)}.luz-cms-article-header__media{margin-block:var(--luz-space-sm) 0;margin-inline:0;padding:0;background:none}@media(max-width:640px){.luz-cms-article-header__title{font-size:var(--luz-text-2xl)}.luz-cms-article-header__standfirst{font-size:var(--luz-text-base)}}.luz-cms-article{container-type:inline-size}.luz-cms-article__layout{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--luz-space-xl) var(--luz-space-2xl)}.luz-cms-toc__title{margin-block-end:var(--luz-space-xs);font-family:var(--luz-font-sans);font-size:var(--luz-text-base);font-weight:600;letter-spacing:0}.luz-cms-toc__list{list-style:none;border-inline-start:1px solid var(--luz-divider)}.luz-cms-toc__list a{display:block;margin-inline-start:-1px;padding:var(--luz-space-2xs) var(--luz-space-sm);border-inline-start:2px solid transparent;font-size:var(--luz-text-md);color:var(--luz-text-secondary)}.luz-cms-toc__list a:hover{background:var(--luz-surface-muted);color:var(--luz-text-primary)}.luz-cms-toc__list a[aria-current=true]{border-inline-start-color:var(--luz-brand-primary);color:var(--luz-text-primary);font-weight:600}@container (min-width: 46rem){.luz-cms-article__layout{grid-template-columns:minmax(0,1fr) 13rem}.luz-cms-toc{position:sticky;inset-block-start:var(--luz-cms-toc-top, var(--luz-space-lg));grid-column:2;grid-row:1;align-self:start;max-block-size:calc(100dvh - var(--luz-cms-toc-top, var(--luz-space-lg)) - var(--luz-space-lg));overflow-y:auto}}@media(min-height:30rem){:root:has(.o-sticky) .luz-cms-toc{--luz-cms-toc-top: calc(var(--luz-bar-h) + var(--luz-space-lg))}}.luz-cms-footer{padding-block:var(--luz-space-lg) var(--luz-space-xl);border-block-start:1px solid var(--luz-divider)}.luz-cms-footer>.o-row{justify-content:space-between;gap:var(--luz-space-md)}@media(max-width:768px){.luz-cms-footer>.o-row{flex-flow:column nowrap;align-items:flex-start}}}

package/dist/components/article-header.css

@@ -0,0 +1,95 @@
+@layer luz.tokens, luz.themes, luz.settings, luz.generic, luz.elements, luz.objects, luz.components, luz.utilities, luz.catalog, luz.landing, luz.cms, luz.app, luz.docs, luz.print;
+@layer luz.cms {
+/* ==========================================================================
+	 LUZ CMS: article header.
+	 The top of a post or a story: its section, the title, the standfirst,
+	 the byline and an optional lead picture. The classes go on any element,
+	 so a template of any CMS can emit them (in WordPress, a block's
+	 className); each part styles its text by inheritance, so a wrapper
+	 around a paragraph works as well as the paragraph.
+	 ========================================================================== */
+
+.luz-cms-article-header {
+	display: grid;
+	gap: var(--luz-space-sm);
+	margin-block-end: var(--luz-space-xl);
+}
+
+/* The section above the title, in the voice of site's hero eyebrow, so a
+   story and a home page start alike. A link in it stays a link. */
+.luz-cms-article-header__kicker {
+	font-family: var(--luz-font-mono);
+	font-size: var(--luz-text-xs);
+	font-weight: 500;
+	line-height: 1.5;
+	letter-spacing: 0.1em;
+	text-transform: uppercase;
+	color: var(--luz-text-secondary);
+}
+
+/* The mono has no Arabic letters; spacing between letters breaks the joins */
+.luz-cms-article-header__kicker:lang(ar) {
+	font-family: var(--luz-font-sans);
+}
+
+.luz-cms-article-header__kicker:lang(ar),
+.luz-cms-article-header__title:lang(ar) {
+	letter-spacing: 0;
+}
+
+/* The title of a story runs long: balanced lines, a little tighter. The
+   heading's look is set here too, so a template that writes the title in
+   another element (a link in a <p>, a block's wrapper) keeps it. */
+.luz-cms-article-header__title {
+	font-family: var(--luz-font-heading);
+	font-size: var(--luz-text-3xl);
+	font-weight: 300;
+	line-height: 1.15;
+	letter-spacing: -0.02em;
+	text-wrap: balance;
+	color: var(--luz-text-primary);
+}
+
+/* The standfirst: what the story says, in a sentence or two */
+.luz-cms-article-header__standfirst {
+	max-inline-size: 70ch;
+	font-size: var(--luz-text-lg);
+	line-height: 1.4;
+	text-wrap: pretty;
+	color: var(--luz-text-secondary);
+}
+
+/* Who wrote it and when: an avatar, then its lines. Facts, not prose: the
+   sans, as navigation and labels are */
+.luz-cms-article-header__byline {
+	display: flex;
+	flex-wrap: wrap;
+	align-items: center;
+	gap: var(--luz-space-xs) var(--luz-space-sm);
+	margin-block-start: var(--luz-space-xs);
+	font-family: var(--luz-font-sans);
+	font-size: var(--luz-text-md);
+	line-height: 1.5;
+	color: var(--luz-text-secondary);
+}
+
+/* The lead picture and its caption, edge to edge: core's bare <figure> is
+   a tinted panel, which would frame the photo twice */
+.luz-cms-article-header__media {
+	margin-block: var(--luz-space-sm) 0;
+	margin-inline: 0;
+	padding: 0;
+	background: none;
+}
+
+@media (max-width: 640px) {
+	.luz-cms-article-header__title {
+		font-size: var(--luz-text-2xl);
+	}
+
+	.luz-cms-article-header__standfirst {
+		font-size: var(--luz-text-base);
+	}
+}
+
+}

package/dist/components/article-header.min.css

@@ -0,0 +1 @@
+@layer luz.tokens,luz.themes,luz.settings,luz.generic,luz.elements,luz.objects,luz.components,luz.utilities,luz.catalog,luz.landing,luz.cms,luz.app,luz.docs,luz.print;@layer luz.cms{.luz-cms-article-header{display:grid;gap:var(--luz-space-sm);margin-block-end:var(--luz-space-xl)}.luz-cms-article-header__kicker{font-family:var(--luz-font-mono);font-size:var(--luz-text-xs);font-weight:500;line-height:1.5;letter-spacing:.1em;text-transform:uppercase;color:var(--luz-text-secondary)}.luz-cms-article-header__kicker:lang(ar){font-family:var(--luz-font-sans)}.luz-cms-article-header__kicker:lang(ar),.luz-cms-article-header__title:lang(ar){letter-spacing:0}.luz-cms-article-header__title{font-family:var(--luz-font-heading);font-size:var(--luz-text-3xl);font-weight:300;line-height:1.15;letter-spacing:-.02em;text-wrap:balance;color:var(--luz-text-primary)}.luz-cms-article-header__standfirst{max-inline-size:70ch;font-size:var(--luz-text-lg);line-height:1.4;text-wrap:pretty;color:var(--luz-text-secondary)}.luz-cms-article-header__byline{display:flex;flex-wrap:wrap;align-items:center;gap:var(--luz-space-xs) var(--luz-space-sm);margin-block-start:var(--luz-space-xs);font-family:var(--luz-font-sans);font-size:var(--luz-text-md);line-height:1.5;color:var(--luz-text-secondary)}.luz-cms-article-header__media{margin-block:var(--luz-space-sm) 0;margin-inline:0;padding:0;background:none}@media(max-width:640px){.luz-cms-article-header__title{font-size:var(--luz-text-2xl)}.luz-cms-article-header__standfirst{font-size:var(--luz-text-base)}}}

package/dist/components/article.css

@@ -0,0 +1,88 @@
+@layer luz.tokens, luz.themes, luz.settings, luz.generic, luz.elements, luz.objects, luz.components, luz.utilities, luz.catalog, luz.landing, luz.cms, luz.app, luz.docs, luz.print;
+@layer luz.cms {
+/* ==========================================================================
+	 LUZ CMS: article and its table of contents.
+	 .luz-cms-article is the room the story has (a size container). Its
+	 __layout puts the contents beside the text, at the inline end, when that
+	 room is 46rem or more, and above the text below that; beside it, the
+	 contents stay in view while the text scrolls. The contents come first in
+	 the source, so they are read and reached first in both layouts.
+	 No JavaScript of its own: with data-luz-spy on the contents, core's
+	 scroll spy (initSidebar, run by luz.js) marks the link of the section in
+	 view with aria-current="true".
+	 ========================================================================== */
+
+.luz-cms-article {
+	container-type: inline-size;
+}
+
+.luz-cms-article__layout {
+	display: grid;
+	grid-template-columns: minmax(0, 1fr);
+	gap: var(--luz-space-xl) var(--luz-space-2xl);
+}
+
+.luz-cms-toc__title {
+	margin-block-end: var(--luz-space-xs);
+	font-family: var(--luz-font-sans);
+	font-size: var(--luz-text-base);
+	font-weight: 600;
+	letter-spacing: 0;
+}
+
+/* A rule along the list; the current link draws its bar over it */
+.luz-cms-toc__list {
+	list-style: none;
+	border-inline-start: 1px solid var(--luz-divider);
+}
+
+/* One link a line, on the page's colours */
+.luz-cms-toc__list a {
+	display: block;
+	margin-inline-start: -1px;
+	padding: var(--luz-space-2xs) var(--luz-space-sm);
+	border-inline-start: 2px solid transparent;
+	font-size: var(--luz-text-md);
+	color: var(--luz-text-secondary);
+}
+
+.luz-cms-toc__list a:hover {
+	background: var(--luz-surface-muted);
+	color: var(--luz-text-primary);
+}
+
+/* The section in view: a bar and the weight, never colour alone */
+.luz-cms-toc__list a[aria-current="true"] {
+	border-inline-start-color: var(--luz-brand-primary);
+	color: var(--luz-text-primary);
+	font-weight: 600;
+}
+
+/* Beside the text: 13rem, as wide as the docs' "On this page" rail, which
+   keeps 30rem or more for the text. A list longer than the window scrolls
+   inside the contents. */
+@container (min-width: 46rem) {
+	.luz-cms-article__layout {
+		grid-template-columns: minmax(0, 1fr) 13rem;
+	}
+
+	.luz-cms-toc {
+		position: sticky;
+		inset-block-start: var(--luz-cms-toc-top, var(--luz-space-lg));
+		grid-column: 2;
+		grid-row: 1;
+		align-self: start;
+		max-block-size: calc(100dvh - var(--luz-cms-toc-top, var(--luz-space-lg)) - var(--luz-space-lg));
+		overflow-y: auto;
+	}
+}
+
+/* Under a sticky bar (core's .o-sticky, one row of --luz-bar-h), where it
+   sticks (the same query) */
+@media (min-height: 30rem) {
+	:root:has(.o-sticky) .luz-cms-toc {
+		--luz-cms-toc-top: calc(var(--luz-bar-h) + var(--luz-space-lg));
+	}
+}
+
+}

package/dist/components/article.min.css

@@ -0,0 +1 @@
+@layer luz.tokens,luz.themes,luz.settings,luz.generic,luz.elements,luz.objects,luz.components,luz.utilities,luz.catalog,luz.landing,luz.cms,luz.app,luz.docs,luz.print;@layer luz.cms{.luz-cms-article{container-type:inline-size}.luz-cms-article__layout{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--luz-space-xl) var(--luz-space-2xl)}.luz-cms-toc__title{margin-block-end:var(--luz-space-xs);font-family:var(--luz-font-sans);font-size:var(--luz-text-base);font-weight:600;letter-spacing:0}.luz-cms-toc__list{list-style:none;border-inline-start:1px solid var(--luz-divider)}.luz-cms-toc__list a{display:block;margin-inline-start:-1px;padding:var(--luz-space-2xs) var(--luz-space-sm);border-inline-start:2px solid transparent;font-size:var(--luz-text-md);color:var(--luz-text-secondary)}.luz-cms-toc__list a:hover{background:var(--luz-surface-muted);color:var(--luz-text-primary)}.luz-cms-toc__list a[aria-current=true]{border-inline-start-color:var(--luz-brand-primary);color:var(--luz-text-primary);font-weight:600}@container (min-width: 46rem){.luz-cms-article__layout{grid-template-columns:minmax(0,1fr) 13rem}.luz-cms-toc{position:sticky;inset-block-start:var(--luz-cms-toc-top, var(--luz-space-lg));grid-column:2;grid-row:1;align-self:start;max-block-size:calc(100dvh - var(--luz-cms-toc-top, var(--luz-space-lg)) - var(--luz-space-lg));overflow-y:auto}}@media(min-height:30rem){:root:has(.o-sticky) .luz-cms-toc{--luz-cms-toc-top: calc(var(--luz-bar-h) + var(--luz-space-lg))}}}

package/dist/components/footer.css

@@ -0,0 +1,29 @@
+@layer luz.tokens, luz.themes, luz.settings, luz.generic, luz.elements, luz.objects, luz.components, luz.utilities, luz.catalog, luz.landing, luz.cms, luz.app, luz.docs, luz.print;
+@layer luz.cms {
+/* ==========================================================================
+	 LUZ CMS: footer.
+	 footer.luz-cms-footer > div.o-container.o-container--inline.o-row: a
+	 divider above, its items at the two ends of the row; at 768px and below
+	 a column aligned to the start.
+	 ========================================================================== */
+
+.luz-cms-footer {
+	padding-block: var(--luz-space-lg) var(--luz-space-xl);
+	border-block-start: 1px solid var(--luz-divider);
+}
+
+.luz-cms-footer > .o-row {
+	justify-content: space-between;
+	gap: var(--luz-space-md);
+}
+
+/* A column that does not wrap: a wrapping column nested in grids makes
+   Chromium's layout take tens of seconds */
+@media (max-width: 768px) {
+	.luz-cms-footer > .o-row {
+		flex-flow: column nowrap;
+		align-items: flex-start;
+	}
+}
+
+}

package/dist/components/footer.min.css

@@ -0,0 +1 @@
+@layer luz.tokens,luz.themes,luz.settings,luz.generic,luz.elements,luz.objects,luz.components,luz.utilities,luz.catalog,luz.landing,luz.cms,luz.app,luz.docs,luz.print;@layer luz.cms{.luz-cms-footer{padding-block:var(--luz-space-lg) var(--luz-space-xl);border-block-start:1px solid var(--luz-divider)}.luz-cms-footer>.o-row{justify-content:space-between;gap:var(--luz-space-md)}@media(max-width:768px){.luz-cms-footer>.o-row{flex-flow:column nowrap;align-items:flex-start}}}

package/dist/components/header.css

@@ -0,0 +1,155 @@
+@layer luz.tokens, luz.themes, luz.settings, luz.generic, luz.elements, luz.objects, luz.components, luz.utilities, luz.catalog, luz.landing, luz.cms, luz.app, luz.docs, luz.print;
+@layer luz.cms {
+/* ==========================================================================
+	 LUZ CMS: header.
+	 The blog bar: header.luz-cms-header.o-sticky >
+	 div.o-container.o-container--inline.o-row holding core's .luz-nav-toggle,
+	 the __brand link, core's nav.luz-navbar[popover] and a div.o-row.__actions
+	 (site's <luz-search>, then an optional <luz-lang-switch>). Core gives the
+	 stickiness, the width, the row and the collapsing links; cms adds the
+	 surface, the divider, the masthead brand and the gaps.
+	 --masthead, the newspaper: three rows in an .o-stack (__top with the
+	 __date and the __actions, the large centred __brand, and __sections with
+	 the toggle and the navbar between two rules), not sticky.
+	 ========================================================================== */
+
+/* A one-row bar of 44px controls is core's --luz-bar-h tall: two 2xs
+   paddings, the row and the divider. With enlarged text the row wraps
+   and the bar grows. */
+.luz-cms-header {
+	padding-block: var(--luz-space-2xs);
+	border-block-end: 1px solid var(--luz-divider);
+	background: var(--luz-surface-page);
+}
+
+/* The row wraps rather than overflow (WCAG 1.4.4, 1.4.10); its gutters are
+   the page's, so the brand starts where the content starts */
+.luz-cms-header > .o-row {
+	gap: var(--luz-space-xs) var(--luz-space-md);
+}
+
+/* The publication's name: a link, never a heading (the story's title is
+   the h1). It wraps, never ellipsised, and takes the free room of the row,
+   which pushes the links and the actions to the end */
+.luz-cms-header__brand {
+	display: inline-flex;
+	align-items: center;
+	min-block-size: var(--luz-control-lg);
+	margin-inline-end: auto;
+	color: var(--luz-text-primary);
+	font-family: var(--luz-font-heading);
+	font-size: var(--luz-text-xl);
+	font-weight: 600;
+	text-decoration: none;
+}
+
+.luz-cms-header__brand:hover {
+	text-decoration: underline;
+}
+
+/* A logo: an <img> whose alt is the publication's name */
+.luz-cms-header__brand :where(img) {
+	block-size: var(--luz-control-lg);
+	inline-size: auto;
+}
+
+.luz-cms-header__actions {
+	gap: var(--luz-space-xs);
+}
+
+/* The language list of site's <luz-lang-switch> opens under this bar */
+.luz-cms-header :where(luz-lang-switch) {
+	--luz-lang-switch-top: var(--luz-bar-h);
+}
+
+/* --masthead: room around three rows that scroll away with the page */
+.luz-cms-header--masthead {
+	padding-block: var(--luz-space-md);
+	border-block-end: 0;
+}
+
+/* The date gives way to the search: it shrinks and wraps, the search keeps
+   its row */
+.luz-cms-header__top {
+	flex-wrap: nowrap;
+	justify-content: space-between;
+}
+
+.luz-cms-header__date {
+	flex: 1 1 0;
+	min-inline-size: 0;
+	margin: 0;
+	color: var(--luz-text-secondary);
+	font-family: var(--luz-font-sans);
+	font-size: var(--luz-text-sm);
+}
+
+.luz-cms-header--masthead .luz-cms-header__brand {
+	display: block;
+	margin: 0;
+	font-size: var(--luz-text-4xl);
+	line-height: 1.1;
+	text-align: center;
+}
+
+.luz-cms-header--masthead .luz-cms-header__brand :where(img) {
+	block-size: calc(var(--luz-control-lg) * 2);
+}
+
+/* The rules keep clear of the menu button's border */
+.luz-cms-header__sections {
+	padding-block: var(--luz-space-2xs);
+	border-block: 1px solid var(--luz-divider);
+}
+
+@media (min-width: 769px) {
+	.luz-cms-header > .o-row {
+		column-gap: var(--luz-space-lg);
+	}
+
+	.luz-cms-header__sections {
+		justify-content: center;
+	}
+}
+
+/* With the links in the panel, the brand fills the room between the toggle
+   and the actions and wraps there, so the bar stays one row of controls */
+@media (max-width: 768px) {
+	.luz-cms-header > .o-row > .luz-cms-header__brand {
+		flex: 1 1 0;
+	}
+}
+
+@media (max-width: 1023px) {
+	.luz-cms-header--masthead .luz-cms-header__brand {
+		font-size: var(--luz-text-3xl);
+	}
+}
+
+@media (max-width: 640px) {
+	.luz-cms-header__brand {
+		font-size: var(--luz-text-lg);
+	}
+
+	.luz-cms-header--masthead .luz-cms-header__brand {
+		font-size: var(--luz-text-2xl);
+	}
+}
+
+/* With anchor positioning the panels opened inside the bar (core's navbar,
+   the language list) open at its block end, on two rows as on one; in the
+   masthead, the navbar's panel opens under the sections row. Scoped, so
+   with two bars on a page each panel finds its own */
+@supports (anchor-name: --luz-bar) {
+	.luz-cms-header,
+	.luz-cms-header__sections {
+		anchor-name: --luz-bar;
+		anchor-scope: --luz-bar;
+	}
+
+	.luz-cms-header :where(luz-lang-switch) {
+		--luz-lang-switch-top: anchor(--luz-bar end, var(--luz-bar-h));
+	}
+}
+
+}

package/dist/components/header.min.css

@@ -0,0 +1 @@
+@layer luz.tokens,luz.themes,luz.settings,luz.generic,luz.elements,luz.objects,luz.components,luz.utilities,luz.catalog,luz.landing,luz.cms,luz.app,luz.docs,luz.print;@layer luz.cms{.luz-cms-header{padding-block:var(--luz-space-2xs);border-block-end:1px solid var(--luz-divider);background:var(--luz-surface-page)}.luz-cms-header>.o-row{gap:var(--luz-space-xs) var(--luz-space-md)}.luz-cms-header__brand{display:inline-flex;align-items:center;min-block-size:var(--luz-control-lg);margin-inline-end:auto;color:var(--luz-text-primary);font-family:var(--luz-font-heading);font-size:var(--luz-text-xl);font-weight:600;text-decoration:none}.luz-cms-header__brand:hover{text-decoration:underline}.luz-cms-header__brand :where(img){block-size:var(--luz-control-lg);inline-size:auto}.luz-cms-header__actions{gap:var(--luz-space-xs)}.luz-cms-header :where(luz-lang-switch){--luz-lang-switch-top: var(--luz-bar-h)}.luz-cms-header--masthead{padding-block:var(--luz-space-md);border-block-end:0}.luz-cms-header__top{flex-wrap:nowrap;justify-content:space-between}.luz-cms-header__date{flex:1 1 0;min-inline-size:0;margin:0;color:var(--luz-text-secondary);font-family:var(--luz-font-sans);font-size:var(--luz-text-sm)}.luz-cms-header--masthead .luz-cms-header__brand{display:block;margin:0;font-size:var(--luz-text-4xl);line-height:1.1;text-align:center}.luz-cms-header--masthead .luz-cms-header__brand :where(img){block-size:calc(var(--luz-control-lg) * 2)}.luz-cms-header__sections{padding-block:var(--luz-space-2xs);border-block:1px solid var(--luz-divider)}@media(min-width:769px){.luz-cms-header>.o-row{column-gap:var(--luz-space-lg)}.luz-cms-header__sections{justify-content:center}}@media(max-width:768px){.luz-cms-header>.o-row>.luz-cms-header__brand{flex:1 1 0}}@media(max-width:1023px){.luz-cms-header--masthead .luz-cms-header__brand{font-size:var(--luz-text-3xl)}}@media(max-width:640px){.luz-cms-header__brand{font-size:var(--luz-text-lg)}.luz-cms-header--masthead .luz-cms-header__brand{font-size:var(--luz-text-2xl)}}@supports (anchor-name: --luz-bar){.luz-cms-header,.luz-cms-header__sections{anchor-name:--luz-bar;anchor-scope:--luz-bar}.luz-cms-header :where(luz-lang-switch){--luz-lang-switch-top: anchor(--luz-bar end, var(--luz-bar-h))}}}

package/dist/components/page-header.css

@@ -0,0 +1,41 @@
+@layer luz.tokens, luz.themes, luz.settings, luz.generic, luz.elements, luz.objects, luz.components, luz.utilities, luz.catalog, luz.landing, luz.cms, luz.app, luz.docs, luz.print;
+@layer luz.cms {
+/* ==========================================================================
+	 LUZ CMS: page header.
+	 The title of a page that is not an article (about, contact):
+	 .luz-cms-page-header > h1.__title + p.__lead, the one sentence that says
+	 what the page is for. An article has .luz-cms-article-header instead.
+	 ========================================================================== */
+
+.luz-cms-page-header {
+	margin-block-end: var(--luz-space-xl);
+}
+
+.luz-cms-page-header__title {
+	margin-block-end: var(--luz-space-2xs);
+	color: var(--luz-text-primary);
+	font-family: var(--luz-font-heading);
+	font-size: var(--luz-text-3xl);
+	font-weight: 300;
+	letter-spacing: -1px;
+}
+
+.luz-cms-page-header__lead {
+	max-inline-size: 600px;
+	color: var(--luz-text-secondary);
+	font-size: var(--luz-text-base);
+}
+
+@media (max-width: 640px) {
+	.luz-cms-page-header__title {
+		font-size: var(--luz-text-2xl);
+		letter-spacing: -0.5px;
+	}
+}
+
+/* Spacing between letters breaks the joins of Arabic script */
+.luz-cms-page-header__title:lang(ar) {
+	letter-spacing: 0;
+}
+
+}

package/dist/components/page-header.min.css

@@ -0,0 +1 @@
+@layer luz.tokens,luz.themes,luz.settings,luz.generic,luz.elements,luz.objects,luz.components,luz.utilities,luz.catalog,luz.landing,luz.cms,luz.app,luz.docs,luz.print;@layer luz.cms{.luz-cms-page-header{margin-block-end:var(--luz-space-xl)}.luz-cms-page-header__title{margin-block-end:var(--luz-space-2xs);color:var(--luz-text-primary);font-family:var(--luz-font-heading);font-size:var(--luz-text-3xl);font-weight:300;letter-spacing:-1px}.luz-cms-page-header__lead{max-inline-size:600px;color:var(--luz-text-secondary);font-size:var(--luz-text-base)}@media(max-width:640px){.luz-cms-page-header__title{font-size:var(--luz-text-2xl);letter-spacing:-.5px}}.luz-cms-page-header__title:lang(ar){letter-spacing:0}}

package/package.json

@@ -1,6 +1,56 @@
 {
   "name": "@luz-ds/cms",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
+  "version": "0.2.0",
+  "description": "LUZ Design System — the page structure of a blog, a newspaper or any CMS (header, page header, article header, table of contents, footer), built on @luz-ds/core",
+  "license": "MIT",
+  "type": "module",
+  "exports": {
+    "./css": "./dist/cms.css",
+    "./css/min": "./dist/cms.min.css",
+    "./components/*": "./dist/components/*",
+    "./classes.json": "./dist/classes.json",
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "dist",
+    "LICENSE"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/nandovejer/luz.git",
+    "directory": "packages/cms"
+  },
+  "homepage": "https://github.com/nandovejer/luz#readme",
+  "bugs": {
+    "url": "https://github.com/nandovejer/luz/issues"
+  },
+  "keywords": [
+    "design-system",
+    "css",
+    "cms",
+    "blog",
+    "patterns",
+    "vanilla"
+  ],
+  "sideEffects": [
+    "*.css"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "peerDependencies": {
+    "@luz-ds/core": "^0.1.0 || ^0.2.0",
+    "@luz-ds/catalog": "^0.1.0 || ^0.2.0",
+    "@luz-ds/tokens": "^0.1.0 || ^0.2.0"
+  },
+  "peerDependenciesMeta": {
+    "@luz-ds/catalog": {
+      "optional": true
+    }
+  },
+  "devDependencies": {
+    "@luz-ds/core": "0.2.0",
+    "@luz-ds/catalog": "0.2.0",
+    "@luz-ds/tokens": "0.2.0"
+  }
 }