@goldencomm/create-baseline 0.0.1 → 0.1.0

package/templates/wordpress/theme/package.json

@@ -0,0 +1,23 @@
+{
+  "name": "goldencomm-baseline-theme",
+  "version": "0.1.0",
+  "private": true,
+  "description": "Build tooling for the Baseline WordPress theme (Tailwind v4 CLI, and esbuild for the scripts that import npm packages: the carousel's Embla). Not a monorepo workspace: this folder is copied into client sites, which update Embla here with npm install + npm run build.",
+  "engines": {
+    "node": ">=24 <25"
+  },
+  "scripts": {
+    "build": "tailwindcss -i src/app.css -o assets/app.css --minify && tailwindcss -i src/editor.css -o assets/editor.css --minify && node build-js.mjs",
+    "watch": "tailwindcss -i src/app.css -o assets/app.css --watch",
+    "build:js": "node build-js.mjs"
+  },
+  "devDependencies": {
+    "@tailwindcss/cli": "^4.1.0",
+    "tailwindcss": "^4.1.0",
+    "esbuild": "0.28.2"
+  },
+  "dependencies": {
+    "embla-carousel": "8.6.0",
+    "embla-carousel-autoplay": "8.6.0"
+  }
+}

package/templates/wordpress/theme/parts/header.html

@@ -0,0 +1,23 @@
+<!-- wp:group {"align":"full","className":"bl-announcement","baselineSurface":"muted","layout":{"type":"constrained"}} -->
+<div class="wp-block-group alignfull bl-announcement"><!-- wp:paragraph {"align":"center"} -->
+<p class="has-text-align-center">We’ll find you the best possible rate. <a href="/contact/">Get a quote now.</a></p>
+<!-- /wp:paragraph --></div>
+<!-- /wp:group -->
+
+<!-- wp:group {"align":"full","className":"bl-header-bar","layout":{"type":"constrained"}} -->
+<div class="wp-block-group alignfull bl-header-bar"><!-- wp:group {"align":"wide","className":"bl-header-row","layout":{"type":"flex","flexWrap":"nowrap","justifyContent":"space-between"}} -->
+<div class="wp-block-group alignwide bl-header-row"><!-- wp:site-title {"level":0,"fontSize":"heading-md"} /-->
+
+<!-- wp:navigation {"overlayMenu":"mobile","className":"bl-header-nav","layout":{"type":"flex","justifyContent":"center"}} /-->
+
+<!-- wp:group {"className":"bl-header-actions","layout":{"type":"flex","flexWrap":"nowrap"}} -->
+<div class="wp-block-group bl-header-actions"><!-- wp:buttons -->
+<div class="wp-block-buttons"><!-- wp:button -->
+<div class="wp-block-button"><a class="wp-block-button__link wp-element-button" href="tel:+15555550100">Call us</a></div>
+<!-- /wp:button --></div>
+<!-- /wp:buttons -->
+
+<!-- wp:search {"label":"Search","showLabel":false,"buttonText":"Search","className":"is-style-dialog"} /--></div>
+<!-- /wp:group --></div>
+<!-- /wp:group --></div>
+<!-- /wp:group -->

package/templates/wordpress/theme/patterns/blog-card-grid.php

@@ -0,0 +1,41 @@
+<?php
+/**
+ * Title: Blog: Card Grid
+ * Slug: baseline/blog-card-grid
+ * Categories: sections
+ * Description: Figma Blog/Card Grid: an eyebrow, a heading and a lead, then the latest three posts as Cards (featured image, title, date, category, excerpt) at the wide width.
+ */
+?>
+<!-- wp:group {"tagName":"section","align":"full","style":{"spacing":{"padding":{"top":"var:preset|spacing|lg","bottom":"var:preset|spacing|lg"}}},"layout":{"type":"constrained"}} -->
+<section class="wp-block-group alignfull" style="padding-top:var(--wp--preset--spacing--lg);padding-bottom:var(--wp--preset--spacing--lg)"><!-- wp:group {"align":"wide","layout":{"type":"default"}} -->
+<div class="wp-block-group alignwide"><!-- wp:paragraph {"className":"is-style-eyebrow"} -->
+<p class="is-style-eyebrow">Blog</p>
+<!-- /wp:paragraph -->
+
+<!-- wp:heading {"fontSize":"heading-xl"} -->
+<h2 class="wp-block-heading has-heading-xl-font-size">Latest articles</h2>
+<!-- /wp:heading -->
+
+<!-- wp:paragraph {"className":"is-style-lead"} -->
+<p class="is-style-lead">Insights on design, development and marketing from our team.</p>
+<!-- /wp:paragraph --></div>
+<!-- /wp:group -->
+
+<!-- wp:query {"queryId":0,"query":{"perPage":3,"pages":0,"offset":0,"postType":"post","order":"desc","orderBy":"date","inherit":false},"align":"wide","className":"bl-post-grid"} -->
+<div class="wp-block-query alignwide bl-post-grid"><!-- wp:post-template {"layout":{"type":"grid","columnCount":3}} -->
+<!-- wp:group {"className":"is-style-card","layout":{"type":"default"}} -->
+<div class="wp-block-group is-style-card"><!-- wp:post-featured-image {"isLink":true,"aspectRatio":"3/2"} /-->
+
+<!-- wp:post-title {"level":3,"isLink":true,"fontSize":"heading-sm"} /-->
+
+<!-- wp:group {"className":"bl-post-meta","layout":{"type":"flex","flexWrap":"wrap"}} -->
+<div class="wp-block-group bl-post-meta"><!-- wp:post-date /-->
+
+<!-- wp:post-terms {"term":"category"} /--></div>
+<!-- /wp:group -->
+
+<!-- wp:post-excerpt {"excerptLength":24} /--></div>
+<!-- /wp:group -->
+<!-- /wp:post-template --></div>
+<!-- /wp:query --></section>
+<!-- /wp:group -->

