@riverbankcms/sdk 0.77.0 → 0.77.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (46) hide show
  1. package/dist/{PreviewEditorSidebar-XSX7QKHQ.mjs → PreviewEditorSidebar-DVUG7GK4.mjs} +2 -2
  2. package/dist/{PreviewEditorUI-YZNEZ3QD.mjs → PreviewEditorUI-P7RN4CDS.mjs} +2 -2
  3. package/dist/SdkPreviewModeRuntime-KLPX47SE.mjs +8 -0
  4. package/dist/_dts/ai/src/contracts/proposals.d.ts +40 -30
  5. package/dist/_dts/blocks/src/customBlockRegistry.d.ts +20 -1
  6. package/dist/_dts/blocks/src/index.d.ts +2 -2
  7. package/dist/_dts/blocks/src/system/blocks/site-header.d.ts +2 -2
  8. package/dist/_dts/blocks/src/system/manifest/fieldValidation/index.d.ts +5 -0
  9. package/dist/_dts/blocks/src/system/runtime/components/multi-step/runtimeFormValidation.d.ts +28 -0
  10. package/dist/_dts/blocks/src/system/transforms/registry/layout.d.ts +4 -4
  11. package/dist/_dts/sdk/src/contracts/theme.d.ts +1 -1
  12. package/dist/_dts/sdk/src/rendering/components/Layout.d.ts +2 -2
  13. package/dist/_dts/sdk/src/version.d.ts +1 -1
  14. package/dist/_dts/theme-core/src/generated/containerResponsiveThemeCss.d.ts +1 -1
  15. package/dist/_dts/theme-core/src/mock-themes/all.d.ts +27 -27
  16. package/dist/_dts/theme-core/src/schema.d.ts +26 -30
  17. package/dist/_dts/theme-core/src/site-styles/curatedSiteStyles.d.ts +1 -1
  18. package/dist/_dts/theme-core/src/site-styles/designState.d.ts +4 -4
  19. package/dist/_dts/theme-core/src/site-styles/headerLooks.d.ts +63 -33
  20. package/dist/{chunk-EAWHBECW.mjs → chunk-2SPENC5M.mjs} +5 -5
  21. package/dist/{chunk-GSQX43EZ.mjs → chunk-IENWFSLO.mjs} +22 -41
  22. package/dist/{chunk-WLQBJN2Z.mjs → chunk-KWJPDZH2.mjs} +1815 -1338
  23. package/dist/{chunk-ANKDYZ2E.mjs → chunk-ZYEJLCTN.mjs} +1 -1
  24. package/dist/cli/index.mjs +381 -176
  25. package/dist/client/client.mjs +1574 -1252
  26. package/dist/client/hooks.mjs +369 -170
  27. package/dist/client/rendering.mjs +1588 -1257
  28. package/dist/preview-next/client/runtime.mjs +3 -3
  29. package/dist/{sdk-runtime-Q6MTR4KL.mjs → sdk-runtime-6UT2S7KZ.mjs} +4 -4
  30. package/dist/server/components.mjs +1561 -1239
  31. package/dist/server/config-validation.mjs +369 -170
  32. package/dist/server/config.mjs +369 -170
  33. package/dist/server/data.mjs +369 -170
  34. package/dist/server/index.mjs +1 -1
  35. package/dist/server/next.mjs +1547 -1234
  36. package/dist/server/page-converter.mjs +362 -165
  37. package/dist/server/prebuild.mjs +1 -1
  38. package/dist/server/rendering/server.mjs +1561 -1239
  39. package/dist/server/rendering.mjs +1561 -1239
  40. package/dist/server/routing.mjs +370 -171
  41. package/dist/server/server.mjs +370 -171
  42. package/dist/server/theme-bridge.mjs +1156 -1035
  43. package/dist/server/theme.mjs +79 -11
  44. package/dist/styles/index.css +1081 -1028
  45. package/package.json +1 -1
  46. package/dist/SdkPreviewModeRuntime-5FS5E6BI.mjs +0 -8
@@ -368,6 +368,11 @@ function toLocationCoordinates(value) {
368
368
  };
369
369
  }
370
370
 
371
+ // ../core/src/assert-never.ts
372
+ function assertNever(value, message = "Unexpected variant") {
373
+ throw new Error(`${message}: ${String(value)}`);
374
+ }
375
+
371
376
  // ../core/src/planner.ts
372
377
  var systemPlanningClock = {
373
378
  now: () => Date.now()
@@ -1418,7 +1423,7 @@ var ALLOWED_URL_PROTOCOLS = ["http:", "https:"];
1418
1423
  var DATE_PATTERN = /^(?<year>[1-9]\d{3})-(?<month>\d{2})-(?<day>\d{2})$/;
1419
1424
  var TIME_PATTERN = /^(?<hours>[01]\d|2[0-3]):(?<minutes>[0-5]\d)$/;
1420
1425
  var DATETIME_PATTERN = /^(?<date>[1-9]\d{3}-\d{2}-\d{2})T(?<time>(?:[01]\d|2[0-3]):[0-5]\d:[0-5]\d)(?:\.\d+)?(?<offset>Z|[+-](?:[01]\d|2[0-3]):[0-5]\d)$/;
1421
- function assertNever(value) {
1426
+ function assertNever2(value) {
1422
1427
  throw new Error(`Unhandled field validation variant: ${JSON.stringify(value)}`);
1423
1428
  }
1424
1429
  function validationContext(options = {}) {
@@ -1479,7 +1484,7 @@ function fieldIssueToMessage(issue2) {
1479
1484
  case "invalidReference":
1480
1485
  return `${issue2.label} must reference a valid item`;
1481
1486
  default:
1482
- return assertNever(issue2);
1487
+ return assertNever2(issue2);
1483
1488
  }
1484
1489
  }
1485
1490
  function pluralize(label, count) {
@@ -1594,7 +1599,7 @@ function deriveFieldValidationPlan(field, path = [field.id]) {
1594
1599
  case "entryPicker":
1595
1600
  return makePlan("passthrough", "unknown", field, path, false, []);
1596
1601
  default:
1597
- return assertNever(field);
1602
+ return assertNever2(field);
1598
1603
  }
1599
1604
  }
1600
1605
  function deriveFieldValidationPlans(fields3, parentPath = []) {
@@ -1667,7 +1672,7 @@ function resolveSelectConstraintSource(field) {
1667
1672
  case "sdk":
1668
1673
  return { kind: "runtime", source: source.kind };
1669
1674
  default:
1670
- return assertNever(source);
1675
+ return assertNever2(source);
1671
1676
  }
1672
1677
  }
1673
1678
  function normalizeStoredContentValues(plans, content, options = {}) {
@@ -1702,7 +1707,7 @@ function normalizeStoredFieldValueWithContext(plan, value, ctx) {
1702
1707
  case "passthrough":
1703
1708
  return normalizeFieldValue(plan, value, ctx);
1704
1709
  default:
1705
- return assertNever(plan);
1710
+ return assertNever2(plan);
1706
1711
  }
1707
1712
  }
1708
1713
  function normalizeStoredObjectChildren(children, value, ctx) {
@@ -1753,7 +1758,7 @@ function normalizeFieldValue(plan, value, ctx) {
1753
1758
  case "passthrough":
1754
1759
  return value;
1755
1760
  default:
1756
- return assertNever(plan);
1761
+ return assertNever2(plan);
1757
1762
  }
1758
1763
  }
1759
1764
  function normalizeObjectChildren(children, value, ctx) {
@@ -1814,7 +1819,7 @@ function validateNormalizedFieldValue(plan, value, ctx) {
1814
1819
  case "passthrough":
1815
1820
  return [];
1816
1821
  default:
1817
- return assertNever(plan);
1822
+ return assertNever2(plan);
1818
1823
  }
1819
1824
  }
1820
1825
  function shouldRequireValue(plan, value, ctx) {
@@ -1845,15 +1850,15 @@ function validateStringConstraint(plan, constraint, value) {
1845
1850
  case "maxLength":
1846
1851
  return value.length > constraint.maximum ? [issue(plan, "tooLong", { maximum: constraint.maximum })] : [];
1847
1852
  case "emailFormat":
1848
- return z4.email().safeParse(value).success ? [] : [issue(plan, "invalidEmail")];
1853
+ return isCanonicalEmailValue(value) ? [] : [issue(plan, "invalidEmail")];
1849
1854
  case "phoneFormat":
1850
- return TEL_RE.test(value) ? [] : [issue(plan, "invalidPhone")];
1855
+ return isCanonicalPhoneValue(value) ? [] : [issue(plan, "invalidPhone")];
1851
1856
  case "patternFormat": {
1852
1857
  const re = compilePattern(constraint.pattern);
1853
1858
  return re && !re.test(value) ? [issue(plan, "invalidPattern")] : [];
1854
1859
  }
1855
1860
  case "urlFormat":
1856
- return isValidUrl(value, constraint.allowRelative) ? [] : [issue(plan, "invalidUrl")];
1861
+ return isCanonicalUrlValue(value, { allowRelative: constraint.allowRelative }) ? [] : [issue(plan, "invalidUrl")];
1857
1862
  case "dateFormat":
1858
1863
  return isValidDateString(value) ? [] : [issue(plan, "invalidDate")];
1859
1864
  case "timeFormat":
@@ -1863,7 +1868,7 @@ function validateStringConstraint(plan, constraint, value) {
1863
1868
  case "slugFormat":
1864
1869
  return SLUG_PATTERN.test(value) ? [] : [issue(plan, "invalidSlug")];
1865
1870
  default:
1866
- return assertNever(constraint);
1871
+ return assertNever2(constraint);
1867
1872
  }
1868
1873
  }
1869
1874
  function validateNumberPlan(plan, value) {
@@ -1880,7 +1885,7 @@ function validateNumberConstraint(plan, constraint, value) {
1880
1885
  case "numberMax":
1881
1886
  return value > constraint.maximum ? [issue(plan, "tooLarge", { maximum: constraint.maximum })] : [];
1882
1887
  default:
1883
- return assertNever(constraint);
1888
+ return assertNever2(constraint);
1884
1889
  }
1885
1890
  }
1886
1891
  function validateSelectPlan(plan, value) {
@@ -1910,7 +1915,7 @@ function validateRepeaterPlan(plan, value, ctx) {
1910
1915
  })
1911
1916
  ] : [];
1912
1917
  default:
1913
- return assertNever(constraint);
1918
+ return assertNever2(constraint);
1914
1919
  }
1915
1920
  });
1916
1921
  return [...constraintIssues, ...value.flatMap((item, index) => validateRepeaterItem(plan, item, index, ctx))];
@@ -1972,7 +1977,7 @@ function rebaseFieldPlanPath(plan, fromPrefix, toPrefix) {
1972
1977
  path
1973
1978
  };
1974
1979
  default:
1975
- return assertNever(plan);
1980
+ return assertNever2(plan);
1976
1981
  }
1977
1982
  }
1978
1983
  function rebaseFieldPath(path, fromPrefix, toPrefix) {
@@ -2059,7 +2064,7 @@ function addFieldIssueToZodContext(zodCtx, validationIssue, rootPath) {
2059
2064
  zodCtx.addIssue({ ...issuePath, code: "custom", message });
2060
2065
  return;
2061
2066
  default:
2062
- assertNever(validationIssue);
2067
+ assertNever2(validationIssue);
2063
2068
  }
2064
2069
  }
