@riverbankcms/sdk 0.145.0 → 0.146.0

package/dist/server/theme-bridge.mjs

@@ -11911,6 +11911,270 @@ const curatedSiteStyles = [
 ];
 new Map(curatedSiteStyles.map((style) => [style.id, style]));
 //#endregion
+//#region ../theme-core/src/inputs/checkable.ts
+/**
+* Checkbox and radio CSS shared by the full theme generator and the SDK
+* theme bridge, so both render the same customer-facing controls.
+*
+* Emits:
+* - .form-checkbox / .form-radio: the controls themselves. The tick and dot
+*   are drawn with ::before so their colour comes from theme tokens rather
+*   than a baked-in SVG.
+* - .form-check: a label row holding a control and its text. The control
+*   lines up with the first line of text, so long labels wrap cleanly.
+* - .form-check--tile: a bordered, fully clickable panel for agreements
+*   (booking consent, consent fields) that tints when ticked.
+*/
+const CHECKABLE_SIZE = "1.375rem";
+/** Never fully round: a round checkbox reads as a radio. */
+const CHECKBOX_RADIUS = {
+	square: "0",
+	soft: "0.25rem",
+	rounded: "0.375rem",
+	pill: "0.375rem"
+};
+/** Tiles hold wrapping text, so pill themes get a generous radius, not a capsule. */
+const TILE_RADIUS = {
+	square: "0",
+	soft: "0.5rem",
+	rounded: "0.75rem",
+	pill: "1rem"
+};
+const ON_ACCENT_TOKENS = {
+	primary: "onPrimary",
+	secondary: "onSecondary",
+	accent: "onAccent"
+};
+/**
+* Colour for the tick/dot drawn on top of the accent fill. Uses the palette's
+* matching "on" token where there is one, falling back to white.
+*/
+/** The accent at full strength: `primary/70` becomes `primary`. */
+function solidAccentToken(accentToken) {
+	const parsed = parseColorTokenParts(accentToken);
+	return parsed.kind === "token" ? parsed.token : accentToken;
+}
+function checkableMarkColor(accentToken) {
+	const parsed = parseColorTokenParts(accentToken);
+	const onToken = parsed.kind === "token" ? ON_ACCENT_TOKENS[parsed.token] : void 0;
+	return onToken ? `rgb(var(--tb-${onToken}, 255 255 255))` : "rgb(255 255 255)";
+}
+function checkableSelectors(root) {
+	return {
+		checkbox: `${root} .form-checkbox`,
+		radio: `${root} .form-radio`,
+		check: `${root} .form-check`,
+		tile: `${root} .form-check--tile`
+	};
+}
+/** The box and circle themselves, unchecked. */
+function controlBaseCss(sel, input) {
+	const border = input.borderWidth === "0" ? "1px" : input.borderWidth;
+	return [
+		`${sel.checkbox},
+${sel.radio} {
+  appearance: none;
+  display: inline-grid;
+  place-content: center;
+  width: ${CHECKABLE_SIZE};
+  height: ${CHECKABLE_SIZE};
+  margin: 0;
+  flex-shrink: 0;
+  border: ${border} solid ${input.borderColor};
+  background-color: ${input.background};
+  color: inherit;
+  cursor: pointer;
+  transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
+}`,
+		`${sel.checkbox} {
+  border-radius: ${CHECKBOX_RADIUS[input.corners]};
+}`,
+		`${sel.radio} {
+  border-radius: 9999px;
+}`
+	];
+}
+/** The tick and dot, drawn with ::before so their colour is a theme token. */
+function controlMarkCss(sel, accentToken) {
+	return [
+		`${sel.checkbox}::before,
+${sel.radio}::before {
+  content: "";
+  background-color: ${checkableMarkColor(accentToken)};
+  transform: scale(0);
+  transition: transform 0.12s ease;
+}`,
+		`${sel.checkbox}::before {
+  width: 0.75rem;
+  height: 0.75rem;
+  clip-path: polygon(14% 52%, 0 67%, 38% 100%, 100% 22%, 85% 8%, 37% 70%);
+}`,
+		`${sel.radio}::before {
+  width: 0.5rem;
+  height: 0.5rem;
+  border-radius: 9999px;
+}`
+	];
+}
+function controlStateCss(sel, input) {
+	const accent = rgbColorValue(solidAccentToken(input.accentToken));
+	return [
+		`${sel.checkbox}:hover,
+${sel.radio}:hover,
+${sel.check}:hover > .form-checkbox,
+${sel.check}:hover > .form-radio {
+  border-color: ${accent};
+}`,
+		`${sel.checkbox}:checked,
+${sel.radio}:checked {
+  background-color: ${accent};
+  border-color: ${accent};
+}`,
+		`${sel.checkbox}:checked::before,
+${sel.radio}:checked::before {
+  transform: scale(1);
+}`,
+		`${sel.checkbox}:focus-visible,
+${sel.radio}:focus-visible {
+  outline: 2px solid ${accent};
+  outline-offset: 2px;
+}`,
+		`${sel.checkbox}:disabled,
+${sel.radio}:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}`
+	];
+}
+/** Label row: control lined up with the first line of wrapping text. */
+function checkRowCss(sel) {
+	return [
+		`${sel.check} {
+  display: flex;
+  align-items: flex-start;
+  gap: 0.75rem;
+  line-height: 1.5;
+  cursor: pointer;
+}`,
+		`${sel.check} > .form-checkbox,
+${sel.check} > .form-radio {
+  margin-top: 0.0625rem;
+  margin-top: max(0px, calc((1lh - ${CHECKABLE_SIZE}) / 2));
+}`,
+		`${sel.check}:has(> :disabled) {
+  cursor: not-allowed;
+}`
+	];
+}
+function agreementTileCss(sel, input) {
+	const accent = rgbColorValue(solidAccentToken(input.accentToken));
+	return [
+		`${sel.tile} {
+  padding: 0.875rem 1rem;
+  border: 1px solid color-mix(in srgb, currentColor 22%, transparent);
+  border-radius: ${TILE_RADIUS[input.corners]};
+  transition: border-color 0.15s ease, background-color 0.15s ease;
+}`,
+		`${sel.tile}:hover {
+  border-color: color-mix(in srgb, ${accent} 55%, transparent);
+}`,
+		`${sel.tile}:has(> .form-checkbox:checked) {
+  border-color: ${accent};
+  background-color: color-mix(in srgb, ${accent} 7%, transparent);
+}`,
+		`${sel.tile}:has(> .form-checkbox[aria-invalid="true"]) {
+  border-color: ${input.errorColor};
+}`
+	];
+}
+function checkableMediaCss(sel) {
+	return [`@media (prefers-reduced-motion: reduce) {
+  ${sel.checkbox}, ${sel.radio}, ${sel.checkbox}::before, ${sel.radio}::before, ${sel.tile} {
+    transition: none;
+  }
+}`, `@media (forced-colors: active) {
+  ${sel.checkbox}::before,
+  ${sel.radio}::before {
+    background-color: CanvasText;
+  }
+}`];
+}
+/**
+* Exposes the accent and mark colours so other choice controls (newsletter
+* topic chips) match the checkboxes without re-deriving the theme tokens.
+*/
+function checkableVarsCss(input) {
+	return [`${input.root} {
+  --rb-check-accent: ${rgbColorValue(solidAccentToken(input.accentToken))};
+  --rb-check-mark: ${checkableMarkColor(input.accentToken)};
+}`];
+}
+function generateCheckableCss(input) {
+	const sel = checkableSelectors(input.root);
+	return [
+		...checkableVarsCss(input),
+		...controlBaseCss(sel, input),
+		...controlMarkCss(sel, input.accentToken),
+		...controlStateCss(sel, input),
+		...checkRowCss(sel),
+		...agreementTileCss(sel, input),
+		...checkableMediaCss(sel)
+	].join("\n\n");
+}
+//#endregion
+//#region ../theme-core/src/inputs/inputGroup.ts
+/**
+* Input group: a field and an action (usually a themed button) sharing one
+* input-styled shell, e.g. the newsletter email + Sign up row.
+*
+* The shell `.form-input-group` takes the theme's `.form-input` rules (the
+* generators add it to that selector list, plus focus and error), so it
+* follows the site's input background, border, corners and shadow. This file
+* only adds the layout overrides and the borderless inner field.
+*/
+const INPUT_GROUP_SELECTOR = ".form-input-group";
+/** Shell focus ring follows the field only, not the button beside it. */
+const INPUT_GROUP_FOCUS_SELECTOR = ".form-input-group:has(> .form-input-group-field:focus-visible)";
+const INPUT_GROUP_ERROR_SELECTOR = ".form-input-group:has(> .form-input-group-field[aria-invalid=\"true\"])";
+const GROUP_INSET = "0.25rem";
+/**
+* @param root - scoped root selector
+* @param padding - the theme's input padding shorthand (`block inline`), so the
+*   inner field's text sits where a plain input's text would.
+*/
+function generateInputGroupCss(root, padding) {
+	const [block = padding, inline = block] = padding.trim().split(/\s+/);
+	return `${root} .form-input-group {
+  display: flex;
+  align-items: stretch;
+  gap: ${GROUP_INSET};
+  padding: ${GROUP_INSET};
+}
+
+${root} .form-input-group-field {
+  flex: 1 1 auto;
+  min-width: 0;
+  margin: 0;
+  border: 0;
+  border-radius: 0;
+  background: transparent;
+  box-shadow: none;
+  outline: none;
+  color: inherit;
+  font: inherit;
+  padding: calc(${block} - ${GROUP_INSET}) calc(${inline} - ${GROUP_INSET});
+}
+
+${root} .form-input-group-field::placeholder {
+  color: inherit;
+  opacity: 0.6;
+}
+
+${root} .form-input-group > :not(.form-input-group-field) {
+  flex-shrink: 0;
+}`;
+}
+//#endregion
 //#region ../theme-core/src/status/generateStatusCss.ts
 /**
 * Corner radius map - derives alert border-radius from theme.corners
@@ -13213,6 +13477,9 @@ const containerResponsiveThemeCss = `/*
   .rb-h-4 {
     height: 1rem;
   }
+  .rb-h-5 {
+    height: 1.25rem;
+  }
   .rb-h-8 {
     height: 2rem;
   }
@@ -17178,6 +17445,10 @@ const containerResponsiveThemeCss = `/*
   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);
 }
@@ -21897,13 +22168,6 @@ const containerResponsiveThemeCss = `/*
   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);
@@ -24020,9 +24284,11 @@ const containerResponsiveThemeCss = `/*
  */
 
 /* 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 {
@@ -24046,37 +24312,150 @@ const containerResponsiveThemeCss = `/*
   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. */