package/templates/wordpress/theme/patterns/card.php

@@ -0,0 +1,46 @@
+<?php
+/**
+ * Title: Card
+ * Slug: baseline/card
+ * Categories: baseline
+ * Keywords: card, panel, tile
+ * Description: Baseline Card (components/card/spec.md): media, header with title, description and action, content, footer. Delete the regions you do not need.
+ */
+?>
+<!-- wp:group {"className":"is-style-card","layout":{"type":"default"}} -->
+<div class="wp-block-group is-style-card"><!-- wp:image {"sizeSlug":"large","linkDestination":"none"} -->
+<figure class="wp-block-image size-large"><img alt=""/></figure>
+<!-- /wp:image -->
+
+<!-- wp:group {"className":"is-style-card-header","layout":{"type":"default"}} -->
+<div class="wp-block-group is-style-card-header"><!-- wp:heading {"level":3} -->
+<h3 class="wp-block-heading"><?php esc_html_e('Card title', 'baseline'); ?></h3>
+<!-- /wp:heading -->
+
+<!-- wp:paragraph -->
+<p><?php esc_html_e('A short supporting description.', 'baseline'); ?></p>
+<!-- /wp:paragraph -->
+
+<!-- wp:buttons -->
+<div class="wp-block-buttons"><!-- wp:button {"className":"is-style-link"} -->
+<div class="wp-block-button is-style-link"><a class="wp-block-button__link wp-element-button"><?php esc_html_e('Action', 'baseline'); ?></a></div>
+<!-- /wp:button --></div>
+<!-- /wp:buttons --></div>
+<!-- /wp:group -->
+
+<!-- wp:paragraph -->
+<p><?php esc_html_e('Card content: any blocks placed here are padded to the card.', 'baseline'); ?></p>
+<!-- /wp:paragraph -->
+
+<!-- wp:group {"className":"is-style-card-footer","layout":{"type":"flex","flexWrap":"nowrap"}} -->
+<div class="wp-block-group is-style-card-footer"><!-- wp:buttons -->
+<div class="wp-block-buttons"><!-- wp:button -->
+<div class="wp-block-button"><a class="wp-block-button__link wp-element-button"><?php esc_html_e('Primary action', 'baseline'); ?></a></div>
+<!-- /wp:button -->
+
+<!-- wp:button {"className":"is-style-outline"} -->
+<div class="wp-block-button is-style-outline"><a class="wp-block-button__link wp-element-button"><?php esc_html_e('Secondary', 'baseline'); ?></a></div>
+<!-- /wp:button --></div>
+<!-- /wp:buttons --></div>
+<!-- /wp:group --></div>
+<!-- /wp:group -->

package/templates/wordpress/theme/patterns/contact-centered.php

@@ -0,0 +1,22 @@
+<?php
+/**
+ * Title: Contact: Centered
+ * Slug: baseline/contact-centered
+ * Categories: sections
+ * Description: Figma Contact/Centered: a heading and a lead at the content width; add the site's form block (Gravity Forms) below. WordPress has no core form block.
+ */
+?>
+<!-- wp:group {"tagName":"section","align":"full","style":{"spacing":{"padding":{"top":"var:preset|spacing|lg","bottom":"var:preset|spacing|lg"}}},"layout":{"type":"constrained"}} -->
+<section class="wp-block-group alignfull" style="padding-top:var(--wp--preset--spacing--lg);padding-bottom:var(--wp--preset--spacing--lg)">
+<!-- wp:heading {"fontSize":"heading-xl"} -->
+<h2 class="wp-block-heading has-heading-xl-font-size">Get in touch</h2>
+<!-- /wp:heading -->
+
+<!-- wp:paragraph {"className":"is-style-lead"} -->
+<p class="is-style-lead">Tell us about your project and we’ll get back to you within one business day.</p>
+<!-- /wp:paragraph -->
+
+<!-- wp:paragraph {"className":"is-style-lead"} -->
+<p class="is-style-lead"><em>Replace this paragraph with the contact form block.</em></p>
+<!-- /wp:paragraph --></section>
+<!-- /wp:group -->