2065
2070
  function relativeZodIssuePath(path, rootPath) {
@@ -2075,9 +2080,15 @@ function compilePattern(pattern) {
2075
2080
  function isValidNumber(value) {
2076
2081
  return typeof value === "number" && Number.isFinite(value);
2077
2082
  }
2078
- function isValidUrl(value, allowRelative) {
2083
+ function isCanonicalEmailValue(value) {
2084
+ return z4.email().safeParse(value).success;
2085
+ }
2086
+ function isCanonicalPhoneValue(value) {
2087
+ return TEL_RE.test(value);
2088
+ }
2089
+ function isCanonicalUrlValue(value, options = {}) {
2079
2090
  if (!value) return false;
2080
- if (allowRelative && value.startsWith("/")) return true;
2091
+ if (options.allowRelative === true && value.startsWith("/")) return true;
2081
2092
  try {
2082
2093
  const parsed = new URL(value);
2083
2094
  return ALLOWED_URL_PROTOCOLS.includes(parsed.protocol);
@@ -6949,8 +6960,19 @@ var headingTypographyStyleSchema = typographyStyleSchema.extend({
6949
6960
  colorToken: themeColorTokenSchema.nullable().optional()
6950
6961
  });
6951
6962
  var proseLinkUnderlineStyleSchema = z22.enum(["solid", "dotted", "dashed"]);
6952
- var proseLinkUnderlineThicknessSchema = z22.enum(["auto", "fromFont", "thin", "medium", "thick"]);
6953
- var proseLinkUnderlineOffsetSchema = z22.enum(["auto", "tight", "normal", "loose"]);
6963
+ var proseLinkUnderlineThicknessSchema = z22.enum([
6964
+ "auto",
6965
+ "fromFont",
6966
+ "thin",
6967
+ "medium",
6968
+ "thick"
6969
+ ]);
6970
+ var proseLinkUnderlineOffsetSchema = z22.enum([
6971
+ "auto",
6972
+ "tight",
6973
+ "normal",
6974
+ "loose"
6975
+ ]);
6954
6976
  var proseLinkStyleSchema = z22.object({
6955
6977
  colorToken: themeColorTokenSchema.optional(),
6956
6978
  hoverColorToken: themeColorTokenSchema.optional(),
@@ -6961,7 +6983,14 @@ var proseLinkStyleSchema = z22.object({
6961
6983
  underlineThickness: proseLinkUnderlineThicknessSchema.optional(),
6962
6984
  underlineOffset: proseLinkUnderlineOffsetSchema.optional()
6963
6985
  });
6964
- var semanticSpacingSchema = z22.enum(["none", "compact", "cozy", "medium", "comfortable", "spacious"]);
6986
+ var semanticSpacingSchema = z22.enum([
6987
+ "none",
6988
+ "compact",
6989
+ "cozy",
6990
+ "medium",
6991
+ "comfortable",
6992
+ "spacious"
6993
+ ]);
6965
6994
  var boxRoundedSchema = z22.enum(["none", "sm", "md", "lg", "xl", "2xl", "full"]);
6966
6995
  var boxBackgroundOverlaySchema = z22.object({
6967
6996
  type: z22.enum(["none", "color", "gradient"]).nullable().optional(),
@@ -7105,9 +7134,17 @@ var inputStyle = z22.object({
7105
7134
  focus: z22.enum(["glow", "ring", "underline"]),
7106
7135
  label: z22.enum(["inside", "above"])
7107
7136
  });
7108
- var headerVariant = z22.enum(["classic", "centered", "transparent", "floating", "editorial"]);
7137
+ var headerVariant = z22.enum(["classic", "centered", "transparent", "floating"]);
7109
7138
  var headerPositioning = z22.enum(["static", "sticky", "fixed"]);
7110
- var headerNavStyle = z22.enum(["minimal", "underline", "underline-grow", "capsule", "scale", "frosted", "solid"]);
7139
+ var headerNavStyle = z22.enum([
7140
+ "minimal",
7141
+ "underline",
7142
+ "underline-grow",
7143
+ "capsule",
7144
+ "scale",
7145
+ "frosted",
7146
+ "solid"
7147
+ ]);
7111
7148
  var navFontWeight = z22.enum(["regular", "medium", "semibold", "bold"]);
7112
7149
  var headerMaxWidth = z22.enum(["container", "full"]);
7113
7150
  var headerContainerSchema = z22.object({
@@ -7155,8 +7192,22 @@ var dropdownStyleSchema = z22.object({
7155
7192
  textSize: z22.enum(["xs", "sm", "base", "lg"]).optional()
7156
7193
  // optional = no override (browser default)
7157
7194
  }).optional();
7158
- var headerCtaGapSchema = z22.enum(["none", "tight", "compact", "default", "relaxed", "spacious"]);
7159
- var headerCtaTreatmentSchema = z22.enum(["default", "primary", "secondary", "inverted", "outline", "ghost"]);
7195
+ var headerCtaGapSchema = z22.enum([
7196
+ "none",
7197
+ "tight",
7198
+ "compact",
7199
+ "default",
7200
+ "relaxed",
7201
+ "spacious"
7202
+ ]);
7203
+ var headerCtaTreatmentSchema = z22.enum([
7204
+ "default",
7205
+ "primary",
7206
+ "secondary",
7207
+ "inverted",
7208
+ "outline",
7209
+ "ghost"
7210
+ ]);
7160
7211
  var navContainerSchema = z22.object({
7161
7212
  type: z22.enum(["none", "pill", "glass"]).default("none"),
7162
7213
  tint: z22.string().nullable().optional(),
@@ -7211,7 +7262,14 @@ var footerMaxWidth = z22.enum(["container", "full"]);
7211
7262
  var footerMode = z22.enum(["default", "blocks", "default+blocks", "none"]);
7212
7263
  var footerNavLayoutMode = z22.enum(["stack", "inline", "inline-wrap"]);
7213
7264
  var footerNavLayoutAlign = z22.enum(["start", "center", "end", "space-between"]);
7214
- var footerSpacing = z22.enum(["none", "tight", "compact", "default", "relaxed", "spacious"]);
7265
+ var footerSpacing = z22.enum([
7266
+ "none",
7267
+ "tight",
7268
+ "compact",
7269
+ "default",
7270
+ "relaxed",
7271
+ "spacious"
7272
+ ]);
7215
7273
  var footerLogoPlacement = z22.enum(["left", "right", "above", "below"]);
7216
7274
  var footerLogoSize = z22.enum(["sm", "md", "lg", "xl"]);
7217
7275
  var footerLogoMaxHeight = z22.enum(["sm", "md", "lg", "xl"]);
@@ -7276,7 +7334,12 @@ var footerSchema = z22.object({
7276
7334
  logo: footerLogoSchema.optional(),
7277
7335
  bottomBar: footerBottomBarSchema.optional()
7278
7336
  });
7279
- var containerPaddingPresetSchema = z22.enum(["tight", "compact", "default", "relaxed"]);
7337
+ var containerPaddingPresetSchema = z22.enum([
7338
+ "tight",
7339
+ "compact",
7340
+ "default",
7341
+ "relaxed"
7342
+ ]);
7280
7343
  var layoutSchema = z22.object({
7281
7344
  containerPadding: z22.object({
7282
7345
  mobile: containerPaddingPresetSchema.optional(),
@@ -7284,8 +7347,24 @@ var layoutSchema = z22.object({
7284
7347
  desktop: containerPaddingPresetSchema.optional()
7285
7348
  }).optional()
7286
7349
  }).optional();
7287
- var heroTypographySizeSchema = z22.enum(["sm", "base", "lg", "xl", "2xl", "3xl", "4xl", "5xl", "6xl", "editorial"]);
7288
- var heroTypographyLineHeightSchema = z22.enum(["tight", "snug", "normal", "relaxed"]);
7350
+ var heroTypographySizeSchema = z22.enum([
7351
+ "sm",
7352
+ "base",
7353
+ "lg",
7354
+ "xl",
7355
+ "2xl",
7356
+ "3xl",
7357
+ "4xl",
7358
+ "5xl",
7359
+ "6xl",
7360
+ "editorial"
7361
+ ]);
7362
+ var heroTypographyLineHeightSchema = z22.enum([
7363
+ "tight",
7364
+ "snug",
7365
+ "normal",
7366
+ "relaxed"
7367
+ ]);
7289
7368
  var heroResponsiveTypographySchema = z22.object({
7290
7369
  headlineSize: heroTypographySizeSchema.optional(),
7291
7370
  headlineLineHeight: heroTypographyLineHeightSchema.optional(),
@@ -7839,16 +7918,6 @@ var headerLayoutCatalog = [
7839
7918
  maxRecommendedNavItems: 5,
7840
7919
  allowedLogoShapes: ["none", "text-only", "horizontal", "square"]
7841
7920
  },
7842
- {
7843
- id: asHeaderLayoutId("editorial"),
7844
- label: "Editorial",
7845
- description: "A composed, magazine-like stacked header treatment.",
7846
- structure: "editorial-stack",
7847
- variant: "editorial",
7848
- defaultPositioning: "static",
7849
- shrinkOnScroll: false,
7850
- maxRecommendedNavItems: 6
7851
- },
7852
7921
  {
7853
7922
  id: asHeaderLayoutId("floating"),
7854
7923
  label: "Floating",
@@ -7869,17 +7938,19 @@ var headerStyleCatalog = [
7869
7938
  id: asHeaderStyleId("minimal"),
7870
7939
  label: "Minimal",
7871
7940
  description: "Quiet surface with simple color-change navigation.",
7872
- supportedLayoutIds: supportedLayouts(["classic", "centered", "editorial"]),
7941
+ supportedLayoutIds: supportedLayouts(["classic", "centered"]),
7873
7942
  navInteraction: "color-change",
7874
- surface: "neutral"
7943
+ surface: "neutral",
7944
+ navTypography: "plain"
7875
7945
  },
7876
7946
  {
7877
7947
  id: asHeaderStyleId("fine-line"),
7878
7948
  label: "Fine Line",
7879
7949
  description: "Light surface with a crisp lower rule and underline hover.",
7880
- supportedLayoutIds: supportedLayouts(["classic", "centered", "editorial"]),
7950
+ supportedLayoutIds: supportedLayouts(["classic", "centered"]),
7881
7951
  navInteraction: "underline-grow",
7882
- surface: "bordered"
7952
+ surface: "bordered",
7953
+ navTypography: "plain"
7883
7954
  },
7884
7955
  {
7885
7956
  id: asHeaderStyleId("soft-bar"),
@@ -7887,7 +7958,8 @@ var headerStyleCatalog = [
7887
7958
  description: "Soft tinted surface with gentle pill hover states.",
7888
7959
  supportedLayoutIds: supportedLayouts(["classic", "centered"]),
7889
7960
  navInteraction: "pill-background",
7890
- surface: "soft"
7961
+ surface: "soft",
7962
+ navTypography: "plain"
7891
7963
  },
7892
7964
  {
7893
7965
  id: asHeaderStyleId("pill-nav"),
@@ -7895,23 +7967,26 @@ var headerStyleCatalog = [
7895
7967
  description: "A calm pill navigation rail over a neutral header.",
7896
7968
  supportedLayoutIds: supportedLayouts(["classic", "centered"]),
7897
7969
  navInteraction: "pill-background",
7898
- surface: "soft"
7970
+ surface: "soft",
7971
+ navTypography: "plain"
7899
7972
  },
7900
7973
  {
7901
7974
  id: asHeaderStyleId("brand-bar"),
7902
7975
  label: "Brand Bar",
7903
7976
  description: "Solid brand surface with high-contrast navigation.",
7904
- supportedLayoutIds: supportedLayouts(["classic", "centered", "editorial"]),
7977
+ supportedLayoutIds: supportedLayouts(["classic", "centered"]),
7905
7978
  navInteraction: "color-change",
7906
- surface: "brand-solid"
7979
+ surface: "brand-solid",
7980
+ navTypography: "brand-caps"
7907
7981
  },
7908
7982
  {
7909
7983
  id: asHeaderStyleId("brand-underline"),
7910
7984
  label: "Brand Underline",
7911
7985
  description: "Brand surface with underline-grow navigation.",
7912
- supportedLayoutIds: supportedLayouts(["classic", "editorial"]),
7986
+ supportedLayoutIds: supportedLayouts(["classic"]),
7913
7987
  navInteraction: "underline-grow",
7914
- surface: "brand-solid"
7988
+ surface: "brand-solid",
7989
+ navTypography: "brand-caps"
7915
7990
  },
7916
7991
  {
7917
7992
  id: asHeaderStyleId("brand-pill"),
@@ -7919,41 +7994,44 @@ var headerStyleCatalog = [
7919
7994
  description: "Solid brand surface with rounded active and hover states.",
7920
7995
  supportedLayoutIds: supportedLayouts(["classic", "centered", "floating"]),
7921
7996
  navInteraction: "pill-background",
7922
- surface: "brand-solid"
7997
+ surface: "brand-solid",
7998
+ navTypography: "brand-caps"
7923
7999
  },
7924
8000
  {
7925
- id: asHeaderStyleId("editorial-line"),
7926
- label: "Editorial Line",
8001
+ id: asHeaderStyleId("serif-line"),
8002
+ label: "Serif Line",
7927
8003
  description: "Typographic logo treatment with understated underline navigation.",
7928
- supportedLayoutIds: supportedLayouts(["classic", "centered", "editorial"]),
8004
+ supportedLayoutIds: supportedLayouts(["classic", "centered"]),
7929
8005
  navInteraction: "underline-grow",
7930
- surface: "bordered"
8006
+ surface: "bordered",
8007
+ navTypography: "heading"
7931
8008
  },
7932
8009
  {
7933
8010
  id: asHeaderStyleId("flat-tabs"),
7934
8011
  label: "Flat Tabs",
7935
8012
  description: "Flat block hover and active states with a Swiss utility feel.",
7936
- supportedLayoutIds: supportedLayouts(["classic", "centered", "editorial"]),
8013
+ supportedLayoutIds: supportedLayouts(["classic", "centered"]),
7937
8014
  navInteraction: "flat-block",
7938
- surface: "bordered"
8015
+ surface: "bordered",
8016
+ navTypography: "quiet-caps"
7939
8017
  },
7940
8018
  {
7941
8019
  id: asHeaderStyleId("glass"),
7942
8020
  label: "Glass",
7943
- description: "Floating translucent chrome with frosted navigation backing.",
7944
- supportedLayoutIds: supportedLayouts(["floating"]),
8021
+ description: "Translucent chrome with frosted navigation backing.",
8022
+ supportedLayoutIds: supportedLayouts(["classic", "floating"]),
7945
8023
  navInteraction: "glass-backed",
7946
8024
  surface: "floating",
7947
- requiresFloatingLayout: true
8025
+ navTypography: "plain"
7948
8026
  },
7949
8027
  {
7950
8028
  id: asHeaderStyleId("minimal-surface"),
7951
- label: "Minimal Surface",
7952
- description: "Floating chrome with a restrained translucent surface.",
8029
+ label: "Clear Split",
8030
+ description: "Floating logo with transparent navigation and no shared shell.",
7953
8031
  supportedLayoutIds: supportedLayouts(["floating"]),
7954
8032
  navInteraction: "color-change",
7955
8033
  surface: "floating",
7956
- requiresFloatingLayout: true
8034
+ navTypography: "plain"
7957
8035
  },
7958
8036
  {
7959
8037
  id: asHeaderStyleId("soft-shell"),
@@ -7962,7 +8040,25 @@ var headerStyleCatalog = [
7962
8040
  supportedLayoutIds: supportedLayouts(["floating"]),
7963
8041
  navInteraction: "pill-background",
7964
8042
  surface: "floating",
7965
- requiresFloatingLayout: true
8043
+ navTypography: "plain"
8044
+ },
8045
+ {
8046
+ id: asHeaderStyleId("split-glass"),
8047
+ label: "Split Glass",
8048
+ description: "Logo floats independently while the navigation sits in a glass rail.",
8049
+ supportedLayoutIds: supportedLayouts(["floating"]),
8050
+ navInteraction: "glass-backed",
8051
+ surface: "floating",
8052
+ navTypography: "quiet-caps"
8053
+ },
8054
+ {
8055
+ id: asHeaderStyleId("split-pill"),
8056
+ label: "Split Pill",
8057
+ description: "Logo floats independently with a soft pill-backed navigation rail.",
8058
+ supportedLayoutIds: supportedLayouts(["floating"]),
8059
+ navInteraction: "pill-background",
8060
+ surface: "floating",
8061
+ navTypography: "heading"
7966
8062
  }
7967
8063
  ];
7968
8064
  var headerLayoutsById = new Map(
@@ -7976,13 +8072,14 @@ var headerStyleCompatibilityOrder = /* @__PURE__ */ new Map([
7976
8072
  asHeaderLayoutId("classic"),
7977
8073
  headerStyleRepairChain([
7978
8074
  "minimal",
8075
+ "glass",
7979
8076
  "fine-line",
7980
8077
  "soft-bar",
7981
8078
  "pill-nav",
7982
8079
  "brand-bar",
7983
8080
  "brand-underline",
7984
8081
  "brand-pill",
7985
- "editorial-line",
8082
+ "serif-line",
7986
8083
  "flat-tabs"
7987
8084
  ])
7988
8085
  ],
@@ -7995,19 +8092,7 @@ var headerStyleCompatibilityOrder = /* @__PURE__ */ new Map([
7995
8092
  "pill-nav",
7996
8093
  "brand-bar",
7997
8094
  "brand-pill",
7998
- "editorial-line",
7999
- "flat-tabs"
8000
- ])
8001
- ],
8002
- [
8003
- asHeaderLayoutId("editorial"),
8004
- headerStyleRepairChain([
8005
- "minimal",
8006
- "fine-line",
8007
- "soft-bar",
8008
- "brand-bar",
8009
- "brand-underline",
8010
- "editorial-line",
8095
+ "serif-line",
8011
8096
  "flat-tabs"
8012
8097
  ])
8013
8098
  ],
@@ -8016,6 +8101,8 @@ var headerStyleCompatibilityOrder = /* @__PURE__ */ new Map([
8016
8101
  headerStyleRepairChain([
8017
8102
  "glass",
8018
8103
  "minimal-surface",
8104
+ "split-glass",
8105
+ "split-pill",
8019
8106
  "soft-shell",
8020
8107
  "brand-pill"
8021
8108
  ])
@@ -8024,20 +8111,63 @@ var headerStyleCompatibilityOrder = /* @__PURE__ */ new Map([
8024
8111
  function headerStyleRepairChain(values) {
8025
8112
  return values.map(asHeaderStyleId);
8026
8113
  }
8027
- var headerStyleRepairOrder = /* @__PURE__ */ new Map([
8028
- [asHeaderStyleId("brand-bar"), headerStyleRepairChain(["brand-bar", "brand-pill", "minimal"])],
8029
- [asHeaderStyleId("brand-underline"), headerStyleRepairChain(["editorial-line", "fine-line", "minimal"])],
8030
- [asHeaderStyleId("brand-pill"), headerStyleRepairChain(["brand-pill", "brand-bar", "minimal"])],
8031
- [asHeaderStyleId("pill-nav"), headerStyleRepairChain(["pill-nav", "soft-bar", "minimal"])],
8032
- [asHeaderStyleId("flat-tabs"), headerStyleRepairChain(["flat-tabs", "pill-nav", "minimal"])],
8033
- [asHeaderStyleId("editorial-line"), headerStyleRepairChain(["editorial-line", "fine-line", "minimal"])],
8034
- [asHeaderStyleId("glass"), headerStyleRepairChain(["glass", "minimal-surface", "minimal"])],
8035
- [asHeaderStyleId("soft-shell"), headerStyleRepairChain(["soft-shell", "soft-bar", "minimal"])],
8036
- [asHeaderStyleId("minimal-surface"), headerStyleRepairChain(["minimal-surface", "minimal"])],
8037
- [asHeaderStyleId("fine-line"), headerStyleRepairChain(["fine-line", "minimal"])],
8038
- [asHeaderStyleId("soft-bar"), headerStyleRepairChain(["soft-bar", "minimal"])],
8039
- [asHeaderStyleId("minimal"), headerStyleRepairChain(["minimal"])]
8040
- ]);
8114
+ var headerStyleRepairOrder = /* @__PURE__ */ new Map(
8115
+ [
8116
+ [
8117
+ asHeaderStyleId("brand-bar"),
8118
+ headerStyleRepairChain(["brand-bar", "brand-pill", "minimal"])
8119
+ ],
8120
+ [
8121
+ asHeaderStyleId("brand-underline"),
8122
+ headerStyleRepairChain(["serif-line", "fine-line", "minimal"])
8123
+ ],
8124
+ [
8125
+ asHeaderStyleId("brand-pill"),
8126
+ headerStyleRepairChain(["brand-pill", "brand-bar", "minimal"])
8127
+ ],
8128
+ [
8129
+ asHeaderStyleId("pill-nav"),
8130
+ headerStyleRepairChain(["pill-nav", "soft-bar", "minimal"])
8131
+ ],
8132
+ [
8133
+ asHeaderStyleId("flat-tabs"),
8134
+ headerStyleRepairChain(["flat-tabs", "pill-nav", "minimal"])
8135
+ ],
8136
+ [
8137
+ asHeaderStyleId("serif-line"),
8138
+ headerStyleRepairChain(["serif-line", "fine-line", "minimal"])
8139
+ ],
8140
+ [
8141
+ asHeaderStyleId("glass"),
8142
+ headerStyleRepairChain(["glass", "minimal-surface", "minimal"])
8143
+ ],
8144
+ [
8145
+ asHeaderStyleId("soft-shell"),
8146
+ headerStyleRepairChain(["soft-shell", "soft-bar", "minimal"])
8147
+ ],
8148
+ [
8149
+ asHeaderStyleId("minimal-surface"),
8150
+ headerStyleRepairChain(["minimal-surface", "minimal"])
8151
+ ],
8152
+ [
8153
+ asHeaderStyleId("split-glass"),
8154
+ headerStyleRepairChain(["split-glass", "glass", "minimal-surface"])
8155
+ ],
8156
+ [
8157
+ asHeaderStyleId("split-pill"),
8158
+ headerStyleRepairChain(["split-pill", "soft-shell", "brand-pill"])
8159
+ ],
8160
+ [
8161
+ asHeaderStyleId("fine-line"),
8162
+ headerStyleRepairChain(["fine-line", "minimal"])
8163
+ ],
8164
+ [
8165
+ asHeaderStyleId("soft-bar"),
8166
+ headerStyleRepairChain(["soft-bar", "minimal"])
8167
+ ],
8168
+ [asHeaderStyleId("minimal"), headerStyleRepairChain(["minimal"])]
8169
+ ]
8170
+ );
8041
8171
  var legacyHeaderLookAliases = [
8042
8172
  {
8043
8173
  lookId: asHeaderLookId("clean-base"),
@@ -8054,10 +8184,10 @@ var legacyHeaderLookAliases = [
8054
8184
  }
8055
8185
  },
8056
8186
  {
8057
- lookId: asHeaderLookId("editorial-line"),
8187
+ lookId: asHeaderLookId("serif-line"),
8058
8188
  selection: {
8059
- layoutId: asHeaderLayoutId("editorial"),
8060
- styleId: asHeaderStyleId("editorial-line")
8189
+ layoutId: asHeaderLayoutId("centered"),
8190
+ styleId: asHeaderStyleId("serif-line")
8061
8191
  }
8062
8192
  },
8063
8193
  {
@@ -8096,9 +8226,7 @@ var legacyHeaderLookAliases = [
8096
8226
  }
8097
8227
  }
8098
8228
  ];
8099
- var legacyHeaderLookAliasesById = new Map(
8100
- legacyHeaderLookAliases.map((alias) => [alias.lookId, alias])
8101
- );
8229
+ var legacyHeaderLookAliasesById = new Map(legacyHeaderLookAliases.map((alias) => [alias.lookId, alias]));
8102
8230
  function getHeaderStyle(id) {
8103
8231
  return headerStylesById.get(id) ?? null;
8104
8232
  }
@@ -8116,10 +8244,12 @@ function resolveLegacyHeaderLookAlias(lookId) {
8116
8244
  return legacyHeaderLookAliasesById.get(lookId)?.selection ?? null;
8117
8245
  }
8118
8246
  function getCompatibleHeaderStyleIds(layoutId) {
8119
- return (headerStyleCompatibilityOrder.get(layoutId) ?? []).filter((styleId) => {
8120
- const style = getHeaderStyleOrThrow(styleId);
8121
- return isHeaderStyleCompatibleWithLayout(style, layoutId);
8122
- });
8247
+ return (headerStyleCompatibilityOrder.get(layoutId) ?? []).filter(
8248
+ (styleId) => {
8249
+ const style = getHeaderStyleOrThrow(styleId);
8250
+ return isHeaderStyleCompatibleWithLayout(style, layoutId);
8251
+ }
8252
+ );
8123
8253
  }
8124
8254
  function solidBrandHeader(theme) {
8125
8255
  const ctaVariant = resolveHeaderCtaVariant(theme, "inverted");
@@ -8150,8 +8280,14 @@ function solidBrandHeader(theme) {
8150
8280
  borderRadius: "none",
8151
8281
  effects: {
8152
8282
  hover: [
8153
- { effectId: "text-color-change", options: { hoverColorToken: "secondary" } },
8154
- { effectId: "nav-underline", options: { style: "grow", colorToken: "secondary" } }
8283
+ {
8284
+ effectId: "text-color-change",
8285
+ options: { hoverColorToken: "secondary" }
8286
+ },
8287
+ {
8288
+ effectId: "nav-underline",
8289
+ options: { style: "grow", colorToken: "secondary" }
8290
+ }
8155
8291
  ]
8156
8292
  }
8157
8293
  },
@@ -8207,10 +8343,10 @@ function cleanBaseHeader(theme) {
8207
8343
  ctaGap: "default"
8208
8344
  };
8209
8345
  }
8210
- function editorialLineHeader(theme) {
8346
+ function serifLineHeader(theme) {
8211
8347
  return {
8212
8348
  ...baseHeader(theme),
8213
- variant: "editorial",
8349
+ variant: "centered",
8214
8350
  positioning: "sticky",
8215
8351
  shrinkOnScroll: false,
8216
8352
  background: {
@@ -8379,27 +8515,27 @@ var headerLookCatalog = [
8379
8515
  compile: solidBrandHeader
8380
8516
  },
8381
8517
  {
8382
- id: asHeaderLookId("editorial-line"),
8383
- label: "Editorial line",
8384
- visualTreatment: "light-editorial",
8518
+ id: asHeaderLookId("serif-line"),
8519
+ label: "Serif line",
8520
+ visualTreatment: "light-serif",
8385
8521
  layoutBehavior: "sticky",
8386
8522
  configuration: {
8387
- structure: "editorial-stack",
8388
- treatment: "light-editorial",
8523
+ structure: "centered-stack",
8524
+ treatment: "light-serif",
8389
8525
  behavior: "sticky"
8390
8526
  },
8391
8527
  openingRequirement: "none",
8392
8528
  maxRecommendedNavItems: 6,
8393
- compile: editorialLineHeader
8529
+ compile: serifLineHeader
8394
8530
  },
8395
8531
  {
8396
8532
  id: asHeaderLookId("centered-calm"),
8397
8533
  label: "Centered calm",
8398
- visualTreatment: "light-editorial",
8534
+ visualTreatment: "light-serif",
8399
8535
  layoutBehavior: "normal-flow",
8400
8536
  configuration: {
8401
8537
  structure: "centered-stack",
8402
- treatment: "light-editorial",
8538
+ treatment: "light-serif",
8403
8539
  behavior: "normal-flow"
8404
8540
  },
8405
8541
  openingRequirement: "none",
@@ -8945,12 +9081,16 @@ var expressiveUnderlineInputs = {
8945
9081
  }
8946
9082
  };
8947
9083
  function uniqueContentFrameKinds() {
8948
- const kinds = [...new Set(
8949
- generatedDesignOptionCatalog.contentFrames.map((frame) => frame.kind)
8950
- )];
9084
+ const kinds = [
9085
+ ...new Set(
9086
+ generatedDesignOptionCatalog.contentFrames.map((frame) => frame.kind)
9087
+ )
9088
+ ];
8951
9089
  const firstKind = kinds[0];
8952
9090
  if (!firstKind) {
8953
- throw new Error("Expected generated design option catalog to expose at least one content frame kind.");
9091
+ throw new Error(
9092
+ "Expected generated design option catalog to expose at least one content frame kind."
9093
+ );
8954
9094
  }
8955
9095
  return [firstKind, ...kinds.slice(1)];
8956
9096
  }
@@ -8960,7 +9100,9 @@ function defineCuratedSiteStyle(input) {
8960
9100
  const inferredHeaderCuration = inferHeaderCurationFromLegacyLooks(legacyHeaderLookIds);
8961
9101
  const typographyPresetChoices = input.typographyPresetChoices ?? defaultTypographyPresetChoicesForRecipe(input.tokenRecipes.typography);
8962
9102
  const defaultTypographyPresetId = input.defaultTypographyPresetId ? asTypographyPresetId(input.defaultTypographyPresetId) : typographyPresetChoices[0].id;
8963
- if (!typographyPresetChoices.some((choice) => choice.id === defaultTypographyPresetId)) {
9103
+ if (!typographyPresetChoices.some(
9104
+ (choice) => choice.id === defaultTypographyPresetId
9105
+ )) {
8964
9106
  throw new Error(
8965
9107
  `Default typography preset ${defaultTypographyPresetId} is not curated for site style ${input.id}.`
8966
9108
  );
@@ -8971,9 +9113,13 @@ function defineCuratedSiteStyle(input) {
8971
9113
  description: input.description,
8972
9114
  generationBrief: input.generationBrief,
8973
9115
  selectionKeywordRules: input.selectionKeywordRules ?? [],
8974
- siteCreatorSelection: input.siteCreatorSelection ?? { kind: "explicit_only" },
9116
+ siteCreatorSelection: input.siteCreatorSelection ?? {
9117
+ kind: "explicit_only"
9118
+ },
8975
9119
  template: {
8976
- id: asDesignSystemTemplateId(`template:${input.id.replace("site-style:", "")}`),
9120
+ id: asDesignSystemTemplateId(
9121
+ `template:${input.id.replace("site-style:", "")}`
9122
+ ),
8977
9123
  name: input.name,
8978
9124
  version: 1,
8979
9125
  tokenRecipes: input.tokenRecipes,
@@ -8991,13 +9137,17 @@ function defineCuratedSiteStyle(input) {
8991
9137
  } : inferredHeaderCuration.defaultHeaderSelection,
8992
9138
  recommendedHeaderLayoutChoices: input.recommendedHeaderLayoutChoices ?? inferredHeaderCuration.recommendedHeaderLayoutChoices,
8993
9139
  recommendedHeaderStyleChoicesByLayout: input.recommendedHeaderStyleChoicesByLayout ?? inferredHeaderCuration.recommendedHeaderStyleChoicesByLayout,
8994
- discouragedHeaderSelections: input.discouragedHeaderSelections?.map((selection) => ({
8995
- layoutId: asHeaderLayoutId(selection.layoutId),
8996
- styleId: asHeaderStyleId(selection.styleId)
8997
- })),
9140
+ discouragedHeaderSelections: input.discouragedHeaderSelections?.map(
9141
+ (selection) => ({
9142
+ layoutId: asHeaderLayoutId(selection.layoutId),
9143
+ styleId: asHeaderStyleId(selection.styleId)
9144
+ })
9145
+ ),
8998
9146
  recommendedHeaderLookIds: legacyHeaderLookIds.map(asHeaderLookId),
8999
9147
  // Empty is intentional: resolveFooterLook always appends its guaranteed fallback.
9000
- recommendedFooterLookIds: (input.recommendedFooterLookIds ?? []).map(asFooterLookId),
9148
+ recommendedFooterLookIds: (input.recommendedFooterLookIds ?? []).map(
9149
+ asFooterLookId
9150
+ ),
9001
9151
  buttonPersonalityChoices: input.buttonPersonalityChoices,
9002
9152
  paletteVariantChoices: input.paletteVariantChoices,
9003
9153
  typographyPresetChoices,
@@ -9016,7 +9166,7 @@ function headerLayoutChoice(id, note) {
9016
9166
  function headerStyleChoice(id, note) {
9017
9167
  return note ? { id: asHeaderStyleId(id), note } : { id: asHeaderStyleId(id) };
9018
9168
  }
9019
- function headerLayoutRecordKey(id) {
9169
+ function unbrandHeaderLayoutId(id) {
9020
9170
  return id;
9021
9171
  }
9022
9172
  function uniqueHeaderLayoutChoices(choices) {
@@ -9039,7 +9189,9 @@ function nonEmptyHeaderStyleChoices(choices, fallbackLayoutId) {
9039
9189
  return [first, ...choices.slice(1)];
9040
9190
  }
9041
9191
  function inferHeaderCurationFromLegacyLooks(lookIds) {
9042
- const selections = lookIds.map((lookId) => resolveLegacyHeaderLookAlias(asHeaderLookId(lookId))).filter((selection) => Boolean(selection));
9192
+ const selections = lookIds.map((lookId) => resolveLegacyHeaderLookAlias(asHeaderLookId(lookId))).filter(
9193
+ (selection) => Boolean(selection)
9194
+ );
9043
9195
  const defaultHeaderSelection = selections[0] ?? {
9044
9196
  layoutId: asHeaderLayoutId("classic"),
9045
9197
  styleId: asHeaderStyleId("minimal")
@@ -9050,10 +9202,7 @@ function inferHeaderCurationFromLegacyLooks(lookIds) {
9050
9202
  const stylesByLayout = {};
9051
9203
  for (const layoutChoice of layoutChoices) {
9052
9204
  const styleChoices = selections.filter((selection) => selection.layoutId === layoutChoice.id).map((selection) => headerStyleChoice(selection.styleId));
9053
- stylesByLayout[headerLayoutRecordKey(layoutChoice.id)] = nonEmptyHeaderStyleChoices(
9054
- styleChoices,
9055
- layoutChoice.id
9056
- );
9205
+ stylesByLayout[unbrandHeaderLayoutId(layoutChoice.id)] = nonEmptyHeaderStyleChoices(styleChoices, layoutChoice.id);
9057
9206
  }
9058
9207
  return {
9059
9208
  defaultHeaderSelection,
@@ -9108,7 +9257,11 @@ var curatedSiteStyles = [
9108
9257
  motion: "subtle"
9109
9258
  },
9110
9259
  compositionBudget: quietBudget,
9111
- recommendedHeaderLookIds: ["centered-calm", "minimal-transparent", "clean-base"],
9260
+ recommendedHeaderLookIds: [
9261
+ "centered-calm",
9262
+ "minimal-transparent",
9263
+ "clean-base"
9264
+ ],
9112
9265
  buttonPersonalityChoices: [
9113
9266
  buttonChoice("soft-pill"),
9114
9267
  buttonChoice("pebble"),
@@ -9137,7 +9290,11 @@ var curatedSiteStyles = [
9137
9290
  motion: "subtle"
9138
9291
  },
9139
9292
  compositionBudget: balancedBudget,
9140
- recommendedHeaderLookIds: ["practical-utility", "brand-solid", "clean-base"],
9293
+ recommendedHeaderLookIds: [
9294
+ "practical-utility",
9295
+ "brand-solid",
9296
+ "clean-base"
9297
+ ],
9141
9298
  buttonPersonalityChoices: [
9142
9299
  buttonChoice("confident-chip"),
9143
9300
  buttonChoice("soft-pill"),
@@ -9164,7 +9321,11 @@ var curatedSiteStyles = [
9164
9321
  motion: "subtle"
9165
9322
  },
9166
9323
  compositionBudget: balancedBudget,
9167
- recommendedHeaderLookIds: ["editorial-line", "minimal-transparent", "centered-calm"],
9324
+ recommendedHeaderLookIds: [
9325
+ "serif-line",
9326
+ "minimal-transparent",
9327
+ "centered-calm"
9328
+ ],
9168
9329
  buttonPersonalityChoices: [
9169
9330
  buttonChoice("editorial-link"),
9170
9331
  buttonChoice("soft-pill"),
@@ -9192,7 +9353,11 @@ var curatedSiteStyles = [
9192
9353
  motion: "expressive"
9193
9354
  },
9194
9355
  compositionBudget: balancedBudget,
9195
- recommendedHeaderLookIds: ["brand-solid", "practical-utility", "clean-base"],
9356
+ recommendedHeaderLookIds: [
9357
+ "brand-solid",
9358
+ "practical-utility",
9359
+ "clean-base"
9360
+ ],
9196
9361
  buttonPersonalityChoices: [
9197
9362
  buttonChoice("pebble"),
9198
9363
  buttonChoice("brushed-wash"),
@@ -9209,7 +9374,10 @@ var curatedSiteStyles = [
9209
9374
  name: "Quiet Luxury",
9210
9375
  description: "Minimal, confident, and refined for premium experiences and private services.",
9211
9376
  generationBrief: "Use fewer claims, more specificity, and restrained sensory detail. Favor elegant media and low repetition over dense panels.",
9212
- siteCreatorSelection: { kind: "site_creator_keyword_heuristic", priority: 20 },
9377
+ siteCreatorSelection: {
9378
+ kind: "site_creator_keyword_heuristic",
9379
+ priority: 20
9380
+ },
9213
9381
  selectionKeywordRules: [
9214
9382
  { kind: "word", value: "luxury" },
9215
9383
  { kind: "word", value: "premium" },
@@ -9227,7 +9395,11 @@ var curatedSiteStyles = [
9227
9395
  motion: "none"
9228
9396
  },
9229
9397
  compositionBudget: quietBudget,
9230
- recommendedHeaderLookIds: ["minimal-transparent", "editorial-line", "clean-base"],
9398
+ recommendedHeaderLookIds: [
9399
+ "minimal-transparent",
9400
+ "serif-line",
9401
+ "clean-base"
9402
+ ],
9231
9403
  buttonPersonalityChoices: [
9232
9404
  buttonChoice("editorial-link"),
9233
9405
  buttonChoice("confident-chip"),
@@ -9263,7 +9435,11 @@ var curatedSiteStyles = [
9263
9435
  motion: "none"
9264
9436
  },
9265
9437
  compositionBudget: quietBudget,
9266
- recommendedHeaderLookIds: ["practical-utility", "brand-solid", "clean-base"],
9438
+ recommendedHeaderLookIds: [
9439
+ "practical-utility",
9440
+ "brand-solid",
9441
+ "clean-base"
9442
+ ],
9267
9443
  buttonPersonalityChoices: [
9268
9444
  buttonChoice("confident-chip"),
9269
9445
  buttonChoice("pebble"),
@@ -9290,7 +9466,11 @@ var curatedSiteStyles = [
9290
9466
  motion: "subtle"
9291
9467
  },
9292
9468
  compositionBudget: balancedBudget,
9293
- recommendedHeaderLookIds: ["centered-calm", "minimal-transparent", "clean-base"],
9469
+ recommendedHeaderLookIds: [
9470
+ "centered-calm",
9471
+ "minimal-transparent",
9472
+ "clean-base"
9473
+ ],
9294
9474
  buttonPersonalityChoices: [
9295
9475
  buttonChoice("soft-pill"),
9296
9476
  buttonChoice("pebble"),
@@ -9307,7 +9487,10 @@ var curatedSiteStyles = [
9307
9487
  name: "Quiet Practice",
9308
9488
  description: "Grounded, calm, and practical for small appointment-first practices.",
9309
9489
  generationBrief: "Make services, practitioner trust, preparation notes, and booking routes easy to scan. Keep the tone warm and specific, with quiet confidence rather than spa cliches or medical claims.",
9310
- siteCreatorSelection: { kind: "site_creator_keyword_heuristic", priority: 30 },
9490
+ siteCreatorSelection: {
9491
+ kind: "site_creator_keyword_heuristic",
9492
+ priority: 30
9493
+ },
9311
9494
  selectionKeywordRules: [
9312
9495
  { kind: "substring", value: "massage" },
9313
9496
  { kind: "word", value: "bodywork" },
@@ -9328,7 +9511,11 @@ var curatedSiteStyles = [
9328
9511
  motion: "subtle"
9329
9512
  },
9330
9513
  compositionBudget: quietBudget,
9331
- recommendedHeaderLookIds: ["practical-utility", "clean-base", "centered-calm"],
9514
+ recommendedHeaderLookIds: [
9515
+ "practical-utility",
9516
+ "clean-base",
9517
+ "centered-calm"
9518
+ ],
9332
9519
  buttonPersonalityChoices: [
9333
9520
  buttonChoice("pebble"),
9334
9521
  buttonChoice("soft-pill"),
@@ -9345,7 +9532,10 @@ var curatedSiteStyles = [
9345
9532
  name: "Personal Retreat Journal",
9346
9533
  description: "Warm, story-led, and readable for solo practitioners with mixed offers.",
9347
9534
  generationBrief: "Center the practitioner as the guide, then make private sessions, classes, retreats, and resources feel like clear pathways. Keep retreat copy grounded and practical, with enough editorial warmth for longer reading.",
9348
- siteCreatorSelection: { kind: "site_creator_keyword_heuristic", priority: 40 },
9535
+ siteCreatorSelection: {
9536
+ kind: "site_creator_keyword_heuristic",
9537
+ priority: 40
9538
+ },
9349
9539
  selectionKeywordRules: [
9350
9540
  { kind: "substring", value: "retreat" },
9351
9541
  { kind: "phrase", value: "solo practitioner" },
@@ -9365,7 +9555,11 @@ var curatedSiteStyles = [
9365
9555
  motion: "subtle"
9366
9556
  },
9367
9557
  compositionBudget: balancedBudget,
9368
- recommendedHeaderLookIds: ["editorial-line", "centered-calm", "minimal-transparent"],
9558
+ recommendedHeaderLookIds: [
9559
+ "serif-line",
9560
+ "centered-calm",
9561
+ "minimal-transparent"
9562
+ ],
9369
9563
  buttonPersonalityChoices: [
9370
9564
  buttonChoice("editorial-link"),
9371
9565
  buttonChoice("soft-pill"),
@@ -9382,7 +9576,10 @@ var curatedSiteStyles = [
9382
9576
  name: "Tactile Workshop",
9383
9577
  description: "Bright, hands-on, and image-led for maker studios, workshops, and creative classes.",
9384
9578
  generationBrief: "Lead with objects, materials, studio process, and practical booking detail. Keep the tone warm and direct, with useful mess, clear dates, and enough gallery rhythm to feel like a real creative studio.",
9385
- siteCreatorSelection: { kind: "site_creator_keyword_heuristic", priority: 50 },
9579
+ siteCreatorSelection: {
9580
+ kind: "site_creator_keyword_heuristic",
9581
+ priority: 50
9582
+ },
9386
9583
  selectionKeywordRules: [
9387
9584
  { kind: "substring", value: "ceramic" },
9388
9585
  { kind: "word", value: "pottery" },
@@ -9402,8 +9599,15 @@ var curatedSiteStyles = [
9402
9599
  motion: "subtle"
9403
9600
  },
9404
9601
  compositionBudget: balancedBudget,
9405
- recommendedHeaderLookIds: ["brand-solid", "practical-utility", "clean-base"],
9406
- recommendedFooterLookIds: ["site-footer-brand-two-band", "footer-muted-grounding"],
9602
+ recommendedHeaderLookIds: [
9603
+ "brand-solid",
9604
+ "practical-utility",
9605
+ "clean-base"
9606
+ ],
9607
+ recommendedFooterLookIds: [
9608
+ "site-footer-brand-two-band",
9609
+ "footer-muted-grounding"
9610
+ ],
9407
9611
  buttonPersonalityChoices: [
9408
9612
  buttonChoice("pebble"),
9409
9613
  buttonChoice("confident-chip"),
@@ -9422,7 +9626,10 @@ var curatedSiteStyles = [
9422
9626
  name: "Soft Earth",
9423
9627
  description: "Warm, grounded, and editorial for yoga studios, retreats, and wellbeing communities.",
9424
9628
  generationBrief: "Use cream space, terracotta CTAs, olive proof bands, natural imagery, generous but composed spacing, and editorial serif headings. Prefer a real intro section, image-led offering cards, warm community proof, and a simple two-column FAQ when content allows.",
9425
- siteCreatorSelection: { kind: "site_creator_keyword_heuristic", priority: 45 },
9629
+ siteCreatorSelection: {
9630
+ kind: "site_creator_keyword_heuristic",
9631
+ priority: 45
9632
+ },
9426
9633
  selectionKeywordRules: [
9427
9634
  { kind: "word", value: "meditation" },
9428
9635
  { kind: "word", value: "wellbeing" },
@@ -9498,8 +9705,15 @@ var curatedSiteStyles = [
9498
9705
  "faq-soft-earth-two-column",
9499
9706
  "contact-form-panel"
9500
9707
  ],
9501
- recommendedHeaderLookIds: ["centered-calm", "minimal-transparent", "editorial-line"],
9502
- recommendedFooterLookIds: ["footer-muted-grounding", "site-footer-brand-two-band"],
9708
+ recommendedHeaderLookIds: [
9709
+ "centered-calm",
9710
+ "minimal-transparent",
9711
+ "serif-line"
9712
+ ],
9713
+ recommendedFooterLookIds: [
9714
+ "footer-muted-grounding",
9715
+ "site-footer-brand-two-band"
9716
+ ],
9503
9717
  buttonPersonalityChoices: [
9504
9718
  buttonChoice("earth-pill"),
9505
9719
  buttonChoice("soft-pill"),
@@ -9518,7 +9732,10 @@ var curatedSiteStyles = [
9518
9732
  name: "Bold Launch",
9519
9733
  description: "High-energy and punchy for launches, campaigns, and creative offers.",
9520
9734
  generationBrief: "Use crisp positioning, bold hero structure, strong calls to action, and confident visual rhythm. Keep it precise, not shouty.",
9521
- siteCreatorSelection: { kind: "site_creator_keyword_heuristic", priority: 10 },
9735
+ siteCreatorSelection: {
9736
+ kind: "site_creator_keyword_heuristic",
9737
+ priority: 10
9738
+ },
9522
9739
  selectionKeywordRules: [
9523
9740
  { kind: "substring", value: "launch" },
9524
9741
  { kind: "substring", value: "campaign" },
@@ -9537,7 +9754,11 @@ var curatedSiteStyles = [
9537
9754
  motion: "expressive"
9538
9755
  },
9539
9756
  compositionBudget: expressiveBudget,
9540
- recommendedHeaderLookIds: ["transparent-overlay", "floating-glass", "brand-solid"],
9757
+ recommendedHeaderLookIds: [
9758
+ "transparent-overlay",
9759
+ "floating-glass",
9760
+ "brand-solid"
9761
+ ],
9541
9762
  buttonPersonalityChoices: [
9542
9763
  buttonChoice("ink-stamp"),
9543
9764
  buttonChoice("confident-chip"),
@@ -9588,8 +9809,15 @@ var curatedSiteStyles = [
9588
9809
  "testimonials-accent-quote-proof",
9589
9810
  "contact-form-brand-depth-card"
9590
9811
  ],
9591
- recommendedHeaderLookIds: ["brand-solid", "transparent-overlay", "practical-utility"],
9592
- recommendedFooterLookIds: ["site-footer-brand-two-band", "footer-muted-grounding"],
9812
+ recommendedHeaderLookIds: [
9813
+ "brand-solid",
9814
+ "transparent-overlay",
9815
+ "practical-utility"
9816
+ ],
9817
+ recommendedFooterLookIds: [
9818
+ "site-footer-brand-two-band",
9819
+ "footer-muted-grounding"
9820
+ ],
9593
9821
  buttonPersonalityChoices: [
9594
9822
  buttonChoice("showtime-pill"),
9595
9823
  buttonChoice("confident-chip"),
@@ -17354,10 +17582,7 @@ var headerRootClassTransform = {
17354
17582
  const navContainerType = header?.navContainer?.type ?? "none";
17355
17583
  const hasContainedNav = navContainerType === "glass" || navContainerType === "pill";
17356
17584
  const backgroundClass = visuals.isTransparent || hasContainedNav ? "rb-bg-transparent" : null;
17357
- const classes = [
17358
- config.base,
17359
- backgroundClass
17360
- ];
17585
+ const classes = [config.base, backgroundClass];
17361
17586
  if (!hasContainedNav) {
17362
17587
  if (config.blur) classes.push(config.blur);
17363
17588
  if (config.blurSupport) classes.push(config.blurSupport);
@@ -17372,7 +17597,12 @@ var headerRootClassTransform = {
17372
17597
  if (shrinkOnScroll && (positioning === "sticky" || positioning === "fixed")) {
17373
17598
  classes.push(config.shrink);
17374
17599
  }
17375
- const VALID_VARIANTS = ["classic", "centered", "transparent", "floating", "editorial"];
17600
+ const VALID_VARIANTS = [
17601
+ "classic",
17602
+ "centered",
17603
+ "transparent",
17604
+ "floating"
17605
+ ];
17376
17606
  const variant = header?.variant;
17377
17607
  if (variant && VALID_VARIANTS.includes(variant)) {
17378
17608
  classes.push(`header-variant-${variant}`);
@@ -18024,15 +18254,21 @@ var mobileCta = ctaButton({
18024
18254
  var mobileToggleIcon = stack({ gap: "xs", className: "nav-mobile-icon" }, [
18025
18255
  {
18026
18256
  type: "div",
18027
- props: { className: "nav-mobile-bar nav-mobile-bar-top rb-h-0.5 rb-w-5 rb-rounded-full rb-bg-current" }
18257
+ props: {
18258
+ className: "nav-mobile-bar nav-mobile-bar-top rb-h-0.5 rb-w-5 rb-rounded-full rb-bg-current"
18259
+ }
18028
18260
  },
18029
18261
  {
18030
18262
  type: "div",
18031
- props: { className: "nav-mobile-bar nav-mobile-bar-middle rb-h-0.5 rb-w-5 rb-rounded-full rb-bg-current" }
18263
+ props: {
18264
+ className: "nav-mobile-bar nav-mobile-bar-middle rb-h-0.5 rb-w-5 rb-rounded-full rb-bg-current"
18265
+ }
18032
18266
  },
18033
18267
  {
18034
18268
  type: "div",
18035
- props: { className: "nav-mobile-bar nav-mobile-bar-bottom rb-h-0.5 rb-w-5 rb-rounded-full rb-bg-current" }
18269
+ props: {
18270
+ className: "nav-mobile-bar nav-mobile-bar-bottom rb-h-0.5 rb-w-5 rb-rounded-full rb-bg-current"
18271
+ }
18036
18272
  }
18037
18273
  ]);
18038
18274
  var mobileToggleButton = {
@@ -18215,28 +18451,6 @@ var floatingLayout = inline(
18215
18451
  ],
18216
18452
  when("$root.theme.header.variant", { equals: "floating" })
18217
18453
  );
18218
- var editorialLayout = stack(
18219
- {
18220
- gap: "md",
18221
- align: "center",
18222
- className: bindProp("$root.theme.header.maxWidth", {
18223
- transforms: pipe(
18224
- tx("layout.maxWidthClass", {
18225
- base: `rb-header-layout ${desktopOnlyDisplay("flex")} rb-w-full rb-flex-col rb-items-center rb-gap-6 rb-text-center`
18226
- })
18227
- ),
18228
- fallback: `rb-container rb-header-layout ${desktopOnlyDisplay("flex")} rb-w-full rb-flex-col rb-items-center rb-gap-6 rb-text-center`
18229
- })
18230
- },
18231
- [
18232
- centeredLogoRow,
18233
- createNavRow(
18234
- `${desktopOnlyDisplay("flex")} rb-flex-wrap rb-justify-center rb-gap-x-8 rb-gap-y-3`,
18235
- "center"
18236
- )
18237
- ],
18238
- when("$root.theme.header.variant", { equals: "editorial" })
18239
- );
18240
18454
  var headerLayout = headerSection(
18241
18455
  {
18242
18456
  background: bindProp("$root.theme.header", {
@@ -18250,10 +18464,7 @@ var headerLayout = headerSection(
18250
18464
  }),
18251
18465
  style: bindProp("$root.theme.header", {
18252
18466
  transforms: pipe(tx("layout.headerRootStyle")),
18253
- fallback: mergeStyles(
18254
- textColorStyle("text"),
18255
- borderColorStyle("border")
18256
- )
18467
+ fallback: mergeStyles(textColorStyle("text"), borderColorStyle("border"))
18257
18468
  })
18258
18469
  },
18259
18470
  [
@@ -18262,7 +18473,6 @@ var headerLayout = headerSection(
18262
18473
  centeredLayout,
18263
18474
  transparentLayout,
18264
18475
  floatingLayout,
18265
- editorialLayout,
18266
18476
  mobileOverlay
18267
18477
  ],
18268
18478
  props({
@@ -26590,7 +26800,7 @@ var publicProductsResponseSchema = z53.object({
26590
26800
  });
26591
26801
 
26592
26802
  // ../blocks/src/system/runtime/api/creditProducts.ts
26593
- function assertNever3(value) {
26803
+ function assertNever4(value) {
26594
26804
  throw new Error(`Unhandled credit product case: ${String(value)}`);
26595
26805
  }
26596
26806
  function useCasesFromModules(modules) {
@@ -26623,7 +26833,7 @@ function getCreditProductCreditUnit(useCase) {
26623
26833
  perCreditSuffix: "credit"
26624
26834
  };
26625
26835
  default:
26626
- return assertNever3(useCase);
26836
+ return assertNever4(useCase);
26627
26837
  }
26628
26838
  }
26629
26839
  function deriveCreditProductLabels(products, options = {}) {
@@ -31804,7 +32014,7 @@ function resolveAccordionIconStyle(iconStyle, iconTreatment) {
31804
32014
  case "minimal-cross":
31805
32015
  return "plus-minus";
31806
32016
  default:
31807
- return assertNever4(iconTreatment.iconSet);
32017
+ return assertNever5(iconTreatment.iconSet);
31808
32018
  }
31809
32019
  }
31810
32020
  return iconStyle && iconStyle in ICON_CONFIG ? iconStyle : "chevron";
@@ -31823,7 +32033,7 @@ function accordionIconColorStyle(iconTreatment) {
31823
32033
  function resolveIconColorToken(token) {
31824
32034
  return token === "muted" ? "mutedText" : token;
31825
32035
  }
31826
- function assertNever4(value) {
32036
+ function assertNever5(value) {
31827
32037
  throw new Error(`Unhandled accordion icon set: ${String(value)}`);
31828
32038
  }
31829
32039
 
@@ -39328,6 +39538,9 @@ function transformSdkBlockToDefinition(sdkBlock) {
39328
39538
  }
39329
39539
 
39330
39540
  // ../blocks/src/customBlockRegistry.ts
39541
+ var defaultCustomBlockSourcePolicy = {
39542
+ kind: "canonical-db-fallback-sdk"
39543
+ };
39331
39544
  function isCustomBlockKind(blockKind) {
39332
39545
  return blockKind.startsWith("custom.");
39333
39546
  }
@@ -39354,39 +39567,86 @@ function toResolvedCustomBlock(manifest, source) {
39354
39567
  )
39355
39568
  };
39356
39569
  }
39570
+ function planCustomBlockRegistryResolution({
39571
+ sdkConfig,
39572
+ customBlocks = [],
39573
+ policy = defaultCustomBlockSourcePolicy
39574
+ }) {
39575
+ switch (policy.kind) {
39576
+ case "canonical-db-fallback-sdk": {
39577
+ const entriesByKind = /* @__PURE__ */ new Map();
39578
+ const conflicts = [];
39579
+ for (const customBlock of customBlocks) {
39580
+ entriesByKind.set(
39581
+ customBlock.manifest.id,
39582
+ toResolvedCustomBlock(customBlock.manifest, customBlock.source)
39583
+ );
39584
+ }
39585
+ for (const sdkBlock of sdkConfig?.customBlocks ?? []) {
39586
+ const existing = entriesByKind.get(sdkBlock.id);
39587
+ if (existing) {
39588
+ conflicts.push({
39589
+ kind: "conflict",
39590
+ blockKind: existing.blockKind,
39591
+ winner: existing.source,
39592
+ loser: { kind: "sdk-config" },
39593
+ reason: "db-canonical-sdk-fallback"
39594
+ });
39595
+ continue;
39596
+ }
39597
+ entriesByKind.set(
39598
+ sdkBlock.id,
39599
+ toResolvedCustomBlock(sdkBlock, { kind: "sdk-config" })
39600
+ );
39601
+ }
39602
+ return {
39603
+ policy,
39604
+ entries: Array.from(entriesByKind.values()),
39605
+ conflicts
39606
+ };
39607
+ }
39608
+ }
39609
+ }
39357
39610
  function createCustomBlockRegistry({
39358
39611
  sdkConfig,
39359
39612
  customBlocks = [],
39613
+ policy = defaultCustomBlockSourcePolicy,
39360
39614
  onConflict
39361
39615
  }) {
39362
- const entriesByKind = /* @__PURE__ */ new Map();
39363
- for (const sdkBlock of sdkConfig?.customBlocks ?? []) {
39364
- entriesByKind.set(
39365
- sdkBlock.id,
39366
- toResolvedCustomBlock(sdkBlock, { kind: "sdk-config" })
39367
- );
39368
- }
39369
- for (const customBlock of customBlocks) {
39370
- const existing = entriesByKind.get(customBlock.manifest.id);
39371
- if (existing) {
39372
- onConflict?.(
39373
- `Skipping DB custom block "${customBlock.manifest.id}" - conflicts with SDK config block`
39374
- );
39375
- continue;
39376
- }
39377
- entriesByKind.set(
39378
- customBlock.manifest.id,
39379
- toResolvedCustomBlock(customBlock.manifest, customBlock.source)
39616
+ const plan = planCustomBlockRegistryResolution({
39617
+ sdkConfig,
39618
+ customBlocks,
39619
+ policy
39620
+ });
39621
+ const entriesByKind = new Map(
39622
+ plan.entries.map((entry) => [entry.blockKind, entry])
39623
+ );
39624
+ for (const conflict of plan.conflicts) {
39625
+ onConflict?.(
39626
+ `Using ${sourceLabel(conflict.winner)} custom block "${conflict.blockKind}" - ${sourceLabel(conflict.loser)} block is fallback only`
39380
39627
  );
39381
39628
  }
39382
39629
  return {
39383
- entries: Array.from(entriesByKind.values()),
39630
+ entries: plan.entries,
39631
+ conflicts: plan.conflicts,
39384
39632
  findManifest: (blockKind) => {
39385
39633
  if (!isCustomBlockKind(blockKind)) return void 0;
39386
39634
  return entriesByKind.get(blockKind);
39387
39635
  }
39388
39636
  };
39389
39637
  }
39638
+ function sourceLabel(source) {
39639
+ switch (source.kind) {
39640
+ case "managed-database":
39641
+ return "DB";
39642
+ case "sdk-synced":
39643
+ return "SDK-synced DB";
39644
+ case "sdk-config":
39645
+ return "SDK config";
39646
+ default:
39647
+ return assertNever(source);
39648
+ }
39649
+ }
39390
39650
 
39391
39651
  // ../blocks/src/PageRenderer.tsx
39392
39652
  import { Fragment as Fragment6, jsx as jsx52 } from "react/jsx-runtime";
@@ -41487,9 +41747,9 @@ var containerResponsiveThemeCss = `/*
41487
41747
  }
41488
41748
 
41489
41749
  @layer rb-theme {
41490
- /* Fallback defaults so preview doesn't look broken before ThemeScope injects vars */
41491
- :root {
41492
- /* --tb-primary: 17 24 39;
41750
+ /* Fallback defaults so preview doesn't look broken before ThemeScope injects vars */
41751
+ :root {
41752
+ /* --tb-primary: 17 24 39;
41493
41753
  --tb-text: 17 24 39;
41494
41754
  --tb-muted: 107 114 128;
41495
41755
  --tb-bg: 255 255 255;
@@ -41511,159 +41771,164 @@ var containerResponsiveThemeCss = `/*
41511
41771
 
41512
41772
  --motion-duration: 180ms;
41513
41773
  --motion-ease: cubic-bezier(.2,.8,.2,1); */
41514
- }
41774
+ }
41515
41775
 
41516
- /* -------------------------------------------------------------------------- */
41517
- /* Shared: Modal */
41518
- /* -------------------------------------------------------------------------- */
41776
+ /* -------------------------------------------------------------------------- */
41777
+ /* Shared: Modal */
41778
+ /* -------------------------------------------------------------------------- */
41519
41779
 
41520
- :where(.theme-scope) .rb-modal-overlay {
41521
- position: fixed;
41522
- inset: 0;
41523
- z-index: var(--rb-modal-z-index, 20000);
41524
- display: grid;
41525
- place-items: center;
41526
- padding: 1rem;
41527
- /* Keep a hard fallback so the overlay never becomes transparent due to invalid vars. */
41528
- background-color: rgba(0, 0, 0, 0.6);
41529
- background: var(--rb-modal-overlay-bg, rgba(0, 0, 0, 0.6));
41530
- }
41780
+ :where(.theme-scope) .rb-modal-overlay {
41781
+ position: fixed;
41782
+ inset: 0;
41783
+ z-index: var(--rb-modal-z-index, 20000);
41784
+ display: grid;
41785
+ place-items: center;
41786
+ padding: 1rem;
41787
+ /* Keep a hard fallback so the overlay never becomes transparent due to invalid vars. */
41788
+ background-color: rgba(0, 0, 0, 0.6);
41789
+ background: var(--rb-modal-overlay-bg, rgba(0, 0, 0, 0.6));
41790
+ }
41531
41791
 
41532
- :where(.theme-scope) .rb-modal {
41533
- width: min(var(--rb-modal-max-width, 560px), 100%);
41534
- background: var(--rb-modal-bg, rgb(var(--tb-surface)));
41535
- border: 1px solid var(--rb-modal-border, rgb(var(--tb-border)));
41536
- border-radius: var(--rb-modal-radius, var(--radius-card));
41537
- box-shadow: var(--rb-modal-shadow, var(--shadow-lg, var(--shadow-elev)));
41538
- }
41792
+ :where(.theme-scope) .rb-modal {
41793
+ width: min(var(--rb-modal-max-width, 560px), 100%);
41794
+ background: var(--rb-modal-bg, rgb(var(--tb-surface)));
41795
+ border: 1px solid var(--rb-modal-border, rgb(var(--tb-border)));
41796
+ border-radius: var(--rb-modal-radius, var(--radius-card));
41797
+ box-shadow: var(--rb-modal-shadow, var(--shadow-lg, var(--shadow-elev)));
41798
+ }
41539
41799
 
41540
- :where(.theme-scope) .rb-modal__header {
41541
- display: flex;
41542
- align-items: center;
41543
- justify-content: space-between;
41544
- gap: 1rem;
41545
- padding: 1rem 1rem 0.75rem;
41546
- border-bottom: 1px solid var(--rb-modal-border, rgb(var(--tb-border)));
41547
- }
41800
+ :where(.theme-scope) .rb-modal__header {
41801
+ display: flex;
41802
+ align-items: center;
41803
+ justify-content: space-between;
41804
+ gap: 1rem;
41805
+ padding: 1rem 1rem 0.75rem;
41806
+ border-bottom: 1px solid var(--rb-modal-border, rgb(var(--tb-border)));
41807
+ }
41548
41808
 
41549
- :where(.theme-scope) .rb-modal__title {
41550
- margin: 0;
41551
- font-family: var(--font-heading);
41552
- font-size: 1.0625rem;
41553
- font-weight: 600;
41554
- color: rgb(var(--tb-text));
41555
- }
41809
+ :where(.theme-scope) .rb-modal__title {
41810
+ margin: 0;
41811
+ font-family: var(--font-heading);
41812
+ font-size: 1.0625rem;
41813
+ font-weight: 600;
41814
+ color: rgb(var(--tb-text));
41815
+ }
41556
41816
 
41557
- :where(.theme-scope) .rb-modal__close {
41558
- background: transparent;
41559
- border: none;
41560
- width: 2.25rem;
41561
- height: 2.25rem;
41562
- padding: 0;
41563
- line-height: 1;
41564
- color: rgb(var(--tb-mutedText));
41565
- cursor: pointer;
41566
- display: grid;
41567
- place-items: center;
41568
- border-radius: var(--radius-control);
41569
- }
41817
+ :where(.theme-scope) .rb-modal__close {
41818
+ background: transparent;
41819
+ border: none;
41820
+ width: 2.25rem;
41821
+ height: 2.25rem;
41822
+ padding: 0;
41823
+ line-height: 1;
41824
+ color: rgb(var(--tb-mutedText));
41825
+ cursor: pointer;
41826
+ display: grid;
41827
+ place-items: center;
41828
+ border-radius: var(--radius-control);
41829
+ }
41570
41830
 
41571
- :where(.theme-scope) .rb-modal__close:hover {
41572
- color: rgb(var(--tb-text));
41573
- background: rgba(var(--tb-border), 0.2);
41574
- }
41831
+ :where(.theme-scope) .rb-modal__close:hover {
41832
+ color: rgb(var(--tb-text));
41833
+ background: rgba(var(--tb-border), 0.2);
41834
+ }
41575
41835
 
41576
- :where(.theme-scope) .rb-modal__close:focus-visible {
41577
- outline: none;
41578
- box-shadow: 0 0 0 3px rgba(var(--tb-primary), 0.15);
41579
- }
41836
+ :where(.theme-scope) .rb-modal__close:focus-visible {
41837
+ outline: none;
41838
+ box-shadow: 0 0 0 3px rgba(var(--tb-primary), 0.15);
41839
+ }
41580
41840
 
41581
- :where(.theme-scope) .rb-modal__body {
41582
- padding: 0.875rem 1rem 1rem;
41583
- color: rgb(var(--tb-text));
41584
- font-size: 0.9375rem;
41585
- line-height: 1.45;
41586
- }
41841
+ :where(.theme-scope) .rb-modal__body {
41842
+ padding: 0.875rem 1rem 1rem;
41843
+ color: rgb(var(--tb-text));
41844
+ font-size: 0.9375rem;
41845
+ line-height: 1.45;
41846
+ }
41587
41847
 
41588
- /* -------------------------------------------------------------------------- */
41589
- /* Header: Mobile nav overlay transitions */
41590
- /* -------------------------------------------------------------------------- */
41848
+ /* -------------------------------------------------------------------------- */
41849
+ /* Header: Mobile nav overlay transitions */
41850
+ /* -------------------------------------------------------------------------- */
41591
41851
 
41592
- /* Keep the overlay in the DOM so we can transition opacity/transform.
41852
+ /* Keep the overlay in the DOM so we can transition opacity/transform.
41593
41853
  JS toggles \`aria-hidden\` + \`inert\` (via enhancer), and CSS uses pointer-events
41594
41854
  to prevent interaction while closed. */
41595
- .nav-mobile-overlay {
41596
- pointer-events: none;
41597
- /* Prevent transformed children (panel) from creating viewport scrollbars
41855
+ .nav-mobile-overlay {
41856
+ pointer-events: none;
41857
+ /* Prevent transformed children (panel) from creating viewport scrollbars
41598
41858
  during enter/exit transitions. */
41599
- overflow: hidden;
41600
- }
41601
-
41602
- .nav-mobile-overlay[aria-hidden="false"] {
41603
- pointer-events: auto;
41604
- }
41859
+ overflow: hidden;
41860
+ }
41605
41861
 
41606
- .nav-mobile-overlay .nav-mobile-backdrop {
41607
- opacity: 0;
41608
- transition: opacity var(--motion-duration, 180ms) var(--motion-ease, cubic-bezier(.2,.8,.2,1));
41609
- }
41862
+ .nav-mobile-overlay[aria-hidden='false'] {
41863
+ pointer-events: auto;
41864
+ }
41610
41865
 
41611
- .nav-mobile-overlay[aria-hidden="false"] .nav-mobile-backdrop {
41612
- opacity: 1;
41613
- }
41866
+ .nav-mobile-overlay .nav-mobile-backdrop {
41867
+ opacity: 0;
41868
+ transition: opacity var(--motion-duration, 180ms)
41869
+ var(--motion-ease, cubic-bezier(0.2, 0.8, 0.2, 1));
41870
+ }
41614
41871
 
41615
- .nav-mobile-overlay .nav-mobile-panel {
41616
- opacity: 0;
41617
- transform: translate3d(12px, 0, 0);
41618
- overflow-x: hidden;
41619
- transition:
41620
- opacity var(--motion-duration, 180ms) var(--motion-ease, cubic-bezier(.2,.8,.2,1)),
41621
- transform var(--motion-duration, 180ms) var(--motion-ease, cubic-bezier(.2,.8,.2,1));
41622
- will-change: opacity, transform;
41623
- }
41872
+ .nav-mobile-overlay[aria-hidden='false'] .nav-mobile-backdrop {
41873
+ opacity: 1;
41874
+ }
41624
41875
 
41625
- .nav-mobile-overlay[aria-hidden="false"] .nav-mobile-panel {
41626
- opacity: 1;
41627
- transform: translate3d(0, 0, 0);
41628
- }
41876
+ .nav-mobile-overlay .nav-mobile-panel {
41877
+ opacity: 0;
41878
+ transform: translate3d(12px, 0, 0);
41879
+ overflow-x: hidden;
41880
+ transition:
41881
+ opacity var(--motion-duration, 180ms)
41882
+ var(--motion-ease, cubic-bezier(0.2, 0.8, 0.2, 1)),
41883
+ transform var(--motion-duration, 180ms)
41884
+ var(--motion-ease, cubic-bezier(0.2, 0.8, 0.2, 1));
41885
+ will-change: opacity, transform;
41886
+ }
41629
41887
 
41630
- /* -------------------------------------------------------------------------- */
41631
- /* Header: Mobile toggle hamburger -> X */
41632
- /* -------------------------------------------------------------------------- */
41888
+ .nav-mobile-overlay[aria-hidden='false'] .nav-mobile-panel {
41889
+ opacity: 1;
41890
+ transform: translate3d(0, 0, 0);
41891
+ }
41633
41892
 
41634
- .nav-mobile-toggle .nav-mobile-bar {
41635
- transform-origin: center;
41636
- transition:
41637
- transform var(--motion-duration, 180ms) var(--motion-ease, cubic-bezier(.2,.8,.2,1)),
41638
- opacity var(--motion-duration, 180ms) var(--motion-ease, cubic-bezier(.2,.8,.2,1));
41639
- will-change: transform, opacity;
41640
- }
41893
+ /* -------------------------------------------------------------------------- */
41894
+ /* Header: Mobile toggle hamburger -> X */
41895
+ /* -------------------------------------------------------------------------- */
41641
41896
 
41642
- .nav-mobile-toggle[aria-expanded="true"] .nav-mobile-bar-top {
41643
- transform: translateY(6px) rotate(45deg);
41644
- }
41897
+ .nav-mobile-toggle .nav-mobile-bar {
41898
+ transform-origin: center;
41899
+ transition:
41900
+ transform var(--motion-duration, 180ms)
41901
+ var(--motion-ease, cubic-bezier(0.2, 0.8, 0.2, 1)),
41902
+ opacity var(--motion-duration, 180ms)
41903
+ var(--motion-ease, cubic-bezier(0.2, 0.8, 0.2, 1));
41904
+ will-change: transform, opacity;
41905
+ }
41645
41906
 
41646
- .nav-mobile-toggle[aria-expanded="true"] .nav-mobile-bar-middle {
41647
- opacity: 0;
41648
- }
41907
+ .nav-mobile-toggle[aria-expanded='true'] .nav-mobile-bar-top {
41908
+ transform: translateY(6px) rotate(45deg);
41909
+ }
41649
41910
 
41650
- .nav-mobile-toggle[aria-expanded="true"] .nav-mobile-bar-bottom {
41651
- transform: translateY(-6px) rotate(-45deg);
41652
- }
41911
+ .nav-mobile-toggle[aria-expanded='true'] .nav-mobile-bar-middle {
41912
+ opacity: 0;
41913
+ }
41653
41914
 
41654
- @media (prefers-reduced-motion: reduce) {
41655
- .nav-mobile-overlay .nav-mobile-backdrop,
41656
- .nav-mobile-overlay .nav-mobile-panel {
41657
- transition: none;
41658
- transform: none;
41915
+ .nav-mobile-toggle[aria-expanded='true'] .nav-mobile-bar-bottom {
41916
+ transform: translateY(-6px) rotate(-45deg);
41659
41917
  }
41660
41918
 
41661
- .nav-mobile-toggle .nav-mobile-bar {
41662
- transition: none;
41919
+ @media (prefers-reduced-motion: reduce) {
41920
+ .nav-mobile-overlay .nav-mobile-backdrop,
41921
+ .nav-mobile-overlay .nav-mobile-panel {
41922
+ transition: none;
41923
+ transform: none;
41924
+ }
41925
+
41926
+ .nav-mobile-toggle .nav-mobile-bar {
41927
+ transition: none;
41928
+ }
41663
41929
  }
41664
- }
41665
41930
 
41666
- /*
41931
+ /*
41667
41932
  * Theme Scope Styles
41668
41933
  *
41669
41934
  * IMPORTANT: All :where(.theme-scope) selectors are wrapped in :where() to give them
@@ -41673,790 +41938,838 @@ var containerResponsiveThemeCss = `/*
41673
41938
  * Example: \`h4 { color: white; }\` will override \`:where(:where(.theme-scope)) h4\`
41674
41939
  */
41675
41940
 
41676
- :where(:where(.theme-scope)) {
41677
- font-family: var(--font-body);
41678
- letter-spacing: var(--ls-body);
41679
- line-height: var(--lh-body);
41680
- font-weight: var(--font-weight-body);
41681
-
41682
- & h1,
41683
- & h2,
41684
- & h3,
41685
- & h4,
41686
- & h5,
41687
- & h6 {
41688
- font-family: var(--font-heading);
41689
- /* Color is set by generateTypographyCss.ts with full cascade:
41941
+ :where(:where(.theme-scope)) {
41942
+ font-family: var(--font-body);
41943
+ letter-spacing: var(--ls-body);
41944
+ line-height: var(--lh-body);
41945
+ font-weight: var(--font-weight-body);
41946
+
41947
+ & h1,
41948
+ & h2,
41949
+ & h3,
41950
+ & h4,
41951
+ & h5,
41952
+ & h6 {
41953
+ font-family: var(--font-heading);
41954
+ /* Color is set by generateTypographyCss.ts with full cascade:
41690
41955
  --section-heading-color -> --section-text-color -> --hc-hN -> --hc-heading -> inherit */
41691
- font-weight: var(--font-weight-heading);
41692
- text-transform: var(--tt-heading);
41693
- font-variant-caps: var(--fv-heading);
41956
+ font-weight: var(--font-weight-heading);
41957
+ text-transform: var(--tt-heading);
41958
+ font-variant-caps: var(--fv-heading);
41959
+ }
41694
41960
  }
41695
- }
41696
41961
 
41697
- /* Heading typographic overrides (fallback to defaults when not provided) */
41698
- :where(:where(.theme-scope)) h1 {
41699
- letter-spacing: var(--ls-h1, var(--ls-heading));
41700
- line-height: var(--lh-h1, var(--lh-heading));
41701
- font-weight: var(--fw-h1, var(--font-weight-heading));
41702
- }
41703
- :where(:where(.theme-scope)) h2 {
41704
- letter-spacing: var(--ls-h2, var(--ls-heading));
41705
- line-height: var(--lh-h2, var(--lh-heading));
41706
- font-weight: var(--fw-h2, var(--font-weight-heading));
41707
- }
41708
- :where(:where(.theme-scope)) h3 {
41709
- letter-spacing: var(--ls-h3, var(--ls-heading));
41710
- line-height: var(--lh-h3, var(--lh-heading));
41711
- font-weight: var(--fw-h3, var(--font-weight-heading));
41712
- }
41713
- :where(:where(.theme-scope)) h4,
41714
- :where(:where(.theme-scope)) h5,
41715
- :where(:where(.theme-scope)) h6 {
41716
- letter-spacing: var(--ls-heading);
41717
- line-height: var(--lh-heading);
41718
- }
41719
- :where(:where(.theme-scope)) h4 {
41720
- font-weight: var(--fw-h4, var(--font-weight-heading));
41721
- }
41722
- :where(:where(.theme-scope)) h5 {
41723
- font-weight: var(--fw-h5, var(--font-weight-heading));
41724
- }
41725
- :where(:where(.theme-scope)) h6 {
41726
- font-weight: var(--fw-h6, var(--font-weight-heading));
41727
- }
41962
+ /* Heading typographic overrides (fallback to defaults when not provided) */
41963
+ :where(:where(.theme-scope)) h1 {
41964
+ letter-spacing: var(--ls-h1, var(--ls-heading));
41965
+ line-height: var(--lh-h1, var(--lh-heading));
41966
+ font-weight: var(--fw-h1, var(--font-weight-heading));
41967
+ }
41968
+ :where(:where(.theme-scope)) h2 {
41969
+ letter-spacing: var(--ls-h2, var(--ls-heading));
41970
+ line-height: var(--lh-h2, var(--lh-heading));
41971
+ font-weight: var(--fw-h2, var(--font-weight-heading));
41972
+ }
41973
+ :where(:where(.theme-scope)) h3 {
41974
+ letter-spacing: var(--ls-h3, var(--ls-heading));
41975
+ line-height: var(--lh-h3, var(--lh-heading));
41976
+ font-weight: var(--fw-h3, var(--font-weight-heading));
41977
+ }
41978
+ :where(:where(.theme-scope)) h4,
41979
+ :where(:where(.theme-scope)) h5,
41980
+ :where(:where(.theme-scope)) h6 {
41981
+ letter-spacing: var(--ls-heading);
41982
+ line-height: var(--lh-heading);
41983
+ }
41984
+ :where(:where(.theme-scope)) h4 {
41985
+ font-weight: var(--fw-h4, var(--font-weight-heading));
41986
+ }
41987
+ :where(:where(.theme-scope)) h5 {
41988
+ font-weight: var(--fw-h5, var(--font-weight-heading));
41989
+ }
41990
+ :where(:where(.theme-scope)) h6 {
41991
+ font-weight: var(--fw-h6, var(--font-weight-heading));
41992
+ }
41728
41993
 
41729
- /* Rich text element spacing based on theme rhythm */
41730
- :where(.theme-scope) .rb-prose h1 {
41731
- margin-top: calc(var(--rt-space-y) * 1.6);
41732
- margin-bottom: calc(var(--rt-space-y) * 0.8);
41733
- }
41734
- :where(.theme-scope) .rb-prose h2 {
41735
- margin-top: calc(var(--rt-space-y) * 1.4);
41736
- margin-bottom: calc(var(--rt-space-y) * 0.7);
41737
- }
41738
- :where(.theme-scope) .rb-prose h3 {
41739
- margin-top: calc(var(--rt-space-y) * 1.2);
41740
- margin-bottom: calc(var(--rt-space-y) * 0.6);
41741
- }
41742
- :where(.theme-scope) .rb-prose h4 {
41743
- margin-top: calc(var(--rt-space-y) * 1);
41744
- margin-bottom: calc(var(--rt-space-y) * 0.5);
41745
- }
41746
- :where(.theme-scope) .rb-prose h5 {
41747
- margin-top: calc(var(--rt-space-y) * 0.9);
41748
- margin-bottom: calc(var(--rt-space-y) * 0.45);
41749
- }
41750
- :where(.theme-scope) .rb-prose h6 {
41751
- margin-top: calc(var(--rt-space-y) * 0.8);
41752
- margin-bottom: calc(var(--rt-space-y) * 0.4);
41753
- }
41754
- :where(.theme-scope) .rb-prose p {
41755
- margin: var(--rt-space-y) 0;
41756
- }
41757
- :where(.theme-scope) .rb-prose img {
41758
- display: block;
41759
- max-width: 100%;
41760
- height: auto;
41761
- margin: calc(var(--rt-space-y) * 1) 0;
41762
- }
41763
- :where(.theme-scope) .rb-prose ul,
41764
- :where(.theme-scope) .rb-prose ol {
41765
- margin: var(--rt-space-y) 0;
41766
- padding-left: 1.25rem;
41767
- }
41768
- :where(.theme-scope) .rb-prose ul {
41769
- list-style-type: disc;
41770
- }
41771
- :where(.theme-scope) .rb-prose ol {
41772
- list-style-type: decimal;
41773
- }
41774
- :where(.theme-scope) .rb-prose ul ul {
41775
- list-style-type: circle;
41776
- }
41777
- :where(.theme-scope) .rb-prose ul ul ul {
41778
- list-style-type: square;
41779
- }
41780
- :where(.theme-scope) .rb-prose ol ol {
41781
- list-style-type: lower-alpha;
41782
- }
41783
- :where(.theme-scope) .rb-prose ol ol ol {
41784
- list-style-type: lower-roman;
41785
- }
41786
- :where(.theme-scope) .rb-prose blockquote {
41787
- margin: calc(var(--rt-space-y) * 1) 0;
41788
- padding-left: 1rem;
41789
- border-left: 3px solid rgb(var(--tb-border));
41790
- }
41791
- :where(.theme-scope) .rb-prose > :first-child {
41792
- margin-top: 0;
41793
- }
41794
- :where(.theme-scope) .rb-prose > :last-child {
41795
- margin-bottom: 0;
41796
- }
41994
+ /* Rich text element spacing based on theme rhythm */
41995
+ :where(.theme-scope) .rb-prose h1 {
41996
+ margin-top: calc(var(--rt-space-y) * 1.6);
41997
+ margin-bottom: calc(var(--rt-space-y) * 0.8);
41998
+ }
41999
+ :where(.theme-scope) .rb-prose h2 {
42000
+ margin-top: calc(var(--rt-space-y) * 1.4);
42001
+ margin-bottom: calc(var(--rt-space-y) * 0.7);
42002
+ }
42003
+ :where(.theme-scope) .rb-prose h3 {
42004
+ margin-top: calc(var(--rt-space-y) * 1.2);
42005
+ margin-bottom: calc(var(--rt-space-y) * 0.6);
42006
+ }
42007
+ :where(.theme-scope) .rb-prose h4 {
42008
+ margin-top: calc(var(--rt-space-y) * 1);
42009
+ margin-bottom: calc(var(--rt-space-y) * 0.5);
42010
+ }
42011
+ :where(.theme-scope) .rb-prose h5 {
42012
+ margin-top: calc(var(--rt-space-y) * 0.9);
42013
+ margin-bottom: calc(var(--rt-space-y) * 0.45);
42014
+ }
42015
+ :where(.theme-scope) .rb-prose h6 {
42016
+ margin-top: calc(var(--rt-space-y) * 0.8);
42017
+ margin-bottom: calc(var(--rt-space-y) * 0.4);
42018
+ }
42019
+ :where(.theme-scope) .rb-prose p {
42020
+ margin: var(--rt-space-y) 0;
42021
+ }
42022
+ :where(.theme-scope) .rb-prose img {
42023
+ display: block;
42024
+ max-width: 100%;
42025
+ height: auto;
42026
+ margin: calc(var(--rt-space-y) * 1) 0;
42027
+ }
42028
+ :where(.theme-scope) .rb-prose ul,
42029
+ :where(.theme-scope) .rb-prose ol {
42030
+ margin: var(--rt-space-y) 0;
42031
+ padding-left: 1.25rem;
42032
+ }
42033
+ :where(.theme-scope) .rb-prose ul {
42034
+ list-style-type: disc;
42035
+ }
42036
+ :where(.theme-scope) .rb-prose ol {
42037
+ list-style-type: decimal;
42038
+ }
42039
+ :where(.theme-scope) .rb-prose ul ul {
42040
+ list-style-type: circle;
42041
+ }
42042
+ :where(.theme-scope) .rb-prose ul ul ul {
42043
+ list-style-type: square;
42044
+ }
42045
+ :where(.theme-scope) .rb-prose ol ol {
42046
+ list-style-type: lower-alpha;
42047
+ }
42048
+ :where(.theme-scope) .rb-prose ol ol ol {
42049
+ list-style-type: lower-roman;
42050
+ }
42051
+ :where(.theme-scope) .rb-prose blockquote {
42052
+ margin: calc(var(--rt-space-y) * 1) 0;
42053
+ padding-left: 1rem;
42054
+ border-left: 3px solid rgb(var(--tb-border));
42055
+ }
42056
+ :where(.theme-scope) .rb-prose > :first-child {
42057
+ margin-top: 0;
42058
+ }
42059
+ :where(.theme-scope) .rb-prose > :last-child {
42060
+ margin-bottom: 0;
42061
+ }
41797
42062
 
41798
- /* Prose color overrides - use theme CSS variables instead of hardcoded colors
42063
+ /* Prose color overrides - use theme CSS variables instead of hardcoded colors
41799
42064
  * This makes prose elements automatically adapt to light/dark themes */
41800
- :where(.theme-scope) .rb-prose {
41801
- /* Body text inherits from parent, which should already have theme color */
41802
- color: inherit;
41803
- }
42065
+ :where(.theme-scope) .rb-prose {
42066
+ /* Body text inherits from parent, which should already have theme color */
42067
+ color: inherit;
42068
+ }
41804
42069
 
41805
- /* Prose size variants (theme-aware, CSS-only) */
41806
- :where(.theme-scope) {
41807
- /* Body scale + rhythm come from the active theme runtime (ThemeScope) */
41808
- --rb-prose-sm-font-size: calc(var(--fs-body, 16px) * 0.875);
41809
- --rb-prose-sm-line-height: calc(var(--lh-body, 1.65) - 0.05);
42070
+ /* Prose size variants (theme-aware, CSS-only) */
42071
+ :where(.theme-scope) {
42072
+ /* Body scale + rhythm come from the active theme runtime (ThemeScope) */
42073
+ --rb-prose-sm-font-size: calc(var(--fs-body, 16px) * 0.875);
42074
+ --rb-prose-sm-line-height: calc(var(--lh-body, 1.65) - 0.05);
41810
42075
 
41811
- --rb-prose-lg-font-size: calc(var(--fs-body, 16px) * 1.125);
41812
- --rb-prose-lg-line-height: calc(var(--lh-body, 1.65) + 0.1);
42076
+ --rb-prose-lg-font-size: calc(var(--fs-body, 16px) * 1.125);
42077
+ --rb-prose-lg-line-height: calc(var(--lh-body, 1.65) + 0.1);
41813
42078
 
41814
- /* Applied at >= 640px; below that, rb-prose-lg is typically used */
41815
- --rb-prose-xl-sm-font-size: calc(var(--fs-body, 16px) * 1.25);
41816
- --rb-prose-xl-sm-line-height: calc(var(--lh-body, 1.65) + 0.15);
41817
- }
42079
+ /* Applied at >= 640px; below that, rb-prose-lg is typically used */
42080
+ --rb-prose-xl-sm-font-size: calc(var(--fs-body, 16px) * 1.25);
42081
+ --rb-prose-xl-sm-line-height: calc(var(--lh-body, 1.65) + 0.15);
42082
+ }
41818
42083
 
41819
- :where(.theme-scope) .rb-prose-sm {
41820
- font-size: var(--rb-prose-sm-font-size);
41821
- line-height: var(--rb-prose-sm-line-height);
41822
- }
41823
- :where(.theme-scope) .rb-prose-lg {
41824
- font-size: var(--rb-prose-lg-font-size);
41825
- line-height: var(--rb-prose-lg-line-height);
41826
- }
41827
- @container rb-site (min-width: 640px) {
42084
+ :where(.theme-scope) .rb-prose-sm {
42085
+ font-size: var(--rb-prose-sm-font-size);
42086
+ line-height: var(--rb-prose-sm-line-height);
42087
+ }
42088
+ :where(.theme-scope) .rb-prose-lg {
42089
+ font-size: var(--rb-prose-lg-font-size);
42090
+ line-height: var(--rb-prose-lg-line-height);
42091
+ }
42092
+ @container rb-site (min-width: 640px) {
41828
42093
  @scope ([data-rb-responsive-mode="container"]) to (:scope [data-rb-responsive-mode]) {
41829
42094
  :where(.theme-scope) .rb-prose-xl-sm {
41830
- font-size: var(--rb-prose-xl-sm-font-size);
41831
- line-height: var(--rb-prose-xl-sm-line-height);
41832
- }
42095
+ font-size: var(--rb-prose-xl-sm-font-size);
42096
+ line-height: var(--rb-prose-xl-sm-line-height);
42097
+ }
41833
42098
  }
41834
42099
  }
41835
42100
 
41836
- /* Neutral prose uses theme text color by default */
41837
- :where(.theme-scope) .rb-prose-neutral {
41838
- color: rgb(var(--tb-text));
41839
- }
42101
+ /* Neutral prose uses theme text color by default */
42102
+ :where(.theme-scope) .rb-prose-neutral {
42103
+ color: rgb(var(--tb-text));
42104
+ }
41840
42105
 
41841
- :where(.theme-scope) .rb-prose p,
41842
- :where(.theme-scope) .rb-prose li {
41843
- /* Body text uses inherited color (set by fragment via textColorStyle) */
41844
- color: inherit;
41845
- }
42106
+ :where(.theme-scope) .rb-prose p,
42107
+ :where(.theme-scope) .rb-prose li {
42108
+ /* Body text uses inherited color (set by fragment via textColorStyle) */
42109
+ color: inherit;
42110
+ }
41846
42111
 
41847
- :where(.theme-scope) .rb-prose h1,
41848
- :where(.theme-scope) .rb-prose h2,
41849
- :where(.theme-scope) .rb-prose h3,
41850
- :where(.theme-scope) .rb-prose h4,
41851
- :where(.theme-scope) .rb-prose h5,
41852
- :where(.theme-scope) .rb-prose h6 {
41853
- /* Headings inherit from parent or use theme text color */
41854
- color: inherit;
41855
- }
42112
+ :where(.theme-scope) .rb-prose h1,
42113
+ :where(.theme-scope) .rb-prose h2,
42114
+ :where(.theme-scope) .rb-prose h3,
42115
+ :where(.theme-scope) .rb-prose h4,
42116
+ :where(.theme-scope) .rb-prose h5,
42117
+ :where(.theme-scope) .rb-prose h6 {
42118
+ /* Headings inherit from parent or use theme text color */
42119
+ color: inherit;
42120
+ }
41856
42121
 
41857
- :where(.theme-scope) .rb-prose strong,
41858
- :where(.theme-scope) .rb-prose b {
41859
- /* Bold text inherits color but increases weight */
41860
- color: inherit;
41861
- font-weight: 600;
41862
- }
42122
+ :where(.theme-scope) .rb-prose strong,
42123
+ :where(.theme-scope) .rb-prose b {
42124
+ /* Bold text inherits color but increases weight */
42125
+ color: inherit;
42126
+ font-weight: 600;
42127
+ }
41863
42128
 
41864
- :where(.theme-scope) .rb-prose em,
41865
- :where(.theme-scope) .rb-prose i {
41866
- /* Italic text inherits color */
41867
- color: inherit;
41868
- }
42129
+ :where(.theme-scope) .rb-prose em,
42130
+ :where(.theme-scope) .rb-prose i {
42131
+ /* Italic text inherits color */
42132
+ color: inherit;
42133
+ }
41869
42134
 
41870
- :where(.theme-scope) .rb-prose a {
41871
- /* Global prose link style with theme-level overrides */
41872
- color: var(--rb-prose-link-color, rgb(var(--tb-primary)));
41873
- text-decoration-line: var(--rb-prose-link-decoration-line, underline);
41874
- text-decoration-style: var(--rb-prose-link-underline-style, solid);
41875
- text-decoration-thickness: var(--rb-prose-link-underline-thickness, from-font);
41876
- text-underline-offset: var(--rb-prose-link-underline-offset, 0.14em);
41877
- text-decoration-color: var(--rb-prose-link-decoration-color, rgba(var(--tb-primary), 0.3));
41878
- transition:
41879
- color 150ms ease,
41880
- text-decoration-color 150ms ease;
41881
- }
42135
+ :where(.theme-scope) .rb-prose a {
42136
+ /* Global prose link style with theme-level overrides */
42137
+ color: var(--rb-prose-link-color, rgb(var(--tb-primary)));
42138
+ text-decoration-line: var(--rb-prose-link-decoration-line, underline);
42139
+ text-decoration-style: var(--rb-prose-link-underline-style, solid);
42140
+ text-decoration-thickness: var(
42141
+ --rb-prose-link-underline-thickness,
42142
+ from-font
42143
+ );
42144
+ text-underline-offset: var(--rb-prose-link-underline-offset, 0.14em);
42145
+ text-decoration-color: var(
42146
+ --rb-prose-link-decoration-color,
42147
+ rgba(var(--tb-primary), 0.3)
42148
+ );
42149
+ transition:
42150
+ color 150ms ease,
42151
+ text-decoration-color 150ms ease;
42152
+ }
41882
42153
 
41883
- :where(.theme-scope) .rb-prose a:hover {
41884
- color: var(--rb-prose-link-hover-color, var(--rb-prose-link-color, rgb(var(--tb-primary))));
41885
- text-decoration-color: var(
41886
- --rb-prose-link-hover-decoration-color,
41887
- var(--rb-prose-link-hover-color, var(--rb-prose-link-color, rgb(var(--tb-primary))))
41888
- );
41889
- }
42154
+ :where(.theme-scope) .rb-prose a:hover {
42155
+ color: var(
42156
+ --rb-prose-link-hover-color,
42157
+ var(--rb-prose-link-color, rgb(var(--tb-primary)))
42158
+ );
42159
+ text-decoration-color: var(
42160
+ --rb-prose-link-hover-decoration-color,
42161
+ var(
42162
+ --rb-prose-link-hover-color,
42163
+ var(--rb-prose-link-color, rgb(var(--tb-primary)))
42164
+ )
42165
+ );
42166
+ }
41890
42167
 
41891
- :where(.theme-scope) .rb-prose blockquote {
41892
- /* Blockquotes use muted text color */
41893
- color: rgb(var(--tb-mutedText));
41894
- border-left-color: rgb(var(--tb-border));
41895
- }
42168
+ :where(.theme-scope) .rb-prose blockquote {
42169
+ /* Blockquotes use muted text color */
42170
+ color: rgb(var(--tb-mutedText));
42171
+ border-left-color: rgb(var(--tb-border));
42172
+ }
41896
42173
 
41897
- :where(.theme-scope) .fragment-quote-body blockquote {
41898
- /* Quote fragment should not get the generic prose blockquote left border/indent. */
41899
- border-left: 0;
41900
- padding-left: 0;
41901
- }
42174
+ :where(.theme-scope) .fragment-quote-body blockquote {
42175
+ /* Quote fragment should not get the generic prose blockquote left border/indent. */
42176
+ border-left: 0;
42177
+ padding-left: 0;
42178
+ }
41902
42179
 
41903
- :where(.theme-scope) .rb-columns-equal-height {
41904
- /* Needed so we can use container query units (\`cqw\`) for width-based tile sizing. */
41905
- container-type: inline-size;
42180
+ :where(.theme-scope) .rb-columns-equal-height {
42181
+ /* Needed so we can use container query units (\`cqw\`) for width-based tile sizing. */
42182
+ container-type: inline-size;
41906
42183
 
41907
- --rb-columns-cols: var(--rb-columns-cols-mobile, 1);
41908
- --rb-columns-gap: var(--rb-semantic-gap, 0px);
41909
- --rb-columns-tile-ar: var(--rb-columns-tile-ar, 1);
42184
+ --rb-columns-cols: var(--rb-columns-cols-mobile, 1);
42185
+ --rb-columns-gap: var(--rb-semantic-gap, 0px);
42186
+ --rb-columns-tile-ar: var(--rb-columns-tile-ar, 1);
41910
42187
 
41911
- --rb-columns-tile-w: calc(
41912
- (100cqw - (var(--rb-columns-cols) - 1) * var(--rb-columns-gap)) / var(--rb-columns-cols)
41913
- );
41914
- --rb-columns-tile-h: calc(var(--rb-columns-tile-w) * var(--rb-columns-tile-ar));
41915
- }
42188
+ --rb-columns-tile-w: calc(
42189
+ (100cqw - (var(--rb-columns-cols) - 1) * var(--rb-columns-gap)) /
42190
+ var(--rb-columns-cols)
42191
+ );
42192
+ --rb-columns-tile-h: calc(
42193
+ var(--rb-columns-tile-w) * var(--rb-columns-tile-ar)
42194
+ );
42195
+ }
41916
42196
 
41917
- @container rb-site (min-width: 768px) {
42197
+ @container rb-site (min-width: 768px) {
41918
42198
  @scope ([data-rb-responsive-mode="container"]) to (:scope [data-rb-responsive-mode]) {
41919
42199
  :where(.theme-scope) .rb-columns-equal-height {
41920
- --rb-columns-cols: var(--rb-columns-cols-md, var(--rb-columns-cols));
41921
- }
42200
+ --rb-columns-cols: var(--rb-columns-cols-md, var(--rb-columns-cols));
42201
+ }
41922
42202
  }
41923
42203
  }
41924
42204
 
41925
- @container rb-site (min-width: 1024px) {
42205
+ @container rb-site (min-width: 1024px) {
41926
42206
  @scope ([data-rb-responsive-mode="container"]) to (:scope [data-rb-responsive-mode]) {
41927
42207
  :where(.theme-scope) .rb-columns-equal-height {
41928
- --rb-columns-cols: var(--rb-columns-cols-lg, var(--rb-columns-cols));
41929
- }
42208
+ --rb-columns-cols: var(--rb-columns-cols-lg, var(--rb-columns-cols));
42209
+ }
41930
42210
  }
41931
42211
  }
41932
42212
 
41933
- @container rb-site (min-width: 1280px) {
42213
+ @container rb-site (min-width: 1280px) {
41934
42214
  @scope ([data-rb-responsive-mode="container"]) to (:scope [data-rb-responsive-mode]) {
41935
42215
  :where(.theme-scope) .rb-columns-equal-height {
41936
- --rb-columns-cols: var(--rb-columns-cols-xl, var(--rb-columns-cols));
41937
- }
42216
+ --rb-columns-cols: var(--rb-columns-cols-xl, var(--rb-columns-cols));
42217
+ }
41938
42218
  }
41939
42219
  }
41940
42220
 
41941
- :where(.theme-scope) .rb-columns-equal-height > * {
41942
- height: var(--rb-columns-tile-h);
41943
- }
42221
+ :where(.theme-scope) .rb-columns-equal-height > * {
42222
+ height: var(--rb-columns-tile-h);
42223
+ }
41944
42224
 
41945
- :where(.theme-scope) .rb-columns-equal-height > .rb-h-full {
41946
- /*
42225
+ :where(.theme-scope) .rb-columns-equal-height > .rb-h-full {
42226
+ /*
41947
42227
  Grid items commonly include \`rb-h-full\` (height: 100%) to stretch within
41948
42228
  their row. In equal-height mode we instead want a fixed tile height so the
41949
42229
  spanning editorial tile doesn't become taller due to its larger width +
41950
42230
  aspect-ratio.
41951
42231
  */
41952
- height: var(--rb-columns-tile-h);
41953
- min-height: var(--rb-columns-tile-h);
41954
- max-height: var(--rb-columns-tile-h);
41955
- }
42232
+ height: var(--rb-columns-tile-h);
42233
+ min-height: var(--rb-columns-tile-h);
42234
+ max-height: var(--rb-columns-tile-h);
42235
+ }
41956
42236
 
41957
- :where(.theme-scope) .rb-columns-equal-height .fragment-image-frame {
41958
- width: 100%;
41959
- height: 100%;
41960
- overflow: hidden;
41961
- }
42237
+ :where(.theme-scope) .rb-columns-equal-height .fragment-image-frame {
42238
+ width: 100%;
42239
+ height: 100%;
42240
+ overflow: hidden;
42241
+ }
41962
42242
 
41963
- :where(.theme-scope) .rb-columns-equal-height .fragment-image {
41964
- width: 100%;
41965
- height: 100%;
41966
- object-fit: cover;
41967
- }
42243
+ :where(.theme-scope) .rb-columns-equal-height .fragment-image {
42244
+ width: 100%;
42245
+ height: 100%;
42246
+ object-fit: cover;
42247
+ }
41968
42248
 
41969
- :where(.theme-scope) .rb-prose code {
41970
- /* Inline code uses text color with surface background */
41971
- color: inherit;
41972
- background-color: rgba(var(--tb-surface), 0.5);
41973
- padding: 0.125rem 0.25rem;
41974
- border-radius: 0.25rem;
41975
- font-size: 0.875em;
41976
- }
42249
+ :where(.theme-scope) .rb-prose code {
42250
+ /* Inline code uses text color with surface background */
42251
+ color: inherit;
42252
+ background-color: rgba(var(--tb-surface), 0.5);
42253
+ padding: 0.125rem 0.25rem;
42254
+ border-radius: 0.25rem;
42255
+ font-size: 0.875em;
42256
+ }
41977
42257
 
41978
- :where(.theme-scope) .rb-prose pre {
41979
- /* Code blocks */
41980
- background-color: rgb(var(--tb-surface));
41981
- color: rgb(var(--tb-text));
41982
- border: 1px solid rgb(var(--tb-border));
41983
- border-radius: 0.5rem;
41984
- padding: 1rem;
41985
- overflow-x: auto;
41986
- }
42258
+ :where(.theme-scope) .rb-prose pre {
42259
+ /* Code blocks */
42260
+ background-color: rgb(var(--tb-surface));
42261
+ color: rgb(var(--tb-text));
42262
+ border: 1px solid rgb(var(--tb-border));
42263
+ border-radius: 0.5rem;
42264
+ padding: 1rem;
42265
+ overflow-x: auto;
42266
+ }
41987
42267
 
41988
- :where(.theme-scope) .rb-prose pre code {
41989
- /* Code inside pre blocks */
41990
- background-color: transparent;
41991
- padding: 0;
41992
- color: inherit;
41993
- }
42268
+ :where(.theme-scope) .rb-prose pre code {
42269
+ /* Code inside pre blocks */
42270
+ background-color: transparent;
42271
+ padding: 0;
42272
+ color: inherit;
42273
+ }
41994
42274
 
41995
- :where(.theme-scope) .rb-prose hr {
41996
- /* Horizontal rules */
41997
- border-color: rgb(var(--tb-border));
41998
- }
42275
+ :where(.theme-scope) .rb-prose hr {
42276
+ /* Horizontal rules */
42277
+ border-color: rgb(var(--tb-border));
42278
+ }
41999
42279
 
42000
- :where(.theme-scope) .rb-prose ul > li::marker,
42001
- :where(.theme-scope) .rb-prose ol > li::marker {
42002
- /* List markers use muted text color */
42003
- color: rgb(var(--tb-mutedText));
42004
- }
42280
+ :where(.theme-scope) .rb-prose ul > li::marker,
42281
+ :where(.theme-scope) .rb-prose ol > li::marker {
42282
+ /* List markers use muted text color */
42283
+ color: rgb(var(--tb-mutedText));
42284
+ }
42005
42285
 
42006
- /*
42286
+ /*
42007
42287
  /* Density helpers */
42008
- :where(.theme-scope) .section-pad {
42009
- padding-top: 4rem;
42010
- padding-bottom: 4rem;
42011
- }
42012
- :where(.theme-scope)[data-density="airy"] .section-pad {
42013
- padding-top: 4.5rem;
42014
- padding-bottom: 4.5rem;
42015
- }
42016
- :where(.theme-scope)[data-density="compact"] .section-pad {
42017
- padding-top: 3rem;
42018
- padding-bottom: 3rem;
42019
- }
42020
-
42021
- :where(.theme-scope) .rounded-control {
42022
- border-radius: var(--radius-control);
42023
- }
42024
- :where(.theme-scope) .rounded-card {
42025
- border-radius: var(--radius-card);
42026
- }
42288
+ :where(.theme-scope) .section-pad {
42289
+ padding-top: 4rem;
42290
+ padding-bottom: 4rem;
42291
+ }
42292
+ :where(.theme-scope)[data-density='airy'] .section-pad {
42293
+ padding-top: 4.5rem;
42294
+ padding-bottom: 4.5rem;
42295
+ }
42296
+ :where(.theme-scope)[data-density='compact'] .section-pad {
42297
+ padding-top: 3rem;
42298
+ padding-bottom: 3rem;
42299
+ }
42027
42300
 
42028
- :where(.theme-scope) .shadow-elev {
42029
- box-shadow: var(--shadow-elev);
42030
- }
42301
+ :where(.theme-scope) .rounded-control {
42302
+ border-radius: var(--radius-control);
42303
+ }
42304
+ :where(.theme-scope) .rounded-card {
42305
+ border-radius: var(--radius-card);
42306
+ }
42031
42307
 
42032
- :where(.theme-scope) .font-heading {
42033
- font-family: var(--font-heading);
42034
- }
42035
- :where(.theme-scope) .font-body {
42036
- font-family: var(--font-body);
42037
- }
42308
+ :where(.theme-scope) .shadow-elev {
42309
+ box-shadow: var(--shadow-elev);
42310
+ }
42038
42311
 
42039
- :where(.theme-scope) .text-h1 {
42040
- font-size: var(--fs-h1);
42041
- line-height: 1.1;
42042
- }
42043
- :where(.theme-scope) .text-h2 {
42044
- font-size: var(--fs-h2);
42045
- line-height: 1.15;
42046
- }
42047
- :where(.theme-scope) .text-h3 {
42048
- font-size: var(--fs-h3);
42049
- line-height: 1.2;
42050
- }
42051
- :where(.theme-scope) .text-body-size {
42052
- font-size: var(--fs-body);
42053
- }
42312
+ :where(.theme-scope) .font-heading {
42313
+ font-family: var(--font-heading);
42314
+ }
42315
+ :where(.theme-scope) .font-body {
42316
+ font-family: var(--font-body);
42317
+ }
42054
42318
 
42055
- :where(.theme-scope) .transition-theme {
42056
- transition: all var(--motion-duration) var(--motion-ease);
42057
- }
42058
- :where(.theme-scope) .transition-theme-standard {
42059
- transition: all var(--motion-duration) var(--motion-ease);
42060
- }
42061
- :where(.theme-scope) .transition-theme-subtle {
42062
- transition: all calc(var(--motion-duration) * 0.75) var(--motion-ease);
42063
- }
42064
- :where(.theme-scope) .transition-theme-expressive {
42065
- transition: all calc(var(--motion-duration) * 1.35) var(--motion-ease);
42066
- }
42319
+ :where(.theme-scope) .text-h1 {
42320
+ font-size: var(--fs-h1);
42321
+ line-height: 1.1;
42322
+ }
42323
+ :where(.theme-scope) .text-h2 {
42324
+ font-size: var(--fs-h2);
42325
+ line-height: 1.15;
42326
+ }
42327
+ :where(.theme-scope) .text-h3 {
42328
+ font-size: var(--fs-h3);
42329
+ line-height: 1.2;
42330
+ }
42331
+ :where(.theme-scope) .text-body-size {
42332
+ font-size: var(--fs-body);
42333
+ }
42067
42334
 
42068
- /* Shade tokens (50..950) for primary */
42069
- :where(.theme-scope) .from-primary-50 {
42070
- --rb-gradient-from: rgb(var(--tb-primary-50)) var(--rb-gradient-from-position);
42071
- --rb-gradient-to: rgb(var(--tb-primary-50)) var(--rb-gradient-to-position);
42072
- --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);
42073
- }
42074
- :where(.theme-scope) .to-primary-50 {
42075
- --rb-gradient-to: rgb(var(--tb-primary-50)) var(--rb-gradient-to-position);
42076
- }
42077
- :where(.theme-scope) .from-primary-100 {
42078
- --rb-gradient-from: rgb(var(--tb-primary-100))
42079
- var(--rb-gradient-from-position);
42080
- --rb-gradient-to: rgb(var(--tb-primary-100)) var(--rb-gradient-to-position);
42081
- --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);
42082
- }
42083
- :where(.theme-scope) .to-primary-100 {
42084
- --rb-gradient-to: rgb(var(--tb-primary-100)) var(--rb-gradient-to-position);
42085
- }
42086
- :where(.theme-scope) .from-primary-200 {
42087
- --rb-gradient-from: rgb(var(--tb-primary-200))
42088
- var(--rb-gradient-from-position);
42089
- --rb-gradient-to: rgb(var(--tb-primary-200)) var(--rb-gradient-to-position);
42090
- --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);
42091
- }
42092
- :where(.theme-scope) .to-primary-200 {
42093
- --rb-gradient-to: rgb(var(--tb-primary-200)) var(--rb-gradient-to-position);
42094
- }
42095
- :where(.theme-scope) .from-primary-300 {
42096
- --rb-gradient-from: rgb(var(--tb-primary-300))
42097
- var(--rb-gradient-from-position);
42098
- --rb-gradient-to: rgb(var(--tb-primary-300)) var(--rb-gradient-to-position);
42099
- --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);
42100
- }
42101
- :where(.theme-scope) .to-primary-300 {
42102
- --rb-gradient-to: rgb(var(--tb-primary-300)) var(--rb-gradient-to-position);
42103
- }
42104
- :where(.theme-scope) .from-primary-400 {
42105
- --rb-gradient-from: rgb(var(--tb-primary-400))
42106
- var(--rb-gradient-from-position);
42107
- --rb-gradient-to: rgb(var(--tb-primary-400)) var(--rb-gradient-to-position);
42108
- --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);
42109
- }
42110
- :where(.theme-scope) .to-primary-400 {
42111
- --rb-gradient-to: rgb(var(--tb-primary-400)) var(--rb-gradient-to-position);
42112
- }
42113
- :where(.theme-scope) .from-primary-500 {
42114
- --rb-gradient-from: rgb(var(--tb-primary-500))
42115
- var(--rb-gradient-from-position);
42116
- --rb-gradient-to: rgb(var(--tb-primary-500)) var(--rb-gradient-to-position);
42117
- --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);
42118
- }
42119
- :where(.theme-scope) .to-primary-500 {
42120
- --rb-gradient-to: rgb(var(--tb-primary-500)) var(--rb-gradient-to-position);
42121
- }
42122
- :where(.theme-scope) .from-primary-600 {
42123
- --rb-gradient-from: rgb(var(--tb-primary-600))
42124
- var(--rb-gradient-from-position);
42125
- --rb-gradient-to: rgb(var(--tb-primary-600)) var(--rb-gradient-to-position);
42126
- --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);
42127
- }
42128
- :where(.theme-scope) .to-primary-600 {
42129
- --rb-gradient-to: rgb(var(--tb-primary-600)) var(--rb-gradient-to-position);
42130
- }
42131
- :where(.theme-scope) .from-primary-700 {
42132
- --rb-gradient-from: rgb(var(--tb-primary-700))
42133
- var(--rb-gradient-from-position);
42134
- --rb-gradient-to: rgb(var(--tb-primary-700)) var(--rb-gradient-to-position);
42135
- --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);
42136
- }
42137
- :where(.theme-scope) .to-primary-700 {
42138
- --rb-gradient-to: rgb(var(--tb-primary-700)) var(--rb-gradient-to-position);
42139
- }
42140
- :where(.theme-scope) .from-primary-800 {
42141
- --rb-gradient-from: rgb(var(--tb-primary-800))
42142
- var(--rb-gradient-from-position);
42143
- --rb-gradient-to: rgb(var(--tb-primary-800)) var(--rb-gradient-to-position);
42144
- --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);
42145
- }
42146
- :where(.theme-scope) .to-primary-800 {
42147
- --rb-gradient-to: rgb(var(--tb-primary-800)) var(--rb-gradient-to-position);
42148
- }
42149
- :where(.theme-scope) .from-primary-900 {
42150
- --rb-gradient-from: rgb(var(--tb-primary-900))
42151
- var(--rb-gradient-from-position);
42152
- --rb-gradient-to: rgb(var(--tb-primary-900)) var(--rb-gradient-to-position);
42153
- --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);
42154
- }
42155
- :where(.theme-scope) .to-primary-900 {
42156
- --rb-gradient-to: rgb(var(--tb-primary-900)) var(--rb-gradient-to-position);
42157
- }
42158
- :where(.theme-scope) .from-primary-950 {
42159
- --rb-gradient-from: rgb(var(--tb-primary-950))
42160
- var(--rb-gradient-from-position);
42161
- --rb-gradient-to: rgb(var(--tb-primary-950)) var(--rb-gradient-to-position);
42162
- --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);
42163
- }
42164
- :where(.theme-scope) .to-primary-950 {
42165
- --rb-gradient-to: rgb(var(--tb-primary-950)) var(--rb-gradient-to-position);
42166
- }
42167
-
42168
- /* Shade tokens (50..950) for secondary */
42169
- :where(.theme-scope) .from-secondary-50 {
42170
- --rb-gradient-from: rgb(var(--tb-secondary-50))
42171
- var(--rb-gradient-from-position);
42172
- --rb-gradient-to: rgb(var(--tb-secondary-50)) var(--rb-gradient-to-position);
42173
- --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);
42174
- }
42175
- :where(.theme-scope) .to-secondary-50 {
42176
- --rb-gradient-to: rgb(var(--tb-secondary-50)) var(--rb-gradient-to-position);
42177
- }
42178
- :where(.theme-scope) .from-secondary-100 {
42179
- --rb-gradient-from: rgb(var(--tb-secondary-100))
42180
- var(--rb-gradient-from-position);
42181
- --rb-gradient-to: rgb(var(--tb-secondary-100)) var(--rb-gradient-to-position);
42182
- --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);
42183
- }
42184
- :where(.theme-scope) .to-secondary-100 {
42185
- --rb-gradient-to: rgb(var(--tb-secondary-100)) var(--rb-gradient-to-position);
42186
- }
42187
- :where(.theme-scope) .from-secondary-200 {
42188
- --rb-gradient-from: rgb(var(--tb-secondary-200))
42189
- var(--rb-gradient-from-position);
42190
- --rb-gradient-to: rgb(var(--tb-secondary-200)) var(--rb-gradient-to-position);
42191
- --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);
42192
- }
42193
- :where(.theme-scope) .to-secondary-200 {
42194
- --rb-gradient-to: rgb(var(--tb-secondary-200)) var(--rb-gradient-to-position);
42195
- }
42196
- :where(.theme-scope) .from-secondary-300 {
42197
- --rb-gradient-from: rgb(var(--tb-secondary-300))
42198
- var(--rb-gradient-from-position);
42199
- --rb-gradient-to: rgb(var(--tb-secondary-300)) var(--rb-gradient-to-position);
42200
- --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);
42201
- }
42202
- :where(.theme-scope) .to-secondary-300 {
42203
- --rb-gradient-to: rgb(var(--tb-secondary-300)) var(--rb-gradient-to-position);
42204
- }
42205
- :where(.theme-scope) .from-secondary-400 {
42206
- --rb-gradient-from: rgb(var(--tb-secondary-400))
42207
- var(--rb-gradient-from-position);
42208
- --rb-gradient-to: rgb(var(--tb-secondary-400)) var(--rb-gradient-to-position);
42209
- --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);
42210
- }
42211
- :where(.theme-scope) .to-secondary-400 {
42212
- --rb-gradient-to: rgb(var(--tb-secondary-400)) var(--rb-gradient-to-position);
42213
- }
42214
- :where(.theme-scope) .from-secondary-500 {
42215
- --rb-gradient-from: rgb(var(--tb-secondary-500))
42216
- var(--rb-gradient-from-position);
42217
- --rb-gradient-to: rgb(var(--tb-secondary-500)) var(--rb-gradient-to-position);
42218
- --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);
42219
- }
42220
- :where(.theme-scope) .to-secondary-500 {
42221
- --rb-gradient-to: rgb(var(--tb-secondary-500)) var(--rb-gradient-to-position);
42222
- }
42223
- :where(.theme-scope) .from-secondary-600 {
42224
- --rb-gradient-from: rgb(var(--tb-secondary-600))
42225
- var(--rb-gradient-from-position);
42226
- --rb-gradient-to: rgb(var(--tb-secondary-600)) var(--rb-gradient-to-position);
42227
- --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);
42228
- }
42229
- :where(.theme-scope) .to-secondary-600 {
42230
- --rb-gradient-to: rgb(var(--tb-secondary-600)) var(--rb-gradient-to-position);
42231
- }
42232
- :where(.theme-scope) .from-secondary-700 {
42233
- --rb-gradient-from: rgb(var(--tb-secondary-700))
42234
- var(--rb-gradient-from-position);
42235
- --rb-gradient-to: rgb(var(--tb-secondary-700)) var(--rb-gradient-to-position);
42236
- --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);
42237
- }
42238
- :where(.theme-scope) .to-secondary-700 {
42239
- --rb-gradient-to: rgb(var(--tb-secondary-700)) var(--rb-gradient-to-position);
42240
- }
42241
- :where(.theme-scope) .from-secondary-800 {
42242
- --rb-gradient-from: rgb(var(--tb-secondary-800))
42243
- var(--rb-gradient-from-position);
42244
- --rb-gradient-to: rgb(var(--tb-secondary-800)) var(--rb-gradient-to-position);
42245
- --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);
42246
- }
42247
- :where(.theme-scope) .to-secondary-800 {
42248
- --rb-gradient-to: rgb(var(--tb-secondary-800)) var(--rb-gradient-to-position);
42249
- }
42250
- :where(.theme-scope) .from-secondary-900 {
42251
- --rb-gradient-from: rgb(var(--tb-secondary-900))
42252
- var(--rb-gradient-from-position);
42253
- --rb-gradient-to: rgb(var(--tb-secondary-900)) var(--rb-gradient-to-position);
42254
- --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);
42255
- }
42256
- :where(.theme-scope) .to-secondary-900 {
42257
- --rb-gradient-to: rgb(var(--tb-secondary-900)) var(--rb-gradient-to-position);
42258
- }
42259
- :where(.theme-scope) .from-secondary-950 {
42260
- --rb-gradient-from: rgb(var(--tb-secondary-950))
42261
- var(--rb-gradient-from-position);
42262
- --rb-gradient-to: rgb(var(--tb-secondary-950)) var(--rb-gradient-to-position);
42263
- --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);
42264
- }
42265
- :where(.theme-scope) .to-secondary-950 {
42266
- --rb-gradient-to: rgb(var(--tb-secondary-950)) var(--rb-gradient-to-position);
42267
- }
42268
-
42269
- /* Shade tokens (50..950) for accent */
42270
- :where(.theme-scope) .from-accent-50 {
42271
- --rb-gradient-from: rgb(var(--tb-accent-50)) var(--rb-gradient-from-position);
42272
- --rb-gradient-to: rgb(var(--tb-accent-50)) var(--rb-gradient-to-position);
42273
- --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);
42274
- }
42275
- :where(.theme-scope) .to-accent-50 {
42276
- --rb-gradient-to: rgb(var(--tb-accent-50)) var(--rb-gradient-to-position);
42277
- }
42278
- :where(.theme-scope) .from-accent-100 {
42279
- --rb-gradient-from: rgb(var(--tb-accent-100)) var(--rb-gradient-from-position);
42280
- --rb-gradient-to: rgb(var(--tb-accent-100)) var(--rb-gradient-to-position);
42281
- --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);
42282
- }
42283
- :where(.theme-scope) .to-accent-100 {
42284
- --rb-gradient-to: rgb(var(--tb-accent-100)) var(--rb-gradient-to-position);
42285
- }
42286
- :where(.theme-scope) .from-accent-200 {
42287
- --rb-gradient-from: rgb(var(--tb-accent-200)) var(--rb-gradient-from-position);
42288
- --rb-gradient-to: rgb(var(--tb-accent-200)) var(--rb-gradient-to-position);
42289
- --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);
42290
- }
42291
- :where(.theme-scope) .to-accent-200 {
42292
- --rb-gradient-to: rgb(var(--tb-accent-200)) var(--rb-gradient-to-position);
42293
- }
42294
- :where(.theme-scope) .from-accent-300 {
42295
- --rb-gradient-from: rgb(var(--tb-accent-300)) var(--rb-gradient-from-position);
42296
- --rb-gradient-to: rgb(var(--tb-accent-300)) var(--rb-gradient-to-position);
42297
- --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);
42298
- }
42299
- :where(.theme-scope) .to-accent-300 {
42300
- --rb-gradient-to: rgb(var(--tb-accent-300)) var(--rb-gradient-to-position);
42301
- }
42302
- :where(.theme-scope) .from-accent-400 {
42303
- --rb-gradient-from: rgb(var(--tb-accent-400)) var(--rb-gradient-from-position);
42304
- --rb-gradient-to: rgb(var(--tb-accent-400)) var(--rb-gradient-to-position);
42305
- --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);
42306
- }
42307
- :where(.theme-scope) .to-accent-400 {
42308
- --rb-gradient-to: rgb(var(--tb-accent-400)) var(--rb-gradient-to-position);
42309
- }
42310
- :where(.theme-scope) .from-accent-500 {
42311
- --rb-gradient-from: rgb(var(--tb-accent-500)) var(--rb-gradient-from-position);
42312
- --rb-gradient-to: rgb(var(--tb-accent-500)) var(--rb-gradient-to-position);
42313
- --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);
42314
- }
42315
- :where(.theme-scope) .to-accent-500 {
42316
- --rb-gradient-to: rgb(var(--tb-accent-500)) var(--rb-gradient-to-position);
42317
- }
42318
- :where(.theme-scope) .from-accent-600 {
42319
- --rb-gradient-from: rgb(var(--tb-accent-600)) var(--rb-gradient-from-position);
42320
- --rb-gradient-to: rgb(var(--tb-accent-600)) var(--rb-gradient-to-position);
42321
- --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);
42322
- }
42323
- :where(.theme-scope) .to-accent-600 {
42324
- --rb-gradient-to: rgb(var(--tb-accent-600)) var(--rb-gradient-to-position);
42325
- }
42326
- :where(.theme-scope) .from-accent-700 {
42327
- --rb-gradient-from: rgb(var(--tb-accent-700)) var(--rb-gradient-from-position);
42328
- --rb-gradient-to: rgb(var(--tb-accent-700)) var(--rb-gradient-to-position);
42329
- --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);
42330
- }
42331
- :where(.theme-scope) .to-accent-700 {
42332
- --rb-gradient-to: rgb(var(--tb-accent-700)) var(--rb-gradient-to-position);
42333
- }
42334
- :where(.theme-scope) .from-accent-800 {
42335
- --rb-gradient-from: rgb(var(--tb-accent-800)) var(--rb-gradient-from-position);
42336
- --rb-gradient-to: rgb(var(--tb-accent-800)) var(--rb-gradient-to-position);
42337
- --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);
42338
- }
42339
- :where(.theme-scope) .to-accent-800 {
42340
- --rb-gradient-to: rgb(var(--tb-accent-800)) var(--rb-gradient-to-position);
42341
- }
42342
- :where(.theme-scope) .from-accent-900 {
42343
- --rb-gradient-from: rgb(var(--tb-accent-900)) var(--rb-gradient-from-position);
42344
- --rb-gradient-to: rgb(var(--tb-accent-900)) var(--rb-gradient-to-position);
42345
- --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);
42346
- }
42347
- :where(.theme-scope) .to-accent-900 {
42348
- --rb-gradient-to: rgb(var(--tb-accent-900)) var(--rb-gradient-to-position);
42349
- }
42350
- :where(.theme-scope) .from-accent-950 {
42351
- --rb-gradient-from: rgb(var(--tb-accent-950)) var(--rb-gradient-from-position);
42352
- --rb-gradient-to: rgb(var(--tb-accent-950)) var(--rb-gradient-to-position);
42353
- --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);
42354
- }
42355
- :where(.theme-scope) .to-accent-950 {
42356
- --rb-gradient-to: rgb(var(--tb-accent-950)) var(--rb-gradient-to-position);
42357
- }
42335
+ :where(.theme-scope) .transition-theme {
42336
+ transition: all var(--motion-duration) var(--motion-ease);
42337
+ }
42338
+ :where(.theme-scope) .transition-theme-standard {
42339
+ transition: all var(--motion-duration) var(--motion-ease);
42340
+ }
42341
+ :where(.theme-scope) .transition-theme-subtle {
42342
+ transition: all calc(var(--motion-duration) * 0.75) var(--motion-ease);
42343
+ }
42344
+ :where(.theme-scope) .transition-theme-expressive {
42345
+ transition: all calc(var(--motion-duration) * 1.35) var(--motion-ease);
42346
+ }
42358
42347
 
42359
- /* Shade tokens (50..950) for neutral */
42360
- :where(.theme-scope) .from-neutral-50 {
42361
- --rb-gradient-from: rgb(var(--tb-neutral-50)) var(--rb-gradient-from-position);
42362
- --rb-gradient-to: rgb(var(--tb-neutral-50)) var(--rb-gradient-to-position);
42363
- --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);
42364
- }
42365
- :where(.theme-scope) .to-neutral-50 {
42366
- --rb-gradient-to: rgb(var(--tb-neutral-50)) var(--rb-gradient-to-position);
42367
- }
42368
- :where(.theme-scope) .from-neutral-100 {
42369
- --rb-gradient-from: rgb(var(--tb-neutral-100))
42370
- var(--rb-gradient-from-position);
42371
- --rb-gradient-to: rgb(var(--tb-neutral-100)) var(--rb-gradient-to-position);
42372
- --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);
42373
- }
42374
- :where(.theme-scope) .to-neutral-100 {
42375
- --rb-gradient-to: rgb(var(--tb-neutral-100)) var(--rb-gradient-to-position);
42376
- }
42377
- :where(.theme-scope) .from-neutral-200 {
42378
- --rb-gradient-from: rgb(var(--tb-neutral-200))
42379
- var(--rb-gradient-from-position);
42380
- --rb-gradient-to: rgb(var(--tb-neutral-200)) var(--rb-gradient-to-position);
42381
- --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);
42382
- }
42383
- :where(.theme-scope) .to-neutral-200 {
42384
- --rb-gradient-to: rgb(var(--tb-neutral-200)) var(--rb-gradient-to-position);
42385
- }
42386
- :where(.theme-scope) .from-neutral-300 {
42387
- --rb-gradient-from: rgb(var(--tb-neutral-300))
42388
- var(--rb-gradient-from-position);
42389
- --rb-gradient-to: rgb(var(--tb-neutral-300)) var(--rb-gradient-to-position);
42390
- --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);
42391
- }
42392
- :where(.theme-scope) .to-neutral-300 {
42393
- --rb-gradient-to: rgb(var(--tb-neutral-300)) var(--rb-gradient-to-position);
42394
- }
42395
- :where(.theme-scope) .from-neutral-400 {
42396
- --rb-gradient-from: rgb(var(--tb-neutral-400))
42397
- var(--rb-gradient-from-position);
42398
- --rb-gradient-to: rgb(var(--tb-neutral-400)) var(--rb-gradient-to-position);
42399
- --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);
42400
- }
42401
- :where(.theme-scope) .to-neutral-400 {
42402
- --rb-gradient-to: rgb(var(--tb-neutral-400)) var(--rb-gradient-to-position);
42403
- }
42404
- :where(.theme-scope) .from-neutral-500 {
42405
- --rb-gradient-from: rgb(var(--tb-neutral-500))
42406
- var(--rb-gradient-from-position);
42407
- --rb-gradient-to: rgb(var(--tb-neutral-500)) var(--rb-gradient-to-position);
42408
- --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);
42409
- }
42410
- :where(.theme-scope) .to-neutral-500 {
42411
- --rb-gradient-to: rgb(var(--tb-neutral-500)) var(--rb-gradient-to-position);
42412
- }
42413
- :where(.theme-scope) .from-neutral-600 {
42414
- --rb-gradient-from: rgb(var(--tb-neutral-600))
42415
- var(--rb-gradient-from-position);
42416
- --rb-gradient-to: rgb(var(--tb-neutral-600)) var(--rb-gradient-to-position);
42417
- --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);
42418
- }
42419
- :where(.theme-scope) .to-neutral-600 {
42420
- --rb-gradient-to: rgb(var(--tb-neutral-600)) var(--rb-gradient-to-position);
42421
- }
42422
- :where(.theme-scope) .from-neutral-700 {
42423
- --rb-gradient-from: rgb(var(--tb-neutral-700))
42424
- var(--rb-gradient-from-position);
42425
- --rb-gradient-to: rgb(var(--tb-neutral-700)) var(--rb-gradient-to-position);
42426
- --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);
42427
- }
42428
- :where(.theme-scope) .to-neutral-700 {
42429
- --rb-gradient-to: rgb(var(--tb-neutral-700)) var(--rb-gradient-to-position);
42430
- }
42431
- :where(.theme-scope) .from-neutral-800 {
42432
- --rb-gradient-from: rgb(var(--tb-neutral-800))
42433
- var(--rb-gradient-from-position);
42434
- --rb-gradient-to: rgb(var(--tb-neutral-800)) var(--rb-gradient-to-position);
42435
- --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);
42436
- }
42437
- :where(.theme-scope) .to-neutral-800 {
42438
- --rb-gradient-to: rgb(var(--tb-neutral-800)) var(--rb-gradient-to-position);
42439
- }
42440
- :where(.theme-scope) .from-neutral-900 {
42441
- --rb-gradient-from: rgb(var(--tb-neutral-900))
42442
- var(--rb-gradient-from-position);
42443
- --rb-gradient-to: rgb(var(--tb-neutral-900)) var(--rb-gradient-to-position);
42444
- --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);
42445
- }
42446
- :where(.theme-scope) .to-neutral-900 {
42447
- --rb-gradient-to: rgb(var(--tb-neutral-900)) var(--rb-gradient-to-position);
42448
- }
42449
- :where(.theme-scope) .from-neutral-950 {
42450
- --rb-gradient-from: rgb(var(--tb-neutral-950))
42451
- var(--rb-gradient-from-position);
42452
- --rb-gradient-to: rgb(var(--tb-neutral-950)) var(--rb-gradient-to-position);
42453
- --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);
42454
- }
42455
- :where(.theme-scope) .to-neutral-950 {
42456
- --rb-gradient-to: rgb(var(--tb-neutral-950)) var(--rb-gradient-to-position);
42457
- }
42458
-
42459
- /* =================================================================
42348
+ /* Shade tokens (50..950) for primary */
42349
+ :where(.theme-scope) .from-primary-50 {
42350
+ --rb-gradient-from: rgb(var(--tb-primary-50))
42351
+ var(--rb-gradient-from-position);
42352
+ --rb-gradient-to: rgb(var(--tb-primary-50)) var(--rb-gradient-to-position);
42353
+ --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);
42354
+ }
42355
+ :where(.theme-scope) .to-primary-50 {
42356
+ --rb-gradient-to: rgb(var(--tb-primary-50)) var(--rb-gradient-to-position);
42357
+ }
42358
+ :where(.theme-scope) .from-primary-100 {
42359
+ --rb-gradient-from: rgb(var(--tb-primary-100))
42360
+ var(--rb-gradient-from-position);
42361
+ --rb-gradient-to: rgb(var(--tb-primary-100)) var(--rb-gradient-to-position);
42362
+ --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);
42363
+ }
42364
+ :where(.theme-scope) .to-primary-100 {
42365
+ --rb-gradient-to: rgb(var(--tb-primary-100)) var(--rb-gradient-to-position);
42366
+ }
42367
+ :where(.theme-scope) .from-primary-200 {
42368
+ --rb-gradient-from: rgb(var(--tb-primary-200))
42369
+ var(--rb-gradient-from-position);
42370
+ --rb-gradient-to: rgb(var(--tb-primary-200)) var(--rb-gradient-to-position);
42371
+ --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);
42372
+ }
42373
+ :where(.theme-scope) .to-primary-200 {
42374
+ --rb-gradient-to: rgb(var(--tb-primary-200)) var(--rb-gradient-to-position);
42375
+ }
42376
+ :where(.theme-scope) .from-primary-300 {
42377
+ --rb-gradient-from: rgb(var(--tb-primary-300))
42378
+ var(--rb-gradient-from-position);
42379
+ --rb-gradient-to: rgb(var(--tb-primary-300)) var(--rb-gradient-to-position);
42380
+ --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);
42381
+ }
42382
+ :where(.theme-scope) .to-primary-300 {
42383
+ --rb-gradient-to: rgb(var(--tb-primary-300)) var(--rb-gradient-to-position);
42384
+ }
42385
+ :where(.theme-scope) .from-primary-400 {
42386
+ --rb-gradient-from: rgb(var(--tb-primary-400))
42387
+ var(--rb-gradient-from-position);
42388
+ --rb-gradient-to: rgb(var(--tb-primary-400)) var(--rb-gradient-to-position);
42389
+ --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);
42390
+ }
42391
+ :where(.theme-scope) .to-primary-400 {
42392
+ --rb-gradient-to: rgb(var(--tb-primary-400)) var(--rb-gradient-to-position);
42393
+ }
42394
+ :where(.theme-scope) .from-primary-500 {
42395
+ --rb-gradient-from: rgb(var(--tb-primary-500))
42396
+ var(--rb-gradient-from-position);
42397
+ --rb-gradient-to: rgb(var(--tb-primary-500)) var(--rb-gradient-to-position);
42398
+ --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);
42399
+ }
42400
+ :where(.theme-scope) .to-primary-500 {
42401
+ --rb-gradient-to: rgb(var(--tb-primary-500)) var(--rb-gradient-to-position);
42402
+ }
42403
+ :where(.theme-scope) .from-primary-600 {
42404
+ --rb-gradient-from: rgb(var(--tb-primary-600))
42405
+ var(--rb-gradient-from-position);
42406
+ --rb-gradient-to: rgb(var(--tb-primary-600)) var(--rb-gradient-to-position);
42407
+ --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);
42408
+ }
42409
+ :where(.theme-scope) .to-primary-600 {
42410
+ --rb-gradient-to: rgb(var(--tb-primary-600)) var(--rb-gradient-to-position);
42411
+ }
42412
+ :where(.theme-scope) .from-primary-700 {
42413
+ --rb-gradient-from: rgb(var(--tb-primary-700))
42414
+ var(--rb-gradient-from-position);
42415
+ --rb-gradient-to: rgb(var(--tb-primary-700)) var(--rb-gradient-to-position);
42416
+ --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);
42417
+ }
42418
+ :where(.theme-scope) .to-primary-700 {
42419
+ --rb-gradient-to: rgb(var(--tb-primary-700)) var(--rb-gradient-to-position);
42420
+ }
42421
+ :where(.theme-scope) .from-primary-800 {
42422
+ --rb-gradient-from: rgb(var(--tb-primary-800))
42423
+ var(--rb-gradient-from-position);
42424
+ --rb-gradient-to: rgb(var(--tb-primary-800)) var(--rb-gradient-to-position);
42425
+ --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);
42426
+ }
42427
+ :where(.theme-scope) .to-primary-800 {
42428
+ --rb-gradient-to: rgb(var(--tb-primary-800)) var(--rb-gradient-to-position);
42429
+ }
42430
+ :where(.theme-scope) .from-primary-900 {
42431
+ --rb-gradient-from: rgb(var(--tb-primary-900))
42432
+ var(--rb-gradient-from-position);
42433
+ --rb-gradient-to: rgb(var(--tb-primary-900)) var(--rb-gradient-to-position);
42434
+ --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);
42435
+ }
42436
+ :where(.theme-scope) .to-primary-900 {
42437
+ --rb-gradient-to: rgb(var(--tb-primary-900)) var(--rb-gradient-to-position);
42438
+ }
42439
+ :where(.theme-scope) .from-primary-950 {
42440
+ --rb-gradient-from: rgb(var(--tb-primary-950))
42441
+ var(--rb-gradient-from-position);
42442
+ --rb-gradient-to: rgb(var(--tb-primary-950)) var(--rb-gradient-to-position);
42443
+ --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);
42444
+ }
42445
+ :where(.theme-scope) .to-primary-950 {
42446
+ --rb-gradient-to: rgb(var(--tb-primary-950)) var(--rb-gradient-to-position);
42447
+ }
42448
+
42449
+ /* Shade tokens (50..950) for secondary */
42450
+ :where(.theme-scope) .from-secondary-50 {
42451
+ --rb-gradient-from: rgb(var(--tb-secondary-50))
42452
+ var(--rb-gradient-from-position);
42453
+ --rb-gradient-to: rgb(var(--tb-secondary-50)) var(--rb-gradient-to-position);
42454
+ --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);
42455
+ }
42456
+ :where(.theme-scope) .to-secondary-50 {
42457
+ --rb-gradient-to: rgb(var(--tb-secondary-50)) var(--rb-gradient-to-position);
42458
+ }
42459
+ :where(.theme-scope) .from-secondary-100 {
42460
+ --rb-gradient-from: rgb(var(--tb-secondary-100))
42461
+ var(--rb-gradient-from-position);
42462
+ --rb-gradient-to: rgb(var(--tb-secondary-100))
42463
+ var(--rb-gradient-to-position);
42464
+ --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);
42465
+ }
42466
+ :where(.theme-scope) .to-secondary-100 {
42467
+ --rb-gradient-to: rgb(var(--tb-secondary-100))
42468
+ var(--rb-gradient-to-position);
42469
+ }
42470
+ :where(.theme-scope) .from-secondary-200 {
42471
+ --rb-gradient-from: rgb(var(--tb-secondary-200))
42472
+ var(--rb-gradient-from-position);
42473
+ --rb-gradient-to: rgb(var(--tb-secondary-200))
42474
+ var(--rb-gradient-to-position);
42475
+ --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);
42476
+ }
42477
+ :where(.theme-scope) .to-secondary-200 {
42478
+ --rb-gradient-to: rgb(var(--tb-secondary-200))
42479
+ var(--rb-gradient-to-position);
42480
+ }
42481
+ :where(.theme-scope) .from-secondary-300 {
42482
+ --rb-gradient-from: rgb(var(--tb-secondary-300))
42483
+ var(--rb-gradient-from-position);
42484
+ --rb-gradient-to: rgb(var(--tb-secondary-300))
42485
+ var(--rb-gradient-to-position);
42486
+ --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);
42487
+ }
42488
+ :where(.theme-scope) .to-secondary-300 {
42489
+ --rb-gradient-to: rgb(var(--tb-secondary-300))
42490
+ var(--rb-gradient-to-position);
42491
+ }
42492
+ :where(.theme-scope) .from-secondary-400 {
42493
+ --rb-gradient-from: rgb(var(--tb-secondary-400))
42494
+ var(--rb-gradient-from-position);
42495
+ --rb-gradient-to: rgb(var(--tb-secondary-400))
42496
+ var(--rb-gradient-to-position);
42497
+ --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);
42498
+ }
42499
+ :where(.theme-scope) .to-secondary-400 {
42500
+ --rb-gradient-to: rgb(var(--tb-secondary-400))
42501
+ var(--rb-gradient-to-position);
42502
+ }
42503
+ :where(.theme-scope) .from-secondary-500 {
42504
+ --rb-gradient-from: rgb(var(--tb-secondary-500))
42505
+ var(--rb-gradient-from-position);
42506
+ --rb-gradient-to: rgb(var(--tb-secondary-500))
42507
+ var(--rb-gradient-to-position);
42508
+ --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);
42509
+ }
42510
+ :where(.theme-scope) .to-secondary-500 {
42511
+ --rb-gradient-to: rgb(var(--tb-secondary-500))
42512
+ var(--rb-gradient-to-position);
42513
+ }
42514
+ :where(.theme-scope) .from-secondary-600 {
42515
+ --rb-gradient-from: rgb(var(--tb-secondary-600))
42516
+ var(--rb-gradient-from-position);
42517
+ --rb-gradient-to: rgb(var(--tb-secondary-600))
42518
+ var(--rb-gradient-to-position);
42519
+ --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);
42520
+ }
42521
+ :where(.theme-scope) .to-secondary-600 {
42522
+ --rb-gradient-to: rgb(var(--tb-secondary-600))
42523
+ var(--rb-gradient-to-position);
42524
+ }
42525
+ :where(.theme-scope) .from-secondary-700 {
42526
+ --rb-gradient-from: rgb(var(--tb-secondary-700))
42527
+ var(--rb-gradient-from-position);
42528
+ --rb-gradient-to: rgb(var(--tb-secondary-700))
42529
+ var(--rb-gradient-to-position);
42530
+ --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);
42531
+ }
42532
+ :where(.theme-scope) .to-secondary-700 {
42533
+ --rb-gradient-to: rgb(var(--tb-secondary-700))
42534
+ var(--rb-gradient-to-position);
42535
+ }
42536
+ :where(.theme-scope) .from-secondary-800 {
42537
+ --rb-gradient-from: rgb(var(--tb-secondary-800))
42538
+ var(--rb-gradient-from-position);
42539
+ --rb-gradient-to: rgb(var(--tb-secondary-800))
42540
+ var(--rb-gradient-to-position);
42541
+ --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);
42542
+ }
42543
+ :where(.theme-scope) .to-secondary-800 {
42544
+ --rb-gradient-to: rgb(var(--tb-secondary-800))
42545
+ var(--rb-gradient-to-position);
42546
+ }
42547
+ :where(.theme-scope) .from-secondary-900 {
42548
+ --rb-gradient-from: rgb(var(--tb-secondary-900))
42549
+ var(--rb-gradient-from-position);
42550
+ --rb-gradient-to: rgb(var(--tb-secondary-900))
42551
+ var(--rb-gradient-to-position);
42552
+ --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);
42553
+ }
42554
+ :where(.theme-scope) .to-secondary-900 {
42555
+ --rb-gradient-to: rgb(var(--tb-secondary-900))
42556
+ var(--rb-gradient-to-position);
42557
+ }
42558
+ :where(.theme-scope) .from-secondary-950 {
42559
+ --rb-gradient-from: rgb(var(--tb-secondary-950))
42560
+ var(--rb-gradient-from-position);
42561
+ --rb-gradient-to: rgb(var(--tb-secondary-950))
42562
+ var(--rb-gradient-to-position);
42563
+ --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);
42564
+ }
42565
+ :where(.theme-scope) .to-secondary-950 {
42566
+ --rb-gradient-to: rgb(var(--tb-secondary-950))
42567
+ var(--rb-gradient-to-position);
42568
+ }
42569
+
42570
+ /* Shade tokens (50..950) for accent */
42571
+ :where(.theme-scope) .from-accent-50 {
42572
+ --rb-gradient-from: rgb(var(--tb-accent-50))
42573
+ var(--rb-gradient-from-position);
42574
+ --rb-gradient-to: rgb(var(--tb-accent-50)) var(--rb-gradient-to-position);
42575
+ --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);
42576
+ }
42577
+ :where(.theme-scope) .to-accent-50 {
42578
+ --rb-gradient-to: rgb(var(--tb-accent-50)) var(--rb-gradient-to-position);
42579
+ }
42580
+ :where(.theme-scope) .from-accent-100 {
42581
+ --rb-gradient-from: rgb(var(--tb-accent-100))
42582
+ var(--rb-gradient-from-position);
42583
+ --rb-gradient-to: rgb(var(--tb-accent-100)) var(--rb-gradient-to-position);
42584
+ --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);
42585
+ }
42586
+ :where(.theme-scope) .to-accent-100 {
42587
+ --rb-gradient-to: rgb(var(--tb-accent-100)) var(--rb-gradient-to-position);
42588
+ }
42589
+ :where(.theme-scope) .from-accent-200 {
42590
+ --rb-gradient-from: rgb(var(--tb-accent-200))
42591
+ var(--rb-gradient-from-position);
42592
+ --rb-gradient-to: rgb(var(--tb-accent-200)) var(--rb-gradient-to-position);
42593
+ --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);
42594
+ }
42595
+ :where(.theme-scope) .to-accent-200 {
42596
+ --rb-gradient-to: rgb(var(--tb-accent-200)) var(--rb-gradient-to-position);
42597
+ }
42598
+ :where(.theme-scope) .from-accent-300 {
42599
+ --rb-gradient-from: rgb(var(--tb-accent-300))
42600
+ var(--rb-gradient-from-position);
42601
+ --rb-gradient-to: rgb(var(--tb-accent-300)) var(--rb-gradient-to-position);
42602
+ --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);
42603
+ }
42604
+ :where(.theme-scope) .to-accent-300 {
42605
+ --rb-gradient-to: rgb(var(--tb-accent-300)) var(--rb-gradient-to-position);
42606
+ }
42607
+ :where(.theme-scope) .from-accent-400 {
42608
+ --rb-gradient-from: rgb(var(--tb-accent-400))
42609
+ var(--rb-gradient-from-position);
42610
+ --rb-gradient-to: rgb(var(--tb-accent-400)) var(--rb-gradient-to-position);
42611
+ --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);
42612
+ }
42613
+ :where(.theme-scope) .to-accent-400 {
42614
+ --rb-gradient-to: rgb(var(--tb-accent-400)) var(--rb-gradient-to-position);
42615
+ }
42616
+ :where(.theme-scope) .from-accent-500 {
42617
+ --rb-gradient-from: rgb(var(--tb-accent-500))
42618
+ var(--rb-gradient-from-position);
42619
+ --rb-gradient-to: rgb(var(--tb-accent-500)) var(--rb-gradient-to-position);
42620
+ --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);
42621
+ }
42622
+ :where(.theme-scope) .to-accent-500 {
42623
+ --rb-gradient-to: rgb(var(--tb-accent-500)) var(--rb-gradient-to-position);
42624
+ }
42625
+ :where(.theme-scope) .from-accent-600 {
42626
+ --rb-gradient-from: rgb(var(--tb-accent-600))
42627
+ var(--rb-gradient-from-position);
42628
+ --rb-gradient-to: rgb(var(--tb-accent-600)) var(--rb-gradient-to-position);
42629
+ --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);
42630
+ }
42631
+ :where(.theme-scope) .to-accent-600 {
42632
+ --rb-gradient-to: rgb(var(--tb-accent-600)) var(--rb-gradient-to-position);
42633
+ }
42634
+ :where(.theme-scope) .from-accent-700 {
42635
+ --rb-gradient-from: rgb(var(--tb-accent-700))
42636
+ var(--rb-gradient-from-position);
42637
+ --rb-gradient-to: rgb(var(--tb-accent-700)) var(--rb-gradient-to-position);
42638
+ --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);
42639
+ }
42640
+ :where(.theme-scope) .to-accent-700 {
42641
+ --rb-gradient-to: rgb(var(--tb-accent-700)) var(--rb-gradient-to-position);
42642
+ }
42643
+ :where(.theme-scope) .from-accent-800 {
42644
+ --rb-gradient-from: rgb(var(--tb-accent-800))
42645
+ var(--rb-gradient-from-position);
42646
+ --rb-gradient-to: rgb(var(--tb-accent-800)) var(--rb-gradient-to-position);
42647
+ --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);
42648
+ }
42649
+ :where(.theme-scope) .to-accent-800 {
42650
+ --rb-gradient-to: rgb(var(--tb-accent-800)) var(--rb-gradient-to-position);
42651
+ }
42652
+ :where(.theme-scope) .from-accent-900 {
42653
+ --rb-gradient-from: rgb(var(--tb-accent-900))
42654
+ var(--rb-gradient-from-position);
42655
+ --rb-gradient-to: rgb(var(--tb-accent-900)) var(--rb-gradient-to-position);
42656
+ --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);
42657
+ }
42658
+ :where(.theme-scope) .to-accent-900 {
42659
+ --rb-gradient-to: rgb(var(--tb-accent-900)) var(--rb-gradient-to-position);
42660
+ }
42661
+ :where(.theme-scope) .from-accent-950 {
42662
+ --rb-gradient-from: rgb(var(--tb-accent-950))
42663
+ var(--rb-gradient-from-position);
42664
+ --rb-gradient-to: rgb(var(--tb-accent-950)) var(--rb-gradient-to-position);
42665
+ --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);
42666
+ }
42667
+ :where(.theme-scope) .to-accent-950 {
42668
+ --rb-gradient-to: rgb(var(--tb-accent-950)) var(--rb-gradient-to-position);
42669
+ }
42670
+
42671
+ /* Shade tokens (50..950) for neutral */
42672
+ :where(.theme-scope) .from-neutral-50 {
42673
+ --rb-gradient-from: rgb(var(--tb-neutral-50))
42674
+ var(--rb-gradient-from-position);
42675
+ --rb-gradient-to: rgb(var(--tb-neutral-50)) var(--rb-gradient-to-position);
42676
+ --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);
42677
+ }
42678
+ :where(.theme-scope) .to-neutral-50 {
42679
+ --rb-gradient-to: rgb(var(--tb-neutral-50)) var(--rb-gradient-to-position);
42680
+ }
42681
+ :where(.theme-scope) .from-neutral-100 {
42682
+ --rb-gradient-from: rgb(var(--tb-neutral-100))
42683
+ var(--rb-gradient-from-position);
42684
+ --rb-gradient-to: rgb(var(--tb-neutral-100)) var(--rb-gradient-to-position);
42685
+ --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);
42686
+ }
42687
+ :where(.theme-scope) .to-neutral-100 {
42688
+ --rb-gradient-to: rgb(var(--tb-neutral-100)) var(--rb-gradient-to-position);
42689
+ }
42690
+ :where(.theme-scope) .from-neutral-200 {
42691
+ --rb-gradient-from: rgb(var(--tb-neutral-200))
42692
+ var(--rb-gradient-from-position);
42693
+ --rb-gradient-to: rgb(var(--tb-neutral-200)) var(--rb-gradient-to-position);
42694
+ --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);
42695
+ }
42696
+ :where(.theme-scope) .to-neutral-200 {
42697
+ --rb-gradient-to: rgb(var(--tb-neutral-200)) var(--rb-gradient-to-position);
42698
+ }
42699
+ :where(.theme-scope) .from-neutral-300 {
42700
+ --rb-gradient-from: rgb(var(--tb-neutral-300))
42701
+ var(--rb-gradient-from-position);
42702
+ --rb-gradient-to: rgb(var(--tb-neutral-300)) var(--rb-gradient-to-position);
42703
+ --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);
42704
+ }
42705
+ :where(.theme-scope) .to-neutral-300 {
42706
+ --rb-gradient-to: rgb(var(--tb-neutral-300)) var(--rb-gradient-to-position);
42707
+ }
42708
+ :where(.theme-scope) .from-neutral-400 {
42709
+ --rb-gradient-from: rgb(var(--tb-neutral-400))
42710
+ var(--rb-gradient-from-position);
42711
+ --rb-gradient-to: rgb(var(--tb-neutral-400)) var(--rb-gradient-to-position);
42712
+ --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);
42713
+ }
42714
+ :where(.theme-scope) .to-neutral-400 {
42715
+ --rb-gradient-to: rgb(var(--tb-neutral-400)) var(--rb-gradient-to-position);
42716
+ }
42717
+ :where(.theme-scope) .from-neutral-500 {
42718
+ --rb-gradient-from: rgb(var(--tb-neutral-500))
42719
+ var(--rb-gradient-from-position);
42720
+ --rb-gradient-to: rgb(var(--tb-neutral-500)) var(--rb-gradient-to-position);
42721
+ --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);
42722
+ }
42723
+ :where(.theme-scope) .to-neutral-500 {
42724
+ --rb-gradient-to: rgb(var(--tb-neutral-500)) var(--rb-gradient-to-position);
42725
+ }
42726
+ :where(.theme-scope) .from-neutral-600 {
42727
+ --rb-gradient-from: rgb(var(--tb-neutral-600))
42728
+ var(--rb-gradient-from-position);
42729
+ --rb-gradient-to: rgb(var(--tb-neutral-600)) var(--rb-gradient-to-position);
42730
+ --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);
42731
+ }
42732
+ :where(.theme-scope) .to-neutral-600 {
42733
+ --rb-gradient-to: rgb(var(--tb-neutral-600)) var(--rb-gradient-to-position);
42734
+ }
42735
+ :where(.theme-scope) .from-neutral-700 {
42736
+ --rb-gradient-from: rgb(var(--tb-neutral-700))
42737
+ var(--rb-gradient-from-position);
42738
+ --rb-gradient-to: rgb(var(--tb-neutral-700)) var(--rb-gradient-to-position);
42739
+ --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);
42740
+ }
42741
+ :where(.theme-scope) .to-neutral-700 {
42742
+ --rb-gradient-to: rgb(var(--tb-neutral-700)) var(--rb-gradient-to-position);
42743
+ }
42744
+ :where(.theme-scope) .from-neutral-800 {
42745
+ --rb-gradient-from: rgb(var(--tb-neutral-800))
42746
+ var(--rb-gradient-from-position);
42747
+ --rb-gradient-to: rgb(var(--tb-neutral-800)) var(--rb-gradient-to-position);
42748
+ --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);
42749
+ }
42750
+ :where(.theme-scope) .to-neutral-800 {
42751
+ --rb-gradient-to: rgb(var(--tb-neutral-800)) var(--rb-gradient-to-position);
42752
+ }
42753
+ :where(.theme-scope) .from-neutral-900 {
42754
+ --rb-gradient-from: rgb(var(--tb-neutral-900))
42755
+ var(--rb-gradient-from-position);
42756
+ --rb-gradient-to: rgb(var(--tb-neutral-900)) var(--rb-gradient-to-position);
42757
+ --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);
42758
+ }
42759
+ :where(.theme-scope) .to-neutral-900 {
42760
+ --rb-gradient-to: rgb(var(--tb-neutral-900)) var(--rb-gradient-to-position);
42761
+ }
42762
+ :where(.theme-scope) .from-neutral-950 {
42763
+ --rb-gradient-from: rgb(var(--tb-neutral-950))
42764
+ var(--rb-gradient-from-position);
42765
+ --rb-gradient-to: rgb(var(--tb-neutral-950)) var(--rb-gradient-to-position);
42766
+ --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);
42767
+ }
42768
+ :where(.theme-scope) .to-neutral-950 {
42769
+ --rb-gradient-to: rgb(var(--tb-neutral-950)) var(--rb-gradient-to-position);
42770
+ }
42771
+
42772
+ /* =================================================================
42460
42773
  Header System Class Naming Conventions
42461
42774
 
42462
42775
  rb-header-* Utility-style classes set in site-header.ts layouts
@@ -42469,240 +42782,240 @@ var containerResponsiveThemeCss = `/*
42469
42782
  (nav-dropdown, nav-mobile-panel, nav-underline-grow)
42470
42783
  ================================================================= */
