@goldencomm/create-baseline 0.0.1 → 0.1.0

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

@@ -0,0 +1,102 @@
+/* Checkbox on WordPress (spec: components/checkbox/spec.md). There is no core checkbox block, so ADR-0018's
+   ladder ends at element styling and the native control *is* the component. Mirrors
+   registry/src/ui/checkbox/checkbox.tsx, with one unavoidable structural difference:
+
+   React wraps the input in a span and lays a sibling <Icon> over it. WordPress cannot do that. Gravity Forms
+   and core (the comment form's "save my details" box) emit their own markup, and rewriting it through filters
+   to inject a wrapper would be fragile across GF updates and core templates alike. So the glyph is a
+   pseudo-element mask instead, tinted by the element's own colour.
+
+   The mask comes from --bl-icon-check / --bl-icon-minus in icons.generated.css, which the icon generator emits
+   from the ACTIVE set. A hardcoded path here would silently diverge the day the designer switches sets.
+
+   Every selector excludes role="switch". A switch IS a checkbox (spec: components/switch/spec.md), so without
+   that these rules matched one too, and both files draw on ::before: the tick's `opacity: 0` hid the switch's
+   thumb, and checking it laid a check mask over the thumb. Both files use :where(), so neither could win on
+   specificity -- the fix belongs in the selector. A visually hidden checkbox (.sr-only) is excluded for the
+   same reason: it is the state of something drawn another way (a Toggle), and these unlayered rules would
+   otherwise beat the sr-only utility and draw it. */
+
+:where(input[type="checkbox"]:not([role="switch"], .sr-only)) {
+  appearance: none;
+  position: relative;
+  flex-shrink: 0;
+  width: var(--bl-checkbox-size);
+  height: var(--bl-checkbox-size);
+  margin: 0;
+  border: 1px solid var(--input);
+  border-radius: var(--bl-checkbox-radius);
+  background-color: transparent;
+  vertical-align: middle;
+  outline: none;
+  transition: background-color 150ms, border-color 150ms, box-shadow 150ms;
+}
+
+/* Checked and indeterminate share one filled look. :indeterminate only matches when something has set the DOM
+   property; Baseline's own markup uses aria-checked="mixed" instead (spec: Indeterminate), so both are
+   honoured and a tri-state box styles the same however it was produced. */
+:where(input[type="checkbox"]:not([role="switch"], .sr-only)):checked,
+:where(input[type="checkbox"]:not([role="switch"], .sr-only)):indeterminate,
+:where(input[type="checkbox"]:not([role="switch"], .sr-only)[aria-checked="mixed"]) {
+  border-color: var(--primary);
+  background-color: var(--primary);
+}
+
+/* The glyph. currentColor inside a background-image data URI does not inherit, which is why this is a mask on
+   a pseudo-element rather than a background image on the input.
+
+   `inset: -1px` is the border width, negated, and it is not a fudge: an absolutely positioned pseudo-element
+   is laid out against its element's PADDING box, inside the border, so `inset: 0` drew a 14px glyph in a 16px
+   box. React and Shopify lay a sibling over the whole border box and draw 16px, so WordPress was the odd one
+   out by a pixel. The border is a 1px literal here, so the offset is one too. */
+:where(input[type="checkbox"]:not([role="switch"], .sr-only))::before {
+  content: "";
+  position: absolute;
+  inset: -1px;
+  background-color: var(--primary-foreground);
+  mask-image: var(--bl-icon-check);
+  mask-repeat: no-repeat;
+  mask-size: 100% 100%;
+  mask-position: center;
+  opacity: 0;
+}
+
+:where(input[type="checkbox"]:not([role="switch"], .sr-only)):checked::before {
+  opacity: 1;
+}
+
+:where(input[type="checkbox"]:not([role="switch"], .sr-only)):indeterminate::before,
+:where(input[type="checkbox"]:not([role="switch"], .sr-only)[aria-checked="mixed"])::before {
+  mask-image: var(--bl-icon-minus);
+  opacity: 1;
+}
+
+/* focus-visible is a solid primary border plus the shared 3px ring, the same contract Input uses. */
+:where(input[type="checkbox"]:not([role="switch"], .sr-only)):focus-visible {
+  border-color: var(--primary);
+  box-shadow: 0 0 0 var(--bl-control-ring-width) var(--ring);
+}
+
+/* invalid does not override checked: a ticked-but-invalid box still has to read as ticked. */
+:where(input[type="checkbox"]:not([role="switch"], .sr-only))[aria-invalid="true"] {
+  border-color: var(--destructive);
+  box-shadow: 0 0 0 var(--bl-control-ring-width) var(--ring-invalid);
+}
+
+:where(input[type="checkbox"]:not([role="switch"], .sr-only))[aria-invalid="true"]:checked,
+:where(input[type="checkbox"]:not([role="switch"], .sr-only))[aria-invalid="true"]:indeterminate {
+  border-color: var(--primary);
+}
+
+:where(input[type="checkbox"]:not([role="switch"], .sr-only)):disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+
+/* 16px fails WCAG 2.5.8 on touch. The target is grown with a pseudo-element rather than with padding, which
+   would move the box. A label with `for` is the bigger target in practice; this is the floor. */
+:where(input[type="checkbox"]:not([role="switch"], .sr-only))::after {
+  content: "";
+  position: absolute;
+  inset: -8px -12px;
+}

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