package/templates/wordpress/theme/patterns/cta-left.php

@@ -0,0 +1,25 @@
+<?php
+/**
+ * Title: CTA: Left
+ * Slug: baseline/cta-left
+ * Categories: sections
+ * Description: Figma CTA/Left: a heading and two actions, start-aligned at the wide width. Set the section group's Scheme for a coloured band.
+ */
+?>
+<!-- wp:group {"tagName":"section","align":"full","style":{"spacing":{"padding":{"top":"var:preset|spacing|lg","bottom":"var:preset|spacing|lg"}}},"layout":{"type":"constrained"}} -->
+<section class="wp-block-group alignfull" style="padding-top:var(--wp--preset--spacing--lg);padding-bottom:var(--wp--preset--spacing--lg)"><!-- wp:group {"align":"wide","layout":{"type":"default"}} -->
+<div class="wp-block-group alignwide"><!-- wp:heading {"fontSize":"heading-xl"} -->
+<h2 class="wp-block-heading has-heading-xl-font-size">Let’s build something great together</h2>
+<!-- /wp:heading -->
+
+<!-- wp:buttons -->
+<div class="wp-block-buttons"><!-- wp:button -->
+<div class="wp-block-button"><a class="wp-block-button__link wp-element-button" href="#">Start a free trial</a></div>
+<!-- /wp:button -->
+
+<!-- wp:button {"className":"is-style-outline"} -->
+<div class="wp-block-button is-style-outline"><a class="wp-block-button__link wp-element-button" href="#">Request a demo</a></div>
+<!-- /wp:button --></div>
+<!-- /wp:buttons --></div>
+<!-- /wp:group --></section>
+<!-- /wp:group -->

package/templates/wordpress/theme/patterns/faq-centered.php

@@ -0,0 +1,36 @@
+<?php
+/**
+ * Title: FAQ: Centered
+ * Slug: baseline/faq-centered
+ * Categories: sections
+ * Description: Figma FAQ/Centered: a heading, a lead and the questions as core/details (Baseline's Accordion), at the content width.
+ */
+?>
+<!-- wp:group {"tagName":"section","align":"full","style":{"spacing":{"padding":{"top":"var:preset|spacing|lg","bottom":"var:preset|spacing|lg"}}},"layout":{"type":"constrained"}} -->
+<section class="wp-block-group alignfull" style="padding-top:var(--wp--preset--spacing--lg);padding-bottom:var(--wp--preset--spacing--lg)">
+<!-- wp:heading {"fontSize":"heading-xl"} -->
+<h2 class="wp-block-heading has-heading-xl-font-size">Frequently asked questions</h2>
+<!-- /wp:heading -->
+
+<!-- wp:paragraph {"className":"is-style-lead"} -->
+<p class="is-style-lead">Can’t find the answer you’re looking for? Contact our support team.</p>
+<!-- /wp:paragraph -->
+
+<!-- wp:details {"showContent":true} -->
+<details class="wp-block-details" open><summary>How do I reset my password?</summary><!-- wp:paragraph -->
+<p>Click on ‘Forgot password’ on the login page, enter your email address, and we’ll send you a link to reset your password. The link expires in 24 hours.</p>
+<!-- /wp:paragraph --></details>
+<!-- /wp:details -->
+
+<!-- wp:details -->
+<details class="wp-block-details"><summary>Can I change my plan later?</summary><!-- wp:paragraph -->
+<p>Yes. Upgrade or downgrade at any time from your account settings; changes apply from the next billing period.</p>
+<!-- /wp:paragraph --></details>
+<!-- /wp:details -->
+
+<!-- wp:details -->
+<details class="wp-block-details"><summary>Do you offer support?</summary><!-- wp:paragraph -->
+<p>Every plan includes email support. Business plans add phone support and a named account manager.</p>
+<!-- /wp:paragraph --></details>
+<!-- /wp:details --></section>
+<!-- /wp:group -->

package/templates/wordpress/theme/patterns/header-inline.php