42471
42784
 
42472
- /* =================================================================
42785
+ /* =================================================================
42473
42786
  Header Layout Padding
42474
42787
 
42475
42788
  Padding is controlled entirely by CSS based on variant class.
42476
42789
  This ensures shrink headers look identical to non-shrink before scroll.
42477
42790
  ================================================================= */
42478
42791
 
42479
- /* Prevent scroll anchoring feedback loops when the header height transitions.
42792
+ /* Prevent scroll anchoring feedback loops when the header height transitions.
42480
42793
  In some browsers, resizing a sticky header near the top can cause the UA to
42481
42794
  adjust scroll position ("scroll anchoring"), which then flips the
42482
42795
  \`header-scrolled\` threshold logic back and forth. */
42483
- :where(.theme-scope) .block-site-header {
42484
- overflow-anchor: none;
42485
- }
42796
+ :where(.theme-scope) .block-site-header {
42797
+ overflow-anchor: none;
42798
+ }
42486
42799
 
42487
- /* Base padding for horizontal variants (classic, transparent) */
42488
- :where(.theme-scope) .rb-header-layout {
42489
- padding-top: 1rem;
42490
- padding-bottom: 1rem;
42491
- transition: padding 300ms var(--motion-ease, ease);
42492
- }
42800
+ /* Base padding for horizontal variants (classic, transparent) */
42801
+ :where(.theme-scope) .rb-header-layout {
42802
+ padding-top: 1rem;
42803
+ padding-bottom: 1rem;
42804
+ transition: padding 300ms var(--motion-ease, ease);
42805
+ }
42493
42806
 
