@gemboss/gem-framework 0.9.8 → 0.10.0

package/dist/section-gate.js

@@ -104,6 +104,73 @@ var GEM_ROW_CSS_VARIABLES = [
   "--gem-row-gap",
   "--gem-row-gap-y"
 ];
+var GEM_BUTTON_TOKEN_KEYS = {
+  radius: ["button"],
+  typography: ["buttonWeight", "buttonTransform", "buttonLetterSpacing"]
+};
+var GEM_BUTTON_TOKEN_SHAPES = {
+  "radius.button": /^(0|\d*\.?\d+(px|rem|em|%)|var\(--gem-radius-[a-z0-9-]+\))$/i,
+  "typography.buttonWeight": /^(normal|bold|\d{1,4})$/i,
+  "typography.buttonTransform": /^(none|uppercase|lowercase|capitalize)$/i,
+  "typography.buttonLetterSpacing": /^(normal|0|-?\d*\.?\d+(em|px|rem))$/i
+};
+var buttonKeyNorm = (k) => k.toLowerCase().replace(/[_-]/g, "");
+function buttonTokenValue(group, key, value) {
+  const shape = GEM_BUTTON_TOKEN_SHAPES[`${group}.${key}`];
+  if (!shape) return null;
+  const v = typeof value === "number" ? String(value) : typeof value === "string" ? stripImportant(value).trim() : "";
+  if (!shape.test(v)) return null;
+  if (key === "buttonWeight" && /^\d+$/.test(v) && (Number(v) < 1 || Number(v) > 1e3)) return null;
+  if (key === "button" && v === "0") return "0px";
+  return /^[a-z]+$/i.test(v) ? v.toLowerCase() : v.replace(/(px|rem|em)$/i, (u) => u.toLowerCase());
+}
+function readButtonTokens(tokens) {
+  const out = { groups: {}, values: {}, invalid: [] };
+  for (const [group, keys] of Object.entries(GEM_BUTTON_TOKEN_KEYS)) {
+    const values = tokens?.[group];
+    if (!values || typeof values !== "object" || Array.isArray(values)) continue;
+    const byNorm = new Map(keys.map((k) => [buttonKeyNorm(k), k]));
+    let copy = null;
+    for (const [rawKey, raw] of Object.entries(values)) {
+      const key = byNorm.get(buttonKeyNorm(rawKey));
+      if (!key) continue;
+      copy ??= { ...values };
+      delete copy[rawKey];
+      const v = buttonTokenValue(group, key, raw);
+      if (v === null) out.invalid.push({ path: `${group}.${rawKey}`, value: raw });
+      else {
+        copy[key] = v;
+        out.values[key] = v;
+      }
+    }
+    if (copy) out.groups[group] = copy;
+  }
+  return out;
+}
+function splitSelectorList(selector) {
+  const parts = [];
+  let depth = 0, cur = "";
+  for (const ch of selector) {
+    if (ch === "(" || ch === "[") depth++;
+    else if (ch === ")" || ch === "]") depth--;
+    if (ch === "," && depth === 0) {
+      parts.push(cur.trim());
+      cur = "";
+    } else cur += ch;
+  }
+  if (cur.trim()) parts.push(cur.trim());
+  return parts;
+}
+function gemButtonCaseCss(tokens, selector = ":root") {
+  const { values } = readButtonTokens(tokens);
+  const decls = [
+    values.buttonTransform && "text-transform: var(--gem-font-button-transform);",
+    values.buttonLetterSpacing && "letter-spacing: var(--gem-font-button-letter-spacing);"
+  ].filter(Boolean);
+  if (!decls.length) return "";
+  const scope = splitSelectorList(selector).map((sel) => `${sel} .gem-button:not(.gem-button--link)`).join(", ");
+  return `:where(${scope}) { ${decls.join(" ")} }`;
+}
 var requiredGemTokenKeys = {
   color: ["background", "surface", "text", "muted", "accent", "accentText", "border", "success", "warning", "danger"],
   typography: ["body", "heading", "mono"],
@@ -116,6 +183,52 @@ var requiredGemTokenKeys = {
   component: ["headerHeight", "cardPadding", "buttonPaddingInline", "buttonPaddingBlock", "inputHeight"],
   morphology: ["campaignDensity", "mediaRhythm", "proofIntensity", "commerceEmphasis", "policyTone"]
 };
+var GEM_PHONE_TOKEN_TARGETS = {
+  spacing: [...requiredGemTokenKeys.spacing, ...Object.keys(GEM_DERIVED_SPACE_STEPS)],
+  layout: ["section"]
+};
+var tokenKeyNorm = (k) => k.toLowerCase().replace(/[^a-z0-9]/g, "");
+var PHONE_TARGET_BY_KEY = Object.fromEntries(
+  Object.entries(GEM_PHONE_TOKEN_TARGETS).map(([group, targets]) => [group, new Map(targets.map((t) => [`${tokenKeyNorm(t)}mobile`, t]))])
+);
+function gemPhoneTokenTarget(group, key) {
+  return PHONE_TARGET_BY_KEY[group]?.get(tokenKeyNorm(key)) ?? null;
+}
+function readPhoneTokens(tokens) {
+  const out = { spacing: {}, layout: {}, invalid: [] };
+  for (const group of ["spacing", "layout"]) {
+    const ownGroup = group === "spacing" ? /var\(\s*--gem-space-/i : /var\(\s*--gem-layout-/i;
+    for (const [key, raw] of Object.entries(tokens?.[group] ?? {})) {
+      const target = gemPhoneTokenTarget(group, key);
+      if (target == null) continue;
+      const v = stripImportant(String(raw ?? "")).trim();
+      const kind = gemSpaceMdKind(v);
+      if (kind === "absent") continue;
+      if (kind === "zero") out[group][target] = "0px";
+      else if (kind === "length" && !ownGroup.test(v)) out[group][target] = v;
+      else out.invalid.push({ path: `${group}.${key}`, value: raw, why: kind === "length" ? `it reads a ${group} variable, which re-declared on :root is a cycle` : "not a length (a number needs a unit, e.g. 70px)" });
+    }
+  }
+  return out;
+}
+var GEM_LINE_HEIGHT_TOKEN_KEYS = ["headingLineHeight", "bodyLineHeight"];
+var LINE_HEIGHT_SHAPE = /^(normal|\d*\.?\d+(px|rem|em|%)?|(var|calc|clamp|min|max)\(.*\))$/i;
+var isLineHeightKey = (k) => GEM_LINE_HEIGHT_TOKEN_KEYS.some((l) => tokenKeyNorm(l) === tokenKeyNorm(k));
+var badLineHeight = (k, v) => isLineHeightKey(k) && !LINE_HEIGHT_SHAPE.test(stripImportant(String(v ?? "")).trim());
+var desktopEntries = (group, values) => values ? Object.fromEntries(Object.entries(values).filter(([key]) => gemPhoneTokenTarget(group, key) == null)) : values;
+var GEM_TYPE_RAMP_KEYS = ["base", "scale", "baseMobile"];
+var optionalGemTokenKeys = {
+  typography: [...GEM_TYPE_RAMP_KEYS, ...GEM_LINE_HEIGHT_TOKEN_KEYS, ...GEM_BUTTON_TOKEN_KEYS.typography],
+  spacing: [...Object.keys(GEM_DERIVED_SPACE_STEPS), ...GEM_PHONE_TOKEN_TARGETS.spacing.map((k) => `${k}Mobile`)],
+  layout: GEM_PHONE_TOKEN_TARGETS.layout.map((k) => `${k}Mobile`),
+  radius: [...GEM_BUTTON_TOKEN_KEYS.radius]
+};
+var GEM_HEADING_SIZE_CSS_VARS = [
+  "--gem-section-heading-size: calc(var(--gem-h2) * var(--gem-typography-heading-scale, 1));",
+  "--gem-hero-heading-size: calc(var(--gem-h1) * var(--gem-typography-heading-scale, 1));",
+  "--gem-section-heading-size-mobile: min(var(--gem-section-heading-size), var(--gem-heading-phone-cap, clamp(1.75rem, 9vw, 2.75rem)));",
+  "--gem-hero-heading-size-mobile: min(var(--gem-hero-heading-size), var(--gem-heading-phone-cap, clamp(1.75rem, 9vw, 2.75rem)));"
+];
 var defaultGemTokens = {
   color: {
     background: "#f6f6f3",
@@ -194,17 +307,21 @@ var defaultGemTokens = {
   }
 };
 function createGemTokenCss(tokens, selector = ":root") {
+  const button = readButtonTokens(tokens);
+  const phone = readPhoneTokens(tokens);
+  const spacing = desktopEntries("spacing", tokens.spacing);
   const declarations = [
     ...toCssVars("color", tokens.color),
-    ...toCssVars("font", Object.fromEntries(Object.entries(tokens.typography ?? {}).filter(([k]) => !isRampKey(k)))),
+    ...toCssVars("font", Object.fromEntries(Object.entries(button.groups.typography ?? tokens.typography ?? {}).filter(([k, v]) => !isRampKey(k) && !badLineHeight(k, v)))),
     // Space ramp is scaled by the global density knob --gem-style-space (default 1),
     // so a style pack can make the WHOLE storefront airier or denser without touching
     // any section — every section already consumes --gem-space-*. Knob unset → identical.
-    ...toScaledCssVars("space", tokens.spacing, "--gem-style-space"),
-    ...gemDerivedSpaceCssVars(tokens.spacing),
+    // Phone keys (`3xlMobile`) are not desktop variables: they go to the phone block below (GEM_PHONE_TOKEN_TARGETS).
+    ...toScaledCssVars("space", spacing, "--gem-style-space"),
+    ...gemDerivedSpaceCssVars(spacing),
     // Radius ramp scaled by --gem-style-radius (default 1): a 'sharp' style sets it to
     // 0 (square everything), 'pill' rounds further — across every section, no edits.
-    ...toScaledCssVars("radius", tokens.radius, "--gem-style-radius"),
+    ...toScaledCssVars("radius", button.groups.radius ?? tokens.radius, "--gem-style-radius"),
     // Border widths get the --gem-style-border knob injected into their leading length,
     // whatever value the plan provides (e.g. "1px solid …" → "calc(1px * var(...)) solid …").
     ...toBorderCssVars("border", tokens.border, "--gem-style-border"),
@@ -213,7 +330,8 @@ function createGemTokenCss(tokens, selector = ":root") {
     // and marquee primitives consume; unrecognised keys fall back to the --gem-motion-* namespace,
     // so duration/easing keep emitting --gem-motion-duration/easing exactly as before (back-compat).
     ...toMotionCssVars(tokens.motion),
-    ...toCssVars("layout", tokens.layout),
+    ...toCssVars("layout", desktopEntries("layout", tokens.layout)),
+    ...phone.layout.section ? [`--gem-layout-section-mobile: ${phone.layout.section};`] : [],
     ...toCssVars("component", tokens.component),
     ...toCssVars("morphology", tokens.morphology),
     // THE GOVERNED TYPE RAMP — --gem-h1..h6 / --gem-body / --gem-text-sm.
@@ -223,6 +341,8 @@ function createGemTokenCss(tokens, selector = ":root") {
     // variables that resolved to nothing. One modular scale, retuned by overriding --gem-type-base
     // or --gem-type-scale (see gemTypeRampCssVars).
     ...gemTypeRampCssVars(tokens.typography),
+    // Heading sizes from the ramp, only for a plan that chose a ramp (GEM_HEADING_SIZE_CSS_VARS).
+    ...typeRampValue(tokens.typography, "base") || typeRampValue(tokens.typography, "scale") ? GEM_HEADING_SIZE_CSS_VARS : [],
     // Focus ring (gemfactory request #3, 28/09/2026): 11 sections wrote `outline: 2px solid
     // var(--gem-color-accent)` by hand. Not a token GROUP (a group would name it --gem-border-focus-ring
     // and a required key would fail every stored plan/preset without it), so it is emitted here like the
@@ -232,16 +352,25 @@ function createGemTokenCss(tokens, selector = ":root") {
     GEM_FOCUS_OFFSET_CSS_VAR
   ];
   const formBlock = gemFormCssBlock(tokens.form);
-  const baseMobile = typeRampValue(tokens.typography, "baseMobile");
+  const buttonCase = gemButtonCaseCss(tokens, selector);
+  const mobile = gemMobileTokenCssVars(tokens, phone);
   return [
     `${selector} {`,
     ...declarations.map((line) => `  ${line}`),
     "}",
-    ...baseMobile ? [`@media (max-width: ${GEM_TYPE_MOBILE_MAX}) {`, `  ${selector} {`, `    --gem-type-base: ${baseMobile};`, "  }", "}"] : [],
-    ...formBlock ? [formBlock] : []
+    ...mobile.length ? [`@media (max-width: ${GEM_TYPE_MOBILE_MAX}) {`, `  ${selector} {`, ...mobile.map((line) => `    ${line}`), "  }", "}"] : [],
+    ...formBlock ? [formBlock] : [],
+    ...buttonCase ? [buttonCase] : []
   ].join("\n");
 }
-var GEM_TYPE_RAMP_KEYS = ["base", "scale", "baseMobile"];
+function gemMobileTokenCssVars(tokens, phone = readPhoneTokens(tokens)) {
+  const baseMobile = typeRampValue(tokens.typography, "baseMobile");
+  return [
+    ...baseMobile ? [`--gem-type-base: ${baseMobile};`] : [],
+    ...toScaledCssVars("space", phone.spacing, "--gem-style-space"),
+    ...toCssVars("layout", phone.layout)
+  ];
+}
 var rampKey = (k) => k.toLowerCase().replace(/[^a-z0-9]/g, "");
 var isRampKey = (k) => GEM_TYPE_RAMP_KEYS.some((r) => rampKey(r) === rampKey(k));
 var LENGTH = /^\d*\.?\d+(px|rem|em)$/;
@@ -890,7 +1019,6 @@ var GEM_AMBIENT_CSS_LINES = [
   "@media (prefers-reduced-motion: reduce) {",
   "  [data-gem-ambient] { --gem-ambient-amp: 2px; animation-duration: 12s; }",
   "  [data-gem-reveal] { transition: none; opacity: 1; transform: none; }",
-  "  .gem-marquee__track { animation-duration: calc(var(--gem-marquee-duration, 40s) * 2.5); }",
   "}"
 ];
 var GEM_AMBIENT_CSS = GEM_AMBIENT_CSS_LINES.join("\n");
@@ -1073,9 +1201,13 @@ function createPrimitiveCss() {
     "  justify-content: center;",
     "  min-height: var(--gem-component-input-height, 44px);",
     "  border: var(--gem-button-border-width, 1px) solid var(--gem-color-border);",
-    "  border-radius: var(--gem-radius-md);",
+    // Button tokens (GEM_BUTTON_TOKEN_KEYS, optional): unset, radius and weight fall back to exactly what this rule always
+    // drew. --gem-radius-button is the button's own radius, so a pill button does not turn every card into a pill
+    // (radius-md is shared). Case and tracking are NOT declared here: <button> gets `none` / `normal` from the UA sheet
+    // while <a> inherits, so createGemTokenCss adds them only when a token sets them (gemButtonCaseCss).
+    "  border-radius: var(--gem-radius-button, var(--gem-radius-md));",
     "  padding: var(--gem-component-button-padding-block, 12px) var(--gem-component-button-padding-inline, 18px);",
-    "  font-weight: 700;",
+    "  font-weight: var(--gem-font-button-weight, 700);",
     "  text-decoration: none;",
     "  transition: background var(--gem-motion-duration, 160ms) var(--gem-motion-easing, ease), color var(--gem-motion-duration, 160ms) var(--gem-motion-easing, ease);",
     "}",
@@ -1338,28 +1470,6 @@ function createPrimitiveCss() {
     "  border-radius: var(--gem-radius-md);",
     "  background: color-mix(in srgb, var(--gem-color-text) 8%, var(--gem-color-background));",
     "}",
-    ".gem-marquee {",
-    "  overflow: hidden;",
-    "  border-block: var(--gem-border-subtle, 1px solid var(--gem-color-border));",
-    "}",
-    // Consumer contract: render the track's children TWICE (like the site's `.mq-row`) so the
-    // -50% translate lands on an identical second copy and the loop is seamless with no visible jump.
-    // The animation reuses the gem-marquee-scroll keyframe defined with the ambient primitive.
-    ".gem-marquee__track {",
-    "  display: flex;",
-    "  gap: var(--gem-space-lg);",
-    "  min-width: max-content;",
-    "  animation: gem-marquee-scroll var(--gem-marquee-duration, 40s) linear infinite;",
-    "  will-change: transform;",
-    "}",
-    // Pause-on-hover lets a shopper read a badge/logo they want to inspect.
-    ".gem-marquee:hover .gem-marquee__track {",
-    "  animation-play-state: paused;",
-    "}",
-    // Opt-in reverse direction (e.g. a second row scrolling the other way).
-    ".gem-marquee[data-gem-marquee-reverse] .gem-marquee__track {",
-    "  animation-direction: reverse;",
-    "}",
     ".gem-carousel {",
     "  display: grid;",
     "  gap: var(--gem-space-md);",
@@ -1495,9 +1605,20 @@ function createPrimitiveCss() {
     "  overflow: hidden;",
     "  color: var(--gem-color-accent);",
     "}",
-    // Marquee primitive — CSS-only and deliberately so (no JS to init, works on every render path).
-    // The one requirement is a DUPLICATED track: a single track scrolls off and leaves a gap.
-    ".gem-marquee { overflow: hidden; }",
+    // Marquee primitive. CSS-only and deliberately so (no JS to init, works on every render path).
+    // Contract: `.gem-marquee > .gem-marquee__viewport > .gem-marquee__track` TWICE (the second copy
+    // aria-hidden); each track is at least the viewport wide and moves -100% of itself, so the second
+    // copy is what makes the loop seamless. gemcapture's clone kit and GemFactory build exactly this.
+    // ONE definition (0.9.11): until then a second, earlier one (gemtheme #124: one track with its
+    // children doubled, -50%) sat above this and lost every property both set, so its contract never
+    // worked. What it set that still took effect (the border, will-change, pause on hover of the whole
+    // marquee, the data-attribute reverse) is kept here, so a marquee built to either contract computes
+    // the same style as before (Chromium, 08/10/2026). The one exception would be a track that also
+    // carries data-gem-ambient, which nothing renders.
+    ".gem-marquee {",
+    "  overflow: hidden;",
+    "  border-block: var(--gem-border-subtle, 1px solid var(--gem-color-border));",
+    "}",
     ".gem-marquee__viewport { display: flex; overflow: hidden; }",
     ".gem-marquee__track {",
     "  flex: 0 0 auto;",
@@ -1508,9 +1629,12 @@ function createPrimitiveCss() {
     "  gap: var(--gem-space-lg);",
     "  white-space: nowrap;",
     "  animation: gem-marquee var(--gem-marquee-duration, 24s) linear infinite;",
+    "  will-change: transform;",
     "}",
-    ".gem-marquee__viewport:hover .gem-marquee__track { animation-play-state: paused; }",
-    ".gem-marquee--reverse .gem-marquee__track { animation-direction: reverse; }",
+    // Pause-on-hover lets a shopper read a badge/logo they want to inspect.
+    ".gem-marquee:hover .gem-marquee__track, .gem-marquee__viewport:hover .gem-marquee__track { animation-play-state: paused; }",
+    // Opt-in reverse direction (e.g. a second row scrolling the other way).
+    ".gem-marquee--reverse .gem-marquee__track, .gem-marquee[data-gem-marquee-reverse] .gem-marquee__track { animation-direction: reverse; }",
     "@keyframes gem-marquee { from { transform: translateX(0); } to { transform: translateX(-100%); } }",
     "@media (prefers-reduced-motion: reduce) {",
     "  .gem-marquee__track { animation: none; }",
@@ -2528,10 +2652,10 @@ function createGemSectionRuntimeContractCss(selector = "[data-gem-section-librar
     "}"
   ].join("\n");
 }
-var OPT_IN_EYEBROW = ":where(.gem-section[data-gem-eyebrow='show']) .gem-section__eyebrow { display: block; letter-spacing: 0.12em; }";
-var OPT_IN_HEADING = ":where(.gem-section[data-gem-heading='section']) .gem-section__heading { margin: 0; font-family: var(--gem-font-heading); font-size: var(--gem-h2); line-height: 1.1; letter-spacing: -0.01em; text-wrap: balance; }";
+var OPT_IN_EYEBROW = ":where(.gem-section[data-gem-eyebrow='show']) .gem-section__eyebrow { display: block; font-size: var(--gem-text-sm); letter-spacing: 0.12em; }";
+var OPT_IN_HEADING = ":where(.gem-section[data-gem-heading='section']) .gem-section__heading { margin: 0; font-family: var(--gem-font-heading); font-size: var(--gem-section-heading-size, var(--gem-h2)); line-height: var(--gem-font-heading-line-height, 1.1); letter-spacing: -0.01em; text-wrap: balance; }";
 var OPT_IN_BODY = ":where(.gem-section[data-gem-body='section']) .gem-section__body { margin: 0; color: var(--gem-color-muted); font-size: var(--gem-body); line-height: var(--gem-font-body-line-height, 1.5); }";
-var OPT_IN_HEADING_MOBILE = "  :where(.gem-section[data-gem-heading='section']) .gem-section__heading { font-size: min(var(--gem-h2), clamp(1.75rem, 9vw, 2.75rem)); }";
+var OPT_IN_HEADING_MOBILE = "  :where(.gem-section[data-gem-heading='section']) .gem-section__heading { font-size: var(--gem-section-heading-size-mobile, min(var(--gem-h2), clamp(1.75rem, 9vw, 2.75rem))); }";
 function createSectionCss() {
   return [
     ".gem-section {",
@@ -2723,8 +2847,8 @@ function createSectionCss() {
     ".gem-section__heading {",
     "  margin: 0;",
     "  font-family: var(--gem-font-heading);",
-    "  font-size: clamp(calc(2rem * var(--gem-typography-heading-scale, 1)), calc(4vw * var(--gem-typography-heading-scale, 1)), calc(4rem * var(--gem-typography-heading-scale, 1)));",
-    "  line-height: 1.04;",
+    "  font-size: var(--gem-section-heading-size, clamp(calc(2rem * var(--gem-typography-heading-scale, 1)), calc(4vw * var(--gem-typography-heading-scale, 1)), calc(4rem * var(--gem-typography-heading-scale, 1))));",
+    "  line-height: var(--gem-font-heading-line-height, 1.04);",
     "}",
     ".gem-section__body {",
     "  margin: 0;",
@@ -2841,9 +2965,10 @@ function createSectionCss() {
     "  }",
     "}",
     "@media (max-width: 760px) {",
-    "  .gem-section { padding-block: calc(var(--gem-layout-section, 64px) * 0.72); }",
+    // A declared layout.sectionMobile is final (tokens.ts GEM_PHONE_TOKEN_TARGETS); otherwise the desktop value × 0.72.
+    "  .gem-section { padding-block: var(--gem-layout-section-mobile, calc(var(--gem-layout-section, 64px) * 0.72)); }",
     "  .gem-section__inner, .gem-container { width: min(100% - 32px, var(--gem-layout-page, 1180px)); }",
-    "  .gem-section__heading { font-size: clamp(1.75rem, 9vw, 2.75rem); }",
+    "  .gem-section__heading { font-size: var(--gem-section-heading-size-mobile, clamp(1.75rem, 9vw, 2.75rem)); }",
     "  .gem-section__grid { grid-template-columns: minmax(0, 1fr); }",
     "  .gem-section:is([data-gem-composition-mode='split-collage'], [data-gem-editorial-band-mode='media-story']) .gem-section__grid { grid-template-columns: minmax(0, 1fr); }",
     "  .gem-product-main[data-gem-product-main-layout='dawn-main'] .gem-product-main__inner { grid-template-columns: minmax(0, 1fr); }",
@@ -2863,7 +2988,7 @@ function createSectionCss() {
 function createDawnParityCss() {
   return [
     "/* Dawn parity profile: locked default baseline; morph presets must opt out before applying Gem visual identity. */",
-    ":root { --gem-profile-mode: dawn-parity; --gem-layout-page: 1100px; --gem-layout-gutter: 32px; --gem-layout-section: 52px; --gem-radius-md: 0px; --gem-card-radius: 0px; --gem-media-radius: 0px; --gem-grid-column-gap: 8px; --gem-grid-row-gap: 8px; }",
+    ":root { --gem-profile-mode: dawn-parity; --gem-layout-page: 1100px; --gem-layout-gutter: 32px; --gem-layout-section: 52px; --gem-radius-md: 0px; --gem-card-radius: 0px; --gem-media-radius: 0px; --gem-grid-column-gap: 8px; --gem-grid-row-gap: 8px; --gem-heading-phone-cap: clamp(2rem, 11vw, 3.6rem); }",
     ".utility-bar, .announcement-bar, .utility-bar__grid { min-height: 38px; }",
     ".announcement-bar__message { margin: 0; min-height: 38px; padding-block: 10px; font-size: 0.75rem; font-weight: 400; letter-spacing: 0.04em; }",
     // The pair of rules here used to blank the real message (font-size: 0) and inject a FIXED
@@ -2939,7 +3064,12 @@ function createDawnParityCss() {
     ".gem-hero-banner--split-proof .gem-hero-banner__media, .gem-hero-banner--editorial .gem-hero-banner__media { position: relative; inset: auto; min-height: 26rem; height: 100%; overflow: hidden; border-radius: 6px; background: rgb(244 244 244); }",
     ".gem-hero-banner--split-proof .gem-hero-banner__image, .gem-hero-banner--split-proof .gem-hero-banner__placeholder, .gem-hero-banner--editorial .gem-hero-banner__image, .gem-hero-banner--editorial .gem-hero-banner__placeholder { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }",
     ".gem-hero-banner .gem-section__content { max-width: 78rem; margin-inline: auto; }",
-    ".gem-hero-banner h1, .gem-hero-banner h2, .gem-section__heading { margin: 0 0 1.5rem; font-size: clamp(calc(2.5rem * var(--gem-typography-heading-scale, 1)), calc(4vw * var(--gem-typography-heading-scale, 1)), calc(5.2rem * var(--gem-typography-heading-scale, 1))); font-weight: 400; line-height: 1.08; letter-spacing: 0; }",
+    ".gem-hero-banner h1, .gem-hero-banner h2, .gem-section__heading { margin: 0 0 1.5rem; font-weight: 400; line-height: var(--gem-font-heading-line-height, 1.08); letter-spacing: 0; }",
+    // Font size has ONE owner per selector (one-owner-per-selector.test.ts): section headings take H2 of the plan's ramp,
+    // the hero's own title H1 (tokens.ts GEM_HEADING_SIZE_CSS_VARS). Same position and specificity as the shared rule above,
+    // so with no ramp both resolve to the clamp that rule used to set.
+    ".gem-section__heading { font-size: var(--gem-section-heading-size, clamp(calc(2.5rem * var(--gem-typography-heading-scale, 1)), calc(4vw * var(--gem-typography-heading-scale, 1)), calc(5.2rem * var(--gem-typography-heading-scale, 1)))); }",
+    ".gem-hero-banner h1, .gem-hero-banner h2 { font-size: var(--gem-hero-heading-size, clamp(calc(2.5rem * var(--gem-typography-heading-scale, 1)), calc(4vw * var(--gem-typography-heading-scale, 1)), calc(5.2rem * var(--gem-typography-heading-scale, 1)))); }",
     ".gem-section__eyebrow { display: none; }",
     ".gem-hero-banner--compact-collection { min-height: auto; display: block; text-align: left; padding-block: 25px; }",
     ".gem-hero-banner--compact-collection .gem-section__content, .gem-product-card-grid--quick-view-grid > .gem-section__inner { width: min(var(--gem-layout-page, 1200px), calc(100% - var(--gem-layout-gutter, 32px))); margin-inline: auto; }",
@@ -2954,7 +3084,13 @@ function createDawnParityCss() {
     ".gem-rich-text--dawn-intro .gem-section__body { width: 100%; max-width: none; margin: 20px 0 0; font-size: 16px; line-height: 28.8px; }",
     ".gem-rich-text--dawn-intro .gem-section__body p { margin: 0; }",
     ".gem-rich-text--dawn-intro .gem-rich-text__blocks { display: block; width: 100%; }",
-    ".gem-button { min-width: 12rem; border-radius: 0; font-weight: 400; box-shadow: none; }",
+    // Dawn's square, regular-weight button stays the default; the button tokens (radius.button, typography.buttonWeight)
+    // override it, or this rule (same specificity, later) would pin every button square at 400 whatever the plan says.
+    // The weight sits in its own rule that skips link buttons, which keep today's 400 here: the rule above it is what
+    // overrides `.gem-button--link { font-weight: inherit }` in this profile, and a weight token must not reach a link.
+    // `:where()` keeps both at one class of specificity, so a section's own CTA rule still wins.
+    ".gem-button { min-width: 12rem; border-radius: var(--gem-radius-button, 0); font-weight: 400; box-shadow: none; }",
+    ".gem-button:where(:not(.gem-button--link)) { font-weight: var(--gem-font-button-weight, 400); }",
     ".gem-product-card-wrapper { display: block; min-width: 0; }",
     ".gem-card, .gem-product-card { border: 0; border-radius: 0; box-shadow: none; background: transparent; padding: 0; }",
     ".gem-product-card__media, .gem-media { border: 0; border-radius: 0; box-shadow: none; background: rgb(244 244 244); }",
@@ -3150,7 +3286,9 @@ function createDawnParityMobileCss() {
     "  .gem-product-card__content { padding-top: 8px; gap: 4px; }",
     "  .gem-product-card__title { font-size: 15px; line-height: 24px; }",
     "  .gem-product-card__price, .gem-product-card__price .gem-price { font-size: 16px; line-height: 24px; }",
-    "  .gem-hero-banner h1, .gem-hero-banner h2, .gem-section__heading { font-size: clamp(2rem, 11vw, 3.6rem); }",
+    // Fallback = the profile's own phone heading, declared once as --gem-heading-phone-cap on the :root above.
+    "  .gem-section__heading { font-size: var(--gem-section-heading-size-mobile, var(--gem-heading-phone-cap)); }",
+    "  .gem-hero-banner h1, .gem-hero-banner h2 { font-size: var(--gem-hero-heading-size-mobile, var(--gem-heading-phone-cap)); }",
     "  .gem-featured-collection--editorial-grid .gem-section__grid, .gem-product-card-grid--quick-view-grid .gem-section__grid, .gem-main-search .gem-section__grid { grid-template-columns: repeat(var(--gem-product-card-grid-mobile-columns, 2), minmax(0, 1fr)); }",
     "  .gem-product-main[data-gem-product-main-layout='dawn-main'] > .gem-section__inner { width: calc(100% - 30px); }",
     "  .gem-product-main[data-gem-product-main-layout='dawn-main'] .gem-product-media-gallery__frame { display: flex; gap: 0; overflow-x: auto; scroll-snap-type: x mandatory; }",
@@ -4193,7 +4331,10 @@ function gemFrameworkPublicCssVariables() {
       createPrimitiveCss(),
       String(createSectionCss()),
       String(createShellCss()),
-      String(createGemSectionRuntimeContractCss())
+      String(createGemSectionRuntimeContractCss()),
+      // The button case rule only exists when a token sets it; a section may still read its variables (a CTA rule
+      // beats the zero-specificity rule, so opting in means `text-transform: var(--gem-font-button-transform, none)`).
+      gemButtonCaseCss({ typography: { buttonTransform: "none", buttonLetterSpacing: "normal" } })
     ].join("\n").replace(/\/\*[\s\S]*?\*\//g, " ");
     frameworkPublicVariables = gemPublicCssVariablesFrom(css);
   }

package/dist/sections.css

@@ -643,8 +643,8 @@ sticky-header.header-wrapper {
 .gem-section__heading {
   margin: 0;
   font-family: var(--gem-font-heading);
-  font-size: clamp(calc(2rem * var(--gem-typography-heading-scale, 1)), calc(4vw * var(--gem-typography-heading-scale, 1)), calc(4rem * var(--gem-typography-heading-scale, 1)));
-  line-height: 1.04;
+  font-size: var(--gem-section-heading-size, clamp(calc(2rem * var(--gem-typography-heading-scale, 1)), calc(4vw * var(--gem-typography-heading-scale, 1)), calc(4rem * var(--gem-typography-heading-scale, 1))));
+  line-height: var(--gem-font-heading-line-height, 1.04);
 }
 .gem-section__body {
   margin: 0;
@@ -761,20 +761,20 @@ sticky-header.header-wrapper {
   }
 }
 @media (max-width: 760px) {
-  .gem-section { padding-block: calc(var(--gem-layout-section, 64px) * 0.72); }
+  .gem-section { padding-block: var(--gem-layout-section-mobile, calc(var(--gem-layout-section, 64px) * 0.72)); }
   .gem-section__inner, .gem-container { width: min(100% - 32px, var(--gem-layout-page, 1180px)); }
-  .gem-section__heading { font-size: clamp(1.75rem, 9vw, 2.75rem); }
+  .gem-section__heading { font-size: var(--gem-section-heading-size-mobile, clamp(1.75rem, 9vw, 2.75rem)); }
   .gem-section__grid { grid-template-columns: minmax(0, 1fr); }
   .gem-section:is([data-gem-composition-mode='split-collage'], [data-gem-editorial-band-mode='media-story']) .gem-section__grid { grid-template-columns: minmax(0, 1fr); }
   .gem-product-main[data-gem-product-main-layout='dawn-main'] .gem-product-main__inner { grid-template-columns: minmax(0, 1fr); }
   .gem-product-main[data-gem-product-main-layout='dawn-main'] .gem-product-main__summary { position: static; }
   .gem-section:is([data-gem-composition-mode='slideshow'], [data-gem-composition-mode='video-led']) .gem-section__inner { min-block-size: min(62vh, 560px); }
 }
-:where(.gem-section[data-gem-eyebrow='show']) .gem-section__eyebrow { display: block; letter-spacing: 0.12em; }
-:where(.gem-section[data-gem-heading='section']) .gem-section__heading { margin: 0; font-family: var(--gem-font-heading); font-size: var(--gem-h2); line-height: 1.1; letter-spacing: -0.01em; text-wrap: balance; }
+:where(.gem-section[data-gem-eyebrow='show']) .gem-section__eyebrow { display: block; font-size: var(--gem-text-sm); letter-spacing: 0.12em; }
+:where(.gem-section[data-gem-heading='section']) .gem-section__heading { margin: 0; font-family: var(--gem-font-heading); font-size: var(--gem-section-heading-size, var(--gem-h2)); line-height: var(--gem-font-heading-line-height, 1.1); letter-spacing: -0.01em; text-wrap: balance; }
 :where(.gem-section[data-gem-body='section']) .gem-section__body { margin: 0; color: var(--gem-color-muted); font-size: var(--gem-body); line-height: var(--gem-font-body-line-height, 1.5); }
 @media (max-width: 760px) {
-  :where(.gem-section[data-gem-heading='section']) .gem-section__heading { font-size: min(var(--gem-h2), clamp(1.75rem, 9vw, 2.75rem)); }
+  :where(.gem-section[data-gem-heading='section']) .gem-section__heading { font-size: var(--gem-section-heading-size-mobile, min(var(--gem-h2), clamp(1.75rem, 9vw, 2.75rem))); }
 }
 .gem-row:where(:not([hidden])) { --gem-row-auto-sm: repeat(var(--gem-row-cols-sm), minmax(0, 1fr)); --gem-row-auto-md: repeat(var(--gem-row-cols-md), minmax(0, 1fr)); --gem-row-auto-lg: repeat(var(--gem-row-cols), minmax(0, 1fr)); display: grid; grid-template-columns: var(--gem-row-tracks-sm, var(--gem-row-auto-sm, minmax(0, 1fr))); }
 :where(.gem-row > *) { min-width: 0; --gem-row-cols: initial; --gem-row-cols-md: initial; --gem-row-cols-sm: initial; --gem-row-tracks: initial; --gem-row-tracks-md: initial; --gem-row-tracks-sm: initial; --gem-row-gap: initial; --gem-row-gap-y: initial; }
@@ -782,7 +782,7 @@ sticky-header.header-wrapper {
 @media (min-width: 990px) { .gem-row { grid-template-columns: var(--gem-row-tracks, var(--gem-row-auto-lg, repeat(2, minmax(0, 1fr)))); } }
 
 /* Dawn parity profile: locked default baseline; morph presets must opt out before applying Gem visual identity. */
-:root { --gem-profile-mode: dawn-parity; --gem-layout-page: 1100px; --gem-layout-gutter: 32px; --gem-layout-section: 52px; --gem-radius-md: 0px; --gem-card-radius: 0px; --gem-media-radius: 0px; --gem-grid-column-gap: 8px; --gem-grid-row-gap: 8px; }
+:root { --gem-profile-mode: dawn-parity; --gem-layout-page: 1100px; --gem-layout-gutter: 32px; --gem-layout-section: 52px; --gem-radius-md: 0px; --gem-card-radius: 0px; --gem-media-radius: 0px; --gem-grid-column-gap: 8px; --gem-grid-row-gap: 8px; --gem-heading-phone-cap: clamp(2rem, 11vw, 3.6rem); }
 .utility-bar, .announcement-bar, .utility-bar__grid { min-height: 38px; }
 .announcement-bar__message { margin: 0; min-height: 38px; padding-block: 10px; font-size: 0.75rem; font-weight: 400; letter-spacing: 0.04em; }
 .announcement-bar__message span { font-size: 0.75rem; }
@@ -835,7 +835,9 @@ main > .gem-section:first-child { padding-top: 0; }
 .gem-hero-banner--split-proof .gem-hero-banner__media, .gem-hero-banner--editorial .gem-hero-banner__media { position: relative; inset: auto; min-height: 26rem; height: 100%; overflow: hidden; border-radius: 6px; background: rgb(244 244 244); }
 .gem-hero-banner--split-proof .gem-hero-banner__image, .gem-hero-banner--split-proof .gem-hero-banner__placeholder, .gem-hero-banner--editorial .gem-hero-banner__image, .gem-hero-banner--editorial .gem-hero-banner__placeholder { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
 .gem-hero-banner .gem-section__content { max-width: 78rem; margin-inline: auto; }
-.gem-hero-banner h1, .gem-hero-banner h2, .gem-section__heading { margin: 0 0 1.5rem; font-size: clamp(calc(2.5rem * var(--gem-typography-heading-scale, 1)), calc(4vw * var(--gem-typography-heading-scale, 1)), calc(5.2rem * var(--gem-typography-heading-scale, 1))); font-weight: 400; line-height: 1.08; letter-spacing: 0; }
+.gem-hero-banner h1, .gem-hero-banner h2, .gem-section__heading { margin: 0 0 1.5rem; font-weight: 400; line-height: var(--gem-font-heading-line-height, 1.08); letter-spacing: 0; }
+.gem-section__heading { font-size: var(--gem-section-heading-size, clamp(calc(2.5rem * var(--gem-typography-heading-scale, 1)), calc(4vw * var(--gem-typography-heading-scale, 1)), calc(5.2rem * var(--gem-typography-heading-scale, 1)))); }
+.gem-hero-banner h1, .gem-hero-banner h2 { font-size: var(--gem-hero-heading-size, clamp(calc(2.5rem * var(--gem-typography-heading-scale, 1)), calc(4vw * var(--gem-typography-heading-scale, 1)), calc(5.2rem * var(--gem-typography-heading-scale, 1)))); }
 .gem-section__eyebrow { display: none; }
 .gem-hero-banner--compact-collection { min-height: auto; display: block; text-align: left; padding-block: 25px; }
 .gem-hero-banner--compact-collection .gem-section__content, .gem-product-card-grid--quick-view-grid > .gem-section__inner { width: min(var(--gem-layout-page, 1200px), calc(100% - var(--gem-layout-gutter, 32px))); margin-inline: auto; }
@@ -850,7 +852,8 @@ main > .gem-section:first-child { padding-top: 0; }
 .gem-rich-text--dawn-intro .gem-section__body { width: 100%; max-width: none; margin: 20px 0 0; font-size: 16px; line-height: 28.8px; }
 .gem-rich-text--dawn-intro .gem-section__body p { margin: 0; }
 .gem-rich-text--dawn-intro .gem-rich-text__blocks { display: block; width: 100%; }
-.gem-button { min-width: 12rem; border-radius: 0; font-weight: 400; box-shadow: none; }
+.gem-button { min-width: 12rem; border-radius: var(--gem-radius-button, 0); font-weight: 400; box-shadow: none; }
+.gem-button:where(:not(.gem-button--link)) { font-weight: var(--gem-font-button-weight, 400); }
 .gem-product-card-wrapper { display: block; min-width: 0; }
 .gem-card, .gem-product-card { border: 0; border-radius: 0; box-shadow: none; background: transparent; padding: 0; }
 .gem-product-card__media, .gem-media { border: 0; border-radius: 0; box-shadow: none; background: rgb(244 244 244); }
@@ -989,8 +992,8 @@ main > .gem-section:first-child { padding-top: 0; }
 .gem-shell-footer__payment-fallback { display: inline-grid; place-items: center; min-width: 38px; height: 24px; border: 1px solid rgb(18 18 18 / 12%); border-radius: 3px; background: white; color: rgb(18 18 18 / 72%); font-size: 8px; line-height: 1; }
 .gem-shell-footer__localization { order: -1; flex: 0 0 100%; width: 100%; }
 .gem-shell-footer__localization .gem-select, .gem-shell-footer__localization > .gem-select { display: inline-flex; align-items: center; min-width: 210px; min-height: 45px; border: 1px solid rgb(18 18 18 / 55%); border-radius: 0; background: transparent; padding: 10px 36px 10px 12px; color: rgb(18 18 18); font-size: 13px; line-height: 18px; }
-:where(.gem-section[data-gem-eyebrow='show']) .gem-section__eyebrow { display: block; letter-spacing: 0.12em; }
-:where(.gem-section[data-gem-heading='section']) .gem-section__heading { margin: 0; font-family: var(--gem-font-heading); font-size: var(--gem-h2); line-height: 1.1; letter-spacing: -0.01em; text-wrap: balance; }
+:where(.gem-section[data-gem-eyebrow='show']) .gem-section__eyebrow { display: block; font-size: var(--gem-text-sm); letter-spacing: 0.12em; }
+:where(.gem-section[data-gem-heading='section']) .gem-section__heading { margin: 0; font-family: var(--gem-font-heading); font-size: var(--gem-section-heading-size, var(--gem-h2)); line-height: var(--gem-font-heading-line-height, 1.1); letter-spacing: -0.01em; text-wrap: balance; }
 :where(.gem-section[data-gem-body='section']) .gem-section__body { margin: 0; color: var(--gem-color-muted); font-size: var(--gem-body); line-height: var(--gem-font-body-line-height, 1.5); }
 @media (max-width: 760px) {
   :root { --gem-layout-gutter: 24px; --gem-layout-section: 36px; }
@@ -1027,7 +1030,8 @@ main > .gem-section:first-child { padding-top: 0; }
   .gem-product-card__content { padding-top: 8px; gap: 4px; }
   .gem-product-card__title { font-size: 15px; line-height: 24px; }
   .gem-product-card__price, .gem-product-card__price .gem-price { font-size: 16px; line-height: 24px; }
-  .gem-hero-banner h1, .gem-hero-banner h2, .gem-section__heading { font-size: clamp(2rem, 11vw, 3.6rem); }
+  .gem-section__heading { font-size: var(--gem-section-heading-size-mobile, var(--gem-heading-phone-cap)); }
+  .gem-hero-banner h1, .gem-hero-banner h2 { font-size: var(--gem-hero-heading-size-mobile, var(--gem-heading-phone-cap)); }
   .gem-featured-collection--editorial-grid .gem-section__grid, .gem-product-card-grid--quick-view-grid .gem-section__grid, .gem-main-search .gem-section__grid { grid-template-columns: repeat(var(--gem-product-card-grid-mobile-columns, 2), minmax(0, 1fr)); }
   .gem-product-main[data-gem-product-main-layout='dawn-main'] > .gem-section__inner { width: calc(100% - 30px); }
   .gem-product-main[data-gem-product-main-layout='dawn-main'] .gem-product-media-gallery__frame { display: flex; gap: 0; overflow-x: auto; scroll-snap-type: x mandatory; }
@@ -1108,7 +1112,7 @@ main > .gem-section:first-child { padding-top: 0; }
   .gem-hero-video--dawn-video > .gem-section__inner, .gem-hero-video--dawn-video .gem-hero-video__inner, .gem-hero-video--dawn-video .gem-hero-video__media { height: 212px; min-height: 212px; }
   .gem-advanced-list--feature-grid { height: 420px; min-height: 420px; padding-block: 36px; }
   .gem-advanced-list--feature-grid .gem-section__grid { grid-template-columns: 1fr; }
-  :where(.gem-section[data-gem-heading='section']) .gem-section__heading { font-size: min(var(--gem-h2), clamp(1.75rem, 9vw, 2.75rem)); }
+  :where(.gem-section[data-gem-heading='section']) .gem-section__heading { font-size: var(--gem-section-heading-size-mobile, min(var(--gem-h2), clamp(1.75rem, 9vw, 2.75rem))); }
 }
 .gem-row:where(:not([hidden])) { --gem-row-auto-sm: repeat(var(--gem-row-cols-sm), minmax(0, 1fr)); --gem-row-auto-md: repeat(var(--gem-row-cols-md), minmax(0, 1fr)); --gem-row-auto-lg: repeat(var(--gem-row-cols), minmax(0, 1fr)); display: grid; grid-template-columns: var(--gem-row-tracks-sm, var(--gem-row-auto-sm, minmax(0, 1fr))); }
 :where(.gem-row > *) { min-width: 0; --gem-row-cols: initial; --gem-row-cols-md: initial; --gem-row-cols-sm: initial; --gem-row-tracks: initial; --gem-row-tracks-md: initial; --gem-row-tracks-sm: initial; --gem-row-gap: initial; --gem-row-gap-y: initial; }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gemboss/gem-framework",
-  "version": "0.9.8",
+  "version": "0.10.0",
   "description": "gem-framework của GemTheme (CSS, runtime, token, bộ kiểm) cộng đúng bộ kiểm section gemtheme dùng khi duyệt. Build từ gemtheme, không sửa ở đây.",
   "type": "module",
   "main": "./dist/index.js",