@@ -0,0 +1,33 @@
+<?php
+/**
+ * Title: Header: Inline
+ * Slug: baseline/header-inline
+ * Categories: header
+ * Block Types: core/template-part/header
+ * Description: Figma Header/Inline (components/header/spec.md): a centred announcement on the muted surface, then the site title, the navigation and the actions on one row. Below 600px core's navigation overlay is the mobile menu.
+ * Keywords: header, navigation, announcement
+ */
+?>
+<!-- wp:group {"align":"full","className":"bl-announcement","baselineSurface":"muted","layout":{"type":"constrained"}} -->
+<div class="wp-block-group alignfull bl-announcement"><!-- wp:paragraph {"align":"center"} -->
+<p class="has-text-align-center">We’ll find you the best possible rate. <a href="/contact/">Get a quote now.</a></p>
+<!-- /wp:paragraph --></div>
+<!-- /wp:group -->
+
+<!-- wp:group {"align":"full","className":"bl-header-bar","layout":{"type":"constrained"}} -->
+<div class="wp-block-group alignfull bl-header-bar"><!-- wp:group {"align":"wide","className":"bl-header-row","layout":{"type":"flex","flexWrap":"nowrap","justifyContent":"space-between"}} -->
+<div class="wp-block-group alignwide bl-header-row"><!-- wp:site-title {"level":0,"fontSize":"heading-md"} /-->
+
+<!-- wp:navigation {"overlayMenu":"mobile","className":"bl-header-nav","layout":{"type":"flex","justifyContent":"center"}} /-->
+
+<!-- wp:group {"className":"bl-header-actions","layout":{"type":"flex","flexWrap":"nowrap"}} -->
+<div class="wp-block-group bl-header-actions"><!-- wp:buttons -->
+<div class="wp-block-buttons"><!-- wp:button -->
+<div class="wp-block-button"><a class="wp-block-button__link wp-element-button" href="tel:+15555550100">Call us</a></div>
+<!-- /wp:button --></div>
+<!-- /wp:buttons -->
+
+<!-- wp:search {"label":"Search","showLabel":false,"buttonText":"Search","className":"is-style-dialog"} /--></div>
+<!-- /wp:group --></div>
+<!-- /wp:group --></div>
+<!-- /wp:group -->

package/templates/wordpress/theme/patterns/header-stacked.php

@@ -0,0 +1,25 @@
+<?php
+/**
+ * Title: Header: Stacked
+ * Slug: baseline/header-stacked
+ * Categories: header
+ * Block Types: core/template-part/header
+ * Description: Figma Header/Stacked (components/header/spec.md): the site title and search on the first row, the navigation on its own row below. Below 600px the navigation row goes and the first row carries core's mobile menu.
+ * Keywords: header, navigation
+ */
+?>
+<!-- wp:group {"align":"full","className":"bl-header-bar","layout":{"type":"constrained"}} -->
+<div class="wp-block-group alignfull bl-header-bar"><!-- wp:group {"align":"wide","className":"bl-header-row","layout":{"type":"flex","flexWrap":"nowrap","justifyContent":"space-between"}} -->
+<div class="wp-block-group alignwide bl-header-row"><!-- wp:navigation {"overlayMenu":"always","className":"bl-header-nav-mobile"} /-->
+
+<!-- wp:site-title {"level":0,"fontSize":"heading-md"} /-->
+
+<!-- wp:group {"className":"bl-header-actions","layout":{"type":"flex","flexWrap":"nowrap","justifyContent":"right"}} -->
+<div class="wp-block-group bl-header-actions"><!-- wp:search {"label":"Search","showLabel":false,"buttonText":"Search","className":"is-style-dialog"} /--></div>
+<!-- /wp:group --></div>
+<!-- /wp:group --></div>
+<!-- /wp:group -->
+
+<!-- wp:group {"align":"full","className":"bl-header-nav-row","layout":{"type":"constrained"}} -->
+<div class="wp-block-group alignfull bl-header-nav-row"><!-- wp:navigation {"overlayMenu":"never","align":"wide","className":"bl-header-nav"} /--></div>
+<!-- /wp:group -->

package/templates/wordpress/theme/patterns/hero-centered.php

@@ -0,0 +1,28 @@
+<?php
+/**
+ * Title: Hero: Centered
+ * Slug: baseline/hero-centered
+ * Categories: sections
+ * Description: Figma Hero/Centered: a centred display headline (h1), a lead and two actions at the content width.
+ */
+?>
+<!-- wp:group {"tagName":"section","align":"full","style":{"spacing":{"padding":{"top":"var:preset|spacing|lg","bottom":"var:preset|spacing|lg"}}},"layout":{"type":"constrained"}} -->
+<section class="wp-block-group alignfull" style="padding-top:var(--wp--preset--spacing--lg);padding-bottom:var(--wp--preset--spacing--lg)">
+<!-- wp:heading {"textAlign":"center","level":1,"fontSize":"display-sm"} -->
+<h1 class="wp-block-heading has-text-align-center has-display-sm-font-size">Build a website your team can run</h1>
+<!-- /wp:heading -->
+
+<!-- wp:paragraph {"align":"center","className":"is-style-lead"} -->
+<p class="has-text-align-center is-style-lead">Launch faster with components that are designed, built and tested together for every platform you use.</p>
+<!-- /wp:paragraph -->
+
+<!-- wp:buttons {"layout":{"type":"flex","justifyContent":"center"}} -->
+<div class="wp-block-buttons"><!-- wp:button -->
+<div class="wp-block-button"><a class="wp-block-button__link wp-element-button" href="#">Start a free trial</a></div>
+<!-- /wp:button -->
+
+<!-- wp:button {"className":"is-style-outline"} -->
+<div class="wp-block-button is-style-outline"><a class="wp-block-button__link wp-element-button" href="#">Request a demo</a></div>
+<!-- /wp:button --></div>
+<!-- /wp:buttons --></section>
+<!-- /wp:group -->

