@goldencomm/create-baseline 0.0.1 → 0.1.0

package/templates/wordpress/theme/src/core-card.css

@@ -0,0 +1,157 @@
+/* Card on core/group (spec: components/card/spec.md, ADR-0018). Block styles from inc/core-card.php; every rule mirrors
+   registry/src/ui/card/card.tsx and reads the card/* tokens. Selectors carry .wp-block-group plus the style class, so
+   they beat core's layout rules (a single generated class) and typeset's (0,1,0) flow margins without !important. */
+
+.wp-block-group:is(.is-style-card, .is-style-card-sm) {
+  --card-padding: var(--bl-card-md-padding);
+  --card-gap: var(--bl-card-md-gap);
+  --card-radius: var(--bl-card-md-radius);
+  display: flex;
+  flex-direction: column;
+  gap: var(--card-gap);
+  overflow: hidden;
+  padding: var(--card-padding) 0;
+  border-radius: var(--card-radius);
+  background-color: var(--card);
+  color: var(--card-foreground);
+  box-shadow: 0 0 0 var(--bl-card-border-width) var(--bl-card-border);
+  font-size: var(--bl-card-description-font-size);
+  line-height: var(--bl-card-description-line-height);
+}
+
+.wp-block-group.is-style-card-sm {
+  --card-padding: var(--bl-card-sm-padding);
+  --card-gap: var(--bl-card-sm-gap);
+  --card-radius: var(--bl-card-sm-radius);
+}
+
+/* In post content the card takes typeset's flow gap above it, like any embedded component (tokens/typeset.css, the
+   Baseline addition): a core/group carries neither not-typeset nor data-slot, so the card styles name themselves. */
+:is(.typeset, .editor-styles-wrapper .is-root-container) > .wp-block-group:is(.is-style-card, .is-style-card-sm):not(:first-child) {
+  margin-block-start: var(--typeset-flow);
+}
+
+/* Every direct child is a region: the gap spaces them, so core's flow margins go. Anything that is not a header, a
+   footer or the media is content (React's CardContent) and pads itself horizontally. */
+.wp-block-group:is(.is-style-card, .is-style-card-sm) > * {
+  margin: 0;
+  padding-inline: var(--card-padding);
+}
+
+/* Media: an image as the first child goes full bleed, removes the top padding and takes the top corners; as the last
+   child it takes the bottom corners (upstream's has-[>img:first-child]:pt-0 and *:[img:first-child]:rounded-t-xl). */
+.wp-block-group:is(.is-style-card, .is-style-card-sm) > .wp-block-image {
+  padding-inline: 0;
+}
+.wp-block-group:is(.is-style-card, .is-style-card-sm) > .wp-block-image img {
+  display: block;
+  width: 100%;
+  height: auto;
+  border-radius: 0; /* typeset rounds media; the card decides which corners are round */
+}
+.wp-block-group:is(.is-style-card, .is-style-card-sm):has(> .wp-block-image:first-child) {
+  padding-top: 0;
+}
+.wp-block-group:is(.is-style-card, .is-style-card-sm) > .wp-block-image:first-child img {
+  border-start-start-radius: var(--card-radius);
+  border-start-end-radius: var(--card-radius);
+}
+.wp-block-group:is(.is-style-card, .is-style-card-sm) > .wp-block-image:last-child img {
+  border-end-start-radius: var(--card-radius);
+  border-end-end-radius: var(--card-radius);
+}
+
+/* A footer removes the card's bottom padding; the footer pads all round. */
+.wp-block-group:is(.is-style-card, .is-style-card-sm):has(> .is-style-card-footer) {
+  padding-bottom: 0;
+}
+
+/* Header: title and description stack 4px apart; an action makes it two columns, spanning both rows at the top right. */
+.wp-block-group:is(.is-style-card-header, .is-style-card-header-bordered) {
+  display: grid;
+  grid-auto-rows: min-content;
+  align-items: start;
+  row-gap: var(--bl-card-header-gap);
+  column-gap: var(--bl-card-header-action-gap);
+  padding-inline: var(--card-padding);
+  border-start-start-radius: var(--card-radius);
+  border-start-end-radius: var(--card-radius);
+}
+.wp-block-group:is(.is-style-card-header, .is-style-card-header-bordered) > * {
+  margin: 0;
+}
+.wp-block-group:is(.is-style-card-header, .is-style-card-header-bordered):has(> .wp-block-buttons) {
+  grid-template-columns: 1fr auto;
+}
+.wp-block-group:is(.is-style-card-header, .is-style-card-header-bordered):has(> p) {
+  grid-template-rows: auto auto;
+}
+.wp-block-group.is-style-card-header-bordered {
+  padding-bottom: var(--card-padding);
+  border-bottom: var(--bl-card-border-width) solid var(--border);
+}
+
+/* the title: the header's heading, whatever its level */
+.wp-block-group:is(.is-style-card-header, .is-style-card-header-bordered) > :is(h1, h2, h3, h4, h5, h6) {
+  color: inherit;
+  font-family: inherit;
+  font-size: var(--bl-card-title-md-font-size);
+  font-weight: var(--bl-card-title-font-weight);
+  line-height: var(--bl-card-title-md-line-height);
+}
+.wp-block-group.is-style-card-sm .wp-block-group:is(.is-style-card-header, .is-style-card-header-bordered) > :is(h1, h2, h3, h4, h5, h6) {
+  font-size: var(--bl-card-title-sm-font-size);
+  line-height: var(--bl-card-title-sm-line-height);
+}
+
+/* the description: the header's paragraph */
+.wp-block-group:is(.is-style-card-header, .is-style-card-header-bordered) > p {
+  color: var(--muted-foreground);
+  font-size: var(--bl-card-description-font-size);
+  line-height: var(--bl-card-description-line-height);
+}
+
+/* the action: the header's buttons */
+.wp-block-group:is(.is-style-card-header, .is-style-card-header-bordered) > .wp-block-buttons {
+  grid-column: 2;
+  grid-row: 1 / span 2;
+  align-self: start;
+  justify-self: end;
+}
+
+/* Footer: always bordered and muted, as upstream. A Row group lays the buttons out; a Stack group (core's is-vertical)
+   stacks them full width, Figma's vertical Orientation. */
+.wp-block-group.is-style-card-footer {
+  display: flex;
+  align-items: center;
+  gap: var(--bl-card-footer-gap);
+  padding: var(--card-padding);
+  border-top: var(--bl-card-border-width) solid var(--border);
+  border-end-start-radius: var(--card-radius);
+  border-end-end-radius: var(--card-radius);
+  background-color: var(--bl-card-footer-background);
+}
+.wp-block-group.is-style-card-footer.is-vertical {
+  flex-direction: column;
+  align-items: stretch;
+}
+.wp-block-group.is-style-card-footer > * {
+  margin: 0;
+}
+/* the footer's buttons usually arrive as one core/buttons block: its own gap is the footer gap */
+.wp-block-group.is-style-card-footer > .wp-block-buttons {
+  gap: var(--bl-card-footer-gap);
+}
+
+/* A Stack footer stacks its buttons full width, as React's `CardFooter className="flex-col"` with `w-full` buttons:
+   the buttons arrive as one core/buttons block, so the stacking has to reach into it (found 2026-10-01 on the
+   kitchen-sink page, where the two buttons stayed side by side). */
+.wp-block-group.is-style-card-footer.is-vertical > .wp-block-buttons {
+  flex-direction: column;
+  align-items: stretch;
+  width: 100%;
+}
+.wp-block-group.is-style-card-footer.is-vertical > .wp-block-buttons > .wp-block-button,
+.wp-block-group.is-style-card-footer.is-vertical > .wp-block-buttons > .wp-block-button > .wp-block-button__link {
+  width: 100%;
+}