42494
- /* Vertical variants need more breathing room
42807
+ /* Vertical variants need more breathing room
42495
42808
  Note: header-variant-* is on Section (ancestor), rb-header-layout on inner div */
42496
- :where(.theme-scope) .header-variant-centered .rb-header-layout,
42497
- :where(.theme-scope) .header-variant-editorial .rb-header-layout {
42498
- padding-top: 1.5rem;
42499
- padding-bottom: 1.5rem;
42500
- }
42809
+ :where(.theme-scope) .header-variant-centered .rb-header-layout {
42810
+ padding-top: 1.5rem;
42811
+ padding-bottom: 1.5rem;
42812
+ }
42501
42813
 
42502
- /* Floating variant - compact padding */
42503
- :where(.theme-scope) .header-variant-floating .rb-header-layout {
42504
- padding-top: 0.75rem;
42505
- padding-bottom: 0.75rem;
42506
- }
42814
+ /* Floating variant - compact padding */
42815
+ :where(.theme-scope) .header-variant-floating .rb-header-layout {
42816
+ padding-top: 0.75rem;
42817
+ padding-bottom: 0.75rem;
42818
+ }
42507
42819
 
42508
- /* =================================================================
42820
+ /* =================================================================
42509
42821
  Header Shrink-on-Scroll
42510
42822
 
42511
42823
  Only applies when .rb-header-shrink is present AND user has scrolled.
42512
42824
  No changes until scroll - shrink header = non-shrink header initially.
42513
42825
  ================================================================= */