package/templates/wordpress/theme/patterns/hero-split.php

@@ -0,0 +1,41 @@
+<?php
+/**
+ * Title: Hero: Split
+ * Slug: baseline/hero-split
+ * Categories: sections
+ * Description: Figma Hero/Split: an eyebrow, a display headline (h1), a lead and two actions beside a square image, at the wide width. On mobile set the columns block to Invert order when stacked to put the image first.
+ */
+?>
+<!-- wp:group {"tagName":"section","align":"full","style":{"spacing":{"padding":{"top":"var:preset|spacing|lg","bottom":"var:preset|spacing|lg"}}},"layout":{"type":"constrained"}} -->
+<section class="wp-block-group alignfull" style="padding-top:var(--wp--preset--spacing--lg);padding-bottom:var(--wp--preset--spacing--lg)"><!-- wp:columns {"verticalAlignment":"center","align":"wide"} -->
+<div class="wp-block-columns alignwide are-vertically-aligned-center"><!-- wp:column {"verticalAlignment":"center"} -->
+<div class="wp-block-column is-vertically-aligned-center"><!-- wp:paragraph {"className":"is-style-eyebrow"} -->
+<p class="is-style-eyebrow">New for 2026</p>
+<!-- /wp:paragraph -->
+
+<!-- wp:heading {"level":1,"fontSize":"display-sm"} -->
+<h1 class="wp-block-heading has-display-sm-font-size">Build a website your team can run</h1>
+<!-- /wp:heading -->
+
+<!-- wp:paragraph {"className":"is-style-lead"} -->
+<p class="is-style-lead">Launch faster with components that are designed, built and tested together for every platform you use.</p>
+<!-- /wp:paragraph -->
+
+<!-- wp:buttons -->
+<div class="wp-block-buttons"><!-- wp:button -->
+<div class="wp-block-button"><a class="wp-block-button__link wp-element-button" href="#">Start a free trial</a></div>
+<!-- /wp:button -->
+
+<!-- wp:button {"className":"is-style-outline"} -->
+<div class="wp-block-button is-style-outline"><a class="wp-block-button__link wp-element-button" href="#">Request a demo</a></div>
+<!-- /wp:button --></div>
+<!-- /wp:buttons --></div>
+<!-- /wp:column -->
+
+<!-- wp:column {"verticalAlignment":"center"} -->
+<div class="wp-block-column is-vertically-aligned-center"><!-- wp:image {"aspectRatio":"1","scale":"cover","sizeSlug":"full","linkDestination":"none"} -->
+<figure class="wp-block-image size-full"><img src="<?php echo esc_url(get_theme_file_uri('assets/images/placeholder.svg')); ?>" alt="" style="aspect-ratio:1;object-fit:cover"/></figure>
+<!-- /wp:image --></div>
+<!-- /wp:column --></div>
+<!-- /wp:columns --></section>
+<!-- /wp:group -->

package/templates/wordpress/theme/patterns/section.php

@@ -0,0 +1,28 @@
+<?php
+/**
+ * Title: Section
+ * Slug: baseline/section
+ * Categories: baseline
+ * Description: Section > Container > Columns (B5): a full-width band in the page's scheme, wide content in two columns.
+ * Keywords: section, columns, layout
+ */
+?>
+<!-- wp:group {"tagName":"section","align":"full","style":{"spacing":{"padding":{"top":"var:preset|spacing|lg","bottom":"var:preset|spacing|lg"}}},"layout":{"type":"constrained"}} -->
+<section class="wp-block-group alignfull" style="padding-top:var(--wp--preset--spacing--lg);padding-bottom:var(--wp--preset--spacing--lg)"><!-- wp:columns {"align":"wide"} -->
+<div class="wp-block-columns alignwide"><!-- wp:column -->
+<div class="wp-block-column"><!-- wp:heading -->
+<h2 class="wp-block-heading">Build a website your team can run</h2>
+<!-- /wp:heading -->
+
+<!-- wp:paragraph -->
+<p>Launch faster with components that are designed, built and tested together for every platform you use.</p>
+<!-- /wp:paragraph --></div>
+<!-- /wp:column -->
+
+<!-- wp:column -->
+<div class="wp-block-column"><!-- wp:paragraph -->
+<p>Column 2</p>
+<!-- /wp:paragraph --></div>
+<!-- /wp:column --></div>
+<!-- /wp:columns --></section>
+<!-- /wp:group -->