package/templates/wordpress/theme/src/core-layout.css

@@ -0,0 +1,73 @@
+/* Layout on core blocks (B5; specs: components/section, container, columns, panel). inc/core-layout.php registers the
+   attributes and the Panel style; theme.json carries the widths, the root padding and the spacing presets. Every rule
+   mirrors registry/src/ui/{section,container,columns,panel} and reads the same tokens. */
+
+/* The page wrapper (index.php) pads flowing content, unless it starts or ends with a full-width Section. */
+#main > .entry-content {
+  padding-block: var(--bl-spacing-responsive-xs);
+}
+#main > .entry-content:has(> .alignfull:first-child) {
+  padding-block-start: 0;
+}
+#main > .entry-content:has(> .alignfull:last-child) {
+  padding-block-end: 0;
+}
+
+/* Section: a group with a scheme paints the scheme edge to edge, as React's bg-background text-foreground. */
+.wp-block-group[data-scheme] {
+  background-color: var(--background);
+  color: var(--foreground);
+}
+
+/* Surface (baselineSurface): Figma's Surface mode on a Section, the role pair within the scheme, as React's surface. */
+.wp-block-group.has-surface-muted { background-color: var(--muted); color: var(--muted-foreground); }
+.wp-block-group.has-surface-card { background-color: var(--card); color: var(--card-foreground); }
+.wp-block-group.has-surface-primary { background-color: var(--primary); color: var(--primary-foreground); }
+.wp-block-group.has-surface-secondary { background-color: var(--secondary); color: var(--secondary-foreground); }
+.wp-block-group.has-surface-accent { background-color: var(--accent); color: var(--accent-foreground); }
+.wp-block-group.has-surface-inverse { background-color: var(--foreground); color: var(--background); }
+
+/* Full-width Sections stack as bands: typeset's flow gap between blocks does not apply to them. */
+:is(.typeset, .editor-styles-wrapper .is-root-container) > .wp-block-group.alignfull {
+  margin-block: 0;
+}
+
+/* Columns: the gap is the responsive sm step (React's default). Core stacks below 782px (its own breakpoint, kept so
+   the column widths it writes inline still apply; React and HTML stack below 768px). */
+.wp-block-columns {
+  gap: var(--bl-spacing-responsive-sm);
+}
+
+/* Four columns are 2 x 2 on Tablet and four from xl, as Figma's Columns/4. */
+@media (min-width: 782px) and (max-width: 79.999rem) {
+  .wp-block-columns:not(.is-not-stacked-on-mobile):has(> .wp-block-column:nth-child(4):last-child) {
+    flex-wrap: wrap !important; /* core sets nowrap !important from 782px */
+  }
+  .wp-block-columns:not(.is-not-stacked-on-mobile):has(> .wp-block-column:nth-child(4):last-child) > .wp-block-column {
+    flex-basis: calc(50% - var(--bl-spacing-responsive-sm) / 2) !important;
+    flex-grow: 0;
+  }
+}
+
+/* Invert order (baselineInvertOrder): once stacked, the last column comes first; the source keeps the desktop order. */
+@media (max-width: 781px) {
+  .wp-block-columns.is-inverted-on-mobile:not(.is-not-stacked-on-mobile) > .wp-block-column:last-child {
+    order: -1;
+  }
+}
+
+/* Panel: Card's surface (fill, card/border tint, radius) around a section's content; padding from the spacing
+   presets, xs when none is set (an inline padding style wins over this rule). */
+.wp-block-group.is-style-panel {
+  display: flex;
+  flex-direction: column;
+  gap: var(--bl-spacing-responsive-sm);
+  padding: var(--bl-spacing-responsive-xs);
+  border-radius: var(--bl-card-md-radius);
+  background-color: var(--card);
+  color: var(--card-foreground);
+  box-shadow: 0 0 0 var(--bl-card-border-width) var(--bl-card-border);
+}
+.wp-block-group.is-style-panel > * {
+  margin-block: 0;
+}