42514
42826
 
42515
- /* Scrolled state - reduce padding */
42516
- :where(.theme-scope) .rb-header-shrink.header-scrolled .rb-header-layout {
42517
- padding-top: 0.5rem;
42518
- padding-bottom: 0.5rem;
42519
- }
42827
+ /* Scrolled state - reduce padding */
42828
+ :where(.theme-scope) .rb-header-shrink.header-scrolled .rb-header-layout {
42829
+ padding-top: 0.5rem;
42830
+ padding-bottom: 0.5rem;
42831
+ }
42520
42832
 
42521
- /* Vertical variants get gentler reduction
42833
+ /* Vertical variants get gentler reduction
42522
42834
  Note: Both classes are on Section, rb-header-layout on inner div */
42523
- :where(.theme-scope) .rb-header-shrink.header-scrolled.header-variant-centered .rb-header-layout,
42524
- :where(.theme-scope) .rb-header-shrink.header-scrolled.header-variant-editorial .rb-header-layout {
42525
- padding-top: 0.75rem;
42526
- padding-bottom: 0.75rem;
42527
- }
42835
+ :where(.theme-scope)
42836
+ .rb-header-shrink.header-scrolled.header-variant-centered
42837
+ .rb-header-layout {
42838
+ padding-top: 0.75rem;
42839
+ padding-bottom: 0.75rem;
42840
+ }
42528
42841
 
