@gemboss/gem-framework 0.9.3 → 0.10.0

package/README.md

@@ -73,6 +73,81 @@ Từ 0.8.2 mỗi module có `.d.ts` cạnh nó (`mount(root?: ParentNode | null,
 
 ## Nhật ký thay đổi
 
+- **0.10.0** (08/10/2026, gộp 0.9.10 và 0.9.11 chưa phát hành): phần còn lại của yêu cầu #4 GemFactory (Figma CRO, issue
+  gemfactory #95). Plan không khai khoá nào dưới đây thì CSS tính ra như cũ (mỗi `var()` lùi về đúng giá trị cũ).
+  - Line-height tiêu đề: opt-in `data-gem-heading="section"` (1.1), `.gem-section__heading` nền (1.04) và của Dawn parity
+    (1.08) đọc `--gem-font-heading-line-height`, tức `typography.headingLineHeight`. Khoá này ĐÃ CÓ trong hai style pack
+    (`graphic-editorial` 0.95, `warm-mineral-spf` 1.2) mà trước giờ không tới tiêu đề section: store dùng hai pack đó đổi
+    line-height tiêu đề section và hero theo đúng khoá đã khai. Giá trị không phải line-height bị bỏ (biến khai sai làm
+    `var()` bỏ qua fallback và rơi về 1,5 của body), `validateGemTokens` báo `invalid_line_height_token`. Luật riêng của
+    biến thể Dawn có cỡ px cố định (hero split-proof 46px/1.08, compact-collection…) giữ line-height riêng.
+  - Cỡ tiêu đề theo thang chữ, CHỈ khi plan khai `typography.base` hoặc `scale`: phát `--gem-section-heading-size`
+    (= `--gem-h2` × núm heading-scale), `--gem-hero-heading-size` (`--gem-h1`, chỉ luật hero h1/h2 của Dawn đọc) và bản
+    `-mobile` (không lớn hơn `--gem-heading-phone-cap`, trần điện thoại của PROFILE: Dawn khai `clamp(2rem, 11vw, 3.6rem)`
+    trên `:root`, profile nền lùi về `clamp(1.75rem, 9vw, 2.75rem)` như #587). Mọi luật tiêu đề section đọc chúng.
+  - Khoá điện thoại: `spacing.<bậc>Mobile` (cả 10 bậc) và `layout.sectionMobile` (so khoá bỏ qua hoa thường và dấu nối)
+    khai lại biến gốc trong khối `@media (max-width: 749px)` của `baseMobile`. Spacing nhân núm mật độ; giá trị kiểm hình
+    dạng như `md` (0 trần thành `0px`); giá trị không đơn vị, hoặc đọc biến của chính nhóm nó (khai lại trên `:root` là
+    vòng lặp, padding về 0), bị bỏ và `validateGemTokens` báo `invalid_phone_token`. `sectionMobile` còn đặt
+    `--gem-layout-section-mobile` trên `:root` desktop: padding ≤760px của profile nền dùng nguyên giá trị thay vì
+    desktop × 0,72. Không có khoá điện thoại cho `page`/`gutter` (bề rộng điện thoại của profile nền không đọc chúng).
+    Ở lane một stylesheet (`createGemThemeCss`), `:root` của Dawn đứng sau token và khoá `layout.*` như trước.
+  - Opt-in eyebrow có `font-size: var(--gem-text-sm)` (mặc định 13,1px, luật nền 13px).
+  - Xuất `optionalGemTokenKeys` (manifest `token_groups[].optional_keys` đọc từ đây, gồm khoá nút của 0.9.10),
+    `gemMobileTokenCssVars`, `gemPhoneTokenTarget`, `GEM_HEADING_SIZE_CSS_VARS`, `GEM_LINE_HEIGHT_TOKEN_KEYS`: bản chép ở
+    gemsite (`theme-plan-style.ts`) và cổng preset của GemFactory đối chiếu với chúng thay vì chép tay.
+- **0.9.11** (08/10/2026): marquee còn MỘT định nghĩa. Trước đó primitives.css có hai: bản của gemtheme #124 (một track
+  nhân đôi con, dịch -50%) nằm TRÊN bản #79 (`__viewport` + hai track, dịch -100%) nên thua mọi thuộc tính cả hai cùng đặt
+  (`min-width`, `animation`), và hợp đồng của #124 chưa từng chạy. Giữ hợp đồng #79, đúng thứ clone kit của gemcapture và
+  GemFactory dựng, cộng những gì của #124 vẫn đang có hiệu lực: viền `border-block`, `will-change`, dừng khi rê lên cả
+  `.gem-marquee`, đảo chiều bằng `data-gem-marquee-reverse` (bên cạnh `.gem-marquee--reverse`). Bỏ dòng `animation-duration`
+  của marquee trong khối reduced-motion của ambient: ở đó track đã `animation: none`. Đo Chromium (6 kiểu dựng marquee, 390 và
+  1280, có và không reduced-motion, rê chuột 3 chỗ, đồng hồ animation ghim ở 1234 ms): 516.832 giá trị tính ra, 56 lệch, cả 56
+  là `animation-duration` dưới reduced-motion trên track có `animation-name: none` ở cả hai bản, tức không có gì chạy; bản cố ý
+  hỏng (bỏ `will-change` và hook đảo chiều bằng thuộc tính) lệch 328. Test mới `one-owner-per-selector`: selector viết hai lần
+  trong cùng file, cùng @media, có thuộc tính đè nhau thì chỉ được giảm (còn 28 ca, liệt kê trong test).
+- **0.9.10** (08/10/2026): token nút tuỳ chọn (`GEM_BUTTON_TOKEN_KEYS`, hình dạng ở `GEM_BUTTON_TOKEN_SHAPES`), cả bốn tên
+  đã có mà chưa ai vẽ: `radius.button` (`--gem-radius-button`, scale theo `--gem-style-radius`; validators và generation-jobs
+  đã dùng tên này), `typography.buttonWeight`, `typography.buttonTransform` và `typography.buttonLetterSpacing` (schema style
+  pack; `luxury-editorial` khai nút in hoa 0.18em từ trước, giờ mới hiện). Không khai thì nút vẽ y như trước (đo Chromium:
+  90/90 giá trị tính ra trùng bản cũ ở dawn-parity và ở morph). Bo góc là của riêng nút, nên nút pill không kéo thẻ thành
+  pill; dawn-parity hết ép nút vuông / đậm 400 khi có token. In hoa và giãn chữ không nằm trong `.gem-button` (UA cho
+  `<button>` `none`, còn `<a>` kế thừa): `createGemTokenCss` thêm luật `:where(...)` độ ưu tiên 0 chỉ khi có token
+  (`gemButtonCaseCss`, export cho storefront tự viết token CSS), nên luật CTA của section vẫn thắng. Nút dạng link không nhận
+  độ đậm / chữ hoa của token. Giá trị sai hình dạng (`"pill"`, rỗng, `"semibold"`) không được phát, `validateGemTokens` cảnh
+  báo `invalid_button_token`; khoá snake_case của editor đi qua cùng cổng. Manifest có `optional_keys`. Nguồn: GemFactory
+  Global Style 08/10/2026 (339 trang store hàng đầu: CTA pill 39%, in hoa 47%, giãn chữ 18%).
+- **0.9.9** (08/10/2026): `gemFrameworkVersion` (và `framework_version` / `gem_framework_version` trong manifest) bằng
+  đúng phiên bản của gói. Từ 0.4.0 tới 0.9.8 nó đứng yên ở `"0.1.0"`, nên trang Framework của gemboss hiện sai phiên bản
+  và GemFactory phải tự đọc phiên bản npm. Test trong `index.test.ts` đỏ khi hai giá trị lệch nhau. Không đổi CSS hay
+  runtime.
+- **0.9.8** (06/10/2026): biến chỉ được tính là "khai trên :root" khi MỌI vế của selector đúng là gốc (`:root`, `html`,
+  `:host`, có thể kèm điều kiện như `:root[data-theme="dark"]`), không bao giờ là con của nó. Bản 0.9.7 chỉ xét đầu
+  selector, nên một luật `:root .gem-row { --gem-row-auto-sm: … }` sẽ biến biến nội bộ thành công khai. Stylesheet hiện
+  tại chưa có luật nào như vậy, nên kết quả không đổi (review của gemboss #3842). Thêm `gemPublicCssVariablesFrom(css)`.
+- **0.9.7** (06/10/2026): `validateGemFrameworkCss` nhận mọi biến CÔNG KHAI của chính framework, đọc từ stylesheet của nó ở
+  cả hai profile: biến khai trên `:root` (`--gem-card-radius`, `--gem-media-radius`, `--gem-ease-soft`, `--gem-grid-row-gap`…)
+  và điểm mở chỉ được đọc kèm dự phòng (`--gem-card-background`, `--gem-marquee-duration`…). Trước đó danh sách ghép tay
+  bỏ sót 25 biến như vậy, nên section đọc đúng biến framework vẫn nhận `unknown_gem_css_variable` (GemFactory gap #29).
+  Biến nội bộ mà framework chỉ khai trên class của nó (`--gem-row-auto-*`, `--gem-stars-*`, `--gem-section-bg`) vẫn bị
+  báo, và tên gõ sai cũng vậy.
+- **0.9.6** (06/10/2026): `media-gallery` có chế độ ảnh chính + thumbnail (gallery có `[data-gem-media-main]`): bấm
+  thumbnail thì ảnh chính nhận `data-gem-media-src` / `-alt` của nó, bỏ `srcset`, `aria-current` chuyển sang thumbnail
+  đó, và phát `gem:media:select` `{ index }` như `behavior.js` của section. Phần tử chỉ khớp theo class mà bọc một hook
+  `[data-gem-media-gallery]` không còn bị gắn thành gallery thứ hai (trước đó nó đánh số lại thumbnail bằng cách đếm
+  mọi `<img>`, kể cả ảnh chính). Gallery không có ảnh chính chạy như cũ.
+- **0.9.5** (06/10/2026): `sticky-atc` làm đủ việc của `behavior.js` section: giá trên thanh đổi theo biến thể khách
+  chọn (`data-gem-variant-price` trên từng `<option>`), và form KHÔNG có `action` (thanh headless) thì chặn submit, phát
+  `gem:cart:add` với biến thể đang chọn (không phải biến thể đầu ghi trên nút). Form có `action` (Liquid `/cart/add`)
+  vẫn để trình duyệt gửi như cũ. Trước đó plugin chỉ báo `gem:sticky-atc:submit`, nên trang nạp plugin mà không có
+  bản của section thì bấm thêm vào giỏ là tải lại trang.
+- **0.9.4** (06/10/2026): nút tạm dừng của `hero-slideshow` đổi chữ theo trạng thái như `behavior.js` của section từng làm:
+  khi dừng nút ghi `data-gem-hero-play-label` (mặc định `Play`), khi chạy lại ghi đúng chữ ban đầu của nút (nên nhãn đã
+  dịch không bị đè). Nút có phần tử con (icon) giữ nguyên markup, chỉ đổi `aria-pressed`. Đây là chỗ lệch cuối cùng
+  giữa plugin và section, để section giao hành vi cho plugin (một chủ, Chris 06/10/2026).
+- **0.9.3** (06/10/2026): CSS Dawn parity chỉ đặt `gap !important` cho lưới thẻ quick-view
+  (`.gem-product-card-grid--quick-view-grid`), không cho mọi `.gem-product-card-grid__grid`. Khớp bản chép của gemsite;
+  store không đổi gì.
 - **0.9.2** (06/10/2026): `reveal-on-scroll` bỏ qua `data-gem-reveal="none"` và `"default"` (hai giá trị "không áp gì" của
   knob reveal): section hiện ngay, không ẩn chờ cuộn. Trước đó section đặt `none` vẫn bị ẩn như mọi section reveal.
 - **0.9.1** (06/10/2026): plugin `reveal-on-scroll` không còn giấu section khách đang thấy. Section đã nằm trong màn hình

package/dist/SOURCE.json

@@ -1,7 +1,7 @@
 {
   "package": "@gemboss/gem-framework",
-  "version": "0.9.3",
-  "gemtheme_sha": "63ccd6e35a160cee1935c6780b4db5deaef86571",
+  "version": "0.10.0",
+  "gemtheme_sha": "15d7875982c5db5dd12446e59108221eabe273ee",
   "gemtheme_dirty": false,
-  "framework_version": "0.1.0"
+  "framework_version": "0.10.0"
 }

package/dist/gem-framework.css

@@ -160,9 +160,9 @@ a {
   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);
+  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);
 }
@@ -440,23 +440,6 @@ a {
   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));
-}
-.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;
-}
-.gem-marquee:hover .gem-marquee__track {
-  animation-play-state: paused;
-}
-.gem-marquee[data-gem-marquee-reverse] .gem-marquee__track {
-  animation-direction: reverse;
-}
 .gem-carousel {
   display: grid;
   gap: var(--gem-space-md);
@@ -582,7 +565,10 @@ a {
   overflow: hidden;
   color: var(--gem-color-accent);
 }
-.gem-marquee { overflow: hidden; }
+.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;
@@ -593,9 +579,10 @@ a {
   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; }
+.gem-marquee:hover .gem-marquee__track, .gem-marquee__viewport:hover .gem-marquee__track { animation-play-state: paused; }
+.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; }
@@ -1109,7 +1096,6 @@ a {
 @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); }
 }
 :is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow)[data-gem-divider-top], :is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow)[data-gem-divider-bottom] { position: relative; overflow: clip; overflow-clip-margin: var(--gem-divider-height, 48px); }
 :is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow)[data-gem-divider-bottom='wave']::after, :is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow)[data-gem-divider-bottom='slope']::after, :is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow)[data-gem-divider-bottom='spikes']::after, :is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow)[data-gem-divider-bottom='arch']::after, :is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow)[data-gem-divider-bottom='blob']::after, :is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow)[data-gem-divider-top='wave']::before, :is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow)[data-gem-divider-top='slope']::before, :is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow)[data-gem-divider-top='spikes']::before, :is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow)[data-gem-divider-top='arch']::before, :is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow)[data-gem-divider-top='blob']::before { content: ''; position: absolute; left: 0; right: 0; z-index: 1; pointer-events: none; height: var(--gem-divider-height, 48px); background: var(--gem-section-bg, var(--gem-color-background)); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; }
@@ -2231,8 +2217,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;
@@ -2349,20 +2335,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; }
@@ -2370,7 +2356,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; }
@@ -2423,7 +2409,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; }
@@ -2438,7 +2426,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); }
@@ -2577,8 +2566,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; }
@@ -2615,7 +2604,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; }
@@ -2696,7 +2686,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/dist/gem-runtime.js

@@ -382,7 +382,32 @@
     const galleries = document.querySelectorAll('[data-gem-media-gallery], .gem-media-gallery, .gem-product-media-gallery');
     let bound = 0;
     galleries.forEach((gallery) => {
+      const hooked = !!(gallery.hasAttribute && gallery.hasAttribute('data-gem-media-gallery'));
+      if (!hooked && gallery.querySelector && gallery.querySelector('[data-gem-media-gallery]')) return;
       if (!mark(gallery, 'media-gallery')) return;
+      const main = gallery.querySelector && gallery.querySelector('[data-gem-media-main]');
+      const thumbs = main && gallery.querySelectorAll ? Array.prototype.slice.call(gallery.querySelectorAll('[data-gem-media-item]')) : [];
+      if (main && thumbs.length) {
+        gallery.dataset.gemMediaState = 'ready';
+        const choose = (item, reason) => {
+          const src = item.getAttribute('data-gem-media-src');
+          const alt = item.getAttribute('data-gem-media-alt');
+          if (src) { main.setAttribute('src', src); main.removeAttribute('srcset'); if (alt != null) main.setAttribute('alt', alt); }
+          const index = Number(item.getAttribute('data-gem-media-index') || thumbs.indexOf(item));
+          thumbs.forEach((thumb) => { const on = thumb === item; thumb.setAttribute('aria-current', String(on)); if (thumb.dataset) thumb.dataset.gemMediaActive = on ? 'true' : 'false'; });
+          gallery.dataset.gemMediaActiveIndex = String(index);
+          if (gallery.dispatchEvent && typeof window.CustomEvent === 'function') gallery.dispatchEvent(new window.CustomEvent('gem:media:select', { bubbles: true, detail: { index } }));
+          api.emit('gem:media:change', { source: 'gem-runtime', index, galleryId: gallery.id || undefined, reason });
+        };
+        if (canListen(gallery)) gallery.addEventListener('click', (event) => {
+          const item = event.target && event.target.closest ? event.target.closest('[data-gem-media-item]') : null;
+          if (!item || !gallery.contains(item)) return;
+          if (event.preventDefault) event.preventDefault();
+          choose(item, 'click');
+        });
+        bound += 1;
+        return;
+      }
       const items = gallery.querySelectorAll('[data-gem-media-item], img, video, model-viewer');
       const thumbControls = gallery.querySelectorAll('[data-gem-media-thumb]');
       const controls = thumbControls.length ? thumbControls : items;
@@ -488,7 +513,11 @@
         else if (k === 'Home') { if (e.preventDefault) e.preventDefault(); focusDot(0); }
         else if (k === 'End') { if (e.preventDefault) e.preventDefault(); focusDot(dots.length - 1); }
       }); });
-      if (canListen(pause)) pause.addEventListener('click', () => { paused = !paused; if (pause.setAttribute) pause.setAttribute('aria-pressed', String(paused)); start(); });
+      // The visible label follows the state like the section's own behavior did: the button's own text while playing
+      // (kept, so a translated label survives), data-gem-hero-play-label (or 'Play') while paused. Only a text-only button.
+      const pauseText = pause && pause.childElementCount === 0 ? pause.textContent : null;
+      const playText = (pause && pause.getAttribute && pause.getAttribute('data-gem-hero-play-label')) || 'Play';
+      if (canListen(pause)) pause.addEventListener('click', () => { paused = !paused; if (pause.setAttribute) pause.setAttribute('aria-pressed', String(paused)); if (pauseText !== null) pause.textContent = paused ? playText : pauseText; start(); });
       show(active); start(); bound += 1;
     });
     api.emit('gem:hero-slideshow:ready', { source: 'gem-runtime', count: bound });
@@ -668,8 +697,22 @@
       };
       update();
       if (canListen(target)) target.addEventListener('scroll', update, { passive: true });
+      const priceEl = bar.querySelector && bar.querySelector('[data-gem-sticky-atc-price]');
+      const select = bar.querySelector && bar.querySelector('select');
+      const syncPrice = () => { if (!priceEl || !select) return; const opt = select.options && select.selectedIndex > -1 ? select.options[select.selectedIndex] : null; const price = opt && opt.getAttribute && opt.getAttribute('data-gem-variant-price'); if (price) priceEl.textContent = price; };
+      if (canListen(select)) select.addEventListener('change', syncPrice);
+      syncPrice();
       const form = bar.querySelector && bar.querySelector('form');
-      if (canListen(form)) form.addEventListener('submit', () => api.emit('gem:sticky-atc:submit', { source: 'gem-runtime', id: bar.id || undefined }));
+      if (canListen(form)) form.addEventListener('submit', (event) => {
+        if (!(form.hasAttribute && form.hasAttribute('action'))) {
+          if (event && event.preventDefault) event.preventDefault();
+          const choice = form.querySelector && form.querySelector('select');
+          const trigger = bar.querySelector && bar.querySelector('[data-gem-variant-id]');
+          const variantId = (choice && choice.value) || (trigger && trigger.getAttribute('data-gem-variant-id')) || undefined;
+          if (bar.dispatchEvent && typeof window.CustomEvent === 'function') bar.dispatchEvent(new window.CustomEvent('gem:cart:add', { bubbles: true, detail: { variantId, quantity: 1 } }));
+        }
+        api.emit('gem:sticky-atc:submit', { source: 'gem-runtime', id: bar.id || undefined });
+      });
       bound += 1;
     });
     api.emit('gem:sticky-atc:ready', { source: 'gem-runtime', count: bound });