@gemboss/gem-framework 0.18.16 → 0.19.0

package/dist/plugins/quick-view.js

@@ -1,69 +1 @@
-// @gemboss/gem-framework/plugins/quick-view: the gem-runtime plugin "quick-view" as an ES module. Generated from
-// packages/gem-framework/src/runtime.ts, the same lines gem-runtime.js carries; do not edit here.
-import { mountPlugin } from "../runtime-core.js";
-
-export const key = "quick-view";
-export const readyEvent = "gem:quick-view:ready";
-
-function install({ document, window, target, mark, canListen, listen: __gemListen, registerPlugin, registerNoopPlugin }) {
-  registerPlugin('quick-view', ({ api }) => {
-    const triggers = document.querySelectorAll('[data-gem-quick-view], [data-gem-action="quick-view"]');
-    const surface = document.querySelector('[data-gem-quick-view-surface], .gem-quick-view, .gem-modal[data-gem-component="quick-view"]');
-    let bound = 0;
-    const close = (reason = 'close-control') => {
-      if (surface) {
-        surface.dataset.gemQuickViewState = 'closed';
-        surface.removeAttribute && surface.removeAttribute('open');
-        surface.setAttribute && surface.setAttribute('aria-hidden', 'true');
-      }
-      api.emit('gem:quick-view:close', { source: 'gem-runtime', reason });
-    };
-    const openSurface = (detail) => {
-      if (surface) {
-        surface.dataset.gemQuickViewState = 'open';
-        surface.dataset.gemProductHandle = detail.productHandle || '';
-        surface.dataset.gemProductUrl = detail.productUrl || '';
-        surface.setAttribute && surface.setAttribute('open', '');
-        surface.setAttribute && surface.setAttribute('aria-hidden', 'false');
-        surface.setAttribute && surface.setAttribute('role', 'dialog');
-        surface.setAttribute && surface.setAttribute('aria-modal', 'true');
-        const content = surface.querySelector && surface.querySelector('[data-gem-quick-view-content]');
-        if (content && content.textContent !== undefined) content.textContent = 'Quick view for ' + (detail.productHandle || 'product');
-        else if (surface.textContent !== undefined) surface.textContent = 'Quick view for ' + (detail.productHandle || 'product');
-        const closeButton = surface.querySelector && surface.querySelector('[data-gem-quick-view-close]');
-        if (closeButton && closeButton.focus) closeButton.focus();
-      }
-      api.emit('gem:quick-view:open', { source: 'gem-runtime', ...detail, hasSurface: Boolean(surface) });
-    };
-    triggers.forEach((trigger) => {
-      if (!mark(trigger, 'quick-view')) return;
-      if (!canListen(trigger)) return;
-      __gemListen(trigger, 'click', (event) => {
-        const productUrl = trigger.getAttribute && (trigger.getAttribute('data-gem-product-url') || trigger.getAttribute('href'));
-        const productHandle = trigger.getAttribute && trigger.getAttribute('data-gem-product-handle');
-        if (!productUrl && !productHandle) return;
-        event.preventDefault && event.preventDefault();
-        openSurface({ productUrl, productHandle });
-      });
-      bound += 1;
-    });
-    if (surface && mark(surface, 'quick-view-surface')) {
-      surface.dataset.gemQuickViewState = 'closed';
-      surface.setAttribute && surface.setAttribute('aria-hidden', 'true');
-      if (canListen(surface)) __gemListen(surface, 'click', (event) => {
-        const target = event.target;
-        if (target && target.closest && target.closest('[data-gem-quick-view-close]')) close('close-control');
-      });
-      if (canListen(surface)) __gemListen(surface, 'keydown', (event) => { if (event.key === 'Escape') close('escape'); });
-    }
-    api.quickView = { open: (detail = {}) => openSurface({ ...detail }), close };
-    api.emit('gem:quick-view:ready', { source: 'gem-runtime', count: bound, hasSurface: Boolean(surface) });
-  });
-}
-
-/** Bind every "quick-view" hook inside root (default: the whole document). Returns unmount(). Mounting the same root twice binds once. */
-export function mount(root, options) {
-  return mountPlugin(key, install, root, options);
-}
-
-export default mount;
+import{mountPlugin as w}from"../runtime-core.js";import{mountEffects as b}from"../motion/core.js";import{quickViewEffect as h}from"../motion/quick-view.js";const _="quick-view",E="gem:quick-view:ready";function q({document:a,window:u,target:y,mark:m,canListen:c,listen:n,registerPlugin:v,registerNoopPlugin:A,onUnmount:f}){v("quick-view",({api:o})=>{const k=a.querySelectorAll('[data-gem-quick-view], [data-gem-action="quick-view"]'),e=a.querySelector('[data-gem-quick-view-surface], .gem-quick-view, .gem-modal[data-gem-component="quick-view"]');let l=0;const g=(t="close-control")=>{e&&(e.dataset.gemQuickViewState="closed",e.removeAttribute&&e.removeAttribute("open"),e.setAttribute&&e.setAttribute("aria-hidden","true")),o.emit("gem:quick-view:close",{source:"gem-runtime",reason:t})},d=t=>{if(e){e.dataset.gemQuickViewState="open",e.dataset.gemProductHandle=t.productHandle||"",e.dataset.gemProductUrl=t.productUrl||"",e.setAttribute&&e.setAttribute("open",""),e.setAttribute&&e.setAttribute("aria-hidden","false"),e.setAttribute&&e.setAttribute("role","dialog"),e.setAttribute&&e.setAttribute("aria-modal","true");const i=e.querySelector&&e.querySelector("[data-gem-quick-view-content]");i&&i.textContent!==void 0?i.textContent="Quick view for "+(t.productHandle||"product"):e.textContent!==void 0&&(e.textContent="Quick view for "+(t.productHandle||"product"));const r=e.querySelector&&e.querySelector("[data-gem-quick-view-close]");r&&r.focus&&r.focus()}o.emit("gem:quick-view:open",{source:"gem-runtime",...t,hasSurface:!!e})};k.forEach(t=>{m(t,"quick-view")&&c(t)&&(n(t,"click",i=>{const r=t.getAttribute&&(t.getAttribute("data-gem-product-url")||t.getAttribute("href")),s=t.getAttribute&&t.getAttribute("data-gem-product-handle");!r&&!s||(i.preventDefault&&i.preventDefault(),d({productUrl:r,productHandle:s}))}),l+=1)}),e&&m(e,"quick-view-surface")&&(e.dataset.gemQuickViewState="closed",e.setAttribute&&e.setAttribute("aria-hidden","true"),c(e)&&n(e,"click",t=>{const i=t.target;i&&i.closest&&i.closest("[data-gem-quick-view-close]")&&g("close-control")}),c(e)&&n(e,"keydown",t=>{t.key==="Escape"&&g("escape")})),(e||!o.quickView)&&(o.quickView={open:(t={})=>d({...t}),close:g});const p=b(h,{window:u,document:a,on:(t,i,r,s)=>{c(t)&&n(t,i,r,s)},mark:m,api:o,css:"[data-gem-quick-view-trigger]{--gem-quick-view-css:1}.gem-quick-view__shell{display:contents}.gem-quick-view__shell .gem-quick-view__dialog{overflow:visible;isolation:isolate;color:var(--gem-color-text);background:transparent;box-shadow:none;user-select:text;-webkit-user-select:text}.gem-quick-view__surface{position:absolute;inset:0;z-index:-1;border-radius:inherit;box-shadow:var(--gem-shadow-md);background:color-mix(in srgb,var(--gem-motion-tint,var(--gem-color-background)) 45%,var(--gem-color-background));transition:background-color var(--gem-motion-slow,0.5s) var(--gem-ease-soft,ease)}.gem-quick-view__shell .gem-quick-view__media{overflow:visible;background:transparent;min-height:0}.gem-quick-view__image{position:absolute;inset:6% 4%;width:92%;height:88%;object-fit:contain;transform-origin:50% 50%;will-change:transform}.gem-quick-view__image--next{opacity:0;pointer-events:none}.gem-quick-view__image--next:not([src]){display:none}.gem-quick-view__shell .gem-quick-view__panel{justify-content:flex-start;gap:var(--gem-space-sm)}.gem-quick-view__shell [hidden]{display:none}.gem-quick-view__bar{display:flex;align-items:center;gap:var(--gem-space-xs);font-family:var(--gem-font-mono);font-size:var(--gem-text-xs);font-variant-numeric:tabular-nums}.gem-quick-view__icon{display:inline-grid;place-items:center;width:var(--gem-tap-min);height:var(--gem-tap-min);padding:0;cursor:pointer;border:var(--gem-stroke,1px) solid color-mix(in srgb,currentColor 25%,transparent);border-radius:var(--gem-radius-pill);color:inherit;background:transparent;font:inherit;font-size:var(--gem-h5);line-height:1}.gem-quick-view__icon:hover{border-color:currentColor}.gem-quick-view__icon:focus-visible,.gem-quick-view__swatch:focus-visible,.gem-quick-view__size:focus-visible,.gem-quick-view__details:focus-visible{outline:var(--gem-focus-ring);outline-offset:var(--gem-focus-offset)}.gem-quick-view__eyebrow{margin:var(--gem-space-md) 0 0;color:var(--gem-color-muted);font-family:var(--gem-font-mono);font-size:var(--gem-text-xs);letter-spacing:0.12em;line-height:1.3;text-transform:uppercase}.gem-quick-view__title{margin:0;font-family:var(--gem-font-heading);font-size:var(--gem-h2);line-height:1.05}.gem-quick-view__price{margin:0;font-size:var(--gem-h5);font-variant-numeric:tabular-nums}.gem-quick-view__compare{margin:calc(-1 * var(--gem-space-xs)) 0 0;color:var(--gem-color-muted);font-size:var(--gem-text-sm)}.gem-quick-view__swatches,.gem-quick-view__sizes{display:flex;flex-wrap:wrap;gap:var(--gem-space-xs)}.gem-quick-view__swatch{position:relative;width:var(--gem-tap-min);height:var(--gem-tap-min);padding:0;border:0;color:inherit;background:transparent;cursor:pointer}.gem-quick-view__swatch::before{content:'';position:absolute;inset:8px;border-radius:var(--gem-radius-pill);background:var(--gem-quick-view-swatch,var(--gem-color-surface));box-shadow:inset 0 0 0 var(--gem-stroke,1px) color-mix(in srgb,var(--gem-color-text) 15%,transparent)}.gem-quick-view__swatch[aria-checked='true']::after{content:'';position:absolute;inset:3px;border:var(--gem-stroke-thick,2px) solid currentColor;border-radius:var(--gem-radius-pill)}.gem-quick-view__size{display:inline-grid;place-items:center;min-width:var(--gem-tap-min);height:var(--gem-tap-min);padding:0 var(--gem-space-sm);cursor:pointer;border:var(--gem-stroke,1px) solid color-mix(in srgb,currentColor 22%,transparent);border-radius:var(--gem-radius-pill);color:inherit;background:transparent;font:inherit;font-size:var(--gem-text-sm)}.gem-quick-view__size[aria-checked='true']{color:var(--gem-color-background);background:var(--gem-color-text);border-color:var(--gem-color-text)}.gem-quick-view__size:disabled{opacity:0.4;text-decoration:line-through;cursor:not-allowed}.gem-quick-view__add{width:100%;margin:var(--gem-space-xs) 0 0;font-variant-numeric:tabular-nums}.gem-quick-view__status{margin:0;min-height:1.2em;color:var(--gem-color-muted);font-size:var(--gem-text-sm)}.gem-quick-view__description{margin:0;max-width:46ch;font-size:var(--gem-text-sm);line-height:1.55}.gem-quick-view__details{color:inherit;font-size:var(--gem-text-sm);text-underline-offset:3px}[data-gem-quick-view-source]{visibility:hidden}@keyframes gem-quick-view-fade{from{opacity:0}to{opacity:1}}.gem-quick-view__dialog[data-gem-state='open']::backdrop{animation:gem-quick-view-fade var(--gem-motion-base,0.35s) ease both}.gem-quick-view__dialog[data-gem-state='closing']::backdrop{animation:gem-quick-view-fade var(--gem-motion-base,0.35s) ease reverse both}@media (max-width:749px){.gem-quick-view__shell .gem-quick-view__media{height:34dvh}}@media (prefers-reduced-motion:reduce){.gem-quick-view__dialog::backdrop{animation:none}.gem-quick-view__surface{transition:none}}"},f);o.emit("gem:quick-view:ready",{source:"gem-runtime",count:l+p,hasSurface:!!e})})}function x(a,u){return w(_,q,a,u)}var H=x;export{H as default,_ as key,x as mount,E as readyEvent};

