@riverbankcms/sdk 0.139.0 → 0.140.0

package/dist/server/theme-bridge.mjs

@@ -1634,6 +1634,55 @@ function interpolateHex(startHex, endHex, position) {
 	const channel = (from, to) => Math.round(from + (to - from) * position).toString(16).padStart(2, "0");
 	return `#${channel(start.r, end.r)}${channel(start.g, end.g)}${channel(start.b, end.b)}`;
 }
+//#endregion
+//#region ../theme-core/src/utils/colorStyles.ts
+const COLOR_VAR_PREFIX = "--tb-";
+function parseToken(source) {
+	const parts = parseColorTokenParts(source);
+	if (parts.kind === "raw") return {
+		token: source,
+		raw: parts.value
+	};
+	if (parts.kind === "invalid") return { token: source };
+	return {
+		token: parts.token,
+		opacityPercent: parts.opacityPercent === null ? void 0 : parts.opacityPercent
+	};
+}
+/**
+* Converts a theme color token to a CSS rgb value.
+* This is the primary function for applying theme colors to CSS properties.
+*
+* @param token - Theme color token (semantic, with opacity, or raw)
+* @returns CSS color value (rgb with optional alpha, or raw CSS value)
+*
+* @example
+* rgbColorValue('primary') // => 'rgb(var(--tb-primary))'
+* rgbColorValue('surface/95') // => 'rgb(var(--tb-surface) / 0.95)'
+* rgbColorValue('raw:transparent') // => 'transparent'
+*/
+function rgbColorValue(token) {
+	const { token: baseToken, opacityPercent, raw } = parseToken(token);
+	if (raw) return raw;
+	const cssVar = `${COLOR_VAR_PREFIX}${baseToken}`;
+	if (opacityPercent === void 0) return `rgb(var(${cssVar}))`;
+	return `rgb(var(${cssVar}) / ${opacityPercent / 100})`;
+}
+/**
+* Converts a theme color token to a CSS variable reference.
+* Note: This returns the base variable without rgb() wrapper, ignoring opacity.
+*
+* @param token - Theme color token
+* @returns CSS variable reference
+*
+* @example
+* cssVarValue('primary') // => 'var(--tb-primary)'
+* cssVarValue('surface/95') // => 'var(--tb-surface)' (opacity ignored)
+*/
+function cssVarValue(token) {
+	const { token: baseToken } = parseToken(token);
+	return `var(${COLOR_VAR_PREFIX}${baseToken})`;
+}
 shadeBackgroundEffect({
 	id: "darken-background",
 	name: "Darken on Hover",
@@ -1688,55 +1737,6 @@ function shadeBackgroundEffect(config) {
 	};
 }
 //#endregion
-//#region ../theme-core/src/utils/colorStyles.ts
-const COLOR_VAR_PREFIX = "--tb-";
-function parseToken(source) {
-	const parts = parseColorTokenParts(source);
-	if (parts.kind === "raw") return {
-		token: source,
-		raw: parts.value
-	};
-	if (parts.kind === "invalid") return { token: source };
-	return {
-		token: parts.token,
-		opacityPercent: parts.opacityPercent === null ? void 0 : parts.opacityPercent
-	};
-}
-/**
-* Converts a theme color token to a CSS rgb value.
-* This is the primary function for applying theme colors to CSS properties.
-*
-* @param token - Theme color token (semantic, with opacity, or raw)
-* @returns CSS color value (rgb with optional alpha, or raw CSS value)
-*
-* @example
-* rgbColorValue('primary') // => 'rgb(var(--tb-primary))'
-* rgbColorValue('surface/95') // => 'rgb(var(--tb-surface) / 0.95)'
-* rgbColorValue('raw:transparent') // => 'transparent'
-*/
-function rgbColorValue(token) {
-	const { token: baseToken, opacityPercent, raw } = parseToken(token);
-	if (raw) return raw;
-	const cssVar = `${COLOR_VAR_PREFIX}${baseToken}`;
-	if (opacityPercent === void 0) return `rgb(var(${cssVar}))`;
-	return `rgb(var(${cssVar}) / ${opacityPercent / 100})`;
-}
-/**
-* Converts a theme color token to a CSS variable reference.
-* Note: This returns the base variable without rgb() wrapper, ignoring opacity.
-*
-* @param token - Theme color token
-* @returns CSS variable reference
-*
-* @example
-* cssVarValue('primary') // => 'var(--tb-primary)'
-* cssVarValue('surface/95') // => 'var(--tb-surface)' (opacity ignored)
-*/
-function cssVarValue(token) {
-	const { token: baseToken } = parseToken(token);
-	return `var(${COLOR_VAR_PREFIX}${baseToken})`;
-}
-//#endregion
 //#region ../theme-core/src/utils/tokenOrColor.ts
 /**
 * Runtime color-reference fields intentionally accept any string, including
@@ -5076,8 +5076,14 @@ const headerInteractionPillPaletteValues = [
 	"accent"
 ];
 /**
-* "No pill": the nav link keeps whatever hover treatment its recipe compiled,
-* and the palette step writes nothing at all (#1318 Phase 4c decision 2).
+* "No pill": a colour change on hover rather than a filled background.
+*
+* The palette step writes nothing (#1318 Phase 4c decision 2), but on a
+* foreground-adaptive style that is not the end of the story: the hover colour
+* is derived from the resolved opening foreground at render time, paired with
+* the resting colour, so `quiet` resolves to a definite colour rather than to
+* whatever brand token the recipe happened to name. See
+* `applyOpeningForeground`.
 *
 * It exists because "a colour change on hover, no filled background" was not
 * expressible in the vocabulary, and it is what
@@ -10921,6 +10927,132 @@ ${root} .step-connector {
 	return cssBlocks.join("\n\n");
 }
 //#endregion
+//#region ../theme-core/src/typography/generateTypographyCss.ts
+function globalHeadingColorFallback(level) {
+	return `var(--hc-h${level}, var(--hc-heading, ${DEFAULT_SURFACE_TEXT_COLOR}))`;
+}
+/**
+* Generate typography CSS for heading elements.
+*
+* Creates scoped CSS that:
+* - Applies font-size, font-weight, letter-spacing, line-height to h1-h6
+* - Uses clamp() for fluid responsive sizing
+* - Provides variant classes (.heading-display, .heading-compact)
+*
+* Selectors use :where() for zero specificity, allowing site styles to override easily.
+*/
+function generateTypographyCss({ themeId }) {
+	const root = `:where([data-theme-scope="${themeId}"])`;
+	const cssBlocks = [];
+	cssBlocks.push(`/* Base heading styles */
+${root} :where(h1, h2, h3, h4, h5, h6) {
+  font-family: var(--font-heading);
+  font-style: var(--fi-heading, normal);
+  text-transform: var(--tt-heading, none);
+  font-variant: var(--fv-heading, normal);
+  margin: 0;
+}`);
+	cssBlocks.push(`/* Heading level styles with fluid typography */
+${root} :where(h1) {
+  font-size: var(--fs-h1-fluid, var(--fs-h1));
+  font-weight: var(--fw-h1, var(--font-weight-heading));
+  font-style: var(--fi-h1, var(--fi-heading, normal));
+  letter-spacing: var(--ls-h1, var(--ls-heading));
+  line-height: var(--lh-h1, var(--lh-heading));
+  color: ${surfaceForegroundValue("heading", globalHeadingColorFallback(1))};
+}
+
+${root} :where(h2) {
+  font-size: var(--fs-h2-fluid, var(--fs-h2));
+  font-weight: var(--fw-h2, var(--font-weight-heading));
+  font-style: var(--fi-h2, var(--fi-heading, normal));
+  letter-spacing: var(--ls-h2, var(--ls-heading));
+  line-height: var(--lh-h2, var(--lh-heading));
+  color: ${surfaceForegroundValue("heading", globalHeadingColorFallback(2))};
+}
+
+${root} :where(h3) {
+  font-size: var(--fs-h3-fluid, var(--fs-h3));
+  font-weight: var(--fw-h3, var(--font-weight-heading));
+  font-style: var(--fi-h3, var(--fi-heading, normal));
+  letter-spacing: var(--ls-h3, var(--ls-heading));
+  line-height: var(--lh-h3, var(--lh-heading));
+  color: ${surfaceForegroundValue("heading", globalHeadingColorFallback(3))};
+}
+
+${root} :where(h4) {
+  font-size: var(--fs-h4-fluid, var(--fs-h4, var(--fs-h3)));
+  font-weight: var(--fw-h4, var(--font-weight-heading));
+  font-style: var(--fi-h4, var(--fi-heading, normal));
+  letter-spacing: var(--ls-h4, var(--ls-heading));
+  line-height: var(--lh-h4, var(--lh-heading));
+  color: ${surfaceForegroundValue("heading", globalHeadingColorFallback(4))};
+}
+
+${root} :where(h5) {
+  font-size: var(--fs-h5-fluid, var(--fs-h5, var(--fs-body)));
+  font-weight: var(--fw-h5, var(--font-weight-heading));
+  font-style: var(--fi-h5, var(--fi-heading, normal));
+  letter-spacing: var(--ls-h5, var(--ls-heading));
+  line-height: var(--lh-h5, var(--lh-heading));
+  color: ${surfaceForegroundValue("heading", globalHeadingColorFallback(5))};
+}
+
+${root} :where(h6) {
+  font-size: var(--fs-h6-fluid, var(--fs-h6, var(--fs-body)));
+  font-weight: var(--fw-h6, var(--font-weight-heading));
+  font-style: var(--fi-h6, var(--fi-heading, normal));
+  letter-spacing: var(--ls-h6, var(--ls-heading));
+  line-height: var(--lh-h6, var(--lh-heading));
+  color: ${surfaceForegroundValue("heading", globalHeadingColorFallback(6))};
+}`);
+	cssBlocks.push(`/* Display variant for hero/splash headings */
+${root} :where(.heading-display) {
+  font-size: var(--fs-display-fluid, var(--fs-display));
+}
+
+${root} :where(h1.heading-display) {
+  font-size: var(--fs-h1-display-fluid, var(--fs-h1-display, calc(var(--fs-h1) * 1.5)));
+}
+
+${root} :where(h2.heading-display) {
+  font-size: var(--fs-h2-display-fluid, var(--fs-h2-display, calc(var(--fs-h2) * 1.35)));
+}`);
+	cssBlocks.push(`/* Compact variant for cards/sidebars */
+${root} :where(.heading-compact) {
+  font-size: var(--fs-compact);
+}
+
+${root} :where(h1.heading-compact) {
+  font-size: calc(var(--fs-h1) * 0.75);
+}
+
+${root} :where(h2.heading-compact) {
+  font-size: calc(var(--fs-h2) * 0.8);
+}
+
+${root} :where(h3.heading-compact) {
+  font-size: calc(var(--fs-h3) * 0.85);
+}`);
+	cssBlocks.push(`/* Body text base styles */
+${root} {
+  font-family: var(--font-body);
+  font-weight: var(--font-weight-body);
+  font-size: var(--fs-body);
+  letter-spacing: var(--ls-body);
+  line-height: var(--lh-body);
+}
+
+${root} :where(p, li, td, th, label, span) {
+  font-family: var(--font-body);
+  font-weight: var(--font-weight-body);
+  letter-spacing: var(--ls-body);
+  font-size: inherit;
+  line-height: inherit;
+}`);
+	return `@layer rb-theme {\n${cssBlocks.join("\n\n")}\n}`;
+}
+//#endregion
 //#region ../theme-core/src/blocks/vars/event-registration.ts
 /**
 * Generate CSS variables for the event-registration block.
@@ -21382,7 +21514,9 @@ const containerResponsiveThemeCss = `/*
   text-align: left;
 }
 
-:where(.theme-scope) :where([data-block="customer-portal"]) .cp-login__subtitle {
+:where(.theme-scope)
+  :where([data-block="customer-portal"])
+  .cp-login__subtitle {
   color: var(--cp-muted);
   font-size: 0.9375rem;
   text-align: left;
@@ -21409,7 +21543,9 @@ const containerResponsiveThemeCss = `/*
   text-align: left;
 }
 
-:where(.theme-scope) :where([data-block="customer-portal"]) .cp-login__reset-link {
+:where(.theme-scope)
+  :where([data-block="customer-portal"])
+  .cp-login__reset-link {
   appearance: none;
   background: none;
   border: 0;
@@ -21423,11 +21559,15 @@ const containerResponsiveThemeCss = `/*
   text-underline-offset: 0.15em;
 }
 
-:where(.theme-scope) :where([data-block="customer-portal"]) .cp-login__reset-link:hover {
+:where(.theme-scope)
+  :where([data-block="customer-portal"])
+  .cp-login__reset-link:hover {
   color: var(--cp-text);
 }
 
-:where(.theme-scope) :where([data-block="customer-portal"]) .cp-login__reset-link:focus-visible {
+:where(.theme-scope)
+  :where([data-block="customer-portal"])
+  .cp-login__reset-link:focus-visible {
   outline: 2px solid currentColor;
   outline-offset: 3px;
 }
@@ -21472,7 +21612,9 @@ const containerResponsiveThemeCss = `/*
   border-bottom: none;
 }
 
-:where(.theme-scope) :where([data-block="customer-portal"]) .cp-header__welcome {
+:where(.theme-scope)
+  :where([data-block="customer-portal"])
+  .cp-header__welcome {
   font-size: 1.125rem;
   font-weight: 500;
 }
@@ -21488,8 +21630,14 @@ const containerResponsiveThemeCss = `/*
 }
 
 @keyframes cp-fade-in {
-  from { opacity: 0; transform: translateY(4px); }
-  to { opacity: 1; transform: translateY(0); }
+  from {
+    opacity: 0;
+    transform: translateY(4px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
 }
 
 /* Empty state */
@@ -21578,6 +21726,77 @@ const containerResponsiveThemeCss = `/*
   margin-top: 1rem;
 }
 
+/* Event waitlists */
+:where(.theme-scope) :where([data-block="customer-portal"]) .cp-waitlist-list {
+  display: grid;
+  gap: 1rem;
+}
+
+:where(.theme-scope)
+  :where([data-block="customer-portal"])
+  .cp-waitlists
+  > .cp-alert {
+  margin-bottom: 1rem;
+}
+
+:where(.theme-scope) :where([data-block="customer-portal"]) .cp-waitlist-card {
+  transition:
+    border-color 180ms ease,
+    box-shadow 180ms ease;
+}
+
+:where(.theme-scope)
+  :where([data-block="customer-portal"])
+  .cp-waitlist-card--focused {
+  border-color: var(--cp-primary);
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--cp-primary) 22%, transparent);
+}
+
+:where(.theme-scope)
+  :where([data-block="customer-portal"])
+  .cp-waitlist-card__summary,
+:where(.theme-scope)
+  :where([data-block="customer-portal"])
+  .cp-waitlist-card__position {
+  font-weight: 600;
+}
+
+:where(.theme-scope)
+  :where([data-block="customer-portal"])
+  .cp-waitlist-card
+  .cp-card-body
+  p {
+  margin: 0.4rem 0;
+}
+
+@container rb-site (max-width: 640px) {
+@scope ([data-rb-responsive-mode="container"]) to (:scope [data-rb-responsive-mode]) {
+:where(.theme-scope)
+    :where([data-block="customer-portal"])
+    .cp-waitlist-card
+    .cp-card-header {
+    flex-direction: column-reverse;
+  }
+
+  :where(.theme-scope)
+    :where([data-block="customer-portal"])
+    .cp-waitlist-card
+    .cp-card-actions {
+    align-items: stretch;
+    flex-direction: column;
+  }
+
+  :where(.theme-scope)
+    :where([data-block="customer-portal"])
+    .cp-waitlist-card
+    .cp-card-actions
+    > * {
+    justify-content: center;
+    text-align: center;
+  }
+}
+}
+
 /* Badge */
 :where(.theme-scope) :where([data-block="customer-portal"]) .cp-badge {
   display: inline-flex;
@@ -21714,11 +21933,18 @@ const containerResponsiveThemeCss = `/*
   background: rgba(var(--tb-border), 0.2);
 }
 
-:where(.theme-scope) :where([data-block="customer-portal"]) .cp-table tbody tr:last-child td {
+:where(.theme-scope)
+  :where([data-block="customer-portal"])
+  .cp-table
+  tbody
+  tr:last-child
+  td {
   border-bottom: none;
 }
 
-:where(.theme-scope) :where([data-block="customer-portal"]) :is(.cp-row--past, .cp-row--muted) {
+:where(.theme-scope)
+  :where([data-block="customer-portal"])
+  :is(.cp-row--past, .cp-row--muted) {
   opacity: 0.65;
 }
 
@@ -21731,7 +21957,9 @@ const containerResponsiveThemeCss = `/*
   line-height: 1.2;
 }
 
-:where(.theme-scope) :where([data-block="customer-portal"]) .cp-row-title__badges {
+:where(.theme-scope)
+  :where([data-block="customer-portal"])
+  .cp-row-title__badges {
   margin-left: auto;
   display: flex;
   flex-wrap: wrap;
@@ -21739,7 +21967,9 @@ const containerResponsiveThemeCss = `/*
   gap: 0.375rem;
 }
 
-:where(.theme-scope) :where([data-block="customer-portal"]) .cp-row-title__text {
+:where(.theme-scope)
+  :where([data-block="customer-portal"])
+  .cp-row-title__text {
   min-width: 0;
 }
 
@@ -21759,12 +21989,16 @@ const containerResponsiveThemeCss = `/*
   line-height: 1.35;
 }
 
-:where(.theme-scope) :where([data-block="customer-portal"]) .cp-row-note--success {
+:where(.theme-scope)
+  :where([data-block="customer-portal"])
+  .cp-row-note--success {
   border-left-color: rgb(var(--tb-success));
   color: rgb(var(--tb-success));
 }
 
-:where(.theme-scope) :where([data-block="customer-portal"]) .cp-row-note--error {
+:where(.theme-scope)
+  :where([data-block="customer-portal"])
+  .cp-row-note--error {
   border-left-color: rgb(var(--tb-destructive));
   color: rgb(var(--tb-destructive));
 }
@@ -21783,16 +22017,23 @@ const containerResponsiveThemeCss = `/*
   white-space: nowrap;
 }
 
-:where(.theme-scope) :where([data-block="customer-portal"]) .cp-col-actions .btn-sm {
+:where(.theme-scope)
+  :where([data-block="customer-portal"])
+  .cp-col-actions
+  .btn-sm {
   white-space: nowrap;
 }
 
-:where(.theme-scope) :where([data-block="customer-portal"]) .cp-row-title__link {
+:where(.theme-scope)
+  :where([data-block="customer-portal"])
+  .cp-row-title__link {
   color: inherit;
   text-decoration: none;
 }
 
-:where(.theme-scope) :where([data-block="customer-portal"]) .cp-row-title__link:hover {
+:where(.theme-scope)
+  :where([data-block="customer-portal"])
+  .cp-row-title__link:hover {
   text-decoration: underline;
   text-decoration-thickness: 2px;
   text-underline-offset: 2px;
@@ -21814,7 +22055,9 @@ const containerResponsiveThemeCss = `/*
 }
 
 /* Profile actions */
-:where(.theme-scope) :where([data-block="customer-portal"]) .cp-profile__actions {
+:where(.theme-scope)
+  :where([data-block="customer-portal"])
+  .cp-profile__actions {
   display: flex;
   gap: 0.75rem;
   margin-top: 1rem;
@@ -21881,28 +22124,39 @@ const containerResponsiveThemeCss = `/*
   gap: 0.375rem;
 }
 
-:where(.theme-scope) :where([data-block="customer-portal"]) .cp-guest-edit-row__index {
+:where(.theme-scope)
+  :where([data-block="customer-portal"])
+  .cp-guest-edit-row__index {
   font-size: 0.75rem;
   font-weight: 500;
   color: var(--cp-muted);
 }
 
-:where(.theme-scope) :where([data-block="customer-portal"]) .cp-guest-edit-row__fields {
+:where(.theme-scope)
+  :where([data-block="customer-portal"])
+  .cp-guest-edit-row__fields {
   display: flex;
   gap: 0.5rem;
 }
 
-:where(.theme-scope) :where([data-block="customer-portal"]) .cp-guest-edit-row__fields input {
+:where(.theme-scope)
+  :where([data-block="customer-portal"])
+  .cp-guest-edit-row__fields
+  input {
   flex: 1;
   min-width: 0;
 }
 
-:where(.theme-scope) :where([data-block="customer-portal"]) .cp-guest-edit-row__error {
+:where(.theme-scope)
+  :where([data-block="customer-portal"])
+  .cp-guest-edit-row__error {
   font-size: 0.75rem;
   color: var(--cp-error);
 }
 
-:where(.theme-scope) :where([data-block="customer-portal"]) .cp-guests__actions {
+:where(.theme-scope)
+  :where([data-block="customer-portal"])
+  .cp-guests__actions {
   display: flex;
   gap: 0.5rem;
   margin-top: 0.5rem;
@@ -21916,13 +22170,18 @@ const containerResponsiveThemeCss = `/*
 }
 
 /* In the actions modal, tiles sit on a surface modal, so use "background" for contrast. */
-:where(.theme-scope) :where([data-block="customer-portal"]) .cp-actions-list :where(.rb-tile) {
+:where(.theme-scope)
+  :where([data-block="customer-portal"])
+  .cp-actions-list
+  :where(.rb-tile) {
   --rb-event-tile-bg: rgb(var(--tb-background));
   --rb-event-tile-border: rgb(var(--tb-border));
 }
 
 /* Actions trigger: icon-only kebab button */
-:where(.theme-scope) :where([data-block="customer-portal"]) .cp-actions-trigger.btn-sm {
+:where(.theme-scope)
+  :where([data-block="customer-portal"])
+  .cp-actions-trigger.btn-sm {
   padding: 0.35rem !important;
   line-height: 1 !important;
   min-width: 32px;
@@ -21946,17 +22205,24 @@ const containerResponsiveThemeCss = `/*
   gap: 0.25rem;
 }
 
-:where(.theme-scope) :where([data-block="customer-portal"]) .cp-action-tile__title {
+:where(.theme-scope)
+  :where([data-block="customer-portal"])
+  .cp-action-tile__title {
   font-weight: 600;
   font-size: 0.9375rem;
 }
 
-:where(.theme-scope) :where([data-block="customer-portal"]) .cp-action-tile__desc {
+:where(.theme-scope)
+  :where([data-block="customer-portal"])
+  .cp-action-tile__desc {
   font-size: 0.875rem;
   line-height: 1.35;
 }
 
-:where(.theme-scope) :where([data-block="customer-portal"]) .cp-action-tile--danger .cp-action-tile__title {
+:where(.theme-scope)
+  :where([data-block="customer-portal"])
+  .cp-action-tile--danger
+  .cp-action-tile__title {
   color: rgb(var(--tb-destructive));
 }
 
@@ -21978,7 +22244,9 @@ const containerResponsiveThemeCss = `/*
   text-decoration: underline;
 }
 
-:where(.theme-scope) :where([data-block="customer-portal"]) .cp-btn--link:hover {
+:where(.theme-scope)
+  :where([data-block="customer-portal"])
+  .cp-btn--link:hover {
   color: var(--cp-primary-hover);
 }
 
@@ -22017,34 +22285,48 @@ const containerResponsiveThemeCss = `/*
   margin-top: 0.75rem;
 }
 
-:where(.theme-scope) :where([data-block="customer-portal"]) .cp-cancel-confirm__title {
+:where(.theme-scope)
+  :where([data-block="customer-portal"])
+  .cp-cancel-confirm__title {
   font-weight: 600;
   margin-bottom: 0.5rem;
 }
 
-:where(.theme-scope) :where([data-block="customer-portal"]) .cp-cancel-confirm__message {
+:where(.theme-scope)
+  :where([data-block="customer-portal"])
+  .cp-cancel-confirm__message {
   margin-bottom: 0.25rem;
 }
 
-:where(.theme-scope) :where([data-block="customer-portal"]) .cp-cancel-confirm__warning {
+:where(.theme-scope)
+  :where([data-block="customer-portal"])
+  .cp-cancel-confirm__warning {
   margin-bottom: 0.75rem;
 }
 
-:where(.theme-scope) :where([data-block="customer-portal"]) .cp-cancel-confirm__actions {
+:where(.theme-scope)
+  :where([data-block="customer-portal"])
+  .cp-cancel-confirm__actions {
   display: flex;
   gap: 0.75rem;
 }
 
 /* Membership actions */
-:where(.theme-scope) :where([data-block="customer-portal"]) .cp-membership-actions {
+:where(.theme-scope)
+  :where([data-block="customer-portal"])
+  .cp-membership-actions {
   margin-top: 0.75rem;
 }
 
-:where(.theme-scope) :where([data-block="customer-portal"]) .cp-section-actions {
+:where(.theme-scope)
+  :where([data-block="customer-portal"])
+  .cp-section-actions {
   margin-top: 1rem;
 }
 
-:where(.theme-scope) :where([data-block="customer-portal"]) .cp-card-subtitle--spaced {
+:where(.theme-scope)
+  :where([data-block="customer-portal"])
+  .cp-card-subtitle--spaced {
   margin-top: 0.75rem;
 }
 
@@ -22068,9 +22350,18 @@ const containerResponsiveThemeCss = `/*
     display: none;
   }
 
-  :where(.theme-scope) :where([data-block="customer-portal"]) .cp-table :is(th, td).cp-col-guests,
-  :where(.theme-scope) :where([data-block="customer-portal"]) .cp-table :is(th, td).cp-col-tickets,
-  :where(.theme-scope) :where([data-block="customer-portal"]) .cp-table :is(th, td).cp-col-actions {
+  :where(.theme-scope)
+    :where([data-block="customer-portal"])
+    .cp-table
+    :is(th, td).cp-col-guests,
+  :where(.theme-scope)
+    :where([data-block="customer-portal"])
+    .cp-table
+    :is(th, td).cp-col-tickets,
+  :where(.theme-scope)
+    :where([data-block="customer-portal"])
+    .cp-table
+    :is(th, td).cp-col-actions {
     display: none;
   }
 
@@ -22079,24 +22370,34 @@ const containerResponsiveThemeCss = `/*
   }
 
   /* Make the cell a positioning context for the kebab */
-  :where(.theme-scope) :where([data-block="customer-portal"]) .cp-row > td:first-child {
+  :where(.theme-scope)
+    :where([data-block="customer-portal"])
+    .cp-row
+    > td:first-child {
     position: relative;
     padding-right: 2.5rem;
   }
 
   /* Position kebab in top-right of the cell */
-  :where(.theme-scope) :where([data-block="customer-portal"]) .cp-row-mobile-actions {
+  :where(.theme-scope)
+    :where([data-block="customer-portal"])
+    .cp-row-mobile-actions {
     position: absolute;
     top: 0.5rem;
     right: 0.5rem;
     margin-top: 0;
   }
 
-  :where(.theme-scope) :where([data-block="customer-portal"]) .cp-row-mobile-actions .btn-sm {
+  :where(.theme-scope)
+    :where([data-block="customer-portal"])
+    .cp-row-mobile-actions
+    .btn-sm {
     width: auto;
   }
 
-  :where(.theme-scope) :where([data-block="customer-portal"]) .cp-profile__edit {
+  :where(.theme-scope)
+    :where([data-block="customer-portal"])
+    .cp-profile__edit {
     align-self: stretch;
   }
 }
@@ -22544,6 +22845,30 @@ const containerResponsiveThemeCss = `/*
   gap: 0.25rem;
 }
 
+/* Topic choices (visitor picks what to hear about). Same treatment as the
+   form block's .fb-fieldset / .fb-inline, defined here because the newsletter
+   form also renders inside contact-newsletter and the site footer. */
+:where(.theme-scope) .newsletter-topics {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  border: none;
+  padding: 0;
+  margin: 0;
+  min-width: 0;
+}
+
+:where(.theme-scope) .newsletter-topics > legend {
+  padding: 0;
+  margin-bottom: 0.25rem;
+}
+
+:where(.theme-scope) .newsletter-topic-choice {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
 /* Required indicator */
 :where(.theme-scope) .newsletter-required {
   color: rgb(var(--tb-primary));
@@ -22593,6 +22918,10 @@ const containerResponsiveThemeCss = `/*
   flex-shrink: 0;
 }
 
+:where(.theme-scope) .newsletter-inline .newsletter-topics {
+  flex-basis: 100%;
+}
+
 /* Mobile fallback for inline variant */
 @container rb-site (max-width: 640px) {
 @scope ([data-rb-responsive-mode="container"]) to (:scope [data-rb-responsive-mode]) {
@@ -25199,19 +25528,21 @@ function normalizeTokenValue(value) {
 	if (trimmedValue.startsWith("#")) return hexToRgbChannels(trimmedValue);
 	return trimmedValue;
 }
-function buildThemeBridgeRuntime(config) {
+function buildThemeRuntimeFromBridge(config) {
 	validateThemeBridgeConfig(config);
+	return buildBridgeCssVars(config);
+}
+function buildThemeBridgeRuntime(config) {
+	const cssVars = buildThemeRuntimeFromBridge(config);
 	const themeId = "sdk";
 	const corners = config.corners ?? "rounded";
-	const shadows = config.shadows ?? "medium";
-	const cssVars = buildBridgeCssVars(config);
 	const generatorTheme = buildBridgeGeneratorTheme(corners);
 	return {
 		themeId,
 		cssVars,
-		buttonCss: shouldGenerateComponent(config.components?.buttons) ? generateButtonsCss(config, corners, shadows) : void 0,
-		cardCss: generateCardsCss(config, corners, shadows),
-		inputCss: shouldGenerateComponent(config.components?.inputs) ? generateInputsCss(corners, shadows) : void 0,
+		buttonCss: shouldGenerateComponent(config.components?.buttons) ? generateButtonsCss(config, corners, config.shadows ?? "medium") : void 0,
+		cardCss: generateCardsCss(config, corners, config.shadows ?? "medium"),
+		inputCss: shouldGenerateComponent(config.components?.inputs) ? generateInputsCss(corners, config.shadows ?? "medium") : void 0,
 		statusCss: generateStatusCss({
 			themeId,
 			theme: generatorTheme
@@ -25220,6 +25551,7 @@ function buildThemeBridgeRuntime(config) {
 			themeId,
 			theme: generatorTheme
 		}),
+		typographyCss: generateTypographyCss({ themeId }),
 		blockVarsCss: generateAllBlockVarsCss({
 			themeId,
 			theme: generatorTheme
@@ -25478,7 +25810,7 @@ function shouldGenerateComponent(value) {
 function generateButtonsCss(config, corners, shadows) {
 	let variants = getDefaultButtonVariants();
 	const buttonConfig = config.components?.buttons;
-	if (buttonConfig !== void 0 && buttonConfig !== true && buttonConfig !== false && buttonConfig.variants) {
+	if (typeof buttonConfig === "object" && buttonConfig.variants) {
 		const requestedIds = new Set(buttonConfig.variants);
 		variants = variants.filter((variant) => requestedIds.has(variant.id));
 	}
@@ -25666,6 +25998,7 @@ function ThemeBridgeProvider({ config, children, className = "" }) {
 		inputCss: runtime.inputCss,
 		statusCss: runtime.statusCss,
 		progressCss: runtime.progressCss,
+		typographyCss: runtime.typographyCss,
 		blockVarsCss: runtime.blockVarsCss,
 		customCss: runtime.customCss,
 		children