@riverbankcms/sdk 0.149.0 → 0.150.0

package/dist/styles/index.css

@@ -3454,140 +3454,17 @@
   border: 1px solid var(--rb-reg-border, rgb(var(--tb-border, 226 232 240)));
   padding: clamp(1rem, 2vw, 1.5rem);
   background: var(--rb-reg-surface-bg, rgb(var(--tb-surface, 248 250 252)));
-  color: var(--rb-reg-on-surface, rgb(var(--tb-onSurface, var(--tb-text, 15 23 42))));
-  --rb-surface-text-color: var(--rb-reg-on-surface, rgb(var(--tb-onSurface, var(--tb-text, 15 23 42))));
-  --rb-surface-heading-color: var(--rb-reg-on-surface, rgb(var(--tb-onSurface, var(--tb-text, 15 23 42))));
-  --rb-surface-link-color: var(--rb-reg-on-surface, rgb(var(--tb-onSurface, var(--tb-text, 15 23 42))));
-  --rb-surface-link-hover-color: var(--rb-reg-on-surface, rgb(var(--tb-onSurface, var(--tb-text, 15 23 42))));
-  --rb-surface-link-hover-decoration: underline;
-  --rb-surface-supporting-color: var(--rb-reg-on-surface-muted, var(--rb-reg-on-surface, rgb(var(--tb-onSurface, var(--tb-text, 15 23 42)))));
+  /* The panel paints its own surface, so it owns its foreground and its
+   * button context. Both are published from the theme by the opaque-panel
+   * registry (theme-core/src/blocks/opaquePanels.ts): an enclosing brand band
+   * would otherwise hand its light text and band-resolved buttons (on Anna's
+   * therapy page, a white-on-white Continue) to this light panel. */
   transition: border-color var(--rb-block-transition, 150ms) ease;
   width: 100%;
   max-width: 800px;
   margin-inline: 0;
 }
 
