@riverbankcms/sdk 0.145.0 → 0.146.0

package/dist/styles/index.css

@@ -325,6 +325,9 @@
   .rb-h-4 {
     height: 1rem;
   }
+  .rb-h-5 {
+    height: 1.25rem;
+  }
   .rb-h-8 {
     height: 2rem;
   }
@@ -4232,6 +4235,10 @@
   margin-bottom: 0.25rem;
 }
 
+:where(.theme-scope) :where([data-block='event-registration']) .er-consent-check {
+  margin-top: 0.75rem;
+}
+
 :where(.theme-scope) :where([data-block='event-registration']) .er-required {
   color: var(--er-required);
 }
@@ -8934,13 +8941,6 @@
   margin: 0;
 }
 
-/* Inline field (checkbox, radio with label) */
-:where(.theme-scope) :where([data-block="form"]) .fb-inline {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-}
-
 /* Success state */
 :where(.theme-scope) :where([data-block="form"]) .fb-success {
   background-color: var(--fb-success-bg);
@@ -11052,9 +11052,11 @@
  */
 
 /* Newsletter copy styling */
+/* Size only: weight, family and colour come from the theme's heading styles */
 :where(.theme-scope) :where([data-block="newsletter-signup"]) .newsletter-copy-title {
-  font-size: 1.5rem;
-  font-weight: 600;
+  font-size: clamp(1.75rem, 1.35rem + 1.6vw, 2.5rem);
+  line-height: 1.15;
+  text-wrap: balance;
 }
 
 :where(.theme-scope) :where([data-block="newsletter-signup"]) .newsletter-copy-subtitle {
@@ -11078,37 +11080,150 @@
   gap: var(--rb-gap-sm, 0.75rem);
 }
 
-/* Individual field styling */
+/* Extra preset fields (name, company...). Labels are visually hidden, so
+   these sit in a row above the email entry. */
+:where(.theme-scope) .newsletter-extra-fields {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(min(12rem, 100%), 1fr));
+  gap: 0.5rem;
+}
+
 :where(.theme-scope) .newsletter-field {
   display: flex;
   flex-direction: column;
   gap: 0.25rem;
+  text-align: left;
 }
 
-/* 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 {
+/* Email entry: the email field and the themed submit button share one shell.
+   The shell's look (background, border, corners, focus ring) comes from the
+   theme's input system via .form-input-group; this only handles layout. */
+:where(.theme-scope) .newsletter-entry {
+  container-type: inline-size;
   display: flex;
   flex-direction: column;
-  gap: 0.5rem;
+  gap: 0.375rem;
+  text-align: left;
+}
+
+:where(.theme-scope) .newsletter-entry-group > button {
+  white-space: nowrap;
+}
+
+/* Too narrow for field and button side by side (phones, footer columns):
+   stack them inside the shell and keep pill themes from turning the taller
+   shell into a capsule. */
+@container (max-width: 22rem) {
+  :where(.theme-scope) .newsletter-entry .newsletter-entry-group {
+    flex-direction: column;
+    border-radius: min(var(--rb-input-radius, 0.5rem), 1rem);
+  }
+
+  :where(.theme-scope) .newsletter-entry .newsletter-entry-group > button {
+    width: 100%;
+    justify-content: center;
+  }
+}
+
+/* Topic choices (visitor picks what to hear about) as toggle chips. Each chip
+   is a real checkbox underneath; the chip is its visible face. */
+:where(.theme-scope) .newsletter-topics {
   border: none;
   padding: 0;
   margin: 0;
   min-width: 0;
 }
 
-:where(.theme-scope) .newsletter-topics > legend {
+:where(.theme-scope) .newsletter-topics-legend {
   padding: 0;
-  margin-bottom: 0.25rem;
+  margin-bottom: 0.625rem;
+  font-size: 0.9375rem;
+  color: var(--rb-surface-text-color, rgb(var(--tb-text, 17 24 39)));
 }
 
-:where(.theme-scope) .newsletter-topic-choice {
+:where(.theme-scope) .newsletter-topic-chips {
   display: flex;
-  align-items: center;
+  flex-wrap: wrap;
   gap: 0.5rem;
 }
 
+:where(.theme-scope) .newsletter-stacked .newsletter-topics-legend {
+  width: 100%;
+}
+
+:where(.theme-scope) .newsletter-stacked .newsletter-topic-chips {
+  justify-content: center;
+}
+
+:where(.theme-scope) .newsletter-topic-chip {
+  position: relative;
+  display: inline-flex;
+}
+
+:where(.theme-scope) .newsletter-topic-chip > input {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  opacity: 0;
+  cursor: pointer;
+}
+
+:where(.theme-scope) .newsletter-topic-chip > span {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.375rem;
+  padding: 0.4375rem 0.9375rem;
+  border: 1px solid color-mix(in srgb, currentColor 35%, transparent);
+  border-radius: var(--rb-button-radius, var(--rb-input-radius, 9999px));
+  font-size: 0.9375rem;
+  line-height: 1.3;
+  color: var(--rb-surface-text-color, rgb(var(--tb-text, 17 24 39)));
+  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
+}
+
+/* Tick that grows in when the chip is on */
+:where(.theme-scope) .newsletter-topic-chip > span::before {
+  content: "";
+  width: 0;
+  height: 0.7em;
+  background-color: currentColor;
+  clip-path: polygon(14% 52%, 0 67%, 38% 100%, 100% 22%, 85% 8%, 37% 70%);
+  transition: width 0.15s ease;
+}
+
+:where(.theme-scope) .newsletter-topic-chip:hover > span {
+  border-color: currentColor;
+}
+
+/* Same accent and mark colours as the theme's checkboxes */
+:where(.theme-scope) .newsletter-topic-chip > input:checked + span {
+  background-color: var(--rb-check-accent, rgb(var(--tb-primary)));
+  border-color: var(--rb-check-accent, rgb(var(--tb-primary)));
+  color: var(--rb-check-mark, rgb(var(--tb-onPrimary, 255 255 255)));
+}
+
+:where(.theme-scope) .newsletter-topic-chip > input:checked + span::before {
+  width: 0.7em;
+}
+
+:where(.theme-scope) .newsletter-topic-chip > input:focus-visible + span {
+  outline: 2px solid var(--rb-check-accent, rgb(var(--tb-primary)));
+  outline-offset: 2px;
+}
+
+:where(.theme-scope) .newsletter-topic-chip > input:disabled + span {
+  opacity: 0.6;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  :where(.theme-scope) .newsletter-topic-chip > span,
+  :where(.theme-scope) .newsletter-topic-chip > span::before {
+    transition: none;
+  }
+}
+
 /* Error panel and field notes. The form block scopes these to its own
    data-block, so the newsletter form (which also renders in the footer)
    needs its own copy of the treatment. */
@@ -11126,13 +11241,7 @@
   color: var(--fb-error-text);
 }
 
-/* Required indicator */
-:where(.theme-scope) .newsletter-required {
-  color: rgb(var(--tb-primary));
-  margin-left: 0.125rem;
-}
-
-/* Submit button container */
+/* Submit button container (only when a preset has no email field) */
 :where(.theme-scope) .newsletter-submit {
   margin-top: 0.5rem;
 }
@@ -11144,50 +11253,29 @@
   justify-content: center;
 }
 
