@goldencomm/create-baseline 0.0.1 → 0.1.0

package/templates/wordpress/theme/src/looks.generated.css

@@ -0,0 +1,358 @@
+/* Generated by tokens/looks.mjs from tokens/looks/wordpress/*.css (ADR-0031: one look per site). Do not edit. */
+
+/* accordion: default (the project's look: also a block with no style chosen, and the classic markup) */
+/* blocks: core/accordion core/details
+   Accordion, DEFAULT look on WordPress (registry/src/ui/accordion/accordion.tsx): upstream's, no box, a rule under every
+   item but the last. Consecutive core/details blocks read as one accordion the same way.
+   Shared rules: src/core-accordion.css. ADR-0031: installed by tokens/looks.mjs into src/looks.generated.css. */
+
+.wp-block-accordion:is(.is-style-default, :not([class*="is-style-"])) > .wp-block-accordion-item:not(:last-child),
+.wp-block-details:is(.is-style-default, :not([class*="is-style-"])):has(+ .wp-block-details) {
+  border-bottom: var(--bl-accordion-border-width) solid var(--border);
+}
+
+/* accordion: contained */
+/* blocks: core/accordion core/details
+   Accordion, CONTAINED look on WordPress (registry/src/ui/accordion/accordion.contained.tsx): each item a bordered card
+   (card fill, accordion/radius, accordion/padding-x), the cards spaced by accordion/group/gap.
+   Shared rules: src/core-accordion.css. ADR-0031: installed by tokens/looks.mjs into src/looks.generated.css. */
+
+.wp-block-accordion.is-style-contained > .wp-block-accordion-item,
+.wp-block-details.is-style-contained {
+  padding-inline: var(--bl-accordion-padding-x);
+  border: var(--bl-accordion-border-width) solid var(--border);
+  border-radius: var(--bl-accordion-radius);
+  background-color: var(--card);
+  color: var(--card-foreground);
+}
+.wp-block-accordion.is-style-contained > .wp-block-accordion-item + .wp-block-accordion-item,
+.wp-block-details.is-style-contained + .wp-block-details {
+  margin-block-start: var(--bl-accordion-group-gap);
+}
+
+/* open, then hovered (hover wins): a tint layered over the card fill, a border and the text colour on the whole card;
+   the title and chevron take the hover colours with the trigger (accordion/{background,border,foreground,icon}-*) */
+.wp-block-accordion.is-style-contained > .wp-block-accordion-item.is-open,
+.wp-block-details.is-style-contained[open] {
+  border-color: var(--bl-accordion-border-open);
+  background-image: linear-gradient(var(--bl-accordion-background-open), var(--bl-accordion-background-open));
+  color: var(--bl-accordion-foreground-open);
+}
+.wp-block-accordion.is-style-contained > .wp-block-accordion-item:has(.wp-block-accordion-heading__toggle:hover),
+.wp-block-details.is-style-contained:has(> summary:hover) {
+  border-color: var(--bl-accordion-border-hover);
+  background-image: linear-gradient(var(--bl-accordion-background-hover), var(--bl-accordion-background-hover));
+}
+.wp-block-accordion.is-style-contained > .wp-block-accordion-item .wp-block-accordion-heading__toggle:hover,
+.wp-block-details.is-style-contained > summary:hover {
+  color: var(--bl-accordion-foreground-hover);
+}
+.wp-block-accordion.is-style-contained > .wp-block-accordion-item.is-open .wp-block-accordion-heading__toggle-icon,
+.wp-block-details.is-style-contained[open] > summary::after {
+  background-color: var(--bl-accordion-icon-open);
+}
+.wp-block-accordion.is-style-contained > .wp-block-accordion-item .wp-block-accordion-heading__toggle:hover .wp-block-accordion-heading__toggle-icon,
+.wp-block-details.is-style-contained > summary:hover::after {
+  background-color: var(--bl-accordion-icon-hover);
+}
+
+/* accordion: split */
+/* blocks: core/accordion core/details
+   Accordion, SPLIT look on WordPress (registry/src/ui/accordion/accordion.split.tsx): each item a bordered card whose
+   header is a bordered box of its own (overlapping the card's edge by the border width and painted over it, so its open
+   and hover border wins; the item must not clip it), the
+   content padded below it; the cards spaced by accordion/group/gap.
+   Shared rules: src/core-accordion.css. ADR-0031: installed by tokens/looks.mjs into src/looks.generated.css. */
+
+.wp-block-accordion.is-style-split > .wp-block-accordion-item,
+.wp-block-details.is-style-split {
+  border: var(--bl-accordion-border-width) solid var(--border);
+  border-radius: var(--bl-accordion-radius);
+  background-color: var(--card);
+  color: var(--card-foreground);
+}
+.wp-block-accordion.is-style-split > .wp-block-accordion-item + .wp-block-accordion-item,
+.wp-block-details.is-style-split + .wp-block-details {
+  margin-block-start: var(--bl-accordion-group-gap);
+}
+.wp-block-accordion.is-style-split .wp-block-accordion-heading__toggle,
+.wp-block-details.is-style-split > summary {
+  /* a <button> does not stretch, so its width takes back the two border widths the negative margin adds */
+  width: calc(100% + 2 * var(--bl-accordion-border-width));
+  margin: calc(var(--bl-accordion-border-width) * -1);
+  padding-inline: var(--bl-accordion-padding-x);
+  border: var(--bl-accordion-border-width) solid var(--border);
+  border-radius: var(--bl-accordion-radius);
+  background-color: var(--card);
+}
+/* the content's padding: inline on the panel, held while core hides it (its hidden rule zeroes padding with !important,
+   which would reflow the text as it closes); the top as a spacer inside the clipped panel, like the bottom one in
+   src/core-accordion.css, so opening and closing only reveal it */
+.wp-block-accordion.is-style-split .wp-block-accordion-panel {
+  padding: 0 var(--bl-accordion-padding-x);
+}
+.wp-block-accordion.is-style-split .wp-block-accordion-panel[hidden] {
+  padding-inline: var(--bl-accordion-padding-x) !important;
+}
+.wp-block-accordion.is-style-split .wp-block-accordion-panel::before {
+  content: "";
+  display: block;
+  block-size: var(--bl-accordion-padding-y);
+}
+.wp-block-details.is-style-split > :not(summary) {
+  padding-inline: var(--bl-accordion-padding-x);
+}
+/* not only while [open]: inside ::details-content it is clipped with the rest, so a close no longer drops it first */
+.wp-block-details.is-style-split > summary + * {
+  margin-block-start: var(--bl-accordion-padding-y);
+}
+
+/* open, then hovered (hover wins): the trigger box alone takes a tint over the card fill, a border and the text colour
+   (accordion/{background,border,foreground,icon}-*) */
+.wp-block-accordion.is-style-split > .wp-block-accordion-item.is-open .wp-block-accordion-heading__toggle,
+.wp-block-details.is-style-split[open] > summary {
+  border-color: var(--bl-accordion-border-open);
+  background-image: linear-gradient(var(--bl-accordion-background-open), var(--bl-accordion-background-open));
+  color: var(--bl-accordion-foreground-open);
+}
+.wp-block-accordion.is-style-split > .wp-block-accordion-item .wp-block-accordion-heading__toggle:hover,
+.wp-block-details.is-style-split > summary:hover {
+  border-color: var(--bl-accordion-border-hover);
+  background-image: linear-gradient(var(--bl-accordion-background-hover), var(--bl-accordion-background-hover));
+  color: var(--bl-accordion-foreground-hover);
+}
+.wp-block-accordion.is-style-split > .wp-block-accordion-item.is-open .wp-block-accordion-heading__toggle-icon,
+.wp-block-details.is-style-split[open] > summary::after {
+  background-color: var(--bl-accordion-icon-open);
+}
+.wp-block-accordion.is-style-split > .wp-block-accordion-item .wp-block-accordion-heading__toggle:hover .wp-block-accordion-heading__toggle-icon,
+.wp-block-details.is-style-split > summary:hover::after {
+  background-color: var(--bl-accordion-icon-hover);
+}
+
+/* pagination: default (the project's look: also a block with no style chosen, and the classic markup) */
+/* blocks: core/query-pagination
+   Pagination, DEFAULT look on WordPress (upstream's; registry/src/ui/pagination/pagination.tsx). Links are Button md
+   boxes, ghost; the current page is the outline Button. Shared rules: src/core-pagination.css.
+   ADR-0031: tokens/looks.mjs installs the project's looks into src/looks.generated.css; the project's own look also
+   matches a block with no style chosen and the classic navigation, so `:is(.is-style-default, :not([class*="is-style-"]))` here is rewritten for it. */
+
+:is(.wp-block-query-pagination, .navigation:is(.pagination, .comments-pagination)):is(.is-style-default, :not([class*="is-style-"])) :is(.wp-block-query-pagination-numbers, .nav-links),
+.wp-block-query-pagination:is(.is-style-default, :not([class*="is-style-"])) {
+  gap: var(--bl-pagination-default-gap);
+}
+:is(.wp-block-query-pagination, .navigation:is(.pagination, .comments-pagination)):is(.is-style-default, :not([class*="is-style-"])) :is(.page-numbers, .wp-block-query-pagination-previous, .wp-block-query-pagination-next) {
+  gap: var(--bl-button-md-gap);
+  min-width: var(--bl-button-md-height);
+  height: var(--bl-button-md-height);
+  padding: 0 var(--bl-button-md-padding-x);
+  border: var(--bl-pagination-bordered-border-width) solid transparent;
+  border-radius: var(--bl-button-md-radius);
+  color: var(--foreground);
+}
+/* page numbers are square icon buttons */
+:is(.wp-block-query-pagination, .navigation:is(.pagination, .comments-pagination)):is(.is-style-default, :not([class*="is-style-"])) .page-numbers:not(.prev, .next) {
+  width: var(--bl-button-md-height);
+  padding: 0;
+}
+:is(.wp-block-query-pagination, .navigation:is(.pagination, .comments-pagination)):is(.is-style-default, :not([class*="is-style-"])) :is(a.page-numbers, .wp-block-query-pagination-previous, .wp-block-query-pagination-next):hover {
+  background-color: var(--muted);
+}
+/* the current page: the outline Button */
+:is(.wp-block-query-pagination, .navigation:is(.pagination, .comments-pagination)):is(.is-style-default, :not([class*="is-style-"])) .page-numbers.current {
+  border-color: var(--border);
+}
+/* Previous / Next: the icon side tightened as Button does (padding-x minus half the gap) */
+:is(.wp-block-query-pagination, .navigation:is(.pagination, .comments-pagination)):is(.is-style-default, :not([class*="is-style-"])) :is(.wp-block-query-pagination-previous, .prev) {
+  padding-inline-start: calc(var(--bl-button-md-padding-x) - var(--bl-button-md-gap) / 2);
+}
+:is(.wp-block-query-pagination, .navigation:is(.pagination, .comments-pagination)):is(.is-style-default, :not([class*="is-style-"])) :is(.wp-block-query-pagination-next, .next) {
+  padding-inline-end: calc(var(--bl-button-md-padding-x) - var(--bl-button-md-gap) / 2);
+}
+
+/* pagination: bordered */
+/* blocks: core/query-pagination
+   Pagination, BORDERED look on WordPress (registry/src/ui/pagination/pagination.bordered.tsx). A rule across the top;
+   links are Button md boxes in muted text with an indicator on that rule: clear, pagination/bordered/indicator-hover on
+   hover, primary on the current page (its text primary too). Previous and Next sit at the ends, the numbers between
+   them. The spacing is the default look's (Button md and pagination/default/gap, user 2026-10-02).
+   Shared rules: src/core-pagination.css. ADR-0031: installed by tokens/looks.mjs into src/looks.generated.css. */
+
+:is(.wp-block-query-pagination, .navigation:is(.pagination, .comments-pagination)).is-style-bordered {
+  border-top: var(--bl-pagination-bordered-border-width) solid var(--border);
+}
+/* the block: Previous | numbers | Next on three tracks, so the numbers stay centred whatever the labels' widths */
+.wp-block-query-pagination.is-style-bordered {
+  display: grid;
+  grid-template-columns: 1fr auto 1fr;
+  align-items: start;
+  gap: var(--bl-pagination-default-gap);
+}
+.wp-block-query-pagination.is-style-bordered > .wp-block-query-pagination-previous {
+  grid-column: 1;
+  justify-self: start;
+}
+.wp-block-query-pagination.is-style-bordered > .wp-block-query-pagination-numbers {
+  grid-column: 2;
+  gap: var(--bl-pagination-default-gap);
+}
+.wp-block-query-pagination.is-style-bordered > .wp-block-query-pagination-next {
+  grid-column: 3;
+  justify-self: end;
+}
+/* the classic output is flat: Previous and Next push to the ends */
+.navigation:is(.pagination, .comments-pagination).is-style-bordered .nav-links {
+  align-items: flex-start;
+  gap: var(--bl-pagination-default-gap);
+}
+.navigation:is(.pagination, .comments-pagination).is-style-bordered .nav-links > .prev {
+  margin-inline-end: auto;
+}
+.navigation:is(.pagination, .comments-pagination).is-style-bordered .nav-links > .next {
+  margin-inline-start: auto;
+}
+
+/* Button md boxes; the links overlap the rule by its width, so the indicator sits on it */
+:is(.wp-block-query-pagination, .navigation:is(.pagination, .comments-pagination)).is-style-bordered :is(.page-numbers, .wp-block-query-pagination-previous, .wp-block-query-pagination-next) {
+  gap: var(--bl-button-md-gap);
+  min-width: var(--bl-button-md-height);
+  height: var(--bl-button-md-height);
+  margin-top: calc(-1 * var(--bl-pagination-bordered-border-width));
+  padding: 0 var(--bl-button-md-padding-x);
+  border: 0;
+  border-top: var(--bl-pagination-bordered-indicator-width) solid transparent;
+  border-radius: 0;
+  color: var(--muted-foreground);
+}
+/* page numbers are square, as the icon-md links of the other looks */
+:is(.wp-block-query-pagination, .navigation:is(.pagination, .comments-pagination)).is-style-bordered .page-numbers:not(.prev, .next) {
+  width: var(--bl-button-md-height);
+  padding: 0;
+}
+:is(.wp-block-query-pagination, .navigation:is(.pagination, .comments-pagination)).is-style-bordered :is(a.page-numbers, .wp-block-query-pagination-previous, .wp-block-query-pagination-next):hover {
+  border-top-color: var(--bl-pagination-bordered-indicator-hover);
+  color: var(--foreground);
+}
+:is(.wp-block-query-pagination, .navigation:is(.pagination, .comments-pagination)).is-style-bordered .page-numbers.current {
+  border-top-color: var(--primary);
+  color: var(--primary);
+}
+/* Previous / Next: the icon side tightened as Button does (padding-x minus half the gap) */
+:is(.wp-block-query-pagination, .navigation:is(.pagination, .comments-pagination)).is-style-bordered :is(.wp-block-query-pagination-previous, .prev) {
+  padding-inline-start: calc(var(--bl-button-md-padding-x) - var(--bl-button-md-gap) / 2);
+}
+:is(.wp-block-query-pagination, .navigation:is(.pagination, .comments-pagination)).is-style-bordered :is(.wp-block-query-pagination-next, .next) {
+  padding-inline-end: calc(var(--bl-button-md-padding-x) - var(--bl-button-md-gap) / 2);
+}
+
+/* pagination: grouped */
+/* blocks: core/query-pagination
+   Pagination, GROUPED look on WordPress (registry/src/ui/pagination/pagination.grouped.tsx). The links are Button md
+   boxes joined into one outline with Button Group's seams, across the numbers wrapper; the current page is filled with
+   accent. Shared rules: src/core-pagination.css. ADR-0031: installed by tokens/looks.mjs into src/looks.generated.css. */
+
+:is(.wp-block-query-pagination, .navigation:is(.pagination, .comments-pagination)).is-style-grouped :is(.wp-block-query-pagination-numbers, .nav-links),
+.wp-block-query-pagination.is-style-grouped {
+  gap: 0;
+}
+:is(.wp-block-query-pagination, .navigation:is(.pagination, .comments-pagination)).is-style-grouped :is(.page-numbers, .wp-block-query-pagination-previous, .wp-block-query-pagination-next) {
+  gap: var(--bl-button-md-gap);
+  min-width: var(--bl-button-md-height);
+  height: var(--bl-button-md-height);
+  padding: 0 var(--bl-button-md-padding-x);
+  border: var(--bl-pagination-bordered-border-width) solid var(--border);
+  border-inline-start-width: 0;
+  border-radius: 0;
+  color: var(--foreground);
+}
+:is(.wp-block-query-pagination, .navigation:is(.pagination, .comments-pagination)).is-style-grouped .page-numbers:not(.prev, .next) {
+  width: var(--bl-button-md-height);
+  padding: 0;
+}
+:is(.wp-block-query-pagination, .navigation:is(.pagination, .comments-pagination)).is-style-grouped :is(a.page-numbers, .wp-block-query-pagination-previous, .wp-block-query-pagination-next):hover {
+  background-color: var(--muted);
+}
+:is(.wp-block-query-pagination, .navigation:is(.pagination, .comments-pagination)).is-style-grouped .page-numbers.current {
+  background-color: var(--accent);
+  color: var(--accent-foreground);
+}
+:is(.wp-block-query-pagination, .navigation:is(.pagination, .comments-pagination)).is-style-grouped :is(.wp-block-query-pagination-previous, .prev) {
+  padding-inline-start: calc(var(--bl-button-md-padding-x) - var(--bl-button-md-gap) / 2);
+}
+:is(.wp-block-query-pagination, .navigation:is(.pagination, .comments-pagination)).is-style-grouped :is(.wp-block-query-pagination-next, .next) {
+  padding-inline-end: calc(var(--bl-button-md-padding-x) - var(--bl-button-md-gap) / 2);
+}
+/* the outer ends of the group: Previous opens it and Next closes it (both are always rendered) */
+.wp-block-query-pagination.is-style-grouped > a:first-child,
+.wp-block-query-pagination.is-style-grouped > .wp-block-query-pagination-numbers:first-child > :first-child,
+.navigation:is(.pagination, .comments-pagination).is-style-grouped .nav-links > :first-child {
+  border-inline-start-width: var(--bl-pagination-bordered-border-width);
+  border-start-start-radius: var(--bl-button-md-radius);
+  border-end-start-radius: var(--bl-button-md-radius);
+}
+.wp-block-query-pagination.is-style-grouped > a:last-child,
+.wp-block-query-pagination.is-style-grouped > .wp-block-query-pagination-numbers:last-child > :last-child,
+.navigation:is(.pagination, .comments-pagination).is-style-grouped .nav-links > :last-child {
+  border-start-end-radius: var(--bl-button-md-radius);
+  border-end-end-radius: var(--bl-button-md-radius);
+}
+
+/* disabled keeps its outline, which is the group's edge: muted text instead of the 50 % opacity */
+:is(.wp-block-query-pagination, .navigation:is(.pagination, .comments-pagination)).is-style-grouped [aria-disabled="true"] {
+  opacity: 1;
+  color: var(--muted-foreground);
+}
+
+/* tabs: default (the project's look: also a block with no style chosen, and the classic markup) */
+/* blocks: core/tabs
+   Tabs, DEFAULT look on WordPress (registry/src/ui/tabs/tabs.tsx): upstream's muted pill list, the selected tab a
+   background pill with Tailwind's shadow-sm. Shared rules: src/core-tabs.css. ADR-0031: installed by tokens/looks.mjs
+   into src/looks.generated.css. */
+
+.wp-block-tabs:is(.is-style-default, :not([class*="is-style-"])) > .wp-block-tab-list {
+  gap: 0;
+  border-radius: var(--bl-tabs-list-radius);
+  background-color: var(--muted);
+}
+.wp-block-tabs:is(.is-style-default, :not([class*="is-style-"])) > .wp-block-tab-list > button[aria-selected="true"] {
+  background-color: var(--background);
+  box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
+}
+.wp-block-tabs:is(.is-style-default, :not([class*="is-style-"])) > .wp-block-tab-list > button[aria-selected="true"]:focus-visible {
+  box-shadow: 0 0 0 var(--bl-control-ring-width) var(--ring), 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
+}
+
+/* tabs: line */
+/* blocks: core/tabs
+   Tabs, LINE look on WordPress (registry/src/ui/tabs/tabs.line.tsx), drawn as bordered Pagination's (user, 2026-10-06):
+   a tabs/line/border-width rule under the list, the tabs tabs/list/gap-line apart, and a tabs/line/indicator-width
+   indicator sitting on the rule, primary under the selected tab (whose text is primary too) and
+   tabs/line/indicator-hover under a hovered one. Core has no vertical tabs. Shared rules: src/core-tabs.css. ADR-0031:
+   installed by tokens/looks.mjs into src/looks.generated.css. */
+
+.wp-block-tabs.is-style-line > .wp-block-tab-list {
+  gap: var(--bl-tabs-list-gap-line);
+  border-bottom: var(--bl-tabs-line-border-width) solid var(--border);
+  background-color: transparent;
+}
+.wp-block-tabs.is-style-line > .wp-block-tab-list > button::after {
+  content: "";
+  position: absolute;
+  inset-inline: 0;
+  bottom: calc(-1 * (var(--bl-tabs-list-padding) + var(--bl-tabs-line-border-width)));
+  height: var(--bl-tabs-line-indicator-width);
+  background-color: var(--primary);
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 150ms;
+}
+.wp-block-tabs.is-style-line > .wp-block-tab-list > button:hover:not([aria-selected="true"])::after {
+  background-color: var(--bl-tabs-line-indicator-hover);
+  opacity: 1;
+}
+.wp-block-tabs.is-style-line > .wp-block-tab-list > button[aria-selected="true"] {
+  color: var(--primary);
+}
+.wp-block-tabs.is-style-line > .wp-block-tab-list > button[aria-selected="true"]::after {
+  opacity: 1;
+}

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