package/templates/wordpress/theme/src/app.css

@@ -0,0 +1,45 @@
+/* Front-end stylesheet: Tailwind with preflight + Baseline tokens. Built by `npm run build` into assets/app.css. */
+@import "./fonts.css";
+@import "tailwindcss";
+@import "../assets/tokens.css";
+@import "./typeset.css"; /* prose rhythm (ADR-0028): generated from tokens/typeset.css; unlayered on purpose */
+@import "./text-styles.css"; /* content ramp (ADR-0014, generated): display-* / heading-* and the has-<style>-font-size presets */
+@import "./core-button.css"; /* core/button as the Baseline button (ADR-0018); plain CSS on core's classes */
+@import "./core-avatar.css"; /* core/avatar as the Baseline Avatar (ADR-0018): round, blended outline */
+@import "./core-card.css"; /* core/group as the Baseline Card (ADR-0018): block styles card, card-header, card-footer */
+@import "./sections.css"; /* the starter sections' paragraph styles and blog grid (B5) */
+@import "./header.css"; /* the site header on core blocks: parts/header.html, patterns header-inline / header-stacked (B5) */
+@import "./core-layout.css"; /* Section, Container, Columns, Panel on core/group and core/columns (B5) */
+@import "./core-breadcrumbs.css"; /* core/breadcrumbs as the Baseline Breadcrumb (ADR-0018): chevron mask separator */
+@import "./core-pagination.css"; /* core/query-pagination and paginate_links() as the Baseline Pagination (ADR-0018) */
+@import "./core-accordion.css"; /* core/accordion and core/details as the Baseline Accordion (ADR-0018); looks in looks.generated.css */
+@import "./carousel.css"; /* acf/carousel (spec: components/carousel/spec.md) */
+@import "./core-navigation.css"; /* core/navigation as the Baseline Navigation Menu (ADR-0018) */
+@import "./core-tabs.css"; /* core/tabs as the Baseline Tabs (ADR-0018); looks in looks.generated.css */
+@import "./looks.generated.css"; /* the installed looks (ADR-0031), generated by tokens/looks.mjs */
+@import "./core-table.css"; /* core/table as the Baseline Table (ADR-0018): the component's look, as typeset gives prose tables */
+@import "./media.css"; /* Media: core/image, core/video and core/embed; the video facade from inc/media.php */
+@import "./item.css"; /* acf/item-group: the gap reaches the items through ACF's InnerBlocks wrappers */
+@import "./dialog.css"; /* acf/dialog: page scroll lock and the InnerBlocks wrappers stepping out of the grid */
+@import "./sheet.css"; /* acf/sheet: InnerBlocks wrappers, body padding and stacked footer buttons */
+@import "./toggle-group.css"; /* Toggle Group: the joined group's corners and shared borders (baseline_toggle_group) */
+@import "./icons.generated.css"; /* glyphs a stylesheet has to draw itself, as masks; follows the active set */
+@import "./input.css"; /* Input: no core block exists, so the native control is the component (ADR-0018) */
+@import "./checkbox.css"; /* Checkbox: same ladder as Input; the glyph is a mask because GF and core own the markup */
+@import "./radio.css"; /* Radio: same ladder again; the dot is a pseudo-element, which needs no mask */
+@import "./switch.css"; /* Switch: opt-in role="switch" markup, so no existing checkbox changes appearance */
+@import "./textarea.css"; /* Textarea: the same control box as Input with a floor instead of a fixed height */
+@import "./input-group.css"; /* Input Group: core/search with the button inside is the one real group in core */
+@import "./field.css"; /* Field: core's own form markup (search, comments, password) styled as the component */
+@import "./gravityforms.css"; /* unlayered on purpose: Gravity Forms' CSS API variables */
+
+/* Only block templates and theme templates are scanned (ADR-0008 guardrail). */
+@source "../blocks";
+@source "../inc";
+@source "../*.php";
+
+body {
+  background: var(--background);
+  color: var(--foreground);
+  font-family: var(--font-sans);
+}

package/templates/wordpress/theme/src/carousel.css