-/* Privacy note */
+/* Privacy note: quieter than the intro so the entry row leads */
 :where(.theme-scope) .newsletter-privacy-note {
   margin-top: 0.75rem;
-  font-size: 1rem;
-  line-height: 1.6;
-  color: var(--rb-surface-text-color, rgb(var(--tb-text, 17 24 39)));
+  font-size: 0.8125rem;
+  line-height: 1.5;
+  color: var(--rb-surface-supporting-color, var(--rb-surface-text-color, rgb(var(--tb-text, 17 24 39))));
+  opacity: 0.85;
   text-align: center;
 }
 
 /* =============================================================================
- * Inline Variant - Horizontal layout
+ * Inline Variant - left-aligned, wider entry row
  * =============================================================================
  */
 
-:where(.theme-scope) .newsletter-inline .newsletter-form-fields {
-  flex-direction: row;
-  align-items: flex-end;
-  flex-wrap: wrap;
-  gap: var(--rb-gap-sm, 0.75rem);
-}
-
-:where(.theme-scope) .newsletter-inline .newsletter-field {
-  flex: 1 1 auto;
-  min-width: 10rem;
-}
-
-:where(.theme-scope) .newsletter-inline .newsletter-submit {
-  margin-top: 0;
-  flex-shrink: 0;
-}
-
-:where(.theme-scope) .newsletter-inline .newsletter-topics {
-  flex-basis: 100%;
+:where(.theme-scope) .newsletter-inline .newsletter-form {
+  max-width: 40rem;
+  margin-left: 0;
+  margin-right: 0;
 }
 
-/* Mobile fallback for inline variant */
-@media (max-width: 640px) {
-  :where(.theme-scope) .newsletter-inline .newsletter-form-fields {
-    flex-direction: column;
-  }
-
-  :where(.theme-scope) .newsletter-inline .newsletter-field {
-    min-width: 100%;
-  }
+:where(.theme-scope) .newsletter-inline .newsletter-privacy-note {
+  text-align: left;
 }
 
 /* =============================================================================
@@ -11324,12 +11412,6 @@
   margin: 0;
 }
 
-:where(.theme-scope) :where([data-block="contact-newsletter"]) .fb-inline {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-}
-
 :where(.theme-scope) :where([data-block="contact-newsletter"]) .fb-success,
 :where(.theme-scope) :where([data-block="contact-newsletter"]) .fb-error,
 :where(.theme-scope) :where([data-block="contact-newsletter"]) .fb-empty {
@@ -13222,3 +13304,42 @@
 }
 
 
+/* =============================================================================
+ * Site footer: social links
+ *
+ * Icon links get a 40px tap target with a hairline ring drawn from the link's
+ * own colour, so it follows the footer's text colour on any surface. Links
+ * without an icon (unknown platforms) stay plain text.
+ * =============================================================================
+ */
+
+:where(.theme-scope) .rb-footer-socials {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.75rem 1.25rem;
+}
+
+:where(.theme-scope) .rb-footer-social-link:has(> .rb-footer-social-icon) {
+  display: inline-grid;
+  place-items: center;
+  width: 2.5rem;
+  height: 2.5rem;
+  border: 1px solid color-mix(in srgb, currentColor 22%, transparent);
+  border-radius: 9999px;
+}
+
+:where(.theme-scope) .rb-footer-socials:has(.rb-footer-social-icon) {
+  gap: 0.5rem;
+}
+
+:where(.theme-scope) .rb-footer-social-link:has(> .rb-footer-social-icon):hover {
+  border-color: currentColor;
+}
+
+:where(.theme-scope) .rb-footer-social-icon {
+  width: 1.5rem;
+  height: 1.5rem;
+}
+
+

package/package.json

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