@gemboss/gem-framework 0.9.3 → 0.9.8

package/README.md

@@ -73,6 +73,33 @@ Từ 0.8.2 mỗi module có `.d.ts` cạnh nó (`mount(root?: ParentNode | null,
 
 ## Nhật ký thay đổi
 
+- **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.9.8",
+  "gemtheme_sha": "fea3af50909be36e9fc8968ae407409e324a1c6b",
   "gemtheme_dirty": false,
   "framework_version": "0.1.0"
 }

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 });

package/dist/index.js

@@ -4555,7 +4555,38 @@ var mediaGalleryPluginRegistrationLines = [
   "    const galleries = document.querySelectorAll('[data-gem-media-gallery], .gem-media-gallery, .gem-product-media-gallery');",
   "    let bound = 0;",
   "    galleries.forEach((gallery) => {",
+  // A wrapper matched only by its class (the thumbnail-stack <section class="gem-product-media-gallery">) around a
+  // [data-gem-media-gallery] hook is not a second gallery: binding both ran every click twice and the outer one
+  // renumbered the thumbnails' data-gem-media-index by counting every <img>, the main image included.
+  "      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;",
+  // Main image + thumbnails (product-media-gallery.thumbnail-stack.v1): a thumbnail click puts its
+  // data-gem-media-src / -alt on [data-gem-media-main], as the section's behavior.js did. Without this the plugin
+  // only moved aria-current and the big image never changed. The markup's data-gem-media-index is kept.
+  "      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;",
@@ -4667,7 +4698,11 @@ var heroSlideshowPluginRegistrationLines = [
   "        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 });",
@@ -4882,8 +4917,27 @@ var stickyAtcPluginRegistrationLines = [
   "      };",
   "      update();",
   "      if (canListen(target)) target.addEventListener('scroll', update, { passive: true });",
+  // The price follows the variant <select> (each <option> carries its own data-gem-variant-price), as the section's
+  // behavior.js did: otherwise the bar shows the first variant's price whatever the shopper picked.
+  "      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();",
+  // A form WITHOUT an action (the headless bar) has nowhere to post: the plugin adds to cart by dispatching
+  // gem:cart:add with the SELECTED variant (the button's data-gem-variant-id is only the first one), which the
+  // storefront's cart bridge consumes. A form WITH an action (a Liquid /cart/add form) is left to the browser.
   "      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 });",
@@ -5662,8 +5716,38 @@ function isAllowedUntokenizedValue(property, value) {
 function hasRawVisualValue(value) {
   return /#[0-9a-f]{3,8}\b|rgb\(|hsl\(|\b\d+(?:\.\d+)?(?:px|rem|em)\b/i.test(value);
 }
+var frameworkPublicVariables;
+function gemFrameworkPublicCssVariables() {
+  if (!frameworkPublicVariables) {
+    const css = [
+      createGemThemeCss(defaultGemTokens, ":root", { profile: "dawn-parity" }),
+      createGemThemeCss(defaultGemTokens, ":root", { profile: "morph" }),
+      createThemeProfileCss("dawn-parity"),
+      createMorphProfileCss(),
+      createPrimitiveCss(),
+      String(createSectionCss()),
+      String(createShellCss()),
+      String(createGemSectionRuntimeContractCss())
+    ].join("\n").replace(/\/\*[\s\S]*?\*\//g, " ");
+    frameworkPublicVariables = gemPublicCssVariablesFrom(css);
+  }
+  return frameworkPublicVariables;
+}
+var ROOT_SELECTOR = /^\s*(?::root|html|:host)(?:\[[^\]]*\]|:[a-z-]+(?:\([^()]*\))?)*\s*$/;
+function gemPublicCssVariablesFrom(stylesheet) {
+  const css = stylesheet.replace(/\/\*[\s\S]*?\*\//g, " ");
+  const declaredOnRoot = /* @__PURE__ */ new Set();
+  const declaredElsewhere = /* @__PURE__ */ new Set();
+  for (const [, selector, body] of css.matchAll(/([^{}]+)\{([^{}]*)\}/g)) {
+    const onRoot = selector.split(",").every((part) => ROOT_SELECTOR.test(part));
+    for (const [, name] of body.matchAll(/(--gem-[a-z0-9-]+)\s*:/g)) (onRoot ? declaredOnRoot : declaredElsewhere).add(name);
+  }
+  const mentioned = new Set([...css.matchAll(/--gem-[a-z0-9-]+/g)].map((match) => match[0]));
+  return new Set([...mentioned].filter((name) => declaredOnRoot.has(name) || !declaredElsewhere.has(name)));
+}
 function isKnownGemCssVariable(variableName, options) {
   if (canonicalCssVariableNames.has(variableName)) return true;
+  if (gemFrameworkPublicCssVariables().has(variableName)) return true;
   const allowedPrefixes = [
     "--gem-seasonal-",
     // Global style-variant knobs (--gem-style-space/radius/text/weight/stroke): the

package/dist/plugins/hero-slideshow.js

@@ -42,7 +42,11 @@ function install({ document, window, target, mark, canListen, listen: __gemListe
         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)) __gemListen(pause, '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)) __gemListen(pause, '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 });

package/dist/plugins/media-gallery.js

@@ -10,7 +10,32 @@ function install({ document, window, target, mark, canListen, listen: __gemListe
     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)) __gemListen(gallery, '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;

package/dist/plugins/sticky-atc.js

@@ -27,8 +27,22 @@ function install({ document, window, target, mark, canListen, listen: __gemListe
       };
       update();
       if (canListen(target)) __gemListen(target, '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)) __gemListen(select, 'change', syncPrice);
+      syncPrice();
       const form = bar.querySelector && bar.querySelector('form');
-      if (canListen(form)) __gemListen(form, 'submit', () => api.emit('gem:sticky-atc:submit', { source: 'gem-runtime', id: bar.id || undefined }));
+      if (canListen(form)) __gemListen(form, '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 });