-/* The panel paints its own opaque surface, so it also has to break the button
- * colour contract it inherits. An enclosing section that sits on a brand band
- * publishes `--rb-action-*` variables resolved against *that* band — on Anna's
- * therapy page a ghost primary: transparent background, white label. Those
- * variables inherit, so without this reset a Continue button inside the light
- * form panel renders white-on-white and only appears on hover.
- *
- * Resetting to `initial` sends each button back to the generated fallback in
- * its own rule (`var(--rb-action-…, rgb(var(--tb-primary)))`), which is the
- * theme's standard button resolved against a normal surface — correct here,
- * because this panel *is* a normal surface.
- *
- * Mirrors `contextualButtonSurfaceResetStyles()` in theme-core/buttons; the
- * pairing is pinned by registration-surface-action-reset.test.ts. */
-:where(.theme-scope) :where([data-block="event-registration"], [data-block="appointment-booking"]) .rb-reg-surface {
-  --rb-action-primary-base-background-color: initial;
-  --rb-action-primary-base-background-image: initial;
-  --rb-action-primary-base-color: initial;
-  --rb-action-primary-hover-background-color: initial;
-  --rb-action-primary-hover-background-image: initial;
-  --rb-action-primary-hover-color: initial;
-  --rb-action-primary-focus-background-color: initial;
-  --rb-action-primary-focus-background-image: initial;
-  --rb-action-primary-focus-color: initial;
-  --rb-action-primary-active-background-color: initial;
-  --rb-action-primary-active-background-image: initial;
-  --rb-action-primary-active-color: initial;
-  --rb-action-primary-disabled-background-color: initial;
-  --rb-action-primary-disabled-background-image: initial;
-  --rb-action-primary-disabled-color: initial;
-  --rb-action-primary-base-outline: initial;
-  --rb-action-primary-base-outline-offset: initial;
-  --rb-action-primary-focus-outline: initial;
-  --rb-action-primary-focus-outline-offset: initial;
-  --rb-action-primary-focus-box-shadow: initial;
-
-  --rb-action-secondary-base-background-color: initial;
-  --rb-action-secondary-base-background-image: initial;
-  --rb-action-secondary-base-color: initial;
-  --rb-action-secondary-hover-background-color: initial;
-  --rb-action-secondary-hover-background-image: initial;
-  --rb-action-secondary-hover-color: initial;
-  --rb-action-secondary-focus-background-color: initial;
-  --rb-action-secondary-focus-background-image: initial;
-  --rb-action-secondary-focus-color: initial;
-  --rb-action-secondary-active-background-color: initial;
-  --rb-action-secondary-active-background-image: initial;
-  --rb-action-secondary-active-color: initial;
-  --rb-action-secondary-disabled-background-color: initial;
-  --rb-action-secondary-disabled-background-image: initial;
-  --rb-action-secondary-disabled-color: initial;
-  --rb-action-secondary-base-outline: initial;
-  --rb-action-secondary-base-outline-offset: initial;
-  --rb-action-secondary-focus-outline: initial;
-  --rb-action-secondary-focus-outline-offset: initial;
-  --rb-action-secondary-focus-box-shadow: initial;
-
-  --rb-action-outline-base-background-color: initial;
-  --rb-action-outline-base-background-image: initial;
-  --rb-action-outline-base-color: initial;
-  --rb-action-outline-hover-background-color: initial;
-  --rb-action-outline-hover-background-image: initial;
-  --rb-action-outline-hover-color: initial;
-  --rb-action-outline-focus-background-color: initial;
-  --rb-action-outline-focus-background-image: initial;
-  --rb-action-outline-focus-color: initial;
-  --rb-action-outline-active-background-color: initial;
-  --rb-action-outline-active-background-image: initial;
-  --rb-action-outline-active-color: initial;
-  --rb-action-outline-disabled-background-color: initial;
-  --rb-action-outline-disabled-background-image: initial;
-  --rb-action-outline-disabled-color: initial;
-  --rb-action-outline-base-outline: initial;
-  --rb-action-outline-base-outline-offset: initial;
-  --rb-action-outline-focus-outline: initial;
-  --rb-action-outline-focus-outline-offset: initial;
-  --rb-action-outline-focus-box-shadow: initial;
-
-  --rb-action-ghost-base-background-color: initial;
-  --rb-action-ghost-base-background-image: initial;
-  --rb-action-ghost-base-color: initial;
-  --rb-action-ghost-hover-background-color: initial;
-  --rb-action-ghost-hover-background-image: initial;
-  --rb-action-ghost-hover-color: initial;
-  --rb-action-ghost-focus-background-color: initial;
-  --rb-action-ghost-focus-background-image: initial;
-  --rb-action-ghost-focus-color: initial;
-  --rb-action-ghost-active-background-color: initial;
-  --rb-action-ghost-active-background-image: initial;
-  --rb-action-ghost-active-color: initial;
-  --rb-action-ghost-disabled-background-color: initial;
-  --rb-action-ghost-disabled-background-image: initial;
-  --rb-action-ghost-disabled-color: initial;
-  --rb-action-ghost-base-outline: initial;
-  --rb-action-ghost-base-outline-offset: initial;
-  --rb-action-ghost-focus-outline: initial;
-  --rb-action-ghost-focus-outline-offset: initial;
-  --rb-action-ghost-focus-box-shadow: initial;
-
-  --rb-action-accent-base-background-color: initial;
-  --rb-action-accent-base-background-image: initial;
-  --rb-action-accent-base-color: initial;
-  --rb-action-accent-hover-background-color: initial;
-  --rb-action-accent-hover-background-image: initial;
-  --rb-action-accent-hover-color: initial;
-  --rb-action-accent-focus-background-color: initial;
-  --rb-action-accent-focus-background-image: initial;
-  --rb-action-accent-focus-color: initial;
-  --rb-action-accent-active-background-color: initial;
-  --rb-action-accent-active-background-image: initial;
-  --rb-action-accent-active-color: initial;
-  --rb-action-accent-disabled-background-color: initial;
-  --rb-action-accent-disabled-background-image: initial;
-  --rb-action-accent-disabled-color: initial;
-  --rb-action-accent-base-outline: initial;
-  --rb-action-accent-base-outline-offset: initial;
-  --rb-action-accent-focus-outline: initial;
-  --rb-action-accent-focus-outline-offset: initial;
-  --rb-action-accent-focus-box-shadow: initial;
-}
-
 /* Selectable option card */
 :where(.theme-scope) :where([data-block="event-registration"], [data-block="appointment-booking"]) .rb-option-card {
   position: relative;
@@ -3647,7 +3524,7 @@
 :where(.theme-scope) :where([data-block="event-registration"], [data-block="appointment-booking"]) .rb-option-check svg {
   width: 0.75rem;
   height: 0.75rem;
-  color: var(--rb-reg-check-text, rgb(var(--tb-primaryText, var(--tb-primaryForeground, 255 255 255))));
+  color: var(--rb-reg-check-text, rgb(var(--tb-onPrimary, var(--tb-primaryForeground, 255 255 255))));
 }
 
 /* Step indicator */
@@ -3687,12 +3564,12 @@
 
 :where(.theme-scope) :where([data-block="event-registration"], [data-block="appointment-booking"]) .rb-step-circle--active {
   background: var(--rb-reg-step-active, rgb(var(--tb-primary, 17 24 39)));
-  color: var(--rb-reg-step-text-active, rgb(var(--tb-primaryText, var(--tb-primaryForeground, 255 255 255))));
+  color: var(--rb-reg-step-text-active, rgb(var(--tb-onPrimary, var(--tb-primaryForeground, 255 255 255))));
 }
 
 :where(.theme-scope) :where([data-block="event-registration"], [data-block="appointment-booking"]) .rb-step-circle--completed {
   background: var(--rb-reg-step-completed, rgb(var(--tb-success, 22 163 74)));
-  color: var(--rb-reg-step-text-active, rgb(var(--tb-primaryText, var(--tb-primaryForeground, 255 255 255))));
+  color: var(--rb-reg-step-text-active, rgb(var(--tb-onPrimary, var(--tb-primaryForeground, 255 255 255))));
 }
 
 :where(.theme-scope) :where([data-block="event-registration"], [data-block="appointment-booking"]) .rb-step-check {
@@ -3950,7 +3827,7 @@
   justify-content: center;
   border-radius: calc(var(--rb-block-radius) * 0.6);
   background: rgb(var(--tb-primary));
-  color: rgb(var(--tb-primaryText, var(--tb-primaryForeground, 255 255 255)));
+  color: rgb(var(--tb-onPrimary, var(--tb-primaryForeground, 255 255 255)));
   padding: 0.625rem 1rem;
   font-size: 0.875rem;
   font-weight: 600;
@@ -5913,7 +5790,7 @@
 :where(.theme-scope) :where([data-block='event-registration']) .er-modal-btn {
   padding: 0.75rem 1.5rem;
   background: rgb(var(--tb-primary));
-  color: rgb(var(--tb-primary-foreground, 255 255 255));
+  color: rgb(var(--tb-onPrimary, 255 255 255));
   border: none;
   border-radius: var(--rb-block-radius);
   font-weight: 500;
@@ -5961,7 +5838,7 @@
   border: 1px solid var(--er-border);
   border-radius: var(--rb-block-radius);
   background: var(--er-event-card-bg);
-  color: var(--er-on-surface);
+  /* Foreground and button context: theme-core/src/blocks/opaquePanels.ts. */
 }
 
 :where(.theme-scope)
@@ -6112,7 +5989,7 @@
   min-height: 0;
   overflow: hidden;
   background: rgb(var(--tb-background));
-  color: var(--er-on-surface);
+  /* Foreground and button context: theme-core/src/blocks/opaquePanels.ts. */
 }
 
 :where(.theme-scope)
@@ -6878,7 +6755,7 @@
   .event-category-btn--active {
   background-color: rgb(var(--tb-primary));
   border-color: rgb(var(--tb-primary));
-  color: var(--ec-event-solid-text);
+  color: rgb(var(--tb-onPrimary));
 }
 
 :where(.theme-scope)
@@ -6945,7 +6822,7 @@
   opacity: 1;
   background-color: rgb(var(--tb-primary));
   border-color: rgb(var(--tb-primary));
-  color: rgb(var(--tb-primaryText, 255 255 255));
+  color: rgb(var(--tb-onPrimary, 255 255 255));
 }
 
 /* -----------------------------------------------------------------------------
@@ -7003,7 +6880,7 @@
   text-transform: uppercase;
   letter-spacing: 0.05em;
   background-color: rgb(var(--tb-primary));
-  color: rgb(var(--tb-primaryText, 255 255 255));
+  color: rgb(var(--tb-onPrimary, 255 255 255));
   border-radius: var(--rb-button-radius);
 }
 
@@ -7045,7 +6922,8 @@
   border: 1px solid var(--ec-border-subtle);
   border-radius: var(--rb-block-radius);
   text-decoration: none;
-  color: inherit;
+  /* Paints its own surface: its foreground and button context come from the
+   * opaque-panel registry (theme-core/src/blocks/opaquePanels.ts). */
   transition: all var(--rb-block-transition) ease;
 }
 