package/dist/plugins/rail.d.ts

@@ -0,0 +1,9 @@
+// @gemboss/gem-framework/plugins/rail: types of the ES module next to this file. Generated; do not edit here.
+import type { MountOptions, Unmount } from "../runtime-core.js";
+
+export type { MountOptions, Unmount };
+export declare const key: "rail";
+export declare const readyEvent: "gem:rail:ready";
+/** Bind every "rail" hook inside root (default: the whole document). Returns unmount(). Mounting the same root twice binds once. */
+export declare function mount(root?: ParentNode | null, options?: MountOptions): Unmount;
+export default mount;

package/dist/plugins/rail.js

@@ -0,0 +1 @@
+import{mountPlugin as d}from"../runtime-core.js";import{mountEffects as f}from"../motion/core.js";import{railEffect as p}from"../motion/rail.js";const _="rail",P="gem:rail:ready";function v({document:e,window:t,target:x,mark:i,canListen:o,listen:n,registerPlugin:m,registerNoopPlugin:y,onUnmount:s}){m("rail",({api:a})=>{const g=f(p,{window:t,document:e,on:(r,l,c,u)=>{o(r)&&n(r,l,c,u)},mark:i,api:a,css:".gem-rail{--gem-rail-css:1;user-select:none;-webkit-user-select:none;transition:background-color var(--gem-motion-slow,0.6s) var(--gem-ease-soft,ease)}.gem-rail[data-gem-state] .gem-rail__item{will-change:transform}.gem-rail[data-gem-state] .gem-rail__stage{cursor:pointer}.gem-rail[data-gem-state] .gem-rail__hit{pointer-events:none;transition:opacity var(--gem-motion-base,0.35s) var(--gem-ease-soft,ease)}@container (max-width:699px){.gem-rail[data-gem-state] .gem-rail__hit{pointer-events:auto}}.gem-rail[data-gem-state='open'] .gem-rail__hit{opacity:0.15}@media (prefers-reduced-motion:reduce){.gem-rail,.gem-rail[data-gem-state] .gem-rail__hit{transition:none}}"},s);a.emit("gem:rail:ready",{source:"gem-runtime",count:g})})}function h(e,t){return d(_,v,e,t)}var N=h;export{N as default,_ as key,h as mount,P as readyEvent};