@@ -0,0 +1,158 @@
+/* Accordion on WordPress (spec: components/accordion/spec.md; ADR-0018: both core blocks are styled, user 2026-10-02).
+   Two core markups, one look:
+     core/accordion   .wp-block-accordion > .wp-block-accordion-item(.is-open) > h3.wp-block-accordion-heading >
+                      button.wp-block-accordion-heading__toggle (title span + icon span) + .wp-block-accordion-panel[hidden]
+                      (core's Interactivity API opens and closes it; `autoclose` is single-open)
+     core/details     details.wp-block-details[name] > summary + the blocks (native; a shared `name` is single-open)
+   This file holds what the three looks share: the trigger row, the title, the chevrons (masks from
+   src/icons.generated.css, down when closed and up when open, as upstream's two icons), the content and the motion.
+   The looks (rules, cards, spacing) are tokens/looks/wordpress/accordion-<look>.css, generated into src/looks.generated.css.
+   Mirrors registry/src/ui/accordion/accordion.tsx; geometry from the accordion/* tokens. */
+
+/* the item: typeset's flow margin on details and core's block gap stay out; the looks space the items */
+:is(.wp-block-accordion, .entry-content, .editor-styles-wrapper) .wp-block-details,
+.wp-block-accordion > .wp-block-accordion-item,
+.wp-block-accordion-item > .wp-block-accordion-panel {
+  margin-block: 0;
+}
+/* the heading takes the item's type and colour, not typeset's heading rule (a contained/split card's card-foreground) */
+.wp-block-accordion-heading {
+  margin: 0;
+  font: inherit;
+  color: inherit;
+}
+
+/* the trigger row: title left, chevron right */
+.wp-block-accordion-heading__toggle,
+.wp-block-details > summary {
+  display: flex;
+  width: 100%;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: var(--bl-accordion-trigger-gap);
+  padding: var(--bl-accordion-padding-y) 0;
+  border: 1px solid transparent;
+  border-radius: var(--bl-radius-lg);
+  background: none;
+  color: inherit;
+  font-family: inherit;
+  font-size: var(--bl-accordion-title-font-size);
+  font-weight: var(--bl-accordion-title-font-weight);
+  line-height: var(--bl-accordion-title-line-height);
+  text-align: start;
+  cursor: pointer;
+  list-style: none;
+  outline: none;
+}
+.wp-block-details > summary::-webkit-details-marker {
+  display: none;
+}
+.wp-block-details > summary::marker {
+  content: "";
+}
+:is(.wp-block-accordion-heading__toggle, .wp-block-details > summary):hover .wp-block-accordion-heading__toggle-title,
+.wp-block-details > summary:hover {
+  text-decoration: underline;
+}
+:is(.wp-block-accordion-heading__toggle, .wp-block-details > summary):focus-visible {
+  box-shadow: 0 0 0 var(--bl-control-ring-width) var(--ring);
+}
+.wp-block-accordion-heading__toggle-title {
+  flex: 1;
+}
+
+/* the chevron: core/accordion's "+" icon span and a ::after on the summary become the masks */
+.wp-block-accordion-heading__toggle-icon,
+.wp-block-details > summary::after {
+  content: "";
+  flex-shrink: 0;
+  width: var(--bl-accordion-trigger-icon-size);
+  height: var(--bl-accordion-trigger-icon-size);
+  margin-block-start: calc((var(--bl-accordion-title-line-height) - var(--bl-accordion-trigger-icon-size)) / 2);
+  background-color: var(--muted-foreground);
+  color: transparent;
+  font-size: 0;
+  -webkit-mask: var(--bl-icon-chevron-down) center / contain no-repeat;
+  mask: var(--bl-icon-chevron-down) center / contain no-repeat;
+}
+/* core turns its "+" into an "x" by rotating the open item's icon 45deg (0,4,0); the chevrons swap instead */
+.wp-block-accordion .wp-block-accordion-item > .wp-block-accordion-heading .wp-block-accordion-heading__toggle-icon {
+  transform: none;
+  transition: none;
+}
+.wp-block-accordion-item.is-open .wp-block-accordion-heading__toggle-icon,
+.wp-block-details[open] > summary::after {
+  -webkit-mask-image: var(--bl-icon-chevron-up);
+  mask-image: var(--bl-icon-chevron-up);
+}
+
+/* the content: text-sm, links underlined, paragraphs spaced, the bottom padding of upstream's pb-2.5 */
+.wp-block-accordion-panel,
+.wp-block-details > :not(summary) {
+  font-size: var(--bl-accordion-content-font-size);
+  line-height: var(--bl-accordion-content-line-height);
+}
+/* The content's vertical spacing sits INSIDE the part that is clipped while it opens and closes, as React's padded
+   content div inside ::details-content, so the motion only reveals or hides it (user, 2026-10-05: padding that
+   switched off at the start of a close, then a slide, did not match). core/accordion: zero-padding panel with spacer
+   pseudo-elements (core zeroes a hidden panel's padding with !important anyway). core/details: margins on the first
+   and last content blocks, inside ::details-content, which is a flow root so they stay in it. */
+.wp-block-accordion-panel {
+  padding-block: 0;
+}
+.wp-block-accordion-panel::after {
+  content: "";
+  display: block;
+  block-size: var(--bl-accordion-padding-y);
+}
+:is(.wp-block-accordion-panel, .wp-block-details) > * {
+  margin-block: 0;
+}
+.wp-block-details > :not(summary):last-child {
+  margin-block-end: var(--bl-accordion-padding-y);
+}
+:is(.wp-block-accordion-panel, .wp-block-details) > :is(p, ul, ol):not(:last-child) {
+  margin-block-end: 1rem;
+}
+:is(.wp-block-accordion-panel, .wp-block-details) a {
+  text-decoration: underline;
+  text-underline-offset: 3px;
+}
+
+/* motion: the native details' height animates where interpolate-size exists (Chromium), as React's sidecar */
+.wp-block-details {
+  interpolate-size: allow-keywords;
+}
+.wp-block-details::details-content {
+  display: flow-root;
+  block-size: 0;
+  overflow-y: clip;
+  transition: block-size 200ms ease-out, content-visibility 200ms allow-discrete;
+}
+.wp-block-details[open]::details-content {
+  block-size: auto;
+}
+/* core/accordion's panel toggles `hidden="until-found"` (content-visibility: hidden, so find-in-page still opens it), and
+   core's own grid-template-rows transition never runs (the item is not a grid). The panel's height animates instead,
+   with content-visibility held through the close (allow-discrete), as the native details' ::details-content; its
+   vertical spacing is inside it (above) and its inline padding does not move, so the content is only revealed, never
+   reflowed. Where interpolate-size is missing (not Chromium) it snaps. */
+.wp-block-accordion-item {
+  interpolate-size: allow-keywords;
+  transition: none;
+}
+.wp-block-accordion-panel {
+  box-sizing: content-box;
+  block-size: auto;
+  overflow-y: clip;
+  transition: block-size 200ms ease-out, content-visibility 200ms allow-discrete;
+}
+.wp-block-accordion-panel[hidden] {
+  block-size: 0;
+}
+@media (prefers-reduced-motion: reduce) {
+  .wp-block-details::details-content,
+  .wp-block-accordion-panel {
+    transition: none;
+  }
+}

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