@@ -7377,7 +7255,7 @@
   .event-timetable-day-tab--active {
   background-color: rgb(var(--tb-primary));
   border-color: rgb(var(--tb-primary));
-  color: rgb(var(--tb-primaryText, 255 255 255));
+  color: rgb(var(--tb-onPrimary, 255 255 255));
 }
 
 :where(.theme-scope)
@@ -7443,7 +7321,7 @@
   padding: 0.125rem 0.375rem;
   border-radius: var(--rb-button-radius);
   background-color: rgb(var(--tb-primary));
-  color: rgb(var(--tb-primaryText, 255 255 255));
+  color: rgb(var(--tb-onPrimary, 255 255 255));
   font-size: 0.625rem;
   font-weight: 700;
   text-transform: uppercase;
@@ -7499,7 +7377,6 @@
   border-left-width: 4px;
   border-radius: calc(var(--rb-block-radius) / 1.5);
   background-color: var(--ec-surface);
-  color: var(--ec-text);
   box-shadow: 0 1px 2px rgba(var(--tb-text), 0.08);
   cursor: pointer;
   font: inherit;
@@ -7670,7 +7547,6 @@
   border: 1px solid var(--ec-border);
   border-radius: var(--rb-block-radius);
   background-color: var(--ec-surface);
-  color: var(--ec-text);
   overflow: hidden;
 }
 