42529
- /* Floating variant */
42530
- :where(.theme-scope) .rb-header-shrink.header-scrolled.header-variant-floating .rb-header-layout {
42531
- padding-top: 0.25rem;
42532
- padding-bottom: 0.25rem;
42533
- }
42842
+ /* Floating variant */
42843
+ :where(.theme-scope)
42844
+ .rb-header-shrink.header-scrolled.header-variant-floating
42845
+ .rb-header-layout {
42846
+ padding-top: 0.25rem;
42847
+ padding-bottom: 0.25rem;
42848
+ }
42534
42849
 
42535
- /* =================================================================
42850
+ /* =================================================================
42536
42851
  Logo & Title Sizing
42537
42852
 
42538
42853
  Font sizes controlled here, not via utility classes, so shrink
42539
42854
  transitions work (utility classes would override :where()).
42540
42855
  ================================================================= */
42541
42856
 
42542
- /* Logo image sizing */
42543
- :where(.theme-scope) .rb-header-logo-sm {
42544
- height: 2.5rem;
42545
- transition: height 300ms var(--motion-ease, ease);
42546
- }
42547
- :where(.theme-scope) .rb-header-logo-lg {
42548
- height: 3rem;
42549
- transition: height 300ms var(--motion-ease, ease);
42550
- }
42857
+ /* Logo image sizing */
42858
+ :where(.theme-scope) .rb-header-logo-sm {
42859
+ height: 2.5rem;
42860
+ transition: height 300ms var(--motion-ease, ease);
42861
+ }
42862
+ :where(.theme-scope) .rb-header-logo-lg {
42863
+ height: 3rem;
42864
+ transition: height 300ms var(--motion-ease, ease);
42865
+ }
42551
42866
 
