@reblu/site-blocks 0.30.0 → 0.32.0

package/CHANGELOG.md

@@ -1,5 +1,42 @@
 # @reblu/site-blocks
 
+## 0.32.0
+
+### Minor Changes
+
+- 93143eb: Reviews (REB-1272). `@reblu/site-contracts` exports the `Review` and `ReviewSource` types of `GET /api/site/reviews`. `@reblu/site-client` adds `client.reviews.list({ pageId?, limit? }, cache?)`: the tenant's published reviews in the order set in nexus, optionally only one page's (404 without the tenant's `reviews` module). `@reblu/site-blocks` adds `Reviews`, a Server Component drop-in: a responsive grid with an accessible star rating, the author, the date, the text and a «Ver en <fuente>» link to the original (new tab, `rel="noopener nofollow"`), plus an optional tenant `notice` above or below the grid. Every existing export and namespace is unchanged.
+
+### Patch Changes
+
+- Updated dependencies [25a6af3]
+- Updated dependencies [93143eb]
+  - @reblu/site-contracts@1.30.0
+
+## 0.31.0
+
+### Minor Changes
+
+- 9a83295: Guest course checkout (REB-1264). Additive only: every existing export behaves as before.
+  - `@reblu/site-contracts` exports `AcademyCheckoutRequest`, `AcademyCheckoutBilling`, `AcademyCheckoutSession` and `AcademyCheckoutErrorCode` (`POST /api/site/academy/checkout`).
+  - `@reblu/site-client` adds `client.academy.checkout(body, options?)` → `{ url, sessionId }` (Stripe URL re-checked like `shop.checkout()`); a refusal throws `AcademyCheckoutError` (an `ApiError`) with the stable `code` and `details`.
+  - `@reblu/site-next` adds `createAcademyCheckoutRoute()` in `./route-handlers`: forwards `x-reblu-visitor-ip`, fills `successUrl`/`cancelUrl` on `coursePath` and re-checks the Stripe URL. `createShopCheckoutRoute` now shares that code, unchanged in behaviour.
+  - `@reblu/site-blocks` adds the drop-in `CourseGuestCheckoutForm` (`./client`): name, surname, email, terms box, the course's consent box, optional full invoice, total and pay notice; it gives way to the request form on `ENROLLMENT_REQUEST_REQUIRED`. The root entry adds `courseSellsAsGuest` and `toAcademyCheckoutInvoiceFields`.
+
+- faf78e8: Checkout pickup point (REB-1276). `CheckoutDeliveryChoice`: switching to pickup with exactly one pickup point now selects it (`pickupLocationId` is sent); with two or more points none is preselected, as before. New `isCheckoutDeliveryComplete(value, requiresDelivery?)` tells whether the choice can be quoted (pickup needs a point), so the SITE passes `null` to `useShopQuote` instead of asking for a quote known to answer 422. New `checkoutQuoteNotice({ fulfillment, requiresDelivery?, error? })` and `<CheckoutQuoteNotice reason labels? />` render «Elige un punto de recogida» (`role=status`) for an incomplete pickup and for the `PICKUP_LOCATION_INVALID` quote error, instead of the generic total error. Also exports `DEFAULT_CHECKOUT_QUOTE_NOTICE_LABELS` and the `CheckoutQuoteNotice*` types. All additive.
+- faf78e8: `OrderConfirmation` default copy change (REB-1200, approved by the owner). The confirmed-order line no longer says «Te hemos enviado un email con tu acceso.» (wrong for physical orders and for buyers who already have an account). The default `foundDescription` is now «Tu pedido {number} está confirmado. Te hemos enviado el resumen a {email}.»: `{number}` and `{email}` are filled from the order. When the text carries `{email}`, the separate «Te hemos enviado un email de confirmación a…» line is not shown. New label `foundWithoutOrderDescription` («Tu pedido está confirmado.») is used while no order is loaded, so a placeholder is never shown raw. A SITE that passes its own `labels.foundDescription` is unaffected: a text without placeholders renders as is, with the confirmation-email line as before.
+- 49f8f4b: New page content blocks (REB-1265..1268). Additive only: every existing block type renders exactly as before.
+  - `before_after` («Antes y después»): before/after image pairs with an opt-in text under them (`showCaption` + `caption`). `@reblu/site-blocks` adds the drop-in `BeforeAfterPairs` and renders the block in `PageBlocks`. `@reblu/site-contracts` exports `BeforeAfterData`.
+  - `chips` («Etiquetas»): a short list of texts shown as chips. Drop-in `ChipList`; type `ChipsData`.
+  - `icon_cards` («Tarjetas con icono»): a responsive grid of cards with an icon from a fixed, curated set, a title and a short text. Drop-in `IconCardGrid` and `CardIconSvg`, `CARD_ICON_NAMES`; types `IconCardsData` and `CardIcon`. `feature_list` is unchanged.
+  - `image_text` («Imagen y texto»): an image beside rich text, image left or right, configurable mobile order. Drop-in `ImageTextSplit`; type `ImageTextData`. `BlockRendererProps` gains an optional `headingId`, set only for `image_text`, which draws the section heading in its text column. The legacy `TEXT_IMAGE`/`IMAGE_TEXT` layouts are unchanged.
+  - `PageBlocks` renders `data.kicker` above the section heading for the new content blocks only.
+
+### Patch Changes
+
+- Updated dependencies [9a83295]
+- Updated dependencies [49f8f4b]
+  - @reblu/site-contracts@1.29.0
+
 ## 0.30.0
 
 ### Minor Changes

package/README.md

@@ -36,6 +36,7 @@ colour on the red background. See `docs/theming/theming.md`.
 | `ProductTrustItems`, `DEFAULT_TRUST_ICONS`                                                                    | `.`        | Store-wide trust messages from `ShopConfig.productTrustItems`. Server Component. See "Product trust items" below.            |
 | `TrustBadges`, `DEFAULT_TRUST_BADGE_HEADINGS`                                                                 | `.`        | The tenant's trust badges from `client.trustBadges.list()`, grouped by type. Server Component. See "Trust badges" below.     |
 | `ArbitrationBadge`                                                                                            | `.`        | The consumer-arbitration distinctive with its adhesion number, for the footer. Server Component. See "Consumer arbitration badge" below. |
+| `Reviews`                                                                                                     | `.`        | The tenant's published, verifiable reviews from `client.reviews.list()`. Server Component. See "Reviews" below.              |
 | `buildFaqPageJsonLd`, `collectFaqItems`                                                                       | `./seo`    | schema.org `FAQPage` structured data. Directive-free (also on `.`). See "Page blocks" below.                                 |
 | `useCollection`                                                                                               | `./client` | Headless filterable/sortable/paginated collection hook (facets, category, tag, search). Serves both page and blog indexes.   |
 | `Collection`                                                                                                  | `./client` | Token-driven presentational grid over `useCollection`.                                                                       |
@@ -571,7 +572,7 @@ directly — `loading`/`paid` are drop-in aliases for the original
 | `status`              | Default copy                                    | Order details shown                                  | Extra UI                                              |
 | --------------------- | ----------------------------------------------- | ---------------------------------------------------- | ----------------------------------------------------- |
 | `loading` / `polling` | «Confirmando tu pedido…»                        | —                                                    | —                                                     |
-| `paid` / `found`      | «¡Pedido confirmado!»                           | Full summary (items, total, confirmation-email line) | —                                                     |
+| `paid` / `found`      | «¡Pedido confirmado!» + «Tu pedido {number} está confirmado. Te hemos enviado el resumen a {email}.» | Full summary (items, total; the confirmation-email line only when `foundDescription` has no `{email}`) | —                                                     |
 | `failed`              | «El pago no se ha completado»                   | None                                                 | "Volver al carrito" link when `cartHref` is given     |
 | `refunded`            | «Este pedido ha sido reembolsado»               | Order number only (neutral reference)                | —                                                     |
 | `partially_refunded`  | «…reembolsado parcialmente»                     | Order number only                                    | —                                                     |
@@ -591,6 +592,18 @@ reference (`labels.orderReferenceLabel`); `failed`/`not_found`/`error`
 render no order details at all, even if an `order` object happens to be
 present.
 
+**REB-1200 — default copy change.** The confirmed line used to read «Te
+hemos enviado un email con tu acceso.» for every order, physical ones too, and
+buyers who already had an account got no new access. The default
+`foundDescription` is now «Tu pedido {number} está confirmado. Te hemos
+enviado el resumen a {email}.» (`{number}` = `order.orderNumber`, `{email}` =
+`order.customerEmail`). Because it names the email, the separate «Te hemos
+enviado un email de confirmación a…» line is not shown under it. With no order
+loaded yet, `foundWithoutOrderDescription` («Tu pedido está confirmado.») is
+shown instead of a raw placeholder. A SITE that passes its own
+`labels.foundDescription` is unaffected: a text without `{email}` keeps the
+confirmation-email line, exactly as before.
+
 Every title/description is overridable via `labels` (see
 `OrderConfirmationLabels`). See `@reblu/site-next`'s README
 "`useShopOrderStatus` — the order-confirmation flow" for the full wiring
@@ -627,6 +640,7 @@ configuration edited in nexus (`ShopConfig.delivery`, `ShopConfig.checkout`,
 | Block | Reads | Renders |
 | ----- | ----- | ------- |
 | `CheckoutDeliveryChoice` | `config.delivery`, `config.checkout` | Home delivery (cost, estimate, address form) or free pickup (points with address, hours, ready-in text). Only the methods the tenant offers; nothing for a cart that ships nothing. |
+| `CheckoutQuoteNotice` | `checkoutQuoteNotice(...)` | «Elige un punto de recogida» (`role=status`) in place of the summary and of the total error while pickup has no point, or when the quote answers `PICKUP_LOCATION_INVALID` (REB-1276). |
 | `CheckoutQuoteSummary` | `ShopQuote` | Lines (kind, `qty × unit`), subtotal, discount, delivery row, tax rows, total, «Impuestos incluidos», remaining for free shipping, delivery term; `role=status` for an unusable code, `role=alert` when the order cannot be paid. |
 | `CheckoutTermsAcceptance` | `config.checkout` | The required, unticked box with `{terms}` as the link to the full document and `{tenant}` filled. Nothing when no terms are published. |
 | `CheckoutPayAction` | `config.checkout.continueToPaymentLabel`, `quote.payNotice` | The submit button and the notice with the amount under it (`text-sm`, the button's description). |
@@ -644,11 +658,14 @@ import type { ShopConfig } from '@reblu/site-contracts'
 import {
   CheckoutDeliveryChoice,
   CheckoutPayAction,
+  CheckoutQuoteNotice,
   CheckoutQuoteSummary,
   CheckoutTermsAcceptance,
   EMPTY_CHECKOUT_ADDRESS,
   defaultCheckoutFulfillment,
+  checkoutQuoteNotice,
   getShopErrorMessage,
+  isCheckoutDeliveryComplete,
   quoteRequiresDelivery,
   toCheckoutFulfillmentFields,
   toCheckoutTermsFields,
@@ -660,9 +677,13 @@ export function SingleStepCheckout({ config }: { config: ShopConfig }) {
   const [address, setAddress] = useState(EMPTY_CHECKOUT_ADDRESS)
   const [acceptsTerms, setAcceptsTerms] = useState(false)
   const lines = items.map(({ productId, variantId, quantity }) => ({ productId, variantId, quantity }))
+  // Pickup with no point is known to be incomplete: ask no quote for it (REB-1276).
   const { quote, status, error, refresh } = useShopQuote(
-    lines.length ? { items: lines, fulfillment: toCheckoutFulfillmentFields(fulfillment, address).fulfillment } : null,
+    lines.length && isCheckoutDeliveryComplete(fulfillment)
+      ? { items: lines, fulfillment: toCheckoutFulfillmentFields(fulfillment, address).fulfillment }
+      : null,
   )
+  const notice = checkoutQuoteNotice({ fulfillment, requiresDelivery: quoteRequiresDelivery(quote), error })
   // A cart that ships nothing hides the choice: send no address (blank = 400).
   const delivery = toCheckoutFulfillmentFields(fulfillment, address, quoteRequiresDelivery(quote))
 
@@ -704,8 +725,9 @@ export function SingleStepCheckout({ config }: { config: ShopConfig }) {
         ) : null}
       </div>
       <aside className='space-y-5'>
-        {quote ? <CheckoutQuoteSummary quote={quote} heading='Resumen' /> : null}
-        {status === 'error' ? (
+        {notice ? <CheckoutQuoteNotice reason={notice} /> : null}
+        {!notice && quote ? <CheckoutQuoteSummary quote={quote} heading='Resumen' /> : null}
+        {!notice && status === 'error' ? (
           <p role='alert'>
             {error?.message ?? 'No hemos podido calcular el total.'}{' '}
             <button type='button' onClick={() => void refresh()}>Reintentar</button>
@@ -751,6 +773,14 @@ Notes:
   of the hidden block (the server refuses a blank address with 400): the server records no delivery
   for such a cart, and the request stays on the current contract (REB-1227
   removes the old shape).
+- Pickup point (REB-1276): switching to pickup with exactly one point selects
+  it (`pickupLocationId` is sent); with two or more, none is preselected.
+  While pickup has no point, `isCheckoutDeliveryComplete(fulfillment)` is
+  `false`: pass `null` to `useShopQuote` (no request that is known to answer
+  422) and render `CheckoutQuoteNotice` with `checkoutQuoteNotice(...)`. The
+  same notice covers a `PICKUP_LOCATION_INVALID` quote error (a point
+  deactivated meanwhile), never the generic total error. Replace its text with
+  `labels={{ pickupLocationRequired: '…' }}`.
 - The full-invoice texts are the tenant's too: pass
   `labels={{ toggle: config.checkout.fullInvoiceCheckboxLabel, underCapNotice: config.checkout.fullInvoiceHelpText }}`
   to `FullInvoiceFields`.
@@ -898,6 +928,56 @@ import { Truck } from 'my-icon-set'
 `icons` cannot add a new icon key: an item whose `icon` this version does not
 know is still skipped.
 
+## Reviews
+
+`Reviews` (REB-1272) renders the tenant's published reviews, managed in nexus
+(«Reseñas») and served by `client.reviews.list()`: a responsive grid of cards
+with the stars, the text, the author, the date and a «Ver en Google» link to
+the original review. Publishing, hiding or reordering a review in nexus changes
+the SITE on the next revalidation, with no deploy.
+
+```tsx
+import { Reviews } from '@reblu/site-blocks'
+
+export async function HomeReviews() {
+  const { data: reviews } = await client.reviews
+    .list({ limit: 6 }, { revalidate: 3600 })
+    .catch(() => ({ data: [] }))
+  return (
+    <Reviews
+      reviews={reviews}
+      heading='Reseñas verificadas'
+      notice='Reseñas publicadas en Google y Doctoralia; cada una enlaza a su original.'
+    />
+  )
+}
+
+// Only the reviews linked to one page (a treatment, a professional's profile):
+const { data: pageReviews } = await client.reviews.list({ pageId: page.id })
+```
+
+- **Verifiable or not shown.** A review renders only with an `https://` link to
+  its original, a rating of 1 to 5 and an author; anything else is skipped.
+  The link opens in a new tab with `rel="noopener nofollow"` and a visually
+  hidden «(se abre en una pestaña nueva)» (`newWindowLabel`). Its text is
+  `linkLabel(sourceName)`, «Ver en Google» by default.
+- **Notice.** `notice` is the tenant's short text on how its reviews are
+  checked. Spanish consumer law asks a business that shows reviews to say
+  whether and how it ensures they come from real customers; the exact wording
+  is the tenant's (pending legal review, REB-136). It goes below the grid, or
+  above it with `noticePosition='above'`.
+- Stars are one `role="img"` labelled «5 de 5 estrellas». A star-only review
+  (`text: null`) renders without a quote. The date is the calendar day the
+  review was written, formatted in `locale` (default `es-ES`), never shifted
+  by the visitor's time zone.
+- `null`, `undefined` or an empty list render nothing — no heading, no notice.
+- `heading` wraps everything in a `<section aria-labelledby={headingId}>`
+  (default id `reviews-heading`, level `headingLevel`, default 2).
+- Styling hooks: `className`, `cardClassName` (merge with `cn`);
+  `headingClassName`, `gridClassName` and `noticeClassName` follow the REB-997
+  slot rule and REPLACE their defaults (`text-xl font-semibold`,
+  `sm:grid-cols-2 lg:grid-cols-3`, `text-sm text-muted-foreground`).
+
 ## Trust badges
 
 `TrustBadges` renders the tenant's trust badges — partners, insurers, funding,
@@ -1382,6 +1462,53 @@ const course = await client.academy.bySlug(slug)
 
 The waiver item keeps `data-slot='course-purchase-terms-withdrawal-waiver'` (as in REB-1199); the express request to start uses `data-slot='course-purchase-terms-service-start-request'`. Both carry `data-kind` with the kind.
 
+## Guest course checkout — `CourseGuestCheckoutForm` (REB-1264)
+
+A course that needs no validation is bought in one step by a visitor without
+a session: name, surname, email, the tenant's terms box, the course's consent
+box (`withdrawalConsent`, required on the `course` prop — `null` when there
+is none — and its `version` is sent), the optional full invoice
+(fields hidden until the buyer opts in, or required over the cap), the total
+and the pay notice. On success the buyer goes to Stripe; the account is
+created after payment. On `ENROLLMENT_REQUEST_REQUIRED` the form gives way to
+`requestForm`. It says the same for every email and never mentions an account.
+
+```tsx
+// Server Component — the course page
+import { courseSellsAsGuest } from '@reblu/site-blocks'
+import { CourseGuestCheckoutForm } from '@reblu/site-blocks/client'
+import { AcademyEnrollmentForm } from '@reblu/site-next/academy'
+
+const [course, shop] = await Promise.all([client.academy.bySlug(slug), client.shop.config()])
+const requestForm = (
+  <AcademyEnrollmentForm enrollmentRequestUrl='/api/academy/enrollment-request' courseSlug={course.slug} />
+)
+
+return courseSellsAsGuest(course) ? (
+  <CourseGuestCheckoutForm
+    // `withdrawalConsent` is required: `null` = the course has no box
+    course={{ ...course, withdrawalConsent: course.withdrawalConsent ?? null }}
+    copy={shop.checkout} // terms box, «Continuar al pago», pay notice, invoice texts
+    termsHref='/condiciones'
+    simplifiedInvoiceCapCents={shop.simplifiedInvoiceCapCents}
+    issuesInvoices={shop.simplifiedInvoiceCapCents != null}
+    requestForm={requestForm}
+  />
+) : (
+  requestForm
+)
+```
+
+It posts to the SITE's own `/api/academy/checkout` (`endpoint`) — mount
+`createAcademyCheckoutRoute()` from `@reblu/site-next/route-handlers` there —
+or pass `submit` to send it yourself (`client.academy.checkout`). `{total}`
+and `{tenant}` in `copy.payNotice` are filled with the course price. Every
+refusal code has a default message (`DEFAULT_COURSE_GUEST_CHECKOUT_ERROR_MESSAGES`,
+override with `errorMessages`); `INVALID_BILLING` field errors land on their
+invoice field; `onError` gets each refusal (e.g. reload on
+`TERMS_VERSION_CHANGED` / `CONSENT_VERSION_CHANGED`). `toAcademyCheckoutInvoiceFields`
+(root entry) builds the `billing` block for a SITE with its own form.
+
 ## Page blocks
 
 `PageBlocks` renders a page's registry blocks (`PageDetail.blocks` from
@@ -1418,6 +1545,9 @@ that applies the parent section's mirrored fields (REB-849):
   luminance; any other value keeps the theme foreground.
 - **`cta`** — rendered after the body as a link styled with `buttonVariants`;
   external CTAs open in a new tab with `rel="noopener noreferrer"`.
+- **`data.kicker`** — on the content blocks below (REB-1265..1268), a short
+  line rendered above the heading (`data-slot="page-block-kicker"`). Only
+  those block types render it; every other block's markup is unchanged.
 
 | Prop                | Default              | Purpose                                                    |
 | ------------------- | -------------------- | ---------------------------------------------------------- |
@@ -1458,9 +1588,110 @@ function TeamCard({ block, headingLevel, embedHref }: BlockRendererProps<'profil
 <PageBlocks blocks={page.blocks} components={{ profile_embed: TeamCard }} />
 ```
 
-Every renderer receives `{ block, headingLevel, embedHref }`. Overrides may be
+Every renderer receives `{ block, headingLevel, embedHref }` (plus
+`headingId` for `image_text`, which draws the section heading itself). Overrides may be
 async Server Components, or Client Components when they need interactivity.
 
+### Content blocks (REB-1265..1268)
+
+Drop-in components for the content blocks a tenant builds in the nexus page
+editor. `PageBlocks` uses each one as the default renderer of its block type;
+you can also place them on any page yourself, passing the block's `data`.
+All are Server Components, take colours from theme tokens only, and lazy-load
+every image. The platform ships no tenant copy: the only built-in strings are
+neutral labels you can override.
+
+#### `BeforeAfterPairs` — block `before_after` («Antes y después»)
+
+Before/after image pairs. Each pair stacks on mobile and sits side by side from
+`sm`; pairs flow two per row from `lg`. The text under the pairs is opt-in: it
+renders **only** when `showCaption` is `true` **and** `caption` is not blank.
+
+```tsx
+import { BeforeAfterPairs } from '@reblu/site-blocks'
+
+// `block.data` of a `before_after` block from `page.blocks`
+<BeforeAfterPairs
+  pairs={block.data.pairs}
+  showCaption={block.data.showCaption}
+  caption={block.data.caption}
+  labels={{ before: 'Before', after: 'After' }} // default: DEFAULT_BEFORE_AFTER_LABELS
+/>
+```
+
+| Prop          | Default                       | Purpose                                                  |
+| ------------- | ----------------------------- | -------------------------------------------------------- |
+| `pairs`       | —                             | `{ beforeUrl, afterUrl, alt? }[]`. Empty with no caption renders nothing. |
+| `showCaption` | `false`                       | The tenant's «Mostrar texto al pie» toggle.              |
+| `caption`     | —                             | Free tenant text (legal note, consent…), line breaks kept. |
+| `labels`      | `DEFAULT_BEFORE_AFTER_LABELS` | `{ before, after }` shown under each image.              |
+
+#### `ChipList` — block `chips` («Etiquetas»)
+
+A short list of texts shown as chips. They wrap onto new lines on small
+screens and use the `primary` theme token (tinted background, primary text).
+Blank items are skipped; an empty list renders nothing.
+
+```tsx
+import { ChipList } from '@reblu/site-blocks'
+
+<ChipList items={block.data.items} />
+```
+
+#### `IconCardGrid` — block `icon_cards` («Tarjetas con icono»)
+
+Cards with an icon, a title and a short text, in a responsive grid: one column
+on mobile, two from `sm`, three from `lg`. The icon is a name from a fixed,
+curated set (`CARD_ICON_NAMES`, the `CardIcon` type) — tenants pick it in nexus,
+never upload one. The SVGs are inlined (Lucide geometry, ISC) and drawn in
+`currentColor` on a `primary`-tinted tile. An icon name this version does not
+know renders the card without an icon.
+
+```tsx
+import { IconCardGrid, CardIconSvg } from '@reblu/site-blocks'
+
+<IconCardGrid intro={block.data.intro} items={block.data.items} headingLevel={3} />
+
+// One icon on its own, e.g. in a custom card:
+<CardIconSvg icon='shield-check' className='h-6 w-6 text-primary' />
+```
+
+| Prop           | Default | Purpose                                          |
+| -------------- | ------- | ------------------------------------------------ |
+| `items`        | —       | `{ icon, title, text? }[]` — `data.items`.       |
+| `intro`        | —       | `data.intro`, a line above the grid.             |
+| `headingLevel` | `3`     | Level of each card title.                        |
+
+`feature_list` is unchanged: it still renders its plain list.
+
+#### `ImageTextSplit` — block `image_text` («Imagen y texto»)
+
+An image beside rich text. Stacked on mobile — the image first, or the text
+first with `mobileOrder='text_first'` — and side by side from `md`, with the
+image on `imageSide` (`'left'` or `'right'`). The kicker and the section
+heading sit at the top of the text column, so in `PageBlocks` this block draws
+the section heading itself: its renderer receives `headingId` (the
+`aria-labelledby` target) and the section's own `headingLevel`. `html` is the
+section's rich text, derived by base-api on save; it is sanitised here and its
+headings nest below the heading.
+
+```tsx
+import { ImageTextSplit } from '@reblu/site-blocks'
+
+<ImageTextSplit
+  imageUrl={block.data.imageUrl}
+  alt={block.data.alt}
+  imageSide={block.data.imageSide}
+  mobileOrder={block.data.mobileOrder}
+  html={block.data.html}
+  kicker={block.data.kicker}
+  heading={block.heading}
+  headingLevel={2}
+/>
+```
+
+The legacy `sections[]` layouts `TEXT_IMAGE` / `IMAGE_TEXT` are unchanged.
+
 ### `FaqAccordion`
 
 Native `<details>`/`<summary>` — opens and closes with no JavaScript, keyboard