@gemboss/gem-framework 0.9.3 → 0.10.0

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

package/dist/primitives.css

@@ -93,9 +93,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);
 }
@@ -373,23 +373,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);
@@ -515,7 +498,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;
@@ -526,9 +512,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; }
@@ -1042,7 +1029,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%; }