42552
- /* Site title base font size (replaces rb-text-lg / rb-text-xl utilities) */
42553
- :where(.theme-scope) .header-logo-text {
42554
- font-size: 1.125rem; /* matches rb-text-lg */
42555
- line-height: 1.75rem;
42556
- transition: font-size 300ms var(--motion-ease, ease);
42557
- }
42867
+ /* Site title base font size (replaces rb-text-lg / rb-text-xl utilities) */
42868
+ :where(.theme-scope) .header-logo-text {
42869
+ font-size: 1.125rem; /* matches rb-text-lg */
42870
+ line-height: 1.75rem;
42871
+ transition: font-size 300ms var(--motion-ease, ease);
42872
+ }
42558
42873
 
42559
- /* Mobile: reduce site title size (~30%) to keep header compact */
42560
- @container rb-site (max-width: 767px) {
42874
+ /* Mobile: reduce site title size (~30%) to keep header compact */
42875
+ @container rb-site (max-width: 767px) {
42561
42876
  @scope ([data-rb-responsive-mode="container"]) to (:scope [data-rb-responsive-mode]) {
42562
42877
  :where(.theme-scope) .header-logo-text {
42563
- font-size: 0.8rem;
42564
- line-height: 1.25rem;
42565
- }
42878
+ font-size: 0.8rem;
42879
+ line-height: 1.25rem;
42880
+ }
42566
42881
 
42567
- :where(.theme-scope) .header-variant-centered .header-logo-text,
42568
- :where(.theme-scope) .header-variant-editorial .header-logo-text {
42569
- font-size: 0.875rem;
42570
- line-height: 1.25rem;
42571
- }
42882
+ :where(.theme-scope) .header-variant-centered .header-logo-text {
42883
+ font-size: 0.875rem;
42884
+ line-height: 1.25rem;
42885
+ }
42572
42886
  }
42573
42887
  }
