@gemboss/gem-framework 0.4.0 → 0.5.0

package/dist/SOURCE.json

@@ -1,7 +1,7 @@
 {
   "package": "@gemboss/gem-framework",
-  "version": "0.4.0",
-  "gemtheme_sha": "6c4690cdfe8c48e980cb55d8455370bb39a60701",
+  "version": "0.5.0",
+  "gemtheme_sha": "02d4924e5c672fd4ae6f21f4ead858dcfa08e4e3",
   "gemtheme_dirty": false,
   "framework_version": "0.1.0"
 }

package/dist/gem-framework.css

@@ -19,6 +19,9 @@
   --gem-space-xl: calc(32px * var(--gem-style-space, 1));
   --gem-space-2xl: calc(48px * var(--gem-style-space, 1));
   --gem-space-3xl: calc(64px * var(--gem-style-space, 1));
+  --gem-space-2xs: calc(var(--gem-space-md) * 0.125);
+  --gem-space-ms: calc(var(--gem-space-md) * 0.75);
+  --gem-space-4xl: calc(var(--gem-space-md) * 7);
   --gem-radius-sm: calc(4px * var(--gem-style-radius, 1));
   --gem-radius-md: calc(8px * var(--gem-style-radius, 1));
   --gem-radius-lg: calc(16px * var(--gem-style-radius, 1));
@@ -59,6 +62,7 @@
   --gem-h1: calc(var(--gem-h2) * var(--gem-type-scale));
   --gem-focus-ring: 2px solid var(--gem-color-accent);
   --gem-tap-min: 44px;
+  --gem-focus-offset: 3px;
 }
 
 *, *::before, *::after {
@@ -95,7 +99,7 @@ a {
 }
 :focus-visible {
   outline: var(--gem-focus-ring, 2px solid var(--gem-color-accent));
-  outline-offset: 3px;
+  outline-offset: var(--gem-focus-offset, 3px);
 }
 .gem-skip-to-content-link:focus {
   position: fixed;
@@ -267,6 +271,46 @@ a {
   color: var(--gem-color-text);
   padding: 0 var(--gem-space-md);
 }
+.gem-field-join {
+  display: flex;
+  align-items: stretch;
+  min-width: 0;
+}
+.gem-field-join > :not([type="hidden"]):not([hidden]):not(.gem-u-visually-hidden) {
+  min-height: var(--gem-component-input-height, 44px);
+  margin: 0;
+}
+.gem-field-join > :is(.gem-input, .gem-select, .gem-form-field) {
+  flex: 1 1 10rem;
+  width: auto;
+  min-width: min(10rem, 50%);
+}
+.gem-field-join > .gem-form-field > :is(.gem-input, .gem-select) {
+  width: 100%;
+  height: 100%;
+  min-height: var(--gem-component-input-height, 44px);
+}
+.gem-field-join > :not([type="hidden"]):not([hidden]):not(.gem-u-visually-hidden):not(.gem-input, .gem-select, .gem-form-field) {
+  flex: 0 1 auto;
+  min-width: var(--gem-component-input-height, 44px);
+  white-space: normal;
+  overflow-wrap: anywhere;
+}
+.gem-field-join > :not([type="hidden"]):not([hidden]):not(.gem-u-visually-hidden):not(:nth-child(1 of :not([type="hidden"]):not([hidden]):not(.gem-u-visually-hidden))), .gem-field-join > .gem-form-field:not(:nth-child(1 of :not([type="hidden"]):not([hidden]):not(.gem-u-visually-hidden))) > :is(.gem-input, .gem-select) {
+  border-start-start-radius: 0;
+  border-end-start-radius: 0;
+}
+.gem-field-join > :not([type="hidden"]):not([hidden]):not(.gem-u-visually-hidden):not(:nth-child(1 of :not([type="hidden"]):not([hidden]):not(.gem-u-visually-hidden))) {
+  margin-inline-start: calc(-1 * var(--gem-input-border-width, 1px));
+}
+.gem-field-join > :not([type="hidden"]):not([hidden]):not(.gem-u-visually-hidden):not(:nth-last-child(1 of :not([type="hidden"]):not([hidden]):not(.gem-u-visually-hidden))), .gem-field-join > .gem-form-field:not(:nth-last-child(1 of :not([type="hidden"]):not([hidden]):not(.gem-u-visually-hidden))) > :is(.gem-input, .gem-select) {
+  border-start-end-radius: 0;
+  border-end-end-radius: 0;
+}
+.gem-field-join > :focus-within {
+  position: relative;
+  z-index: 1;
+}
 .gem-textarea {
   min-height: calc(var(--gem-component-input-height, 44px) * 2);
   padding-block: var(--gem-space-sm);
@@ -307,10 +351,17 @@ a {
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  inline-size: var(--gem-space-lg);
-  block-size: var(--gem-space-lg);
+  inline-size: var(--gem-icon-size, var(--gem-space-lg));
+  block-size: var(--gem-icon-size, var(--gem-space-lg));
   color: var(--gem-color-accent);
 }
+.gem-icon--sm { --gem-icon-size: 16px; }
+.gem-icon--md { --gem-icon-size: 20px; }
+.gem-icon--lg { --gem-icon-size: 24px; }
+.gem-icon--current { color: currentColor; }
+.gem-icon--chevron { transition: rotate var(--gem-motion-duration, 160ms) var(--gem-motion-easing, ease); }
+:is(button, summary, [role='button'])[aria-expanded='true'] > .gem-icon--chevron, details[open] > summary > .gem-icon--chevron { rotate: 180deg; }
+@media (prefers-reduced-motion: reduce) { .gem-icon--chevron { transition: none; } }
 .gem-icon-list {
   display: grid;
   gap: var(--gem-space-sm);
@@ -1021,6 +1072,10 @@ a {
 :is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow, .gem-footer)[data-gem-card='outline'] :is(.gem-section__inner, [class*='__inner']) { border: 1px solid var(--gem-color-border); }
 :is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow, .gem-footer)[data-gem-card='shadow'] :is(.gem-section__inner, [class*='__inner']) { background: var(--gem-color-surface); box-shadow: var(--gem-shadow-md); }
 :is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow, .gem-footer)[data-gem-card='filled'] :is(.gem-section__inner, [class*='__inner']) { background: color-mix(in srgb, currentColor 6%, transparent); }
+:root:not(:has([data-gem-canvas])) [data-gem-section-id][data-gem-countdown-ended='true'] { display: none; }
+:root:has([data-gem-canvas]) [data-gem-section-id][data-gem-countdown-ended='true'] { opacity: .55; }
+.gem-countdown-ended-note { display: none; }
+:root:has([data-gem-canvas]) [data-gem-countdown-ended='true'] .gem-countdown-ended-note { display: block; margin: 0; padding: .25rem 0; font-size: .75rem; font-weight: 700; text-align: center; }
 .gem-promo-banner, .gem-promo-tile {
   border: var(--gem-border-subtle, 1px solid var(--gem-color-border));
   border-radius: var(--gem-radius-md);
@@ -1124,6 +1179,11 @@ a {
   inset: 0;
   background: rgba(0, 0, 0, 0.36);
 }
+@keyframes gem-cart-drawer-panel-in { from { translate: calc(var(--gem-drawer-offset, 24px) * var(--gem-drawer-dir, 1)) 0; opacity: 0; } }
+@keyframes gem-cart-drawer-overlay-in { from { opacity: 0; } }
+.gem-cart-drawer__panel:dir(rtl) { --gem-drawer-dir: -1; }
+.gem-cart-drawer[data-gem-drawer-motion='slide'] .gem-cart-drawer__overlay { animation: gem-cart-drawer-overlay-in var(--gem-motion-duration, 160ms) var(--gem-motion-easing, ease); }
+.gem-cart-drawer[data-gem-drawer-motion='slide'] .gem-cart-drawer__panel { animation: gem-cart-drawer-panel-in var(--gem-motion-duration, 160ms) var(--gem-motion-easing, ease); }
 .gem-cart-drawer__panel {
   position: fixed;
   inset-block: 0;
@@ -1136,6 +1196,7 @@ a {
   box-shadow: var(--gem-shadow-md, none);
   padding: var(--gem-space-lg);
 }
+@media (prefers-reduced-motion: reduce) { .gem-cart-drawer[data-gem-drawer-motion] :is(.gem-cart-drawer__panel, .gem-cart-drawer__overlay) { animation: none; } }
 .gem-cart-drawer__header, .gem-cart-drawer__footer {
   display: flex;
   flex-wrap: wrap;
@@ -2151,6 +2212,7 @@ sticky-header.header-wrapper {
 }
 :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-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)); }
 }
@@ -2369,6 +2431,7 @@ main > .gem-section:first-child { padding-top: 0; }
 .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-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; }
   .gem-shell-header, .gem-shell-header__inner, .header { min-height: 64px; }