package/dist/plugins/recently-viewed.js

@@ -5,7 +5,7 @@ import { mountPlugin } from "../runtime-core.js";
 export const key = "recently-viewed";
 export const readyEvent = "gem:recently-viewed:ready";
 
-function install({ document, window, target, mark, canListen, listen: __gemListen, registerPlugin, registerNoopPlugin }) {
+function install({ document, window, target, mark, canListen, listen: __gemListen, registerPlugin, registerNoopPlugin, onUnmount }) {
   registerPlugin('recently-viewed', ({ api }) => {
     const storageKey = 'gem:recently-viewed-products';
     const readItems = () => {

package/dist/plugins/reveal-on-scroll.js

@@ -5,7 +5,7 @@ import { mountPlugin } from "../runtime-core.js";
 export const key = "reveal-on-scroll";
 export const readyEvent = "gem:reveal:ready";
 
-function install({ document, window, target, mark, canListen, listen: __gemListen, registerPlugin, registerNoopPlugin }) {
+function install({ document, window, target, mark, canListen, listen: __gemListen, registerPlugin, registerNoopPlugin, onUnmount }) {
   registerPlugin('reveal-on-scroll', ({ api }) => {
     const nodes = document.querySelectorAll('[data-gem-reveal], .gem-reveal');
     let bound = 0;

package/dist/plugins/reviews.js

@@ -5,7 +5,7 @@ import { mountPlugin } from "../runtime-core.js";
 export const key = "reviews";
 export const readyEvent = "gem:reviews:ready";
 
-function install({ document, window, target, mark, canListen, listen: __gemListen, registerPlugin, registerNoopPlugin }) {
+function install({ document, window, target, mark, canListen, listen: __gemListen, registerPlugin, registerNoopPlugin, onUnmount }) {
   registerPlugin('reviews', ({ api }) => {
     let boundReviews = 0;
     document.querySelectorAll('[data-rv-root]').forEach((root) => {

package/dist/plugins/runtime-slot-loader.js

@@ -5,7 +5,7 @@ import { mountPlugin } from "../runtime-core.js";
 export const key = "runtime-slot-loader";
 export const readyEvent = "gem:slot:ready";
 
-function install({ document, window, target, mark, canListen, listen: __gemListen, registerPlugin, registerNoopPlugin }) {
+function install({ document, window, target, mark, canListen, listen: __gemListen, registerPlugin, registerNoopPlugin, onUnmount }) {
   registerPlugin('runtime-slot-loader', ({ api }) => {
     const slots = document.querySelectorAll('[data-gem-runtime-slot], [data-gem-footer-block-builder], .gem-navigation-shell__layout');
     let bound = 0;

package/dist/plugins/seasonal-effects.js

@@ -5,7 +5,7 @@ import { mountPlugin } from "../runtime-core.js";
 export const key = "seasonal-effects";
 export const readyEvent = "gem:seasonal:ready";
 
-function install({ document, window, target, mark, canListen, listen: __gemListen, registerPlugin, registerNoopPlugin }) {
+function install({ document, window, target, mark, canListen, listen: __gemListen, registerPlugin, registerNoopPlugin, onUnmount }) {
   registerNoopPlugin("seasonal-effects", "gem:seasonal:ready");
 }
 

package/dist/plugins/size-guide.d.ts

@@ -0,0 +1,9 @@
+// @gemboss/gem-framework/plugins/size-guide: types of the ES module next to this file. Generated; do not edit here.
+import type { MountOptions, Unmount } from "../runtime-core.js";
+
+export type { MountOptions, Unmount };
+export declare const key: "size-guide";
+export declare const readyEvent: "gem:size-guide:ready";
+/** Bind every "size-guide" hook inside root (default: the whole document). Returns unmount(). Mounting the same root twice binds once. */
+export declare function mount(root?: ParentNode | null, options?: MountOptions): Unmount;
+export default mount;

package/dist/plugins/size-guide.js

@@ -0,0 +1,38 @@
+// @gemboss/gem-framework/plugins/size-guide: the gem-runtime plugin "size-guide" as an ES module. Generated from
+// packages/gem-framework/src/runtime.ts, the same lines gem-runtime.js carries; do not edit here.
+import { mountPlugin } from "../runtime-core.js";
+
+export const key = "size-guide";
+export const readyEvent = "gem:size-guide:ready";
+
+function install({ document, window, target, mark, canListen, listen: __gemListen, registerPlugin, registerNoopPlugin, onUnmount }) {
+  registerPlugin('size-guide', ({ api }) => {
+    const page = document.documentElement && typeof document.documentElement.querySelectorAll === 'function' ? document.documentElement : document;
+    const guides = Array.prototype.slice.call(page.querySelectorAll('[data-gem-size-guide]'));
+    const opens = (target) => guides.some((guide) => !target || guide.getAttribute('data-gem-size-guide') === target || guide.id === target);
+    let bound = 0;
+    document.querySelectorAll('[data-gem-size-guide-trigger]').forEach((trigger) => {
+      const target = trigger.getAttribute('data-gem-size-guide-trigger') || '';
+      if (!opens(target)) { trigger.hidden = true; return; }
+      if (!mark(trigger, 'size-guide')) return;
+      trigger.hidden = false;
+      if (!canListen(trigger)) return;
+      __gemListen(trigger, 'click', (event) => {
+        event.preventDefault && event.preventDefault();
+        const holder = trigger.closest ? trigger.closest('[data-product-id]') : null;
+        const detail = { source: 'gem-runtime', sectionId: target || null, productId: holder ? holder.getAttribute('data-product-id') : null };
+        if (typeof window.CustomEvent === 'function') window.dispatchEvent(new window.CustomEvent('gem:size-guide:open', { detail }));
+        api.emit('gem:size-guide:open', detail);
+      });
+      bound += 1;
+    });
+    api.emit('gem:size-guide:ready', { source: 'gem-runtime', count: bound, guides: guides.length });
+  });
+}
+
+/** Bind every "size-guide" hook inside root (default: the whole document). Returns unmount(). Mounting the same root twice binds once. */
+export function mount(root, options) {
+  return mountPlugin(key, install, root, options);
+}
+
+export default mount;

package/dist/plugins/sticky-atc.js

@@ -5,7 +5,7 @@ import { mountPlugin } from "../runtime-core.js";
 export const key = "sticky-atc";
 export const readyEvent = "gem:sticky-atc:ready";
 
-function install({ document, window, target, mark, canListen, listen: __gemListen, registerPlugin, registerNoopPlugin }) {
+function install({ document, window, target, mark, canListen, listen: __gemListen, registerPlugin, registerNoopPlugin, onUnmount }) {
   registerPlugin('sticky-atc', ({ api }) => {
     const bars = document.querySelectorAll('[data-gem-sticky-atc], .gem-sticky-atc');
     let bound = 0;

package/dist/plugins/tabs.js

@@ -5,7 +5,7 @@ import { mountPlugin } from "../runtime-core.js";
 export const key = "tabs";
 export const readyEvent = "gem:tabs:ready";
 
-function install({ document, window, target, mark, canListen, listen: __gemListen, registerPlugin, registerNoopPlugin }) {
+function install({ document, window, target, mark, canListen, listen: __gemListen, registerPlugin, registerNoopPlugin, onUnmount }) {
   registerPlugin('tabs', ({ api }) => {
     const roots = document.querySelectorAll('[data-gem-tabs]');
     let bound = 0;

package/dist/plugins/variant-selects.js

@@ -5,7 +5,7 @@ import { mountPlugin } from "../runtime-core.js";
 export const key = "variant-selects";
 export const readyEvent = "gem:variant:ready";
 
-function install({ document, window, target, mark, canListen, listen: __gemListen, registerPlugin, registerNoopPlugin }) {
+function install({ document, window, target, mark, canListen, listen: __gemListen, registerPlugin, registerNoopPlugin, onUnmount }) {
   registerPlugin('variant-selects', ({ api }) => {
     const selects = document.querySelectorAll('[data-gem-variant-select], select[name="id"]');
     let bound = 0;

package/dist/popup-shell.css

@@ -58,6 +58,19 @@
   .gem-popup-shell[data-gem-popup-media='background']:is([data-gem-popup-desktop='split-left'], [data-gem-popup-desktop='split-right'], [data-gem-popup-desktop='card']) .gem-popup-shell__close { color: var(--gem-color-text); }
   .gem-popup-shell[data-gem-popup-media='background']:is([data-gem-popup-desktop='split-left'], [data-gem-popup-desktop='split-right'], [data-gem-popup-desktop='card']) .gem-popup-shell__media::after { content: none; }
 }
+@keyframes gem-popup-drawer-in { from { translate: calc(100% * var(--gem-popup-drawer-dir, 1)) 0; } }
+.gem-popup-shell__dialog:dir(rtl) { --gem-popup-drawer-dir: -1; }
+@media (min-width: 750px) {
+  .gem-popup-shell[data-gem-popup-desktop='drawer-end'] .gem-popup-shell__dialog {
+    width: min(var(--gem-popup-drawer-width, 640px), 100vw); max-width: 100vw; height: 100dvh; max-height: 100dvh;
+    margin-block: 0; margin-inline: auto 0; border-radius: 0;
+    animation: gem-popup-drawer-in var(--gem-motion-base, 180ms) var(--gem-ease-enter, ease-out);
+  }
+  .gem-popup-shell[data-gem-popup-desktop='drawer-end'] .gem-popup-shell__frame { grid-template-columns: 1fr; align-content: start; min-height: 100%; }
+  .gem-popup-shell[data-gem-popup-desktop='drawer-end'] .gem-popup-shell__media { max-height: 240px; }
+  .gem-popup-shell[data-gem-popup-desktop='drawer-end'] .gem-popup-shell__panel { justify-content: flex-start; align-items: stretch; text-align: start; }
+}
+@media (prefers-reduced-motion: reduce) { .gem-popup-shell[data-gem-popup-desktop='drawer-end'] .gem-popup-shell__dialog { animation: none; } }
 @media (max-width: 749px) {
   .gem-popup-shell__dialog { width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; margin: 0; border-radius: 0; }
   .gem-popup-shell[data-gem-popup-mobile='sheet'] .gem-popup-shell__dialog { height: auto; max-height: 88dvh; margin: auto 0 0; border-radius: var(--gem-radius-lg) var(--gem-radius-lg) 0 0; }
@@ -81,6 +94,8 @@
 @media (min-width: 750px) {
   :root:has([data-gem-canvas]) .gem-popup-shell[data-gem-popup-preview='true'][data-gem-popup-desktop='fullscreen'] { padding: 0; }
   :root:has([data-gem-canvas]) .gem-popup-shell[data-gem-popup-preview='true'][data-gem-popup-desktop='fullscreen'] .gem-popup-shell__dialog { height: 720px; max-height: none; }
+  :root:has([data-gem-canvas]) .gem-popup-shell[data-gem-popup-preview='true'][data-gem-popup-desktop='drawer-end'] { padding-inline: 0; }
+  :root:has([data-gem-canvas]) .gem-popup-shell[data-gem-popup-preview='true'][data-gem-popup-desktop='drawer-end'] .gem-popup-shell__dialog { height: 720px; max-height: none; animation: none; }
 }
 @media (max-width: 749px) {
   :root:has([data-gem-canvas]) .gem-popup-shell[data-gem-popup-preview='true'] { padding: 0; }

package/dist/primitives.css

@@ -103,6 +103,9 @@ a {
   cursor: not-allowed;
   opacity: 0.55;
 }
+[data-gem-button-shape='square'] { --gem-radius-button: 0px; }
+[data-gem-button-shape='soft'] { --gem-radius-button: var(--gem-radius-sm); }
+[data-gem-button-shape='pill'] { --gem-radius-button: 999px; }
 .gem-input:disabled, .gem-select:disabled, .gem-textarea:disabled, .gem-quantity-input__button:disabled {
   cursor: not-allowed;
   opacity: 0.6;
@@ -1068,7 +1071,7 @@ a {
 :where(.gem-mark--alert) { color: var(--gem-color-danger, #b42318); }
 :where(.gem-mark--highlight.gem-mark--accent), :where(.gem-mark--highlight.gem-mark--alert) { color: var(--gem-mark-highlight-ink, #1f1d18); }
 .gem-mark-link { color: var(--gem-color-accent); text-decoration-line: underline; text-decoration-thickness: from-font; text-underline-offset: 0.18em; }
-.gem-mark-link:hover { text-decoration-thickness: 2px; }
+.gem-mark-link:hover { text-decoration-thickness: var(--gem-underline-thickness, 2px); }
 .gem-mark-link.gem-mark--highlight, .gem-mark--highlight .gem-mark-link { color: var(--gem-mark-highlight-ink, #1f1d18); }
 @keyframes gem-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(calc(-1 * var(--gem-ambient-amp, 7px))); } }
 @keyframes gem-sheen { 0%, 100% { opacity: 0.55; } 50% { opacity: 1; } }

package/dist/rail-base.css

@@ -0,0 +1,48 @@
+.gem-rail { display: block; position: relative; container-type: inline-size; background-color: var(--gem-motion-tint, transparent); }
+.gem-rail__stage { position: relative; height: var(--gem-rail-stage-height, clamp(380px, 62vh, 640px)); overflow: hidden; container-type: size; }
+.gem-rail__rod { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
+.gem-rail__rod path { fill: none; stroke: var(--gem-rail-rod, currentColor); stroke-width: 5; stroke-linecap: round; vector-effect: non-scaling-stroke; opacity: 0.85; }
+.gem-rail__track { list-style: none; margin: 0; padding: 0; position: absolute; inset: 0; }
+.gem-rail__item {
+  --gem-rail-t: calc(0.04 + 0.92 * (var(--gem-rail-i, 0) + 0.5) / var(--gem-rail-n, 1));
+  position: absolute; left: 0; top: 0; width: 0; height: 0; z-index: 10;
+  transform: translate3d(calc(var(--gem-rail-t) * 100cqw), calc((0.14 + 4 * var(--gem-rail-sag, 0.07) * var(--gem-rail-t) * (1 - var(--gem-rail-t))) * 100cqh), 0);
+}
+.gem-rail__hit {
+  position: absolute; left: 0; top: -6px; width: calc(var(--gem-rail-height, 0.7) * 78cqh); height: calc(var(--gem-rail-height, 0.7) * 100cqh + 34px);
+  padding: 0; border: 0; color: inherit; background: transparent; text-decoration: none; cursor: pointer; transform: translateX(-50%);
+}
+.gem-rail__hit:focus-visible { outline: var(--gem-focus-ring); outline-offset: var(--gem-focus-offset); border-radius: var(--gem-radius-md); }
+.gem-rail__body { position: absolute; inset: 0; display: block; transform-origin: 50% 0; }
+.gem-rail__hook {
+  position: absolute; left: calc(50% - 8px); top: 0; width: 16px; height: 22px; opacity: 0.8;
+  border: var(--gem-stroke-thick, 2px) solid var(--gem-rail-rod, currentColor); border-bottom: 0; border-radius: var(--gem-radius-md) var(--gem-radius-md) 0 0;
+}
+.gem-rail__hook::after { content: ''; position: absolute; left: calc(50% - 23px); top: 18px; width: 46px; height: var(--gem-stroke-thick, 2px); background: var(--gem-rail-rod, currentColor); border-radius: var(--gem-radius-sm); }
+.gem-rail__tag {
+  position: absolute; left: calc(50% + 14px); top: 18px; z-index: 2; padding: var(--gem-space-2xs) var(--gem-space-xs); transform: rotate(4deg);
+  font-family: var(--gem-font-mono); font-size: var(--gem-text-xs); font-weight: 600; line-height: 1; font-variant-numeric: tabular-nums;
+  color: var(--gem-color-text); background: var(--gem-color-background); border-radius: var(--gem-radius-sm); box-shadow: var(--gem-shadow-sm);
+}
+.gem-rail .gem-turn { position: absolute; inset: 26px 0 0; width: auto; height: auto; }
+.gem-rail__caption { margin: var(--gem-space-xs) 0 0; min-height: 1.5em; text-align: center; font-variant-numeric: tabular-nums; }
+@container (max-width: 699px) {
+  .gem-rail__stage { height: auto; overflow: visible; container-type: normal; }
+  .gem-rail__rod { display: none; }
+  .gem-rail__track { position: static; display: flex; gap: var(--gem-space-2xs); overflow-x: auto; scroll-snap-type: x mandatory; padding: 0 20cqw var(--gem-space-xs); scrollbar-width: none; }
+  .gem-rail__track::-webkit-scrollbar { display: none; }
+  .gem-rail__item { position: relative; flex: 0 0 60cqw; width: auto; height: calc(72cqw + 34px); transform: none; scroll-snap-align: center; border-top: var(--gem-stroke-thick, 4px) solid var(--gem-rail-rod, currentColor); }
+  .gem-rail__hit { left: 50%; width: 100%; height: 100%; }
+  .gem-rail__item:first-child .gem-turn__side { opacity: 0; transform: perspective(900px) rotateY(-82deg); }
+  .gem-rail__item:first-child .gem-turn:has(> .gem-turn__side) > .gem-turn__front { opacity: 1; transform: scale(1); }
+  .gem-rail__item:first-child .gem-turn:not(:has(> .gem-turn__side)) > .gem-turn__front { transform: perspective(900px) rotateY(0deg) scale(1); }
+  .gem-rail__item:first-child .gem-turn__sheet { transform: translate(calc(-100% / var(--gem-turn-cols, 1) * mod(var(--gem-turn-frames, 1) - 1, var(--gem-turn-cols, 1))), calc(-100% / var(--gem-turn-rows, 1) * round(down, (var(--gem-turn-frames, 1) - 1) / var(--gem-turn-cols, 1)))); }
+}
+.gem-turn { position: relative; display: block; width: 100%; height: 100%; }
+.gem-turn[data-gem-turn-frames] { overflow: hidden; }
+.gem-turn__side, .gem-turn__front { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: contain; object-position: 50% 0; pointer-events: none; }
+.gem-turn__side { transform: perspective(900px) rotateY(0deg); backface-visibility: hidden; }
+.gem-turn:has(> .gem-turn__side) > .gem-turn__front { opacity: 0; transform: scale(0.9); }
+.gem-turn:not(:has(> .gem-turn__side)) > .gem-turn__front { transform: perspective(900px) rotateY(-74deg) scale(0.86); }
+.gem-turn__sheet { position: absolute; left: 0; top: 0; display: block; max-width: none; pointer-events: none; width: calc(var(--gem-turn-cols, 1) * 100%); height: calc(var(--gem-turn-rows, 1) * 100%); }
+.gem-turn__sheet + .gem-turn__sheet { opacity: 0; }

package/dist/runtime-core.d.ts

@@ -38,6 +38,8 @@ export interface PluginInstallScope {
   listen(element: EventTarget, type: string, callback: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
   registerPlugin(key: string, setup: (context: { api: GemApi; config: unknown; reason: string }) => void): void;
   registerNoopPlugin(key: string, readyEvent?: string): void;
+  /** Run `cleanup` at unmount (0.19.0), for what is not a listener, timer or observer. */
+  onUnmount(cleanup: () => void): void;
 }
 
 export declare function createGemApi(doc?: Document): GemApi;

package/dist/runtime-core.js

@@ -4,7 +4,8 @@
 // that body the names it expects (`document`, `window`, `target`, `mark`, `canListen`, `registerPlugin`) scoped to
 // one root, and keeps a ledger of what the body did so unmount() can undo it:
 //   - listeners (the module wraps every `x.addEventListener(` of the body as `__gemListen(x, `), timers,
-//     animation frames and IntersectionObservers made through `window` / `target`;
+//     animation frames and Intersection / Resize observers made through `window` / `target`;
+//   - what the body hands to onUnmount(fn) (0.19.0);
 //   - the `data-gem-bound-<key>` marks it set, so the same root can be mounted again after an unmount.
 // Importing this file does nothing: no global is read or written until mount() is called.
 
@@ -52,6 +53,21 @@ function scopedDocument(root, doc) {
   });
 }
 
+// An observer class whose instances the ledger disconnects at unmount.
+function trackedObserver(Base, ledger) {
+  if (typeof Base !== "function") return undefined;
+  return class extends Base {
+    constructor(callback, init) {
+      super(callback, init);
+      ledger.observers.add(this);
+    }
+    disconnect() {
+      ledger.observers.delete(this);
+      super.disconnect();
+    }
+  };
+}
+
 // `window` / `target` for a plugin: the real window, except that timers, frames and observers made through it are
 // remembered so unmount() can stop them.
 function trackedWindow(win, ledger) {
@@ -75,18 +91,9 @@ function trackedWindow(win, ledger) {
           return id;
         }
       : undefined,
-    IntersectionObserver: typeof win.IntersectionObserver === "function"
-      ? class extends win.IntersectionObserver {
-          constructor(callback, init) {
-            super(callback, init);
-            ledger.observers.add(this);
-          }
-          disconnect() {
-            ledger.observers.delete(this);
-            super.disconnect();
-          }
-        }
-      : undefined,
+    IntersectionObserver: trackedObserver(win.IntersectionObserver, ledger),
+    // 0.19.0: the motion effects watch their root's size.
+    ResizeObserver: trackedObserver(win.ResizeObserver, ledger),
   };
   return new Proxy(win, {
     get: (real, prop) => (Object.prototype.hasOwnProperty.call(own, prop) ? own[prop] : bindMethod(real, Reflect.get(real, prop), prop)),
@@ -116,7 +123,7 @@ export function mountPlugin(key, install, root, options = {}, guard) {
   const doc = scope.nodeType === 9 ? scope : scope.ownerDocument || globalThis.document;
   const win = options.window || (doc && doc.defaultView) || globalThis;
   const api = options.api || (doc === globalThis.document ? gemApi() : createGemApi(doc));
-  const ledger = { listeners: [], marks: [], timeouts: new Set(), intervals: new Set(), frames: new Set(), observers: new Set() };
+  const ledger = { listeners: [], marks: [], timeouts: new Set(), intervals: new Set(), frames: new Set(), observers: new Set(), cleanups: [] };
   const window = trackedWindow(win, ledger);
   const document = scope === doc ? doc : scopedDocument(scope, doc);
   // `data-gem-bound-<key>` with ANY value means bound, including one the markup carries to claim an element for its own
@@ -140,7 +147,11 @@ export function mountPlugin(key, install, root, options = {}, guard) {
   };
   const unguarded = guard ? Array.from(document.querySelectorAll(guard.selector)).filter((element) => !element[guard.prop]) : [];
 
+  // 0.19.0: a plugin hands back what is not a listener, timer or observer (the motion effects' scheduler tasks, host API).
+  const onUnmount = (fn) => { if (typeof fn === "function") ledger.cleanups.push(fn); };
+
   const teardown = () => {
+    ledger.cleanups.splice(0).reverse().forEach((fn) => fn());
     ledger.timeouts.forEach((id) => win.clearTimeout(id));
     ledger.intervals.forEach((id) => win.clearInterval(id));
     ledger.frames.forEach((id) => win.cancelAnimationFrame && win.cancelAnimationFrame(id));
@@ -150,7 +161,7 @@ export function mountPlugin(key, install, root, options = {}, guard) {
     if (guard) unguarded.forEach((element) => { delete element[guard.prop]; });
   };
   try {
-    install({ document, window, target: window, mark, canListen, listen, registerPlugin, registerNoopPlugin });
+    install({ document, window, target: window, mark, canListen, listen, registerPlugin, registerNoopPlugin, onUnmount });
     if (typeof setup === "function") {
       setup({ api, config: { planId: "gem-plugin-module", plugins: [{ key, loadStrategy: "mount", dependsOn: [] }] }, reason: "mount" });
     }