@@ -0,0 +1,68 @@
+/* core/avatar styled as the Baseline Avatar (ADR-0018; spec: components/avatar/spec.md). core/avatar is the
+   comparable core block (post and comment author avatars), so it is styled, not replaced:
+     div.wp-block-avatar > (a.wp-block-avatar__link >) img.avatar.wp-block-avatar__image
+   Its `size` attribute stays the editor's (24 / 32 / 40 / 48 / 56 are the Baseline sizes; Code Connect emits those);
+   its border controls are switched off in theme.json because the look is a token. It renders Gravatar, which always
+   returns an image (the site's default avatar), so there is no fallback state here.
+   Mirrors registry/src/ui/avatar/avatar.tsx: round, and upstream's blended outline, drawn on the wrapper because an
+   <img> cannot carry ::after. */
+
+.wp-block-avatar {
+  position: relative;
+  display: inline-flex;
+  width: fit-content;
+  border-radius: 9999px;
+  vertical-align: middle;
+}
+
+/* the outline: a border ring blended with `darken`, so it shows against light photos and disappears against dark */
+.wp-block-avatar::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+  border: var(--bl-avatar-border-width) solid var(--border);
+  mix-blend-mode: darken;
+  pointer-events: none;
+}
+
+.wp-block-avatar .wp-block-avatar__image {
+  display: block;
+  aspect-ratio: 1;
+  /* typeset's media rule gives every image in content a top margin (and its own radius), which pushed the image out
+     of the outline ring; an avatar is not flowing media (2026-10-01) */
+  margin: 0;
+  border-radius: 9999px;
+  object-fit: cover;
+}
+
+.wp-block-avatar .wp-block-avatar__link {
+  display: inline-flex;
+  border-radius: inherit;
+  outline: none;
+}
+.wp-block-avatar .wp-block-avatar__link:focus-visible {
+  box-shadow: 0 0 0 var(--bl-control-ring-width) var(--ring);
+}
+/* acf/avatar-group: overlap and ring (2026-10-01). ACF wraps InnerBlocks in div.acf-innerblocks-container on the
+   front end as well as in the editor (where the canvas adds its own layout divs too), so the group's
+   `> [data-slot=avatar]` utilities never reach the avatars. Rules that do not depend on the wrappers instead:
+   - the wrappers take no box (`display: contents`), so the avatars and the count are the group's flex items;
+   - every avatar and the count move in by avatar/group/gap (negative), and the group's start padding cancels the
+     first one's shift, so no rule has to know which avatar is first through the wrappers;
+   - every avatar in the group gets the shared overlap ring. */
+.wp-block-acf-avatar-group {
+  display: flex;
+  align-items: center;
+  padding-inline-start: calc(var(--bl-avatar-group-gap) * -1);
+}
+.wp-block-acf-avatar-group :is(.acf-innerblocks-container, .block-editor-inner-blocks, .block-editor-block-list__layout) {
+  display: contents;
+}
+.wp-block-acf-avatar-group [data-slot="avatar"],
+.wp-block-acf-avatar-group [data-slot="avatar-group-count"] {
+  margin-inline: var(--bl-avatar-group-gap) 0;
+}
+.wp-block-acf-avatar-group [data-slot="avatar"] {
+  box-shadow: 0 0 0 var(--bl-overlap-ring-width) var(--background);
+}

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