package/templates/wordpress/theme/src/core-navigation.css

@@ -0,0 +1,290 @@
+/* Navigation Menu on WordPress (spec: components/navigation-menu/spec.md; ADR-0018: core/navigation is styled).
+   Core's markup, in either submenu mode:
+     hover (core's default)  li.has-child.open-on-hover-click > a.wp-block-navigation-item__content
+                             + button.wp-block-navigation-submenu__toggle (the chevron) + ul.wp-block-navigation__submenu-container
+                             opens on :hover / :focus-within, or by the chevron button (aria-expanded)
+     click                   li.has-child.open-on-click > button.wp-block-navigation-item__content.wp-block-navigation-submenu__toggle
+                             + span.wp-block-navigation__submenu-icon + ul.wp-block-navigation__submenu-container
+   core's Interactivity API toggles aria-expanded, closes on Escape and on a click outside; its responsive overlay (the
+   mobile menu) is kept, styled as the Sidebar's menu (the end of this file: a Sheet). Here: the top-level item drawn as
+   upstream's trigger (the li carries the box, so a hover-mode link + chevron and a click-mode button look one control), the first-level submenu as the panel
+   (Popover's look, navigation-menu/content/*), its links as NavigationMenuLink. Mirrors
+   registry/src/ui/navigation-menu/navigation-menu.tsx; the doubled class outranks core's (0,3,0) rules. */
+
+.wp-block-navigation.wp-block-navigation .wp-block-navigation__container {
+  gap: 0;
+}
+
+/* ---- the top-level item: upstream's navigationMenuTriggerStyle ---- */
+.wp-block-navigation.wp-block-navigation :is(.wp-block-navigation__container, .wp-block-page-list) > .wp-block-navigation-item {
+  height: var(--bl-navigation-menu-trigger-height);
+  padding: var(--bl-navigation-menu-trigger-padding-y) var(--bl-navigation-menu-trigger-padding-x);
+  border-radius: var(--bl-navigation-menu-trigger-radius);
+  font-size: var(--bl-navigation-menu-trigger-font-size);
+  font-weight: var(--bl-navigation-menu-trigger-font-weight);
+  line-height: var(--bl-navigation-menu-trigger-line-height);
+  transition: background-color 150ms, box-shadow 150ms;
+}
+.wp-block-navigation.wp-block-navigation :is(.wp-block-navigation__container, .wp-block-page-list) > .wp-block-navigation-item > .wp-block-navigation-item__content {
+  padding: 0;
+  outline: none;
+  text-decoration: none;
+}
+/* open (a submenu shown by its button) takes the background-open tint; hovered or focused, muted, as upstream's
+   data-open:bg-muted/50 data-open:hover:bg-muted */
+.wp-block-navigation.wp-block-navigation :is(.wp-block-navigation__container, .wp-block-page-list) > .wp-block-navigation-item:has(> [aria-expanded="true"]) {
+  background-color: var(--bl-navigation-menu-trigger-background-open);
+}
+.wp-block-navigation.wp-block-navigation :is(.wp-block-navigation__container, .wp-block-page-list) > .wp-block-navigation-item:is(:hover, :has(> :focus-visible)) {
+  background-color: var(--muted);
+}
+/* focus keeps Baseline's ring role (already translucent), as Button's */
+.wp-block-navigation.wp-block-navigation :is(.wp-block-navigation__container, .wp-block-page-list) > .wp-block-navigation-item:has(> :focus-visible) {
+  box-shadow: 0 0 0 var(--bl-control-ring-width) var(--ring);
+}
+.wp-block-navigation.wp-block-navigation :is(.wp-block-navigation__container, .wp-block-page-list) > .wp-block-navigation-item > :focus-visible {
+  outline: none;
+}
+
+/* the chevron: navigation-menu/trigger/icon-size, icon-gap after the label; it turns while its submenu is open */
+.wp-block-navigation.wp-block-navigation :is(.wp-block-navigation__container, .wp-block-page-list) > .has-child .wp-block-navigation__submenu-icon {
+  width: var(--bl-navigation-menu-trigger-icon-size);
+  height: var(--bl-navigation-menu-trigger-icon-size);
+  margin: 0 0 0 var(--bl-navigation-menu-trigger-icon-gap);
+  pointer-events: none;
+}
+.wp-block-navigation.wp-block-navigation :is(.wp-block-navigation__container, .wp-block-page-list) > .has-child.open-on-hover-click > .wp-block-navigation-submenu__toggle {
+  pointer-events: auto;
+}
+.wp-block-navigation.wp-block-navigation :is(.wp-block-navigation__container, .wp-block-page-list) > .has-child.open-on-click > .wp-block-navigation-submenu__toggle {
+  padding: 0;
+}
+.wp-block-navigation.wp-block-navigation :is(.wp-block-navigation__container, .wp-block-page-list) > .has-child .wp-block-navigation__submenu-icon svg {
+  margin: 0;
+  transition: transform 300ms;
+}
+.wp-block-navigation.wp-block-navigation :is(.wp-block-navigation__container, .wp-block-page-list) > .has-child:is(:has(> [aria-expanded="true"]), .open-on-hover-click:hover) > :is(.wp-block-navigation__submenu-icon, .wp-block-navigation-submenu__toggle) svg {
+  transform: rotate(180deg);
+}
+
+/* ---- the first-level submenu: the panel (Popover's look), navigation-menu/content/offset below the item, aligned to
+   its start (upstream's align="start") ---- */
+.wp-block-navigation.wp-block-navigation :is(.wp-block-navigation__container, .wp-block-page-list) > .has-child > .wp-block-navigation__submenu-container {
+  top: 100%;
+  left: 0;
+  margin-top: var(--bl-navigation-menu-content-offset);
+  padding: var(--bl-navigation-menu-content-padding);
+  border: 0;
+  border-radius: var(--bl-navigation-menu-content-radius);
+  background-color: var(--popover);
+  color: var(--popover-foreground);
+  font-weight: normal;
+  box-shadow: 0 0 0 1px var(--bl-navigation-menu-content-border), 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
+}
+/* the offset is a gap the pointer crosses on its way down: a transparent bridge keeps the item :hover-ed */
+.wp-block-navigation.wp-block-navigation :is(.wp-block-navigation__container, .wp-block-page-list) > .has-child > .wp-block-navigation__submenu-container::before {
+  content: "";
+  position: absolute;
+  inset-inline: 0;
+  bottom: 100%;
+  height: var(--bl-navigation-menu-content-offset);
+}
+
+/* ---- links in a panel: NavigationMenuLink ---- */
+.wp-block-navigation.wp-block-navigation .has-child .wp-block-navigation__submenu-container > .wp-block-navigation-item > .wp-block-navigation-item__content {
+  display: flex;
+  align-items: center;
+  gap: var(--bl-navigation-menu-link-gap);
+  padding: var(--bl-navigation-menu-link-padding);
+  border-radius: var(--bl-navigation-menu-link-radius);
+  font-size: var(--bl-navigation-menu-link-font-size);
+  line-height: var(--bl-navigation-menu-link-line-height);
+  text-decoration: none;
+  outline: none;
+  transition: background-color 150ms, box-shadow 150ms;
+}
+.wp-block-navigation.wp-block-navigation .has-child .wp-block-navigation__submenu-container > .wp-block-navigation-item > .wp-block-navigation-item__content[aria-current="page"] {
+  background-color: var(--bl-navigation-menu-link-background-active);
+}
+.wp-block-navigation.wp-block-navigation .has-child .wp-block-navigation__submenu-container > .wp-block-navigation-item > .wp-block-navigation-item__content:is(:hover, :focus) {
+  background-color: var(--muted);
+}
+.wp-block-navigation.wp-block-navigation .has-child .wp-block-navigation__submenu-container > .wp-block-navigation-item > .wp-block-navigation-item__content:focus-visible {
+  box-shadow: 0 0 0 var(--bl-control-ring-width) var(--ring);
+}
+
+/* ---- core's responsive overlay (the mobile menu) as the Sidebar on mobile (spec: components/sidebar/spec.md, user
+   2026-10-06): a Sheet from the start edge, the Sheet's width (75%, sheet/max-width from 40rem; user 2026-10-07: as
+   Shopify's), over the page dimmed by color/overlay, in the sidebar's fill; top-level items as SidebarMenuButton (md), submenus as SidebarMenuSub with sub buttons, always
+   expanded as core keeps them in its overlay (user 2026-10-07: core's isSubmenuOpen is true while the overlay is open,
+   so no collapsing). Core's open / close buttons, focus trap and Escape stay; a click on the dimmed page closes it
+   (assets/js/core-navigation.js). Mirrors registry/src/ui/sidebar/sidebar.tsx. Every rule starts with the panel at
+   (0,5,0): above core's white (.wp-block-navigation:not(.has-background) … .is-menu-open, (0,4,0)) and the desktop
+   rules above. ---- */
+.wp-block-navigation.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open.is-menu-open {
+  inset-inline-end: auto;
+  width: 75vw;
+  padding: var(--bl-sidebar-padding);
+  border-inline-end: var(--bl-sheet-border-width) solid var(--border);
+  background-color: var(--sidebar);
+  color: var(--sidebar-foreground);
+  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+  /* core's fade-in animates transform, which would make the panel the containing block of the fixed backdrop below */
+  animation: bl-navigation-sheet-in 150ms ease-out;
+}
+/* the dimmed page beside the panel (the Sheet's ::backdrop) */
+.wp-block-navigation.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open.is-menu-open::before {
+  content: "";
+  position: fixed;
+  inset-block: 0;
+  inset-inline-start: 75vw;
+  inset-inline-end: 0;
+  background-color: var(--overlay);
+  animation: bl-navigation-backdrop-in 150ms ease-out;
+}
+@media (min-width: 40rem) {
+  .wp-block-navigation.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open.is-menu-open {
+    width: min(75vw, var(--bl-sheet-max-width));
+  }
+  .wp-block-navigation.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open.is-menu-open::before {
+    inset-inline-start: min(75vw, var(--bl-sheet-max-width));
+  }
+}
+@keyframes bl-navigation-sheet-in {
+  from { opacity: 0; inset-inline-start: -2.5rem; }
+}
+@keyframes bl-navigation-backdrop-in {
+  from { opacity: 0; }
+}
+@media (prefers-reduced-motion: reduce) {
+  .wp-block-navigation.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open.is-menu-open,
+  .wp-block-navigation.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open.is-menu-open::before {
+    animation: none;
+  }
+}
+
+.wp-block-navigation.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__container {
+  width: 100%;
+  flex-direction: column;
+  align-items: stretch;
+  gap: 0;
+}
+.wp-block-navigation.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open.is-menu-open :is(.wp-block-navigation__container, .wp-block-page-list) > .wp-block-navigation-item {
+  height: auto;
+  flex-direction: column;
+  align-items: stretch;
+  padding: 0;
+  border-radius: 0;
+  background-color: transparent;
+  box-shadow: none;
+  font-weight: normal;
+}
+/* a menu button */
+.wp-block-navigation.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open.is-menu-open :is(.wp-block-navigation__container, .wp-block-page-list) > .wp-block-navigation-item > .wp-block-navigation-item__content {
+  display: flex;
+  width: 100%;
+  min-width: 0;
+  height: var(--bl-sidebar-menu-button-md-height);
+  align-items: center;
+  justify-content: flex-start;
+  gap: var(--bl-sidebar-menu-button-gap);
+  padding: var(--bl-sidebar-menu-button-padding);
+  border-radius: var(--bl-sidebar-menu-button-radius);
+  font-size: var(--bl-sidebar-menu-button-md-font-size);
+  line-height: var(--bl-sidebar-menu-button-md-line-height);
+  text-align: start;
+  transition: background-color 150ms;
+}
+/* sub-menus: a start rule, indented; their links are sub buttons */
+.wp-block-navigation.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open.is-menu-open :is(.wp-block-navigation__container, .wp-block-page-list) > .has-child > .wp-block-navigation__submenu-container {
+  display: flex;
+  position: static;
+  flex-direction: column;
+  gap: var(--bl-sidebar-menu-sub-gap);
+  min-width: 0;
+  margin: 0 var(--bl-sidebar-menu-sub-margin-x);
+  padding: var(--bl-sidebar-menu-sub-padding-y) var(--bl-sidebar-menu-sub-padding-x);
+  border: 0 solid var(--sidebar-border);
+  border-inline-start-width: var(--bl-sidebar-border-width);
+  border-radius: 0;
+  background-color: transparent;
+  color: inherit;
+  box-shadow: none;
+}
+.wp-block-navigation.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open.is-menu-open :is(.wp-block-navigation__container, .wp-block-page-list) > .has-child > .wp-block-navigation__submenu-container::before {
+  content: none;
+}
+.wp-block-navigation.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open.is-menu-open .has-child .wp-block-navigation__submenu-container > .wp-block-navigation-item {
+  align-self: stretch;
+}
+.wp-block-navigation.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open.is-menu-open .has-child .wp-block-navigation__submenu-container > .wp-block-navigation-item > .wp-block-navigation-item__content {
+  display: flex;
+  width: 100%;
+  height: var(--bl-sidebar-menu-sub-button-height);
+  align-items: center;
+  justify-content: flex-start;
+  gap: var(--bl-sidebar-menu-button-gap);
+  padding: 0 var(--bl-sidebar-menu-sub-button-padding-x);
+  border-radius: var(--bl-sidebar-menu-button-radius);
+  font-size: var(--bl-sidebar-menu-button-md-font-size);
+  line-height: var(--bl-sidebar-menu-button-md-line-height);
+}
+/* core's close button as the Sheet's: a ghost sm icon-only Button, sheet/close-inset from the panel's corner (core
+   places it in the panel's padding, hence the difference) */
+.wp-block-navigation.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open.is-menu-open .wp-block-navigation__responsive-container-close {
+  top: calc(var(--bl-sheet-close-inset) - var(--bl-sidebar-padding));
+  right: calc(var(--bl-sheet-close-inset) - var(--bl-sidebar-padding));
+  display: flex;
+  width: var(--bl-button-sm-height);
+  height: var(--bl-button-sm-height);
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  border-radius: var(--bl-button-sm-radius);
+  background-color: transparent;
+  color: var(--foreground);
+  outline: none;
+  transition: background-color 150ms;
+}
+.wp-block-navigation.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open.is-menu-open .wp-block-navigation__responsive-container-close:hover {
+  background-color: var(--muted);
+}
+.wp-block-navigation.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open.is-menu-open .wp-block-navigation__responsive-container-close:focus-visible {
+  box-shadow: 0 0 0 var(--bl-control-ring-width) var(--ring);
+}
+.wp-block-navigation.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open.is-menu-open .wp-block-navigation__responsive-container-close svg {
+  width: var(--bl-button-sm-icon-size);
+  height: var(--bl-button-sm-icon-size);
+}
+[dir="rtl"] .wp-block-navigation.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open.is-menu-open .wp-block-navigation__responsive-container-close {
+  right: auto;
+  left: calc(var(--bl-sheet-close-inset) - var(--bl-sidebar-padding));
+}
+
+/* the submenus are always open: no chevrons */
+.wp-block-navigation.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open.is-menu-open .wp-block-navigation__submenu-icon {
+  display: none;
+}
+
+/* hover, focus and the current page, as SidebarMenuButton / SidebarMenuSubButton */
+.wp-block-navigation.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open.is-menu-open .wp-block-navigation-item__content:is(:hover, :focus-visible),
+.wp-block-navigation.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open.is-menu-open .has-child .wp-block-navigation__submenu-container > .wp-block-navigation-item > .wp-block-navigation-item__content:is(:hover, :focus-visible) {
+  background-color: var(--sidebar-accent);
+  color: var(--sidebar-accent-foreground);
+}
+.wp-block-navigation.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open.is-menu-open .wp-block-navigation-item__content:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 var(--bl-control-ring-width) var(--sidebar-ring);
+}
+.wp-block-navigation.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open.is-menu-open .wp-block-navigation-item__content[aria-current="page"],
+.wp-block-navigation.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open.is-menu-open .has-child .wp-block-navigation__submenu-container > .wp-block-navigation-item > .wp-block-navigation-item__content[aria-current="page"] {
+  background-color: var(--sidebar-accent);
+  color: var(--sidebar-accent-foreground);
+  font-weight: var(--bl-sidebar-menu-button-font-weight-active);
+}
+
+/* core's fallback menu (no wp_navigation yet) is a core/page-list nested in the container: its items are the top level
+   (the selectors above name both), and its list takes the container's flex row */
+.wp-block-navigation.wp-block-navigation .wp-block-navigation__container > .wp-block-page-list {
+  display: contents;
+}