package/dist/gem-runtime.js

@@ -645,32 +645,54 @@
     const timers = document.querySelectorAll('[data-gem-countdown], .gem-countdown');
     let bound = 0;
     const pad = (value) => String(Math.max(0, value)).padStart(2, '0');
+    const COUNTDOWN_ISO = /^(\d{4})-(\d{2})-(\d{2})(?:[T ](\d{2}):(\d{2})(?::(\d{2})(?:\.\d+)?)?(Z|[+-]\d{2}:?\d{2})?)?$/i;
+    const countdownEnd = (value) => {
+      if (typeof value !== 'string') return NaN;
+      const raw = value.trim();
+      const m = COUNTDOWN_ISO.exec(raw);
+      if (!m) return NaN;
+      const y = Number(m[1]), mo = Number(m[2]), d = Number(m[3]);
+      const day = new Date(Date.UTC(y, mo - 1, d));
+      if (day.getUTCFullYear() !== y || day.getUTCMonth() !== mo - 1 || day.getUTCDate() !== d) return NaN;
+      if (m[4] === undefined) return Date.parse(m[1] + '-' + m[2] + '-' + m[3] + 'T23:59:59Z');
+      const iso = m[1] + '-' + m[2] + '-' + m[3] + 'T' + raw.slice(11);
+      return Date.parse(m[7] ? iso : iso + 'Z');
+    };
     const write = (timer, selector, value) => {
       const targetNode = timer.querySelector && timer.querySelector(selector);
       if (targetNode) targetNode.textContent = pad(value);
     };
     timers.forEach((timer) => {
       if (!mark(timer, 'countdown')) return;
-      const targetIso = timer.getAttribute && timer.getAttribute('data-gem-countdown-target');
-      const targetTime = targetIso ? Date.parse(targetIso) : NaN;
+      const targetTime = countdownEnd(timer.getAttribute && timer.getAttribute('data-gem-countdown-target'));
+      const section = timer.closest ? timer.closest('[data-gem-section-id]') : null;
+      const band = section && section.hasAttribute && section.hasAttribute('data-gem-countdown-end') ? section : null;
+      let handle = null;
       const update = () => {
         if (!Number.isFinite(targetTime)) {
           timer.dataset.gemCountdownState = 'invalid';
           return;
         }
-        const remainingSeconds = Math.max(0, Math.floor((targetTime - Date.now()) / 1000));
+        const ms = targetTime - Date.now();
+        const remainingSeconds = Math.max(0, Math.floor(ms / 1000));
         const days = Math.floor(remainingSeconds / 86400);
         const hours = Math.floor((remainingSeconds % 86400) / 3600);
         const minutes = Math.floor((remainingSeconds % 3600) / 60);
-        timer.dataset.gemCountdownState = remainingSeconds > 0 ? 'running' : 'complete';
+        timer.dataset.gemCountdownState = ms > 0 ? 'running' : 'complete';
         timer.dataset.gemCountdownRemainingSeconds = String(remainingSeconds);
         write(timer, '[data-gem-countdown-days]', days);
         write(timer, '[data-gem-countdown-hours]', hours);
         write(timer, '[data-gem-countdown-minutes]', minutes);
-        api.emit(remainingSeconds > 0 ? 'gem:countdown:start' : 'gem:countdown:complete', { source: 'gem-runtime', id: timer.id || undefined, remainingSeconds });
+        if (ms <= 0) {
+          if (band) band.setAttribute('data-gem-countdown-ended', 'true');
+          if (handle !== null && target.clearInterval) { target.clearInterval(handle); handle = null; }
+        }
+        api.emit(ms > 0 ? 'gem:countdown:start' : 'gem:countdown:complete', { source: 'gem-runtime', id: timer.id || undefined, remainingSeconds });
       };
       update();
-      if (target.setInterval && Number.isFinite(targetTime)) target.setInterval(update, 60000);
+      if (target.setInterval && Number.isFinite(targetTime) && targetTime - Date.now() > 0) handle = target.setInterval(update, 60000);
+      const left = targetTime - Date.now();
+      if (target.setTimeout && Number.isFinite(left) && left > 0 && left < 2147483647) target.setTimeout(update, left);
       bound += 1;
     });
     api.emit('gem:countdown:ready', { source: 'gem-runtime', count: bound });