@@ -0,0 +1,124 @@
+/* core/breadcrumbs (WordPress 7.0+) as the Baseline Breadcrumb (spec: components/breadcrumb/spec.md, ADR-0018).
+   Mirrors registry/src/ui/breadcrumb/breadcrumb.tsx on core's markup:
+     nav.wp-block-breadcrumbs > ol > li > a                      a link: muted, foreground on hover
+                                      > span[aria-current=page]   the current page: foreground
+   Core draws the separator as `li:not(:last-child)::after { content: var(--separator) }` from the block's Separator
+   setting (default "/"). Baseline draws its chevron there instead, the active set's `chevron-right` as a mask
+   (src/icons.generated.css), mirrored in right-to-left text; the Separator setting is therefore not shown. Its colour,
+   typography and border controls are off in theme.json, since the look is the breadcrumb/* tokens. */
+
+.wp-block-breadcrumbs.wp-block-breadcrumbs ol {
+  gap: var(--bl-breadcrumb-gap);
+  color: var(--muted-foreground);
+  font-size: var(--bl-breadcrumb-font-size);
+  line-height: var(--bl-breadcrumb-line-height);
+  overflow-wrap: break-word;
+}
+
+.wp-block-breadcrumbs.wp-block-breadcrumbs li {
+  gap: var(--bl-breadcrumb-gap);
+}
+
+.wp-block-breadcrumbs.wp-block-breadcrumbs li:not(:last-child)::after {
+  content: "";
+  flex-shrink: 0;
+  width: var(--bl-breadcrumb-separator-icon-size);
+  height: var(--bl-breadcrumb-separator-icon-size);
+  margin: 0;
+  opacity: 1;
+  background-color: currentColor;
+  mask-image: var(--bl-icon-chevron-right);
+  mask-repeat: no-repeat;
+  mask-position: center;
+  mask-size: 100% 100%;
+}
+
+[dir="rtl"] .wp-block-breadcrumbs.wp-block-breadcrumbs li:not(:last-child)::after {
+  transform: scaleX(-1);
+}
+
+.wp-block-breadcrumbs.wp-block-breadcrumbs a {
+  color: inherit;
+  text-decoration: none;
+  transition: color 150ms;
+}
+
+.wp-block-breadcrumbs.wp-block-breadcrumbs a:hover {
+  color: var(--foreground);
+}
+
+.wp-block-breadcrumbs.wp-block-breadcrumbs a:focus-visible {
+  border-radius: var(--bl-radius-sm);
+  outline: none;
+  box-shadow: 0 0 0 var(--bl-control-ring-width) var(--ring);
+}
+
+.wp-block-breadcrumbs.wp-block-breadcrumbs [aria-current="page"] {
+  color: var(--foreground);
+  font-weight: normal;
+}
+
+/* Yoast SEO's breadcrumbs (user request 2026-10-01): its block (div.yoast-breadcrumbs) and its template function
+   (yoast_breadcrumb(), conventionally <p id="breadcrumbs">) render
+     > span > span > a                                   each crumb, flat, with the separator as a bare TEXT node
+                    span.breadcrumb_last[aria-current]  the current page
+   between them ("»" by default, set in Yoast's settings). A text node cannot be selected, so the inner wrapper sets
+   font-size: 0 to hide it, each crumb restores the size, and every crumb after the first draws Baseline's chevron in
+   front of itself. Same tokens as core/breadcrumbs above, so the two read the same. Yoast has no list markup, so it
+   does not get core's ol/li semantics; that is Yoast's markup, not ours to change. */
+:is(.yoast-breadcrumbs, #breadcrumbs) {
+  margin: 0;
+  color: var(--muted-foreground);
+  font-size: var(--bl-breadcrumb-font-size);
+  line-height: var(--bl-breadcrumb-line-height);
+}
+:is(.yoast-breadcrumbs, #breadcrumbs) > span {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  /* no column gap: the hidden separator is still a flex item, so a gap on both sides of it added 6px between crumbs
+     (32px against core's 26). Each crumb after the first carries the gap as a margin instead. */
+  row-gap: var(--bl-breadcrumb-gap);
+  font-size: 0; /* hides the text-node separator */
+  overflow-wrap: break-word;
+}
+:is(.yoast-breadcrumbs, #breadcrumbs) > span > span {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--bl-breadcrumb-gap);
+  font-size: var(--bl-breadcrumb-font-size);
+}
+:is(.yoast-breadcrumbs, #breadcrumbs) > span > span + span {
+  margin-inline-start: var(--bl-breadcrumb-gap);
+}
+:is(.yoast-breadcrumbs, #breadcrumbs) > span > span + span::before {
+  content: "";
+  flex-shrink: 0;
+  width: var(--bl-breadcrumb-separator-icon-size);
+  height: var(--bl-breadcrumb-separator-icon-size);
+  background-color: var(--muted-foreground);
+  mask-image: var(--bl-icon-chevron-right);
+  mask-repeat: no-repeat;
+  mask-position: center;
+  mask-size: 100% 100%;
+}
+[dir="rtl"] :is(.yoast-breadcrumbs, #breadcrumbs) > span > span + span::before {
+  transform: scaleX(-1);
+}
+:is(.yoast-breadcrumbs, #breadcrumbs) a {
+  color: inherit;
+  text-decoration: none;
+  transition: color 150ms;
+}
+:is(.yoast-breadcrumbs, #breadcrumbs) a:hover {
+  color: var(--foreground);
+}
+:is(.yoast-breadcrumbs, #breadcrumbs) a:focus-visible {
+  border-radius: var(--bl-radius-sm);
+  outline: none;
+  box-shadow: 0 0 0 var(--bl-control-ring-width) var(--ring);
+}
+:is(.yoast-breadcrumbs, #breadcrumbs) .breadcrumb_last {
+  color: var(--foreground);
+  font-weight: normal;
+}

package/templates/wordpress/theme/src/core-button-editor.css

@@ -0,0 +1,45 @@
+/* Editor-only companions to core-button.css (ADR-0020). The front end renders the registered icon as inline SVG
+   (render_block_core/button); the editor canvas must not inject markup into RichText, so the wrapper carries the
+   render-time classes plus `--baseline-icon` (a data URI set by core-button-editor.js) and the icon is painted here
+   as a currentColor mask pseudo-element. Text stays visible and editable even for icon-only buttons. */
+
+.wp-block-button.has-icon > .wp-block-button__link::before,
+.wp-block-button.has-icon.has-icon-end > .wp-block-button__link::after {
+  content: "";
+  display: inline-block;
+  flex: none;
+  width: var(--bl-button-md-icon-size);
+  height: var(--bl-button-md-icon-size);
+  background-color: currentColor;
+  -webkit-mask: var(--baseline-icon) center / contain no-repeat;
+  mask: var(--baseline-icon) center / contain no-repeat;
+}
+.wp-block-button.has-icon.has-icon-end > .wp-block-button__link::before { content: none; }
+/* icon-only: the label is the accessible name, edited from the Icon panel; on the canvas it collapses to nothing
+   (font-size 0 keeps the RichText mounted and the block selectable) and the button is square like the front end */
+.wp-block-button.has-icon.is-icon-only > .wp-block-button__link {
+  width: var(--bl-button-md-height);
+  padding: 0;
+  gap: 0;
+  font-size: 0;
+  line-height: 0;
+}
+.wp-block-button.has-icon.is-icon-only.is-size-xs > .wp-block-button__link { width: var(--bl-button-xs-height); }
+.wp-block-button.has-icon.is-icon-only.is-size-sm > .wp-block-button__link { width: var(--bl-button-sm-height); }
+.wp-block-button.has-icon.is-icon-only.is-size-lg > .wp-block-button__link { width: var(--bl-button-lg-height); }
+.wp-block-button.has-icon.is-size-xs > .wp-block-button__link::before,
+.wp-block-button.has-icon.is-size-xs > .wp-block-button__link::after { width: var(--bl-button-xs-icon-size); height: var(--bl-button-xs-icon-size); }
+.wp-block-button.has-icon.is-size-sm > .wp-block-button__link::before,
+.wp-block-button.has-icon.is-size-sm > .wp-block-button__link::after { width: var(--bl-button-sm-icon-size); height: var(--bl-button-sm-icon-size); }
+.wp-block-button.has-icon.is-size-lg > .wp-block-button__link::before,
+.wp-block-button.has-icon.is-size-lg > .wp-block-button__link::after { width: var(--bl-button-lg-icon-size); height: var(--bl-button-lg-icon-size); }
+
+/* Icon panel (inspector, admin chrome) */
+.baseline-icon-current { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
+.baseline-icon-current__glyph svg { width: 24px; height: 24px; display: block; }
+.baseline-icon-current__label { flex: 1; font-size: 12px; }
+.baseline-icon-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; max-height: 240px; overflow: auto; margin: 8px 0 16px; padding: 2px; }
+.baseline-icon-grid__item { display: flex; align-items: center; justify-content: center; aspect-ratio: 1; border: 1px solid #ddd; border-radius: 4px; background: #fff; color: #1e1e1e; cursor: pointer; padding: 0; }
+.baseline-icon-grid__item:hover { border-color: #949494; }
+.baseline-icon-grid__item.is-selected { border-color: var(--wp-admin-theme-color, #3858e9); box-shadow: 0 0 0 1px var(--wp-admin-theme-color, #3858e9); }
+.baseline-icon-grid__item svg { width: 20px; height: 20px; }

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

@@ -0,0 +1,155 @@
+/* core/button styled as the Baseline button (ADR-0018). The base look (default variant, md size: colors, radius,
+   font, padding) lives in theme.json `styles.elements.button` so the editor's global styles agree with the front
+   end. This file adds what theme.json cannot express: box model, states, the variant block styles and the size
+   classes. Every value is a token (colors from the scheme, geometry from the button/* component tokens, ADR-0017).
+   Mirrors registry/src/ui/button/button.tsx and platforms/shopify/theme/snippets/button.liquid. */
+
+.wp-block-button__link.wp-element-button {
+  /* relative + --button-padding-x: a count Badge inside the button floats on its corner (button spec, "Count badge") */
+  --button-padding-x: var(--bl-button-md-padding-x);
+  --button-gap: var(--bl-button-md-gap);
+  --button-padding-x-icon: var(--bl-button-md-padding-x-icon);
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--bl-button-md-gap);
+  height: var(--bl-button-md-height);
+  white-space: nowrap;
+  cursor: pointer;
+  user-select: none;
+  background-clip: padding-box;
+  transition: all 150ms;
+  outline: none;
+}
+.wp-block-button__link.wp-element-button:focus-visible {
+  box-shadow: 0 0 0 var(--bl-control-ring-width) var(--ring);
+}
+/* upstream's press nudge, skipped on menu triggers */
+.wp-block-button__link.wp-element-button:active:not([aria-haspopup]) {
+  translate: 0 1px;
+}
+.wp-block-button__link.wp-element-button[aria-invalid="true"] {
+  border-color: var(--destructive);
+  box-shadow: 0 0 0 var(--bl-control-ring-width) color-mix(in oklab, var(--destructive) 20%, transparent);
+}
+/* the icon side tightens by half the gap, as upstream's has-data-[icon=…] padding (derived from the tokens) */
+.wp-block-button.has-icon:not(.has-icon-end):not(.is-icon-only) > .wp-block-button__link {
+  padding-inline-start: var(--button-padding-x-icon);
+}
+.wp-block-button.has-icon-end:not(.is-icon-only) > .wp-block-button__link {
+  padding-inline-end: var(--button-padding-x-icon);
+}
+.wp-block-button__link.wp-element-button:disabled,
+.wp-block-button__link.wp-element-button[aria-disabled="true"] {
+  opacity: 0.5;
+  pointer-events: none;
+}
+.wp-block-button__link.wp-element-button svg {
+  width: var(--bl-button-md-icon-size);
+  height: var(--bl-button-md-icon-size);
+  flex-shrink: 0;
+  pointer-events: none;
+}
+
+/* Upstream's variants (re-aligned 2026-10-01), except `outline`, which stays transparent (user decision). */
+.wp-block-button.is-style-secondary > .wp-block-button__link {
+  background-color: var(--secondary);
+  color: var(--secondary-foreground);
+}
+.wp-block-button.is-style-secondary > .wp-block-button__link:hover {
+  background-color: color-mix(in oklch, var(--secondary), var(--foreground) 5%);
+  color: var(--secondary-foreground);
+}
+.wp-block-button.is-style-secondary > .wp-block-button__link[aria-expanded="true"] {
+  background-color: var(--secondary);
+  color: var(--secondary-foreground);
+}
+.wp-block-button.is-style-outline > .wp-block-button__link {
+  background-color: transparent;
+  border: 1px solid var(--border);
+  color: var(--foreground);
+  padding: 0 var(--bl-button-md-padding-x);
+}
+.wp-block-button.is-style-outline > .wp-block-button__link:hover,
+.wp-block-button.is-style-outline > .wp-block-button__link[aria-expanded="true"] {
+  background-color: var(--muted);
+  color: var(--foreground);
+}
+.wp-block-button.is-style-ghost > .wp-block-button__link {
+  background-color: transparent;
+  color: var(--foreground);
+}
+.wp-block-button.is-style-ghost > .wp-block-button__link:hover,
+.wp-block-button.is-style-ghost > .wp-block-button__link[aria-expanded="true"] {
+  background-color: var(--muted);
+  color: var(--foreground);
+}
+.wp-block-button.is-style-link > .wp-block-button__link {
+  background-color: transparent;
+  color: var(--primary);
+  text-underline-offset: 4px;
+}
+.wp-block-button.is-style-link > .wp-block-button__link:hover {
+  background-color: transparent;
+  color: var(--primary);
+  text-decoration: underline;
+}
+/* destructive is a tint (upstream): destructive at 10% behind destructive text, 20% on hover */
+.wp-block-button.is-style-destructive > .wp-block-button__link {
+  background-color: color-mix(in oklab, var(--destructive) 10%, transparent);
+  color: var(--destructive);
+}
+.wp-block-button.is-style-destructive > .wp-block-button__link:hover {
+  background-color: color-mix(in oklab, var(--destructive) 20%, transparent);
+  color: var(--destructive);
+}
+.wp-block-button.is-style-destructive > .wp-block-button__link:focus-visible {
+  border-color: color-mix(in oklab, var(--destructive) 40%, transparent);
+  box-shadow: 0 0 0 var(--bl-control-ring-width) color-mix(in oklab, var(--destructive) 20%, transparent);
+}
+
+/* icon axis (ADR-0020): the registered icon is inline SVG (.wp-block-button__icon, sized by the svg rules above);
+   icon-only buttons are square at the size's height and keep their text as a visually hidden accessible name */
+.wp-block-button.is-icon-only > .wp-block-button__link { width: var(--bl-button-md-height); padding: 0; }
+.wp-block-button.is-icon-only.is-size-xs > .wp-block-button__link { width: var(--bl-button-xs-height); }
+.wp-block-button.is-icon-only.is-size-sm > .wp-block-button__link { width: var(--bl-button-sm-height); }
+.wp-block-button.is-icon-only.is-size-lg > .wp-block-button__link { width: var(--bl-button-lg-height); }
+
+/* sizes = `baselineSize` attribute, rendered as is-size-<size> (md is the theme.json default) */
+.wp-block-button.is-size-xs > .wp-block-button__link {
+  --button-padding-x: var(--bl-button-xs-padding-x);
+  --button-gap: var(--bl-button-xs-gap);
+  --button-padding-x-icon: var(--bl-button-xs-padding-x-icon);
+  height: var(--bl-button-xs-height);
+  padding: 0 var(--bl-button-xs-padding-x);
+  gap: var(--bl-button-xs-gap);
+  border-radius: var(--bl-button-xs-radius);
+  font-size: var(--bl-button-xs-font-size);
+  line-height: var(--bl-button-xs-line-height);
+}
+.wp-block-button.is-size-xs > .wp-block-button__link svg { width: var(--bl-button-xs-icon-size); height: var(--bl-button-xs-icon-size); }
+.wp-block-button.is-size-sm > .wp-block-button__link {
+  --button-padding-x: var(--bl-button-sm-padding-x);
+  --button-gap: var(--bl-button-sm-gap);
+  --button-padding-x-icon: var(--bl-button-sm-padding-x-icon);
+  height: var(--bl-button-sm-height);
+  padding: 0 var(--bl-button-sm-padding-x);
+  gap: var(--bl-button-sm-gap);
+  border-radius: var(--bl-button-sm-radius);
+  font-size: var(--bl-button-sm-font-size);
+  line-height: var(--bl-button-sm-line-height);
+}
+.wp-block-button.is-size-sm > .wp-block-button__link svg { width: var(--bl-button-sm-icon-size); height: var(--bl-button-sm-icon-size); }
+.wp-block-button.is-size-lg > .wp-block-button__link {
+  --button-padding-x: var(--bl-button-lg-padding-x);
+  --button-gap: var(--bl-button-lg-gap);
+  --button-padding-x-icon: var(--bl-button-lg-padding-x-icon);
+  height: var(--bl-button-lg-height);
+  padding: 0 var(--bl-button-lg-padding-x);
+  gap: var(--bl-button-lg-gap);
+  border-radius: var(--bl-button-lg-radius);
+  font-size: var(--bl-button-lg-font-size);
+  line-height: var(--bl-button-lg-line-height);
+}
+.wp-block-button.is-size-lg > .wp-block-button__link svg { width: var(--bl-button-lg-icon-size); height: var(--bl-button-lg-icon-size); }