@@ -8615,7 +8491,7 @@
   justify-content: center;
   border-radius: calc(var(--rb-reg-radius, var(--rb-block-radius, 1rem)) * 0.6);
   background: rgb(var(--tb-primary, 17 24 39));
-  color: rgb(var(--tb-primaryText, var(--tb-primaryForeground, 255 255 255)));
+  color: rgb(var(--tb-onPrimary, var(--tb-primaryForeground, 255 255 255)));
   padding: 0.625rem 1rem;
   font-size: 0.875rem;
   font-weight: 600;
@@ -9057,7 +8933,7 @@
 
 :where(.theme-scope) .event-reset-filters-btn:hover {
   background-color: rgb(var(--tb-primary));
-  color: rgb(var(--tb-primaryText, 255 255 255));
+  color: rgb(var(--tb-onPrimary, 255 255 255));
 }
 
 :where(.theme-scope) .event-reset-filters-btn:focus-visible {
@@ -9415,14 +9291,8 @@
   border: 0;
   border-bottom: 1px solid color-mix(in oklab, currentColor, transparent 78%);
   border-radius: 0;
+  /* Boxless row: the opaque-panel registry hands the band's contract back. */
   background: transparent;
-  color: inherit;
-  --rb-surface-text-color: inherit;
-  --rb-surface-heading-color: inherit;
-  --rb-surface-link-color: inherit;
-  --rb-surface-link-hover-color: inherit;
-  --rb-surface-link-hover-decoration: inherit;
-  --rb-surface-supporting-color: inherit;
 }
 
 :where(.theme-scope) .shop--register .shop__card-header {
@@ -9512,14 +9382,8 @@
 
 /* Product card */
 :where(.theme-scope) .shop__card {
+  /* Foreground and button context: theme-core/src/blocks/opaquePanels.ts. */
   background: rgb(var(--tb-surface));
-  color: rgb(var(--tb-text, 17 24 39));
-  --rb-surface-text-color: rgb(var(--tb-text, 17 24 39));
-  --rb-surface-heading-color: rgb(var(--tb-text, 17 24 39));
-  --rb-surface-link-color: rgb(var(--tb-primary, var(--tb-text, 17 24 39)));
-  --rb-surface-link-hover-color: var(--rb-prose-link-hover-color, rgb(var(--tb-primary, var(--tb-text, 17 24 39))));
-  --rb-surface-link-hover-decoration: initial;
-  --rb-surface-supporting-color: rgb(var(--tb-mutedText, 100 116 139));
   border: 1px solid rgb(var(--tb-border));
   border-radius: var(--shop-card-radius);
   padding: 1.5rem;
@@ -9678,14 +9542,8 @@
   margin-bottom: 1.25rem;
   border: 1px solid rgb(var(--tb-border));
   border-radius: var(--shop-card-radius);
+  /* Foreground and button context: theme-core/src/blocks/opaquePanels.ts. */
   background: rgb(var(--tb-surface));
-  color: rgb(var(--tb-text, 17 24 39));
-  --rb-surface-text-color: rgb(var(--tb-text, 17 24 39));
-  --rb-surface-heading-color: rgb(var(--tb-text, 17 24 39));
-  --rb-surface-link-color: rgb(var(--tb-primary, var(--tb-text, 17 24 39)));
-  --rb-surface-link-hover-color: var(--rb-prose-link-hover-color, rgb(var(--tb-primary, var(--tb-text, 17 24 39))));
-  --rb-surface-link-hover-decoration: initial;
-  --rb-surface-supporting-color: rgb(var(--tb-mutedText, 100 116 139));
 }
 
 :where(.theme-scope) :where([data-block="shop"]) .rb-state-icon--success {
@@ -11623,8 +11481,11 @@
 }
 
 
+/* The callout is its own opaque surface: tones tint over the theme surface,
+ * not over whatever band the callout sits on, so its foreground and button
+ * context (theme-core/src/blocks/opaquePanels.ts) hold on any section. */
 :where(.theme-scope) .feedback-callout {
-  background: rgba(var(--tb-surface, 248 250 252), 0.92);
+  background: rgb(var(--tb-surface, 248 250 252));
   border-color: rgba(var(--tb-border, 226 232 240), 0.72);
   --rb-feedback-callout-bg-opacity: 0.1;
   --rb-feedback-callout-border-opacity: 0.24;
@@ -11632,25 +11493,33 @@
 
 :where(.theme-scope) .feedback-callout[data-feedback-tone="info"] {
   --rb-feedback-callout-bg-opacity: 0.08;
-  background: rgba(var(--tb-primary, 37 99 235), var(--rb-feedback-callout-bg-opacity));
+  background:
+    linear-gradient(rgba(var(--tb-primary, 37 99 235), var(--rb-feedback-callout-bg-opacity)), rgba(var(--tb-primary, 37 99 235), var(--rb-feedback-callout-bg-opacity))),
+    rgb(var(--tb-surface, 248 250 252));
   border-color: rgba(var(--tb-primary, 37 99 235), var(--rb-feedback-callout-border-opacity));
 }
 
 :where(.theme-scope) .feedback-callout[data-feedback-tone="success"] {
-  background: rgba(var(--tb-success, 34 197 94), var(--rb-feedback-callout-bg-opacity));
+  background:
+    linear-gradient(rgba(var(--tb-success, 34 197 94), var(--rb-feedback-callout-bg-opacity)), rgba(var(--tb-success, 34 197 94), var(--rb-feedback-callout-bg-opacity))),
+    rgb(var(--tb-surface, 248 250 252));
   border-color: rgba(var(--tb-success, 34 197 94), var(--rb-feedback-callout-border-opacity));
 }
 
 :where(.theme-scope) .feedback-callout[data-feedback-tone="warning"] {
   --rb-feedback-callout-bg-opacity: 0.12;
   --rb-feedback-callout-border-opacity: 0.28;
-  background: rgba(var(--tb-warning, 245 158 11), var(--rb-feedback-callout-bg-opacity));
+  background:
+    linear-gradient(rgba(var(--tb-warning, 245 158 11), var(--rb-feedback-callout-bg-opacity)), rgba(var(--tb-warning, 245 158 11), var(--rb-feedback-callout-bg-opacity))),
+    rgb(var(--tb-surface, 248 250 252));
   border-color: rgba(var(--tb-warning, 245 158 11), var(--rb-feedback-callout-border-opacity));
 }
 
 :where(.theme-scope) .feedback-callout[data-feedback-tone="error"] {
   --rb-feedback-callout-border-opacity: 0.26;
-  background: rgba(var(--tb-destructive, 239 68 68), var(--rb-feedback-callout-bg-opacity));
+  background:
+    linear-gradient(rgba(var(--tb-destructive, 239 68 68), var(--rb-feedback-callout-bg-opacity)), rgba(var(--tb-destructive, 239 68 68), var(--rb-feedback-callout-bg-opacity))),
+    rgb(var(--tb-surface, 248 250 252));
   border-color: rgba(var(--tb-destructive, 239 68 68), var(--rb-feedback-callout-border-opacity));
 }
 
@@ -12126,26 +11995,30 @@
   border: 1px solid rgb(var(--tb-text, 17 24 39) / 0.12);
   border-radius: 1rem;
   padding: 0.875rem 1rem;
-  background: rgb(var(--tb-surface, 255 255 255) / 0.92);
-  color: rgb(var(--tb-text, 17 24 39));
+  /* Opaque surface; foreground and button context come from the opaque-panel
+   * registry (theme-core/src/blocks/opaquePanels.ts). Tones tint over it. */
+  background: rgb(var(--tb-surface, 255 255 255));
 }
 
 :where(.theme-scope) [data-block="gifting"] .gifting-feedback[data-feedback-tone="success"] {
   border-color: rgba(var(--tb-success, 34 197 94), 0.3);
-  background: rgba(var(--tb-success, 34 197 94), 0.1);
-  color: rgb(var(--tb-success, 34 197 94));
+  background:
+    linear-gradient(rgba(var(--tb-success, 34 197 94), 0.1), rgba(var(--tb-success, 34 197 94), 0.1)),
+    rgb(var(--tb-surface, 255 255 255));
 }
 
 :where(.theme-scope) [data-block="gifting"] .gifting-feedback[data-feedback-tone="warning"] {
   border-color: rgba(var(--tb-warning, 245 158 11), 0.35);
-  background: rgba(var(--tb-warning, 245 158 11), 0.12);
-  color: rgb(var(--tb-warning, 245 158 11));
+  background:
+    linear-gradient(rgba(var(--tb-warning, 245 158 11), 0.12), rgba(var(--tb-warning, 245 158 11), 0.12)),
+    rgb(var(--tb-surface, 255 255 255));
 }
 
 :where(.theme-scope) [data-block="gifting"] .gifting-feedback[data-feedback-tone="error"] {
   border-color: rgba(var(--tb-destructive, 239 68 68), 0.3);
-  background: rgba(var(--tb-destructive, 239 68 68), 0.1);
-  color: rgb(var(--tb-destructive, 239 68 68));
+  background:
+    linear-gradient(rgba(var(--tb-destructive, 239 68 68), 0.1), rgba(var(--tb-destructive, 239 68 68), 0.1)),
+    rgb(var(--tb-surface, 255 255 255));
 }
 
 
@@ -12524,10 +12397,14 @@
  * These treatments retain the event list's content and structural layout.
  * Their contrast relationships come exclusively from the active semantic
  * section surface and named palette tokens.
+ *
+ * The treatment list is `:is()`, not `:where()`, so each rule outranks the card
+ * role (`.card-role-x.card-role-x`) the event card also carries: the rows must
+ * stay boxless whichever stylesheet the page loads last.
  * ============================================================================= */
 
 :where(.theme-scope)
-  :where(
+  :is(
     .rb-event-list-treatment-ruled-register,
     .rb-event-list-treatment-editorial-register,
     .rb-event-list-treatment-dense-index
@@ -12539,12 +12416,12 @@
   border-radius: 0;
   background: transparent;
   box-shadow: none;
-  color: inherit;
+  /* Boxless row: the opaque-panel registry hands the band's contract back. */
 }
 
 /* Register treatments intentionally prioritise schedule data over imagery. */
 :where(.theme-scope)
-  :where(
+  :is(
     .rb-event-list-treatment-ruled-register,
     .rb-event-list-treatment-editorial-register,
     .rb-event-list-treatment-dense-index
@@ -12555,7 +12432,7 @@
 }
 
 :where(.theme-scope)
-  :where(
+  :is(
     .rb-event-list-treatment-ruled-register,
     .rb-event-list-treatment-editorial-register,
     .rb-event-list-treatment-dense-index
@@ -12567,7 +12444,7 @@
 }
 
 :where(.theme-scope)
-  :where(
+  :is(
     .rb-event-list-treatment-ruled-register,
     .rb-event-list-treatment-editorial-register,
     .rb-event-list-treatment-dense-index
@@ -12579,7 +12456,7 @@
 }
 
 :where(.theme-scope)
-  :where(
+  :is(
     .rb-event-list-treatment-ruled-register,
     .rb-event-list-treatment-editorial-register,
     .rb-event-list-treatment-dense-index
@@ -12591,7 +12468,7 @@
 }
 
 :where(.theme-scope)
-  :where(
+  :is(
     .rb-event-list-treatment-ruled-register,
     .rb-event-list-treatment-editorial-register,
     .rb-event-list-treatment-dense-index
@@ -12688,7 +12565,7 @@
 
 @media (min-width: 768px) {
   :where(.theme-scope)
-    :where(
+    :is(
       .rb-event-list-treatment-ruled-register,
       .rb-event-list-treatment-editorial-register,
       .rb-event-list-treatment-dense-index
@@ -12698,7 +12575,7 @@
   }
 
   :where(.theme-scope)
-    :where(
+    :is(
       .rb-event-list-treatment-ruled-register,
       .rb-event-list-treatment-editorial-register,
       .rb-event-list-treatment-dense-index
@@ -12713,7 +12590,7 @@
   }
 
   :where(.theme-scope)
-    :where(
+    :is(
       .rb-event-list-treatment-ruled-register,
       .rb-event-list-treatment-editorial-register,
       .rb-event-list-treatment-dense-index
@@ -12724,7 +12601,7 @@
   }
 
   :where(.theme-scope)
-    :where(
+    :is(
       .rb-event-list-treatment-ruled-register,
       .rb-event-list-treatment-editorial-register,
       .rb-event-list-treatment-dense-index
@@ -12737,7 +12614,7 @@
   }
 
   :where(.theme-scope)
-    :where(
+    :is(
       .rb-event-list-treatment-ruled-register,
       .rb-event-list-treatment-editorial-register,
       .rb-event-list-treatment-dense-index
@@ -12749,7 +12626,7 @@
   }
 
   :where(.theme-scope)
-    :where(
+    :is(
       .rb-event-list-treatment-ruled-register,
       .rb-event-list-treatment-editorial-register,
       .rb-event-list-treatment-dense-index
@@ -12760,7 +12637,7 @@
   }
 
   :where(.theme-scope)
-    :where(
+    :is(
       .rb-event-list-treatment-ruled-register,
       .rb-event-list-treatment-editorial-register,
       .rb-event-list-treatment-dense-index
@@ -12768,7 +12645,7 @@
     .event-card.event-card.event-card--horizontal
     .card-content > .card-body,
   :where(.theme-scope)
-    :where(
+    :is(
       .rb-event-list-treatment-ruled-register,
       .rb-event-list-treatment-editorial-register,
       .rb-event-list-treatment-dense-index
@@ -12779,7 +12656,7 @@
   }
 
   :where(.theme-scope)
-    :where(
+    :is(
       .rb-event-list-treatment-ruled-register,
       .rb-event-list-treatment-editorial-register,
       .rb-event-list-treatment-dense-index
@@ -12830,13 +12707,7 @@
   padding: clamp(1.125rem, 2.5vw, 1.875rem);
   border-radius: calc(var(--rb-block-radius, 0.75rem) * 1.5);
   background: rgb(var(--tb-secondary));
-  color: rgb(var(--tb-onSecondary));
-  --rb-surface-text-color: rgb(var(--tb-onSecondary));
-  --rb-surface-heading-color: rgb(var(--tb-onSecondary));
-  --rb-surface-link-color: rgb(var(--tb-onSecondary));
-  --rb-surface-link-hover-color: rgb(var(--tb-onSecondary));
-  --rb-surface-link-hover-decoration: underline;
-  --rb-surface-supporting-color: rgb(var(--tb-onSecondary));
+  /* Foreground and button context: theme-core/src/blocks/opaquePanels.ts. */
 }
 
 :where(.theme-scope)
@@ -12959,16 +12830,8 @@
 }
 
 /* Diptych filled panel: a composition over the `alternative` role's surface.
-   The 18% supporting alpha is accepted CSS-side — see issue 1297 mapping-table. */
-:where(.theme-scope) .rb-feature-cards-grid--editorial-diptych .rb-feature-card[data-surface-role="panel"] {
-  color: rgb(var(--tb-onPrimary));
-  --rb-surface-text-color: rgb(var(--tb-onPrimary));
-  --rb-surface-heading-color: rgb(var(--tb-onPrimary));
-  --rb-surface-link-color: rgb(var(--tb-onPrimary));
-  --rb-surface-link-hover-color: rgb(var(--tb-onPrimary));
-  --rb-surface-link-hover-decoration: underline;
-  --rb-surface-supporting-color: color-mix(in oklab, rgb(var(--tb-onPrimary)), transparent 18%);
-}
+   It paints primary (below); its foreground and button context for that paint
+   come from theme-core/src/blocks/opaquePanels.ts. */
 
 :where(.theme-scope) .rb-feature-cards-grid--editorial-diptych .rb-feature-card[data-surface-role="panel"] > .rb-bg-surface {
   background: rgb(var(--tb-primary));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@riverbankcms/sdk",
-  "version": "0.149.0",
+  "version": "0.150.0",
   "description": "Riverbank CMS SDK for headless content consumption",
   "main": "./dist/server/index.mjs",
   "module": "./dist/server/index.mjs",