@@ -0,0 +1,93 @@
+/* Carousel on WordPress (spec: components/carousel/spec.md): the acf/carousel block's look, React's carousel.tsx in plain
+   CSS on the block's classes. Geometry from the carousel/* tokens; the controls are outline sm icon-only buttons
+   (baseline_button) made round, carousel/control-offset outside the slides. ACF wraps the slides in
+   div.acf-innerblocks-container, which is the track. */
+
+.bl-carousel { position: relative; }
+/* dots below: padding keeps their room (a margin would collapse into the next block's) and the controls stop above it,
+   so they centre on the slides */
+.bl-carousel.has-dots { --bl-carousel-dots-room: calc(var(--bl-carousel-dots-offset) + var(--bl-carousel-dot-size)); padding-bottom: var(--bl-carousel-dots-room); }
+.bl-carousel__viewport { overflow: hidden; }
+.bl-carousel__viewport > .acf-innerblocks-container {
+  display: flex;
+  margin-inline-start: calc(-1 * var(--bl-carousel-gap));
+}
+.bl-carousel__slide {
+  flex: 0 0 100%;
+  min-width: 0;
+  margin: 0;
+  padding-inline-start: var(--bl-carousel-gap);
+}
+@media (min-width: 48rem) {
+  .bl-carousel[data-slides="2"] .bl-carousel__slide { flex-basis: 50%; }
+  .bl-carousel[data-slides="3"] .bl-carousel__slide { flex-basis: calc(100% / 3); }
+}
+
+/* Previous / Next */
+.bl-carousel > .bl-carousel__control {
+  position: absolute;
+  display: flex; /* the core-button wrapper hugs its button (as a block it was taller, and the control sat off centre) */
+  inset-block: 0 var(--bl-carousel-dots-room, 0px);
+  height: fit-content;
+  margin-block: auto;
+}
+.bl-carousel > .bl-carousel__control--previous { inset-inline-start: calc(-1 * var(--bl-carousel-control-offset)); }
+.bl-carousel > .bl-carousel__control--next { inset-inline-end: calc(-1 * var(--bl-carousel-control-offset)); }
+.bl-carousel .bl-carousel__control > .wp-block-button__link { border-radius: var(--bl-carousel-control-radius); touch-action: manipulation; }
+.bl-carousel .bl-carousel__control > .wp-block-button__link:disabled { pointer-events: none; opacity: 0.5; }
+[dir="rtl"] .bl-carousel .bl-carousel__control svg { scale: -1 1; }
+
+/* CarouselDots (built by the script) */
+.bl-carousel__dots {
+  position: absolute;
+  inset-inline: 0;
+  bottom: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: var(--bl-carousel-dots-gap);
+}
+.bl-carousel__dot {
+  width: var(--bl-carousel-dot-size);
+  height: var(--bl-carousel-dot-size);
+  flex: none;
+  padding: 0;
+  border: 0;
+  border-radius: var(--bl-carousel-dot-radius);
+  background-color: var(--bl-carousel-dot-background);
+  cursor: pointer;
+  outline: none;
+  transition: background-color 150ms;
+}
+.bl-carousel__dot[aria-current="true"] { background-color: var(--primary); }
+.bl-carousel__dot:focus-visible { box-shadow: 0 0 0 var(--bl-control-ring-width) var(--ring); }
+
+/* editor (2026-10-07, user: look as on the front end): Embla does not run on the canvas, and there the track's items are
+   the editor's block wrappers, with each slide nested inside. So the wrappers take the slide's width and gap, the
+   viewport scrolls a slide at a time (snapping, its scrollbar hidden), and assets/js/carousel-editor.js makes Previous /
+   Next and the dots scroll it. The inserter's appender sits after the last slide. */
+.editor-styles-wrapper .bl-carousel__viewport {
+  overflow-x: auto;
+  overscroll-behavior-x: contain;
+  scroll-snap-type: x mandatory;
+  scrollbar-width: none;
+}
+.editor-styles-wrapper .bl-carousel__viewport > .acf-innerblocks-container > .block-editor-block-list__block {
+  flex: 0 0 100%;
+  min-width: 0;
+  margin: 0;
+  padding-inline-start: var(--bl-carousel-gap);
+  scroll-snap-align: start;
+}
+@media (min-width: 48rem) {
+  .editor-styles-wrapper .bl-carousel[data-slides="2"] .bl-carousel__viewport > .acf-innerblocks-container > .block-editor-block-list__block { flex-basis: 50%; }
+  .editor-styles-wrapper .bl-carousel[data-slides="3"] .bl-carousel__viewport > .acf-innerblocks-container > .block-editor-block-list__block { flex-basis: calc(100% / 3); }
+}
+.editor-styles-wrapper .bl-carousel__viewport > .acf-innerblocks-container > .block-editor-block-list__block .bl-carousel__slide { padding-inline-start: 0; }
+.editor-styles-wrapper .bl-carousel__viewport > .acf-innerblocks-container > .block-list-appender {
+  position: static;
+  flex: none;
+  align-self: center;
+  margin: 0;
+  padding-inline-start: var(--bl-carousel-gap);
+}

package/templates/wordpress/theme/src/carousel.js