package/dist/index.js

@@ -82,6 +82,15 @@ function gemPlanShapeKnobs(plan) {
 var gemFrameworkVersion = "0.1.0";
 var GEM_FOCUS_RING_CSS_VAR = "--gem-focus-ring: 2px solid var(--gem-color-accent);";
 var GEM_TAP_MIN_CSS_VAR = "--gem-tap-min: 44px;";
+var GEM_FOCUS_OFFSET_CSS_VAR = "--gem-focus-offset: 3px;";
+var GEM_DERIVED_SPACE_STEPS = { "2xs": 0.125, ms: 0.75, "4xl": 7 };
+var GEM_DERIVED_SPACE_CSS_VARIABLES = Object.keys(GEM_DERIVED_SPACE_STEPS).map((key) => `--gem-space-${slugify(key)}`);
+function gemDerivedSpaceCssVars(spacing) {
+  const named = new Set(Object.entries(spacing ?? {}).filter(([, v]) => String(v ?? "").trim()).map(([k]) => slugify(k)));
+  const md = String(spacing?.md ?? "").trim();
+  const mdUnitless = md !== "" && !/\d\s*[a-z%]/i.test(stripImportant(md));
+  return Object.entries(GEM_DERIVED_SPACE_STEPS).filter(([key]) => !named.has(slugify(key))).map(([key, factor]) => `--gem-space-${slugify(key)}: ${mdUnitless ? "0" : `calc(var(--gem-space-md) * ${factor})`};`);
+}
 var GEM_ROW_CSS_VARIABLES = [
   "--gem-row-cols",
   "--gem-row-cols-md",
@@ -214,11 +223,12 @@ function validateGemTokens(tokens) {
 function createGemTokenCss(tokens, selector = ":root") {
   const declarations = [
     ...toCssVars("color", tokens.color),
-    ...toCssVars("font", tokens.typography),
+    ...toCssVars("font", Object.fromEntries(Object.entries(tokens.typography ?? {}).filter(([k]) => !isRampKey(k)))),
     // Space ramp is scaled by the global density knob --gem-style-space (default 1),
     // so a style pack can make the WHOLE storefront airier or denser without touching
     // any section — every section already consumes --gem-space-*. Knob unset → identical.
     ...toScaledCssVars("space", tokens.spacing, "--gem-style-space"),
+    ...gemDerivedSpaceCssVars(tokens.spacing),
     // Radius ramp scaled by --gem-style-radius (default 1): a 'sharp' style sets it to
     // 0 (square everything), 'pill' rounds further — across every section, no edits.
     ...toScaledCssVars("radius", tokens.radius, "--gem-style-radius"),
@@ -239,24 +249,39 @@ function createGemTokenCss(tokens, selector = ":root") {
     // live framework defined them: a rebuild that followed the contract styled its headings with
     // variables that resolved to nothing. One modular scale, retuned by overriding --gem-type-base
     // or --gem-type-scale (see gemTypeRampCssVars).
-    ...gemTypeRampCssVars(),
+    ...gemTypeRampCssVars(tokens.typography),
     // Focus ring (gemfactory request #3, 28/09/2026): 11 sections wrote `outline: 2px solid
     // var(--gem-color-accent)` by hand. Not a token GROUP (a group would name it --gem-border-focus-ring
     // and a required key would fail every stored plan/preset without it), so it is emitted here like the
     // type ramp and registered in validation.ts. Follows the accent, so presets retint it for free.
     GEM_FOCUS_RING_CSS_VAR,
-    GEM_TAP_MIN_CSS_VAR
+    GEM_TAP_MIN_CSS_VAR,
+    GEM_FOCUS_OFFSET_CSS_VAR
   ];
+  const baseMobile = typeRampValue(tokens.typography, "baseMobile");
   return [
     `${selector} {`,
     ...declarations.map((line) => `  ${line}`),
-    "}"
+    "}",
+    ...baseMobile ? [`@media (max-width: ${GEM_TYPE_MOBILE_MAX}) {`, `  ${selector} {`, `    --gem-type-base: ${baseMobile};`, "  }", "}"] : []
   ].join("\n");
 }
-function gemTypeRampCssVars() {
+var GEM_TYPE_RAMP_KEYS = ["base", "scale", "baseMobile"];
+var rampKey = (k) => k.toLowerCase().replace(/[^a-z0-9]/g, "");
+var isRampKey = (k) => GEM_TYPE_RAMP_KEYS.some((r) => rampKey(r) === rampKey(k));
+var LENGTH = /^\d*\.?\d+(px|rem|em)$/;
+var NUMBER = /^\d*\.?\d+$/;
+var typeRampValue = (typography, key) => {
+  const hit = Object.entries(typography ?? {}).find(([k]) => rampKey(k) === rampKey(key));
+  const v = hit == null || hit[1] == null ? "" : stripImportant(hit[1]).trim();
+  if (!v) return null;
+  return (key === "scale" ? NUMBER.test(v) && Number(v) > 0 : LENGTH.test(v)) ? v : null;
+};
+var GEM_TYPE_MOBILE_MAX = "749px";
+function gemTypeRampCssVars(typography) {
   return [
-    "--gem-type-base: 1rem;",
-    "--gem-type-scale: 1.22;",
+    `--gem-type-base: ${typeRampValue(typography, "base") ?? "1rem"};`,
+    `--gem-type-scale: ${typeRampValue(typography, "scale") ?? "1.22"};`,
     "--gem-text-sm: calc(var(--gem-type-base) / var(--gem-type-scale));",
     "--gem-body: var(--gem-type-base);",
     "--gem-h6: calc(var(--gem-type-base) * var(--gem-type-scale));",
@@ -333,7 +358,9 @@ var gemFrameworkPrimitiveGroups = [
   },
   {
     group: "surfaces",
-    classes: ["gem-card", "gem-media", "gem-badge", "gem-accordion", "gem-divider"]
+    // `gem-countdown-ended-note`: the editor-canvas line every countdown band carries, styled once in
+    // primitives.ts GEM_COUNTDOWN_ENDED_CSS (hidden on the store, shown on an ended band in the canvas).
+    classes: ["gem-card", "gem-media", "gem-badge", "gem-accordion", "gem-divider", "gem-countdown-ended-note"]
   },
   {
     group: "forms",
@@ -344,7 +371,9 @@ var gemFrameworkPrimitiveGroups = [
       "gem-select",
       "gem-textarea",
       "gem-submit",
-      "gem-newsletter-form"
+      "gem-newsletter-form",
+      // Input + button as one control (primitives.ts, gemfactory request #8).
+      "gem-field-join"
     ]
   },
   {
@@ -356,6 +385,12 @@ var gemFrameworkPrimitiveGroups = [
       // storefront alongside gem-section__ctas.
       "gem-prose",
       "gem-icon",
+      // Size / colour / rotate hooks (gemfactory request #11); the bare class renders as before.
+      "gem-icon--sm",
+      "gem-icon--md",
+      "gem-icon--lg",
+      "gem-icon--current",
+      "gem-icon--chevron",
       "gem-icon-list",
       "gem-icon-list__item",
       "gem-video",
@@ -768,6 +803,13 @@ var GEM_CARD_CSS_LINES = [
   ":is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow, .gem-footer)[data-gem-card='filled'] :is(.gem-section__inner, [class*='__inner']) { background: color-mix(in srgb, currentColor 6%, transparent); }"
 ];
 var GEM_CARD_CSS = GEM_CARD_CSS_LINES.join("\n");
+var GEM_COUNTDOWN_ENDED_CSS_LINES = [
+  ":root:not(:has([data-gem-canvas])) [data-gem-section-id][data-gem-countdown-ended='true'] { display: none; }",
+  ":root:has([data-gem-canvas]) [data-gem-section-id][data-gem-countdown-ended='true'] { opacity: .55; }",
+  ".gem-countdown-ended-note { display: none; }",
+  ":root:has([data-gem-canvas]) [data-gem-countdown-ended='true'] .gem-countdown-ended-note { display: block; margin: 0; padding: .25rem 0; font-size: .75rem; font-weight: 700; text-align: center; }"
+];
+var GEM_COUNTDOWN_ENDED_CSS = GEM_COUNTDOWN_ENDED_CSS_LINES.join("\n");
 var GEM_REVEAL_CSS_LINES = [
   // Longhand, so the per-element duration/delay knobs can reach it. The shorthand hard-coded 600ms,
   // while `gem_animation_duration` and `gem_animation_delay` are declared on ALL FIFTY kinds in the
@@ -893,7 +935,7 @@ function createGemBaseCss(profile = "dawn-parity") {
     "}",
     ":focus-visible {",
     "  outline: var(--gem-focus-ring, 2px solid var(--gem-color-accent));",
-    "  outline-offset: 3px;",
+    "  outline-offset: var(--gem-focus-offset, 3px);",
     "}",
     ".gem-skip-to-content-link:focus {",
     "  position: fixed;",
@@ -1105,6 +1147,56 @@ function createPrimitiveCss() {
     "  color: var(--gem-color-text);",
     "  padding: 0 var(--gem-space-md);",
     "}",
+    // .gem-field-join (gemfactory request #8, 01/10/2026; 16 stored footers trimmed the touching corners by hand): an
+    // input/select and its button as one block (newsletter, discount code). Only VISIBLE children count: Shopify forms carry hidden inputs (form_type, utf8) and a sr-only
+    // label, and with plain :first-child those would square the visible outer corners and take a 44px slot. A field
+    // may be wrapped in .gem-form-field. The field grows with a floor of min(10rem, 50%); the button sizes to its
+    // label (dropping dawn-parity's 12rem minimum, which at 320px left the field 80px wide) and wraps a long label
+    // instead of squeezing the field or overflowing. Only the corners where two children meet are squared, in logical
+    // properties so it mirrors under RTL, and the seam overlaps by one border width so it is not drawn twice. A child
+    // holding focus is lifted so its ring is not painted under the neighbour. Stays one row at every width.
+    ".gem-field-join {",
+    "  display: flex;",
+    "  align-items: stretch;",
+    "  min-width: 0;",
+    "}",
+    '.gem-field-join > :not([type="hidden"]):not([hidden]):not(.gem-u-visually-hidden) {',
+    "  min-height: var(--gem-component-input-height, 44px);",
+    "  margin: 0;",
+    "}",
+    ".gem-field-join > :is(.gem-input, .gem-select, .gem-form-field) {",
+    "  flex: 1 1 10rem;",
+    "  width: auto;",
+    "  min-width: min(10rem, 50%);",
+    "}",
+    // A wrapped field gets the join's height too: the dawn-parity profile sets .gem-input { min-height: 4.5rem }, and
+    // only the direct-child rule above outranked it, so a wrapped input stood 72px next to a 44px one (02/10/2026).
+    ".gem-field-join > .gem-form-field > :is(.gem-input, .gem-select) {",
+    "  width: 100%;",
+    "  height: 100%;",
+    "  min-height: var(--gem-component-input-height, 44px);",
+    "}",
+    '.gem-field-join > :not([type="hidden"]):not([hidden]):not(.gem-u-visually-hidden):not(.gem-input, .gem-select, .gem-form-field) {',
+    "  flex: 0 1 auto;",
+    "  min-width: var(--gem-component-input-height, 44px);",
+    "  white-space: normal;",
+    "  overflow-wrap: anywhere;",
+    "}",
+    '.gem-field-join > :not([type="hidden"]):not([hidden]):not(.gem-u-visually-hidden):not(:nth-child(1 of :not([type="hidden"]):not([hidden]):not(.gem-u-visually-hidden))), .gem-field-join > .gem-form-field:not(:nth-child(1 of :not([type="hidden"]):not([hidden]):not(.gem-u-visually-hidden))) > :is(.gem-input, .gem-select) {',
+    "  border-start-start-radius: 0;",
+    "  border-end-start-radius: 0;",
+    "}",
+    '.gem-field-join > :not([type="hidden"]):not([hidden]):not(.gem-u-visually-hidden):not(:nth-child(1 of :not([type="hidden"]):not([hidden]):not(.gem-u-visually-hidden))) {',
+    "  margin-inline-start: calc(-1 * var(--gem-input-border-width, 1px));",
+    "}",
+    '.gem-field-join > :not([type="hidden"]):not([hidden]):not(.gem-u-visually-hidden):not(:nth-last-child(1 of :not([type="hidden"]):not([hidden]):not(.gem-u-visually-hidden))), .gem-field-join > .gem-form-field:not(:nth-last-child(1 of :not([type="hidden"]):not([hidden]):not(.gem-u-visually-hidden))) > :is(.gem-input, .gem-select) {',
+    "  border-start-end-radius: 0;",
+    "  border-end-end-radius: 0;",
+    "}",
+    ".gem-field-join > :focus-within {",
+    "  position: relative;",
+    "  z-index: 1;",
+    "}",
     ".gem-textarea {",
     "  min-height: calc(var(--gem-component-input-height, 44px) * 2);",
     "  padding-block: var(--gem-space-sm);",
@@ -1141,14 +1233,26 @@ function createPrimitiveCss() {
     "  color: var(--gem-color-muted, color-mix(in srgb, var(--gem-color-text) 72%, transparent));",
     "  line-height: 1.6;",
     "}",
+    // Icon size and colour hooks (gemfactory request #11, 01/10/2026: 33 sections reset colour to inherit and wrote
+    // 22/14/16/20px by hand). Additive only: with no modifier and no --gem-icon-size an icon renders exactly as before
+    // (the spacing step, the accent). Changing those DEFAULTS is a design decision left open on #11.
     ".gem-icon {",
     "  display: inline-flex;",
     "  align-items: center;",
     "  justify-content: center;",
-    "  inline-size: var(--gem-space-lg);",
-    "  block-size: var(--gem-space-lg);",
+    "  inline-size: var(--gem-icon-size, var(--gem-space-lg));",
+    "  block-size: var(--gem-icon-size, var(--gem-space-lg));",
     "  color: var(--gem-color-accent);",
     "}",
+    ".gem-icon--sm { --gem-icon-size: 16px; }",
+    ".gem-icon--md { --gem-icon-size: 20px; }",
+    ".gem-icon--lg { --gem-icon-size: 24px; }",
+    ".gem-icon--current { color: currentColor; }",
+    ".gem-icon--chevron { transition: rotate var(--gem-motion-duration, 160ms) var(--gem-motion-easing, ease); }",
+    // Only the TOGGLE's own state: the runtime also sets aria-expanded on containers (the open cart drawer, the
+    // header drawer), and a descendant match would flip every chevron inside them (review #650).
+    ":is(button, summary, [role='button'])[aria-expanded='true'] > .gem-icon--chevron, details[open] > summary > .gem-icon--chevron { rotate: 180deg; }",
+    "@media (prefers-reduced-motion: reduce) { .gem-icon--chevron { transition: none; } }",
     ".gem-icon-list {",
     "  display: grid;",
     "  gap: var(--gem-space-sm);",
@@ -1856,6 +1960,7 @@ function createPrimitiveCss() {
     ...GEM_AMBIENT_CSS_LINES,
     ...GEM_DIVIDER_CSS_LINES,
     ...GEM_CARD_CSS_LINES,
+    ...GEM_COUNTDOWN_ENDED_CSS_LINES,
     ".gem-promo-banner, .gem-promo-tile {",
     "  border: var(--gem-border-subtle, 1px solid var(--gem-color-border));",
     "  border-radius: var(--gem-radius-md);",
@@ -1959,6 +2064,18 @@ function createPrimitiveCss() {
     "  inset: 0;",
     "  background: rgba(0, 0, 0, 0.36);",
     "}",
+    // Opening motion (gemfactory request #13, 01/10/2026): 28 stored drawers each declared their own
+    // `@keyframes …-in { from { transform: translateX(24px); opacity: 0 } }`. OPT-IN on the drawer root,
+    // data-gem-drawer-motion="slide", so no existing drawer changes (review #650: as a default the overlay fade
+    // reached all 28): the panel slides in by --gem-drawer-offset (24px) and the overlay fades. A drawer drops its own
+    // keyframes by adding the attribute. The panel sits at inline-end, so under RTL it comes from the left.
+    // :dir(rtl) follows the HTML dir attribute through inheritance, so a dir="ltr" island inside an rtl page stays
+    // ltr (a `[dir='rtl'] .x` descendant rule got that wrong). CSS `direction` alone is invisible to selectors. Off under prefers-reduced-motion.
+    "@keyframes gem-cart-drawer-panel-in { from { translate: calc(var(--gem-drawer-offset, 24px) * var(--gem-drawer-dir, 1)) 0; opacity: 0; } }",
+    "@keyframes gem-cart-drawer-overlay-in { from { opacity: 0; } }",
+    ".gem-cart-drawer__panel:dir(rtl) { --gem-drawer-dir: -1; }",
+    ".gem-cart-drawer[data-gem-drawer-motion='slide'] .gem-cart-drawer__overlay { animation: gem-cart-drawer-overlay-in var(--gem-motion-duration, 160ms) var(--gem-motion-easing, ease); }",
+    ".gem-cart-drawer[data-gem-drawer-motion='slide'] .gem-cart-drawer__panel { animation: gem-cart-drawer-panel-in var(--gem-motion-duration, 160ms) var(--gem-motion-easing, ease); }",
     ".gem-cart-drawer__panel {",
     "  position: fixed;",
     "  inset-block: 0;",
@@ -1971,6 +2088,9 @@ function createPrimitiveCss() {
     "  box-shadow: var(--gem-shadow-md, none);",
     "  padding: var(--gem-space-lg);",
     "}",
+    // AFTER the opt-in rules and at THEIR specificity: measured 02/10/2026, a reduced-motion rule placed before the
+    // animation rule (or weaker than it) left the panel animating.
+    "@media (prefers-reduced-motion: reduce) { .gem-cart-drawer[data-gem-drawer-motion] :is(.gem-cart-drawer__panel, .gem-cart-drawer__overlay) { animation: none; } }",
     ".gem-cart-drawer__header, .gem-cart-drawer__footer {",
     "  display: flex;",
     "  flex-wrap: wrap;",
@@ -2346,6 +2466,7 @@ function createGemSectionRuntimeContractCss(selector = "[data-gem-section-librar
 }
 var OPT_IN_EYEBROW = ":where(.gem-section[data-gem-eyebrow='show']) .gem-section__eyebrow { display: block; letter-spacing: 0.12em; }";
 var OPT_IN_HEADING = ":where(.gem-section[data-gem-heading='section']) .gem-section__heading { margin: 0; font-family: var(--gem-font-heading); font-size: var(--gem-h2); line-height: 1.1; letter-spacing: -0.01em; text-wrap: balance; }";
+var OPT_IN_BODY = ":where(.gem-section[data-gem-body='section']) .gem-section__body { margin: 0; color: var(--gem-color-muted); font-size: var(--gem-body); line-height: var(--gem-font-body-line-height, 1.5); }";
 var OPT_IN_HEADING_MOBILE = "  :where(.gem-section[data-gem-heading='section']) .gem-section__heading { font-size: min(var(--gem-h2), clamp(1.75rem, 9vw, 2.75rem)); }";
 function createSectionCss() {
   return [
@@ -2667,6 +2788,7 @@ function createSectionCss() {
     "}",
     OPT_IN_EYEBROW,
     OPT_IN_HEADING,
+    OPT_IN_BODY,
     "@media (max-width: 760px) {",
     OPT_IN_HEADING_MOBILE,
     "}",
@@ -2917,6 +3039,7 @@ function createDawnParityCss() {
     // Opt-ins again, AFTER the Dawn rules above (see OPT_IN_EYEBROW).
     OPT_IN_EYEBROW,
     OPT_IN_HEADING,
+    OPT_IN_BODY,
     createDawnParityMobileCss(),
     // The row again, after every Dawn rule including its phone block (see GEM_ROW_CSS_LINES).
     ...GEM_ROW_CSS_LINES
@@ -4335,37 +4458,64 @@ var beforeAfterPluginRegistrationLines = [
   "    api.emit('gem:before-after:ready', { source: 'gem-runtime', count: bound });",
   "  });"
 ];
+var COUNTDOWN_END_RUNTIME_LINES = [
+  "  const COUNTDOWN_ISO = /^(\\d{4})-(\\d{2})-(\\d{2})(?:[T ](\\d{2}):(\\d{2})(?::(\\d{2})(?:\\.\\d+)?)?(Z|[+-]\\d{2}:?\\d{2})?)?$/i;",
+  "  const countdownEnd = (value) => {",
+  "    if (typeof value !== 'string') return NaN;",
+  "    const raw = value.trim();",
+  "    const m = COUNTDOWN_ISO.exec(raw);",
+  "    if (!m) return NaN;",
+  "    const y = Number(m[1]), mo = Number(m[2]), d = Number(m[3]);",
+  "    const day = new Date(Date.UTC(y, mo - 1, d));",
+  "    if (day.getUTCFullYear() !== y || day.getUTCMonth() !== mo - 1 || day.getUTCDate() !== d) return NaN;",
+  "    if (m[4] === undefined) return Date.parse(m[1] + '-' + m[2] + '-' + m[3] + 'T23:59:59Z');",
+  "    const iso = m[1] + '-' + m[2] + '-' + m[3] + 'T' + raw.slice(11);",
+  "    return Date.parse(m[7] ? iso : iso + 'Z');",
+  "  };"
+];
 var countdownPluginRegistrationLines = [
   "  registerPlugin('countdown', ({ api }) => {",
   "    const timers = document.querySelectorAll('[data-gem-countdown], .gem-countdown');",
   "    let bound = 0;",
   "    const pad = (value) => String(Math.max(0, value)).padStart(2, '0');",
+  ...COUNTDOWN_END_RUNTIME_LINES.map((line) => "  " + line),
   "    const write = (timer, selector, value) => {",
   "      const targetNode = timer.querySelector && timer.querySelector(selector);",
   "      if (targetNode) targetNode.textContent = pad(value);",
   "    };",
   "    timers.forEach((timer) => {",
   "      if (!mark(timer, 'countdown')) return;",
-  "      const targetIso = timer.getAttribute && timer.getAttribute('data-gem-countdown-target');",
-  "      const targetTime = targetIso ? Date.parse(targetIso) : NaN;",
+  "      const targetTime = countdownEnd(timer.getAttribute && timer.getAttribute('data-gem-countdown-target'));",
+  "      const section = timer.closest ? timer.closest('[data-gem-section-id]') : null;",
+  "      const band = section && section.hasAttribute && section.hasAttribute('data-gem-countdown-end') ? section : null;",
+  "      let handle = null;",
   "      const update = () => {",
   "        if (!Number.isFinite(targetTime)) {",
   "          timer.dataset.gemCountdownState = 'invalid';",
   "          return;",
   "        }",
-  "        const remainingSeconds = Math.max(0, Math.floor((targetTime - Date.now()) / 1000));",
+  "        const ms = targetTime - Date.now();",
+  "        const remainingSeconds = Math.max(0, Math.floor(ms / 1000));",
   "        const days = Math.floor(remainingSeconds / 86400);",
   "        const hours = Math.floor((remainingSeconds % 86400) / 3600);",
   "        const minutes = Math.floor((remainingSeconds % 3600) / 60);",
-  "        timer.dataset.gemCountdownState = remainingSeconds > 0 ? 'running' : 'complete';",
+  "        timer.dataset.gemCountdownState = ms > 0 ? 'running' : 'complete';",
   "        timer.dataset.gemCountdownRemainingSeconds = String(remainingSeconds);",
   "        write(timer, '[data-gem-countdown-days]', days);",
   "        write(timer, '[data-gem-countdown-hours]', hours);",
   "        write(timer, '[data-gem-countdown-minutes]', minutes);",
-  "        api.emit(remainingSeconds > 0 ? 'gem:countdown:start' : 'gem:countdown:complete', { source: 'gem-runtime', id: timer.id || undefined, remainingSeconds });",
+  "        if (ms <= 0) {",
+  "          if (band) band.setAttribute('data-gem-countdown-ended', 'true');",
+  "          if (handle !== null && target.clearInterval) { target.clearInterval(handle); handle = null; }",
+  "        }",
+  "        api.emit(ms > 0 ? 'gem:countdown:start' : 'gem:countdown:complete', { source: 'gem-runtime', id: timer.id || undefined, remainingSeconds });",
   "      };",
   "      update();",
-  "      if (target.setInterval && Number.isFinite(targetTime)) target.setInterval(update, 60000);",
+  "      if (target.setInterval && Number.isFinite(targetTime) && targetTime - Date.now() > 0) handle = target.setInterval(update, 60000);",
+  // The readout moves once a minute, but the END is not allowed to wait for the next minute: one timer
+  // for the exact instant (while it fits a setTimeout, ~24.8 days; past that the minute tick gets there).
+  "      const left = targetTime - Date.now();",
+  "      if (target.setTimeout && Number.isFinite(left) && left > 0 && left < 2147483647) target.setTimeout(update, left);",
   "      bound += 1;",
   "    });",
   "    api.emit('gem:countdown:ready', { source: 'gem-runtime', count: bound });",
@@ -4717,6 +4867,12 @@ var canonicalCssVariableNames = /* @__PURE__ */ new Set([
   // --gem-focus-ring: emitted with the tokens, not a group (tokens.ts GEM_FOCUS_RING_CSS_VAR).
   GEM_FOCUS_RING_CSS_VAR.split(":")[0].trim(),
   GEM_TAP_MIN_CSS_VAR.split(":")[0].trim(),
+  GEM_FOCUS_OFFSET_CSS_VAR.split(":")[0].trim(),
+  // The derived spacing steps (tokens.ts GEM_DERIVED_SPACE_STEPS): always emitted, never required.
+  ...GEM_DERIVED_SPACE_CSS_VARIABLES,
+  // Extension points a section SETS (gemtheme #650): icon size, drawer slide distance.
+  "--gem-icon-size",
+  "--gem-drawer-offset",
   // The row primitive's variables (primitives.ts GEM_ROW_CSS). Sections SET these on their grid.
   ...GEM_ROW_CSS_VARIABLES
 ]);
@@ -5997,7 +6153,9 @@ function stringSetting(value) {
   return typeof value === "string" && value.length > 0 ? value : void 0;
 }
 export {
+  COUNTDOWN_END_RUNTIME_LINES,
   GEM_AMBIENT_CSS,
+  GEM_COUNTDOWN_ENDED_CSS,
   GEM_GRID_COLUMNS_ROW_KNOB_CSS,
   GEM_PART_CLASS,
   GEM_REVEAL_CSS,

package/dist/section-gate.js

@@ -1,6 +1,9 @@
 // ../../packages/gem-framework/src/tokens.ts
 var GEM_FOCUS_RING_CSS_VAR = "--gem-focus-ring: 2px solid var(--gem-color-accent);";
 var GEM_TAP_MIN_CSS_VAR = "--gem-tap-min: 44px;";
+var GEM_FOCUS_OFFSET_CSS_VAR = "--gem-focus-offset: 3px;";
+var GEM_DERIVED_SPACE_STEPS = { "2xs": 0.125, ms: 0.75, "4xl": 7 };
+var GEM_DERIVED_SPACE_CSS_VARIABLES = Object.keys(GEM_DERIVED_SPACE_STEPS).map((key) => `--gem-space-${slugify(key)}`);
 var GEM_ROW_CSS_VARIABLES = [
   "--gem-row-cols",
   "--gem-row-cols-md",
@@ -23,10 +26,19 @@ var requiredGemTokenKeys = {
   component: ["headerHeight", "cardPadding", "buttonPaddingInline", "buttonPaddingBlock", "inputHeight"],
   morphology: ["campaignDensity", "mediaRhythm", "proofIntensity", "commerceEmphasis", "policyTone"]
 };
-function gemTypeRampCssVars() {
+var rampKey = (k) => k.toLowerCase().replace(/[^a-z0-9]/g, "");
+var LENGTH = /^\d*\.?\d+(px|rem|em)$/;
+var NUMBER = /^\d*\.?\d+$/;
+var typeRampValue = (typography, key) => {
+  const hit = Object.entries(typography ?? {}).find(([k]) => rampKey(k) === rampKey(key));
+  const v = hit == null || hit[1] == null ? "" : stripImportant(hit[1]).trim();
+  if (!v) return null;
+  return (key === "scale" ? NUMBER.test(v) && Number(v) > 0 : LENGTH.test(v)) ? v : null;
+};
+function gemTypeRampCssVars(typography) {
   return [
-    "--gem-type-base: 1rem;",
-    "--gem-type-scale: 1.22;",
+    `--gem-type-base: ${typeRampValue(typography, "base") ?? "1rem"};`,
+    `--gem-type-scale: ${typeRampValue(typography, "scale") ?? "1.22"};`,
     "--gem-text-sm: calc(var(--gem-type-base) / var(--gem-type-scale));",
     "--gem-body: var(--gem-type-base);",
     "--gem-h6: calc(var(--gem-type-base) * var(--gem-type-scale));",
@@ -37,6 +49,11 @@ function gemTypeRampCssVars() {
     "--gem-h1: calc(var(--gem-h2) * var(--gem-type-scale));"
   ];
 }
+function stripImportant(value) {
+  const s = String(value);
+  if (!/!\s*important/i.test(s)) return s;
+  return s.replace(/!\s*important/gi, " ").replace(/\s+/g, " ").replace(/\s+,/g, ",").trim();
+}
 function slugify(value) {
   return value.replace(/([a-z0-9])([A-Z])/g, "$1-$2").toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/^-+|-+$/g, "");
 }
@@ -60,7 +77,9 @@ var gemFrameworkPrimitiveGroups = [
   },
   {
     group: "surfaces",
-    classes: ["gem-card", "gem-media", "gem-badge", "gem-accordion", "gem-divider"]
+    // `gem-countdown-ended-note`: the editor-canvas line every countdown band carries, styled once in
+    // primitives.ts GEM_COUNTDOWN_ENDED_CSS (hidden on the store, shown on an ended band in the canvas).
+    classes: ["gem-card", "gem-media", "gem-badge", "gem-accordion", "gem-divider", "gem-countdown-ended-note"]
   },
   {
     group: "forms",
@@ -71,7 +90,9 @@ var gemFrameworkPrimitiveGroups = [
       "gem-select",
       "gem-textarea",
       "gem-submit",
-      "gem-newsletter-form"
+      "gem-newsletter-form",
+      // Input + button as one control (primitives.ts, gemfactory request #8).
+      "gem-field-join"
     ]
   },
   {
@@ -83,6 +104,12 @@ var gemFrameworkPrimitiveGroups = [
       // storefront alongside gem-section__ctas.
       "gem-prose",
       "gem-icon",
+      // Size / colour / rotate hooks (gemfactory request #11); the bare class renders as before.
+      "gem-icon--sm",
+      "gem-icon--md",
+      "gem-icon--lg",
+      "gem-icon--current",
+      "gem-icon--chevron",
       "gem-icon-list",
       "gem-icon-list__item",
       "gem-video",
@@ -356,6 +383,13 @@ var GEM_CARD_CSS_LINES = [
   ":is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow, .gem-footer)[data-gem-card='filled'] :is(.gem-section__inner, [class*='__inner']) { background: color-mix(in srgb, currentColor 6%, transparent); }"
 ];
 var GEM_CARD_CSS = GEM_CARD_CSS_LINES.join("\n");
+var GEM_COUNTDOWN_ENDED_CSS_LINES = [
+  ":root:not(:has([data-gem-canvas])) [data-gem-section-id][data-gem-countdown-ended='true'] { display: none; }",
+  ":root:has([data-gem-canvas]) [data-gem-section-id][data-gem-countdown-ended='true'] { opacity: .55; }",
+  ".gem-countdown-ended-note { display: none; }",
+  ":root:has([data-gem-canvas]) [data-gem-countdown-ended='true'] .gem-countdown-ended-note { display: block; margin: 0; padding: .25rem 0; font-size: .75rem; font-weight: 700; text-align: center; }"
+];
+var GEM_COUNTDOWN_ENDED_CSS = GEM_COUNTDOWN_ENDED_CSS_LINES.join("\n");
 var GEM_REVEAL_CSS_LINES = [
   // Longhand, so the per-element duration/delay knobs can reach it. The shorthand hard-coded 600ms,
   // while `gem_animation_duration` and `gem_animation_delay` are declared on ALL FIFTY kinds in the
@@ -463,6 +497,69 @@ function offerEngineRuntimeScript() {
 }
 
 // ../../packages/gem-framework/src/runtime.ts
+var COUNTDOWN_END_RUNTIME_LINES = [
+  "  const COUNTDOWN_ISO = /^(\\d{4})-(\\d{2})-(\\d{2})(?:[T ](\\d{2}):(\\d{2})(?::(\\d{2})(?:\\.\\d+)?)?(Z|[+-]\\d{2}:?\\d{2})?)?$/i;",
+  "  const countdownEnd = (value) => {",
+  "    if (typeof value !== 'string') return NaN;",
+  "    const raw = value.trim();",
+  "    const m = COUNTDOWN_ISO.exec(raw);",
+  "    if (!m) return NaN;",
+  "    const y = Number(m[1]), mo = Number(m[2]), d = Number(m[3]);",
+  "    const day = new Date(Date.UTC(y, mo - 1, d));",
+  "    if (day.getUTCFullYear() !== y || day.getUTCMonth() !== mo - 1 || day.getUTCDate() !== d) return NaN;",
+  "    if (m[4] === undefined) return Date.parse(m[1] + '-' + m[2] + '-' + m[3] + 'T23:59:59Z');",
+  "    const iso = m[1] + '-' + m[2] + '-' + m[3] + 'T' + raw.slice(11);",
+  "    return Date.parse(m[7] ? iso : iso + 'Z');",
+  "  };"
+];
+var countdownPluginRegistrationLines = [
+  "  registerPlugin('countdown', ({ api }) => {",
+  "    const timers = document.querySelectorAll('[data-gem-countdown], .gem-countdown');",
+  "    let bound = 0;",
+  "    const pad = (value) => String(Math.max(0, value)).padStart(2, '0');",
+  ...COUNTDOWN_END_RUNTIME_LINES.map((line) => "  " + line),
+  "    const write = (timer, selector, value) => {",
+  "      const targetNode = timer.querySelector && timer.querySelector(selector);",
+  "      if (targetNode) targetNode.textContent = pad(value);",
+  "    };",
+  "    timers.forEach((timer) => {",
+  "      if (!mark(timer, 'countdown')) return;",
+  "      const targetTime = countdownEnd(timer.getAttribute && timer.getAttribute('data-gem-countdown-target'));",
+  "      const section = timer.closest ? timer.closest('[data-gem-section-id]') : null;",
+  "      const band = section && section.hasAttribute && section.hasAttribute('data-gem-countdown-end') ? section : null;",
+  "      let handle = null;",
+  "      const update = () => {",
+  "        if (!Number.isFinite(targetTime)) {",
+  "          timer.dataset.gemCountdownState = 'invalid';",
+  "          return;",
+  "        }",
+  "        const ms = targetTime - Date.now();",
+  "        const remainingSeconds = Math.max(0, Math.floor(ms / 1000));",
+  "        const days = Math.floor(remainingSeconds / 86400);",
+  "        const hours = Math.floor((remainingSeconds % 86400) / 3600);",
+  "        const minutes = Math.floor((remainingSeconds % 3600) / 60);",
+  "        timer.dataset.gemCountdownState = ms > 0 ? 'running' : 'complete';",
+  "        timer.dataset.gemCountdownRemainingSeconds = String(remainingSeconds);",
+  "        write(timer, '[data-gem-countdown-days]', days);",
+  "        write(timer, '[data-gem-countdown-hours]', hours);",
+  "        write(timer, '[data-gem-countdown-minutes]', minutes);",
+  "        if (ms <= 0) {",
+  "          if (band) band.setAttribute('data-gem-countdown-ended', 'true');",
+  "          if (handle !== null && target.clearInterval) { target.clearInterval(handle); handle = null; }",
+  "        }",
+  "        api.emit(ms > 0 ? 'gem:countdown:start' : 'gem:countdown:complete', { source: 'gem-runtime', id: timer.id || undefined, remainingSeconds });",
+  "      };",
+  "      update();",
+  "      if (target.setInterval && Number.isFinite(targetTime) && targetTime - Date.now() > 0) handle = target.setInterval(update, 60000);",
+  // The readout moves once a minute, but the END is not allowed to wait for the next minute: one timer
+  // for the exact instant (while it fits a setTimeout, ~24.8 days; past that the minute tick gets there).
+  "      const left = targetTime - Date.now();",
+  "      if (target.setTimeout && Number.isFinite(left) && left > 0 && left < 2147483647) target.setTimeout(update, left);",
+  "      bound += 1;",
+  "    });",
+  "    api.emit('gem:countdown:ready', { source: 'gem-runtime', count: bound });",
+  "  });"
+];
 var offerEnginePluginRegistrationLines = [
   "  registerPlugin('offer-engine', ({ api }) => {",
   "    " + offerEngineRuntimeScript(),
@@ -488,6 +585,12 @@ var canonicalCssVariableNames = /* @__PURE__ */ new Set([
   // --gem-focus-ring: emitted with the tokens, not a group (tokens.ts GEM_FOCUS_RING_CSS_VAR).
   GEM_FOCUS_RING_CSS_VAR.split(":")[0].trim(),
   GEM_TAP_MIN_CSS_VAR.split(":")[0].trim(),
+  GEM_FOCUS_OFFSET_CSS_VAR.split(":")[0].trim(),
+  // The derived spacing steps (tokens.ts GEM_DERIVED_SPACE_STEPS): always emitted, never required.
+  ...GEM_DERIVED_SPACE_CSS_VARIABLES,
+  // Extension points a section SETS (gemtheme #650): icon size, drawer slide distance.
+  "--gem-icon-size",
+  "--gem-drawer-offset",
   // The row primitive's variables (primitives.ts GEM_ROW_CSS). Sections SET these on their grid.
   ...GEM_ROW_CSS_VARIABLES
 ]);

package/package.json

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