42574
42888
 
42575
- /* Centered/editorial variants use larger title */
42576
- :where(.theme-scope) .header-variant-centered .header-logo-text,
42577
- :where(.theme-scope) .header-variant-editorial .header-logo-text {
42578
- font-size: 1.25rem; /* matches rb-text-xl */
42579
- line-height: 1.75rem;
42580
- }
42889
+ /* Centered variant uses larger title */
42890
+ :where(.theme-scope) .header-variant-centered .header-logo-text {
42891
+ font-size: 1.25rem; /* matches rb-text-xl */
42892
+ line-height: 1.75rem;
42893
+ }
42581
42894
 
42582
- /* =================================================================
42895
+ /* =================================================================
42583
42896
  Shrink on Scroll - Logo & Title
42584
42897
  ================================================================= */
42585
42898
 
42586
- :where(.theme-scope) .rb-header-shrink.header-scrolled .rb-header-logo-sm {
42587
- height: 2rem;
42588
- }
42589
- :where(.theme-scope) .rb-header-shrink.header-scrolled .rb-header-logo-lg {
42590
- height: 2.5rem;
42591
- }
42592
- :where(.theme-scope) .rb-header-shrink.header-scrolled .header-logo-text {
42593
- font-size: 0.875rem;
42594
- }
42899
+ :where(.theme-scope) .rb-header-shrink.header-scrolled .rb-header-logo-sm {
42900
+ height: 2rem;
42901
+ }
42902
+ :where(.theme-scope) .rb-header-shrink.header-scrolled .rb-header-logo-lg {
42903
+ height: 2.5rem;
42904
+ }
42905
+ :where(.theme-scope) .rb-header-shrink.header-scrolled .header-logo-text {
42906
+ font-size: 0.875rem;
42907
+ }
42595
42908
 
42596
- @container rb-site (max-width: 767px) {
42909
+ @container rb-site (max-width: 767px) {
42597
42910
  @scope ([data-rb-responsive-mode="container"]) to (:scope [data-rb-responsive-mode]) {
42598
42911
  :where(.theme-scope) .rb-header-shrink.header-scrolled .header-logo-text {
42599
- font-size: 0.75rem;
42600
- }
42912
+ font-size: 0.75rem;
42913
+ }
42601
42914
  }
42602
42915
  }
42603
42916
 
42604
- /* =================================================================
42917
+ /* =================================================================
42605
42918
  Accessibility: Reduced Motion
42606
42919
  ================================================================= */
42607
42920
 
42608
- @media (prefers-reduced-motion: reduce) {
42609
- :where(.theme-scope) .rb-header-layout,
42610
- :where(.theme-scope) .rb-header-logo-sm,
42611
- :where(.theme-scope) .rb-header-logo-lg,
42612
- :where(.theme-scope) .header-logo-text {
42613
- transition: none;
42921
+ @media (prefers-reduced-motion: reduce) {
42922
+ :where(.theme-scope) .rb-header-layout,
42923
+ :where(.theme-scope) .rb-header-logo-sm,
42924
+ :where(.theme-scope) .rb-header-logo-lg,
42925
+ :where(.theme-scope) .header-logo-text {
42926
+ transition: none;
42927
+ }
42614
42928
  }
42615
- }
42616
42929
 
42617
- /* Nav underline-grow animation (used by navStyle: "underline-grow" in site-header.ts) */
42618
- :where(.theme-scope) .nav-underline-grow {
42619
- position: relative;
42620
- overflow: visible;
42621
- }
42622
- :where(.theme-scope) .nav-underline-grow::after {
42623
- content: "";
42624
- position: absolute;
42625
- left: 0;
42626
- bottom: var(--nav-underline-offset, -0.35em);
42627
- width: 100%;
42628
- height: 2px;
42629
- background-color: currentColor;
42630
- transform: scaleX(0);
42631
- transform-origin: left center;
42632
- transition: transform calc(var(--motion-duration) * 1.1) var(--motion-ease);
42633
- }
42634
- :where(.theme-scope) .nav-underline-grow:hover::after,
42635
- :where(.theme-scope)
42636
- .nav-underline-grow.nav-underline-active[data-active="true"]::after {
42637
- transform: scaleX(1);
42638
- }
42639
- :where(.theme-scope) .nav-underline-offset-tight {
42640
- --nav-underline-offset: -0.2em;
42641
- }
42642
- :where(.theme-scope) .nav-underline-offset-normal {
42643
- --nav-underline-offset: -0.3em;
42644
- }
42645
- :where(.theme-scope) .nav-underline-offset-loose {
42646
- --nav-underline-offset: -0.45em;
42647
- }
42930
+ /* Nav underline-grow animation (used by navStyle: "underline-grow" in site-header.ts) */
42931
+ :where(.theme-scope) .nav-underline-grow {
42932
+ position: relative;
42933
+ overflow: visible;
42934
+ }
42935
+ :where(.theme-scope) .nav-underline-grow::after {
42936
+ content: '';
42937
+ position: absolute;
42938
+ left: 0;
42939
+ bottom: var(--nav-underline-offset, -0.35em);
42940
+ width: 100%;
42941
+ height: 2px;
42942
+ background-color: currentColor;
42943
+ transform: scaleX(0);
42944
+ transform-origin: left center;
42945
+ transition: transform calc(var(--motion-duration) * 1.1) var(--motion-ease);
42946
+ }
42947
+ :where(.theme-scope) .nav-underline-grow:hover::after,
42948
+ :where(.theme-scope)
42949
+ .nav-underline-grow.nav-underline-active[data-active='true']::after {
42950
+ transform: scaleX(1);
42951
+ }
42952
+ :where(.theme-scope) .nav-underline-offset-tight {
42953
+ --nav-underline-offset: -0.2em;
42954
+ }
42955
+ :where(.theme-scope) .nav-underline-offset-normal {
42956
+ --nav-underline-offset: -0.3em;
42957
+ }
42958
+ :where(.theme-scope) .nav-underline-offset-loose {
42959
+ --nav-underline-offset: -0.45em;
42960
+ }
42648
42961
 
42649
- :where(.theme-scope) .card-surface {
42650
- background: rgb(var(--tb-surface));
42651
- color: rgb(var(--tb-onSurface, var(--tb-text)));
42652
- border: 1px solid rgb(var(--tb-border));
42653
- border-radius: var(--radius-card);
42654
- box-shadow: var(--shadow-elev);
42655
- }
42656
- :where(.theme-scope) .media-rounded {
42657
- border-radius: var(--radius-card);
42658
- }
42962
+ :where(.theme-scope) .card-surface {
42963
+ background: rgb(var(--tb-surface));
42964
+ color: rgb(var(--tb-onSurface, var(--tb-text)));
42965
+ border: 1px solid rgb(var(--tb-border));
42966
+ border-radius: var(--radius-card);
42967
+ box-shadow: var(--shadow-elev);
42968
+ }
42969
+ :where(.theme-scope) .media-rounded {
42970
+ border-radius: var(--radius-card);
42971
+ }
42659
42972
 
42660
- :where(.theme-scope) .is-placeholder::after {
42661
- content: "Placeholder";
42662
- position: absolute;
42663
- top: 0.5rem;
42664
- left: 0.5rem;
42665
- font-size: 11px;
42666
- background: color-mix(in oklab, rgb(var(--tb-bg)), rgb(var(--tb-text)) 10%);
42667
- color: rgb(var(--tb-text));
42668
- padding: 0.15rem 0.35rem;
42669
- border-radius: 4px;
42670
- opacity: 0.85;
42671
- }
42973
+ :where(.theme-scope) .is-placeholder::after {
42974
+ content: 'Placeholder';
42975
+ position: absolute;
42976
+ top: 0.5rem;
42977
+ left: 0.5rem;
42978
+ font-size: 11px;
42979
+ background: color-mix(in oklab, rgb(var(--tb-bg)), rgb(var(--tb-text)) 10%);
42980
+ color: rgb(var(--tb-text));
42981
+ padding: 0.15rem 0.35rem;
42982
+ border-radius: 4px;
42983
+ opacity: 0.85;
42984
+ }
42672
42985
 
42673
- /* Status badges - theme-aware styling for capacity indicators */
42674
- :where(.theme-scope) .badge-status {
42675
- display: inline-flex;
42676
- align-items: center;
42677
- padding: 0.125rem 0.625rem;
42678
- border-radius: 9999px;
42679
- font-size: 0.75rem;
42680
- font-weight: 500;
42681
- line-height: 1.25rem;
42682
- }
42986
+ /* Status badges - theme-aware styling for capacity indicators */
42987
+ :where(.theme-scope) .badge-status {
42988
+ display: inline-flex;
42989
+ align-items: center;
42990
+ padding: 0.125rem 0.625rem;
42991
+ border-radius: 9999px;
42992
+ font-size: 0.75rem;
42993
+ font-weight: 500;
42994
+ line-height: 1.25rem;
42995
+ }
42683
42996
 
42684
- /* All badges use a subtle theme-aware style by default */
42685
- :where(.theme-scope) .badge-status-available {
42686
- background-color: rgba(var(--tb-secondary), 0.15);
42687
- color: rgb(var(--tb-secondary-700, var(--tb-secondary)));
42688
- }
42997
+ /* All badges use a subtle theme-aware style by default */
42998
+ :where(.theme-scope) .badge-status-available {
42999
+ background-color: rgba(var(--tb-secondary), 0.15);
43000
+ color: rgb(var(--tb-secondary-700, var(--tb-secondary)));
43001
+ }
42689
43002
 
42690
- :where(.theme-scope) .badge-status-low {
42691
- background-color: rgba(var(--tb-accent), 0.15);
42692
- color: rgb(var(--tb-accent-700, var(--tb-accent)));
42693
- }
43003
+ :where(.theme-scope) .badge-status-low {
43004
+ background-color: rgba(var(--tb-accent), 0.15);
43005
+ color: rgb(var(--tb-accent-700, var(--tb-accent)));
43006
+ }
42694
43007
 
42695
- :where(.theme-scope) .badge-status-sold-out {
42696
- background-color: rgba(var(--tb-text), 0.1);
42697
- color: rgb(var(--tb-mutedText));
42698
- }
43008
+ :where(.theme-scope) .badge-status-sold-out {
43009
+ background-color: rgba(var(--tb-text), 0.1);
43010
+ color: rgb(var(--tb-mutedText));
43011
+ }
42699
43012
 
42700
- /* Event list empty state - theme-aware */
42701
- :where(.theme-scope) .event-list-empty {
42702
- background-color: rgb(var(--tb-surface));
42703
- color: rgb(var(--tb-onSurface, var(--tb-text)));
42704
- border-color: rgb(var(--tb-border));
42705
- }
43013
+ /* Event list empty state - theme-aware */
43014
+ :where(.theme-scope) .event-list-empty {
43015
+ background-color: rgb(var(--tb-surface));
43016
+ color: rgb(var(--tb-onSurface, var(--tb-text)));
43017
+ border-color: rgb(var(--tb-border));
43018
+ }
42706
43019
  } /* end @layer rb-theme */
42707
43020
 
42708
43021
  @keyframes accordion-down {
@@ -49719,7 +50032,9 @@ async function Layout({
49719
50032
  throw new Error("Layout: must provide either siteData or client");
49720
50033
  }
49721
50034
  if (!siteId && !slug && !domain) {
49722
- throw new Error("Layout: must provide siteId, slug, or domain when using client");
50035
+ throw new Error(
50036
+ "Layout: must provide siteId, slug, or domain when using client"
50037
+ );
49723
50038
  }
49724
50039
  siteData = await client.getSite({ id: siteId, slug, domain });
49725
50040
  }
@@ -49736,7 +50051,11 @@ async function Layout({
49736
50051
  checkoutHref: "/checkout"
49737
50052
  };
49738
50053
  const menuViewModel = buildMenu(navigation, routes, navigationOptions);
49739
- const footerMenuViewModel = buildFooterMenu(navigation, routes, navigationOptions);
50054
+ const footerMenuViewModel = buildFooterMenu(
50055
+ navigation,
50056
+ routes,
50057
+ navigationOptions
50058
+ );
49740
50059
  const logoViewModel = buildLogo(layout.logo ?? null, site.title);
49741
50060
  const headerData = {
49742
50061
  menu: menuViewModel,
@@ -49823,10 +50142,13 @@ async function Layout({
49823
50142
  }
49824
50143
  ) : null;
49825
50144
  if (footerPlan.renderFooterBlocks && !footerBlocksElement && process.env.NODE_ENV !== "production") {
49826
- console.debug("[sdk] Footer mode renders blocks, but footerBlocks is empty/missing", {
49827
- siteId: site.id,
49828
- mode: footerPlan.mode
49829
- });
50145
+ console.debug(
50146
+ "[sdk] Footer mode renders blocks, but footerBlocks is empty/missing",
50147
+ {
50148
+ siteId: site.id,
50149
+ mode: footerPlan.mode
50150
+ }
50151
+ );
49830
50152
  }
49831
50153
  const defaultFooterElement = footerPlan.renderDefaultFooter ? renderBlock(siteFooterManifest, layout.footer, {
49832
50154
  theme: themeRuntime.tokens,