package/templates/wordpress/theme/src/core-pagination.css

@@ -0,0 +1,112 @@
+/* Pagination on WordPress (spec: components/pagination/spec.md, ADR-0018): core/query-pagination and its children, and
+   the classic paginate_links() / the_posts_pagination() output, which prints the same .page-numbers markup.
+
+     nav.wp-block-query-pagination > a.wp-block-query-pagination-previous (span.…-previous-arrow "«")
+                                    > div.wp-block-query-pagination-numbers > a.page-numbers | span.page-numbers.current
+                                                                                | span.page-numbers.dots
+                                    > a.wp-block-query-pagination-next (span.…-next-arrow "»")
+     nav.navigation.pagination > .nav-links (classic) > a.prev.page-numbers, a.page-numbers, span.current, span.dots,
+                                                         a.next.page-numbers
+
+   This file is what every look shares: the row, the links' type, the focus ring, core's arrow characters as the system
+   chevrons and the dots as more-horizontal (masks from src/icons.generated.css), the disabled Previous/Next that
+   inc/core-pagination.php puts back on the first and last page, and in a pagination narrower than 32rem (a container
+   query, so a narrow column behaves like a phone) only Previous and Next, with their text, remain. Each look's boxes and colours are in src/looks.generated.css, generated from
+   tokens/looks/wordpress/pagination-<look>.css with only the project's looks installed (ADR-0031). */
+
+/* the pagination is the container its links query */
+:is(.wp-block-query-pagination, .navigation:is(.pagination, .comments-pagination)) {
+  container: pagination / inline-size;
+}
+:is(.wp-block-query-pagination, .wp-block-query-pagination-numbers, .nav-links) {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: center;
+}
+
+/* every link and the dots */
+:is(.wp-block-query-pagination, .nav-links) :is(.page-numbers, .wp-block-query-pagination-previous, .wp-block-query-pagination-next) {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  margin: 0;
+  font-family: var(--bl-button-font-family);
+  font-size: var(--bl-button-md-font-size);
+  font-weight: var(--bl-button-font-weight);
+  line-height: var(--bl-button-md-line-height);
+  text-decoration: none;
+  white-space: nowrap;
+  transition: background-color 150ms, color 150ms, border-color 150ms, box-shadow 150ms;
+}
+:is(.wp-block-query-pagination, .nav-links) :is(a.page-numbers, .wp-block-query-pagination-previous, .wp-block-query-pagination-next):focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 var(--bl-control-ring-width) var(--ring);
+}
+
+/* a disabled Previous / Next (no href): dimmed and inert, as Button's aria-disabled */
+:is(.wp-block-query-pagination, .nav-links) [aria-disabled="true"] {
+  opacity: 0.5;
+  pointer-events: none;
+}
+
+/* Previous / Next: core's « » become the chevrons, on the outer side */
+:is(.wp-block-query-pagination-previous-arrow, .wp-block-query-pagination-next-arrow),
+.nav-links .prev::before,
+.nav-links .next::after {
+  display: inline-block;
+  flex-shrink: 0;
+  width: var(--bl-button-md-icon-size);
+  height: var(--bl-button-md-icon-size);
+  margin: 0;
+  font-size: 0; /* core's « » */
+  background-color: currentColor;
+  mask-repeat: no-repeat;
+  mask-position: center;
+  mask-size: 100% 100%;
+}
+.nav-links .prev::before,
+.nav-links .next::after {
+  content: "";
+}
+/* (selector lists, not :is(): a pseudo-element is not allowed inside :is()) */
+.wp-block-query-pagination-previous-arrow,
+.nav-links .prev::before {
+  mask-image: var(--bl-icon-chevron-left);
+}
+.wp-block-query-pagination-next-arrow,
+.nav-links .next::after {
+  mask-image: var(--bl-icon-chevron-right);
+}
+[dir="rtl"] .wp-block-query-pagination-previous-arrow,
+[dir="rtl"] .wp-block-query-pagination-next-arrow,
+[dir="rtl"] .nav-links .prev::before,
+[dir="rtl"] .nav-links .next::after {
+  transform: scaleX(-1);
+}
+
+/* the dots: the more-horizontal glyph */
+:is(.wp-block-query-pagination, .nav-links) .page-numbers.dots {
+  font-size: 0;
+}
+:is(.wp-block-query-pagination, .nav-links) .page-numbers.dots::before {
+  content: "";
+  width: var(--bl-button-md-icon-size);
+  height: var(--bl-button-md-icon-size);
+  background-color: currentColor;
+  mask-image: var(--bl-icon-more-horizontal);
+  mask-repeat: no-repeat;
+  mask-position: center;
+  mask-size: 100% 100%;
+}
+
+/* in a pagination narrower than 32rem the page numbers and the dots hide; Previous and Next keep their text (user,
+   2026-10-02). A container query at the Primitive container/lg (32rem), as React's @max-lg/pagination; plain CSS cannot read the
+   variable in the condition, so the value is repeated here. */
+@container pagination (width < 32rem) {
+  .wp-block-query-pagination .wp-block-query-pagination-numbers,
+  .nav-links .page-numbers:not(.prev, .next) {
+    display: none;
+  }
+}