@@ -0,0 +1,94 @@
+/* Baseline Carousel without React (spec: components/carousel/spec.md): Embla on the markup React's Carousel renders
+   (data-slot carousel / carousel-content / carousel-previous / carousel-next / carousel-dots), for the HTML build,
+   WordPress (acf/carousel) and Shopify (the carousel snippet). One engine everywhere, as React's embla-carousel-react.
+   - options: the root's data-options (JSON, Embla's options, as React's `opts`), data-orientation (vertical -> axis y),
+     data-autoplay (ms between slides; Embla's autoplay plugin, paused while the pointer is over the carousel or focus is
+     in it, stopped by an interaction)
+   - Previous / Next scroll one snap and disable at the ends (unless the carousel loops); the dots container gets one
+     button per snap ("Go to slide n", the current one aria-current); ArrowLeft / ArrowRight inside the carousel move it
+   - carousels added later (Shopify's theme editor) start too: a MutationObserver watches for new roots
+   This file is the SOURCE: it imports Embla from npm, and a build bundles it (with a banner naming Embla's version):
+   the monorepo's scripts/gen-html.mjs to platforms/html/dist/carousel.js, and each theme's own `npm run build` from its
+   copy in src/ (written here by gen-html), so a scaffolded project updates Embla with npm install + npm run build. */
+import EmblaCarousel from "embla-carousel";
+import Autoplay from "embla-carousel-autoplay";
+
+const started = new WeakSet();
+
+function start(root) {
+  if (started.has(root)) return;
+  const viewport = root.querySelector("[data-slot=carousel-content]");
+  if (!viewport) return;
+  started.add(root);
+  let options = {};
+  try { options = JSON.parse(root.getAttribute("data-options") || "{}"); } catch { /* not JSON: Embla's defaults */ }
+  options.axis = root.getAttribute("data-orientation") === "vertical" ? "y" : "x";
+  // the track (the slides' parent) is the viewport's first child, or the element its data-track selector names (a
+  // WordPress ACF block wraps its inner blocks in div.acf-innerblocks-container)
+  const trackSelector = viewport.getAttribute("data-track");
+  const track = trackSelector && viewport.querySelector(trackSelector);
+  if (track) options.container = track;
+  const plugins = [];
+  const delay = Number(root.getAttribute("data-autoplay"));
+  if (delay > 0) plugins.push(Autoplay({ delay, stopOnMouseEnter: true, stopOnFocusIn: true, stopOnInteraction: true }));
+  const api = EmblaCarousel(viewport, options, plugins);
+
+  // a control is data-slot carousel-previous / -next, or carries data-carousel-previous / -next where its own component
+  // owns data-slot (Shopify's button snippet)
+  const prev = root.querySelector("[data-slot=carousel-previous], [data-carousel-previous]");
+  const next = root.querySelector("[data-slot=carousel-next], [data-carousel-next]");
+  const dotsBox = root.querySelector("[data-slot=carousel-dots]");
+  const dotClass = dotsBox && dotsBox.getAttribute("data-dot-class");
+  prev?.addEventListener("click", () => api.scrollPrev());
+  next?.addEventListener("click", () => api.scrollNext());
+
+  const buildDots = () => {
+    if (!dotsBox) return;
+    dotsBox.replaceChildren(...api.scrollSnapList().map((_, i) => {
+      const b = document.createElement("button");
+      b.type = "button";
+      b.setAttribute("data-slot", "carousel-dot");
+      b.setAttribute("aria-label", `Go to slide ${i + 1}`);
+      if (dotClass) b.className = dotClass;
+      b.addEventListener("click", () => api.scrollTo(i));
+      return b;
+    }));
+  };
+  const update = () => {
+    if (prev) prev.disabled = !api.canScrollPrev();
+    if (next) next.disabled = !api.canScrollNext();
+    if (dotsBox) [...dotsBox.children].forEach((d, i) => {
+      if (i === api.selectedScrollSnap()) d.setAttribute("aria-current", "true");
+      else d.removeAttribute("aria-current");
+    });
+  };
+  api.on("init", () => { buildDots(); update(); });
+  api.on("reInit", () => { buildDots(); update(); });
+  api.on("select", update);
+  buildDots();
+  update();
+
+  root.addEventListener("keydown", (e) => {
+    if (e.key === "ArrowLeft") { e.preventDefault(); api.scrollPrev(); }
+    else if (e.key === "ArrowRight") { e.preventDefault(); api.scrollNext(); }
+  }, true);
+}
+
+function startAll(scope) {
+  scope.querySelectorAll?.("[data-slot=carousel]").forEach(start);
+}
+
+if (!window.baselineCarousel) {
+  window.baselineCarousel = true;
+  const go = () => {
+    startAll(document);
+    new MutationObserver((records) => {
+      for (const r of records) for (const n of r.addedNodes) if (n instanceof Element) {
+        if (n.matches("[data-slot=carousel]")) start(n);
+        startAll(n);
+      }
+    }).observe(document.documentElement, { childList: true, subtree: true });
+  };
+  if (document.readyState === "loading") document.addEventListener("DOMContentLoaded", go);
+  else go();
+}