@@ -0,0 +1,160 @@
+/* Media on core/image, core/video and core/embed (spec: components/media/spec.md, ADR-0018). Mirrors
+   registry/src/ui/media/media.tsx; the facade markup comes from inc/media.php. Reads the media/* tokens. */
+
+/* the frame: the ratio as a custom property (Aspect Ratio's one static rule), poster under, play button over */
+.bl-media__frame {
+  position: relative;
+  aspect-ratio: var(--ratio);
+  overflow: hidden;
+  background-color: var(--muted);
+}
+/* in prose the frame takes typeset's media radius, so a facade matches the images around it */
+:is(.typeset, .editor-styles-wrapper) .bl-media__frame {
+  border-radius: var(--bl-radius-lg);
+}
+.bl-media__frame > .bl-media__image,
+.bl-media__frame > .bl-media__player {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  border: 0;
+  border-radius: 0; /* the frame clips; typeset would round the image again inside it */
+}
+.bl-media__frame > .bl-media__image {
+  object-fit: cover;
+}
+.bl-media__frame > video.bl-media__player {
+  object-fit: contain;
+}
+
+.bl-media__play {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+/* the inset widens the clickable area round the button. The button is a core Button (secondary) on its own
+   media/play-button/* box, icon and radius (user, 2026-10-02), not a Button size */
+.bl-media__play-inset {
+  padding: var(--bl-media-play-button-inset);
+}
+.bl-media__play-button.wp-block-button > .wp-block-button__link {
+  width: var(--bl-media-play-button-size);
+  height: var(--bl-media-play-button-size);
+  padding: 0;
+  border-radius: var(--bl-media-play-button-radius);
+}
+.bl-media__play-button.wp-block-button > .wp-block-button__link svg {
+  width: var(--bl-media-play-button-icon-size);
+  height: var(--bl-media-play-button-icon-size);
+}
+
+/* captions on core's media blocks read as Media's: text/sm, muted, 8px below the frame, start-aligned (typeset centres
+   prose captions; a media block is the component) */
+:is(.wp-block-image, .wp-block-video, .wp-block-embed) :is(figcaption, .wp-element-caption) {
+  margin-block: var(--bl-media-caption-gap) 0;
+  color: var(--muted-foreground);
+  font-size: var(--bl-media-caption-font-size);
+  line-height: var(--bl-media-caption-line-height);
+  text-align: start;
+}
+
+/* a facade video or embed as a card's first child goes full bleed, as an image does (src/core-card.css) */
+.wp-block-group:is(.is-style-card, .is-style-card-sm) > :is(.wp-block-video, .wp-block-embed) {
+  padding-inline: 0;
+}
+.wp-block-group:is(.is-style-card, .is-style-card-sm):has(> :is(.wp-block-video, .wp-block-embed):first-child) {
+  padding-top: 0;
+}
+.wp-block-group:is(.is-style-card, .is-style-card-sm) .bl-media__frame {
+  border-radius: 0;
+}
+
+/* Dialog playback: a lightbox (user, 2026-10-05). The video alone on the backdrop (color/overlay, as Dialog's), no title
+   or panel, the close in the viewport's top-right corner. The <dialog> fills the viewport and is transparent, so its corner
+   is the viewport's and a click outside the video is a click on the <dialog> (media.js closes it). The player goes in on
+   open and is removed on close. Mirrors registry/src/ui/media/media-play-button.tsx. */
+:root:has(dialog[open]:modal) {
+  overflow: hidden;
+}
+.bl-media__dialog {
+  position: fixed;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  max-width: none;
+  max-height: none;
+  margin: 0;
+  padding: var(--bl-dialog-padding);
+  border: 0;
+  background: transparent;
+  outline: none;
+  align-items: center;
+  justify-content: center;
+  opacity: 0;
+  transition: opacity 200ms, display 200ms allow-discrete, overlay 200ms allow-discrete;
+}
+.bl-media__dialog[open] {
+  display: flex;
+  opacity: 1;
+}
+@starting-style {
+  .bl-media__dialog[open] { opacity: 0; }
+}
+.bl-media__dialog::backdrop {
+  background-color: var(--overlay);
+  opacity: 0;
+  transition: opacity 200ms, display 200ms allow-discrete, overlay 200ms allow-discrete;
+}
+@supports (backdrop-filter: blur(4px)) {
+  .bl-media__dialog::backdrop { backdrop-filter: blur(4px); }
+}
+.bl-media__dialog[open]::backdrop { opacity: 1; }
+@starting-style {
+  .bl-media__dialog[open]::backdrop { opacity: 0; }
+}
+@media (prefers-reduced-motion: reduce) {
+  .bl-media__dialog,
+  .bl-media__dialog::backdrop { transition: none; }
+}
+.bl-media__dialog > .bl-media__dialog-close {
+  position: absolute;
+  top: var(--bl-dialog-padding);
+  right: var(--bl-dialog-padding);
+}
+.bl-media__dialog-frame {
+  position: relative;
+  width: 100%;
+  max-width: var(--bl-media-dialog-max-width);
+  aspect-ratio: var(--ratio);
+  overflow: hidden;
+  background-color: var(--muted);
+  /* the video fades and zooms in from 95 %, as Dialog's panel does */
+  opacity: 0;
+  scale: 0.95;
+  transition: opacity 200ms ease-out, scale 200ms ease-out;
+}
+.bl-media__dialog[open] > .bl-media__dialog-frame {
+  opacity: 1;
+  scale: 1;
+}
+@starting-style {
+  .bl-media__dialog[open] > .bl-media__dialog-frame { opacity: 0; scale: 0.95; }
+}
+@media (prefers-reduced-motion: reduce) {
+  .bl-media__dialog-frame { transition: none; }
+}
+.bl-media__dialog-frame > .bl-media__player {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  border: 0;
+}
+.bl-media__dialog-frame > video.bl-media__player {
+  object-fit: contain;
+}

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

@@ -0,0 +1,88 @@
+/* Radio on WordPress (spec: components/radio/spec.md). There is no core radio block, so ADR-0018's ladder
+   ends at element styling and the native control *is* the component. Mirrors
+   registry/src/ui/radio/radio.tsx, with the same structural difference Checkbox has:
+
+   React wraps the input in a span and lays a sibling dot over it. WordPress cannot do that — Gravity Forms and
+   core emit their own markup — so the dot is a pseudo-element instead. It needs no mask, unlike the checkbox
+   tick: a radio's indicator is a circle, which CSS can draw.
+
+   Gravity Forms' own radios are styled in gravityforms.css, because its choice controls need the extra
+   specificity to beat the plugin's stylesheet. This file is for the theme's own markup. Both resolve to the
+   same --bl-radio-* variables, so one designer change in Figma moves both.
+
+   A visually hidden radio (.sr-only) is excluded: it is the state of something drawn another way (a Toggle Group
+   item), and these unlayered rules would otherwise beat the sr-only utility and draw it. */
+
+:where(input[type="radio"]:not(.sr-only)) {
+  appearance: none;
+  position: relative;
+  flex-shrink: 0;
+  width: var(--bl-radio-size);
+  height: var(--bl-radio-size);
+  margin: 0;
+  border: 1px solid var(--input);
+  border-radius: 9999px;
+  background-color: transparent;
+  vertical-align: middle;
+  outline: none;
+  transition: background-color 150ms, border-color 150ms, box-shadow 150ms;
+}
+
+:where(input[type="radio"]:not(.sr-only)):checked {
+  border-color: var(--primary);
+  background-color: var(--primary);
+}
+
+/* The dot. 10px rather than upstream's 8px: Figma draws 10 and Figma is the source of truth (spec: Size).
+   `inset: 0` plus `margin: auto` centres it without transforms. */
+:where(input[type="radio"]:not(.sr-only))::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  margin: auto;
+  width: var(--bl-radio-dot-size);
+  height: var(--bl-radio-dot-size);
+  border-radius: 9999px;
+  background-color: var(--primary-foreground);
+  opacity: 0;
+}
+
+:where(input[type="radio"]:not(.sr-only)):checked::before {
+  opacity: 1;
+}
+
+/* focus-visible is a solid primary border plus the shared 3px ring, the same contract Input uses. */
+:where(input[type="radio"]:not(.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 selected-but-invalid radio still has to read as selected. */
+:where(input[type="radio"]:not(.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="radio"]:not(.sr-only))[aria-invalid="true"]:checked {
+  border-color: var(--primary);
+}
+
+:where(input[type="radio"]:not(.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="radio"]:not(.sr-only))::after {
+  content: "";
+  position: absolute;
+  inset: -8px -12px;
+}
+
+/* The group. RadioGroup is a real component in React; here it is the role, which is what Gravity Forms and
+   hand-written markup both emit. The gap is radio/group/gap, as upstream's gap-2 is. */
+:where([role="radiogroup"]) {
+  display: grid;
+  gap: var(--bl-radio-group-gap);
+}