@@ -24094,13 +24473,7 @@ const containerResponsiveThemeCss = `/*
   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;
 }
@@ -24112,52 +24485,29 @@ const containerResponsiveThemeCss = `/*
   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 */
-@container rb-site (max-width: 640px) {
-@scope ([data-rb-responsive-mode="container"]) to (:scope [data-rb-responsive-mode]) {
-: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;
 }
 
 /* =============================================================================
@@ -24295,12 +24645,6 @@ const containerResponsiveThemeCss = `/*
   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 {
@@ -26197,6 +26541,44 @@ const containerResponsiveThemeCss = `/*
     flex: 0 0 auto;
   }
 }
+}
+
+/* =============================================================================
+ * 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;
 }`;
 //#endregion
 //#region ../theme-core/src/ThemeScopeCore.tsx
@@ -26446,6 +26828,7 @@ const BORDER_WIDTH_MAP = {
 	medium: "2px",
 	thick: "4px"
 };
+const INPUT_PADDING = "0.5rem 0.75rem";
 const SHADOW_VALUES = {
 	none: "none",
 	low: "0 1px 2px rgba(0,0,0,0.04)",
@@ -26479,16 +26862,18 @@ function generateInputCoreCss(scopeId, settings) {
   color: rgb(var(--tb-${settings.textToken}));
   border: ${borderWidth} solid rgb(var(--tb-${settings.borderToken}));
   border-radius: ${borderRadius};
-  padding: 0.5rem 0.75rem;
+  padding: ${INPUT_PADDING};
   font-size: 1rem;
   width: 100%;
   outline: none;
   transition: border-color 0.2s ease, box-shadow 0.2s ease;
   ${settings.shadow !== "none" ? `box-shadow: ${SHADOW_VALUES[settings.shadow]};` : ""}
 `.trim();
-	cssBlocks.push(`${root} .form-input {
+	cssBlocks.push(`${root} .form-input,
+${root} ${INPUT_GROUP_SELECTOR} {
   ${sharedInputRules}
 }`);
+	cssBlocks.push(generateInputGroupCss(root, INPUT_PADDING));
 	cssBlocks.push(`${root} .form-textarea {
   ${sharedInputRules}
   resize: vertical;
@@ -26505,14 +26890,16 @@ function generateInputCoreCss(scopeId, settings) {
 }`);
 	cssBlocks.push(`${root} .form-input:focus-visible,
 ${root} .form-textarea:focus-visible,
-${root} .form-select:focus-visible {
+${root} .form-select:focus-visible,
+${root} ${INPUT_GROUP_FOCUS_SELECTOR} {
   outline: none;
   box-shadow: 0 0 0 ${settings.focusRingWidth}px rgb(var(--tb-${settings.focusRingToken}));
   border-color: rgb(var(--tb-${settings.focusRingToken}));
 }`);
 	cssBlocks.push(`${root} .form-input[aria-invalid="true"],
 ${root} .form-textarea[aria-invalid="true"],
-${root} .form-select[aria-invalid="true"] {
+${root} .form-select[aria-invalid="true"],
+${root} ${INPUT_GROUP_ERROR_SELECTOR} {
   border-color: rgb(var(--tb-${settings.errorBorderToken}));
   color: rgb(var(--tb-${settings.errorTextToken}));
 }`);
@@ -26524,46 +26911,15 @@ ${root} .form-select:disabled {
   opacity: 0.6;
   cursor: not-allowed;
 }`);
-	cssBlocks.push(`${root} .form-checkbox {
-  appearance: none;
-  width: 1.125rem;
-  height: 1.125rem;
-  flex-shrink: 0;
-  border: ${borderWidth} solid rgb(var(--tb-${settings.borderToken}));
-  border-radius: 0.25rem;
-  background-color: rgb(var(--tb-${settings.backgroundToken}));
-  cursor: pointer;
-  transition: background-color 0.2s ease, border-color 0.2s ease;
-}`);
-	cssBlocks.push(`${root} .form-radio {
-  appearance: none;
-  width: 1.125rem;
-  height: 1.125rem;
-  flex-shrink: 0;
-  border: ${borderWidth} solid rgb(var(--tb-${settings.borderToken}));
-  border-radius: 9999px;
-  background-color: rgb(var(--tb-${settings.backgroundToken}));
-  cursor: pointer;
-  transition: background-color 0.2s ease, border-color 0.2s ease;
-}`);
-	cssBlocks.push(`${root} .form-checkbox:checked {
-  background-color: rgb(var(--tb-${settings.focusRingToken}));
-  border-color: rgb(var(--tb-${settings.focusRingToken}));
-  background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e");
-  background-size: 100% 100%;
-  background-position: center;
-  background-repeat: no-repeat;
-}`);
-	cssBlocks.push(`${root} .form-radio:checked {
-  background-color: rgb(var(--tb-${settings.focusRingToken}));
-  border-color: rgb(var(--tb-${settings.focusRingToken}));
-  background-image: radial-gradient(circle, white 40%, transparent 40%);
-}`);
-	cssBlocks.push(`${root} .form-checkbox:focus-visible,
-${root} .form-radio:focus-visible {
-  outline: none;
-  box-shadow: 0 0 0 ${settings.focusRingWidth}px rgb(var(--tb-${settings.focusRingToken}));
-}`);
+	cssBlocks.push(generateCheckableCss({
+		root,
+		borderWidth,
+		borderColor: `rgb(var(--tb-${settings.borderToken}))`,
+		background: `rgb(var(--tb-${settings.backgroundToken}))`,
+		corners: settings.corners,
+		accentToken: settings.focusRingToken,
+		errorColor: `rgb(var(--tb-${settings.errorBorderToken}))`
+	}));
 	return cssBlocks.join("\n\n");
 }
 /**