@gemboss/gem-framework 0.16.1 → 0.18.13

package/dist/index.js

@@ -19,6 +19,137 @@ function gemPartClass(part) {
   return GEM_PART_CLASS[part] ?? null;
 }
 
+// ../../packages/gem-framework/src/section-dividers.ts
+var spikes = (() => {
+  const teeth = [];
+  for (let x = 95; x > 0; x -= 5) teeth.push(`L${x} ${teeth.length % 2 === 0 ? 10 : 3}`);
+  return `M0 0 H100 V3 ${teeth.join(" ")} L0 ${teeth.length % 2 === 0 ? 10 : 3} Z`;
+})();
+var GEM_SECTION_DIVIDER_PATHS = Object.freeze({
+  wave: "M0 0 H100 V3 C80 9 70 -1 50 4 C30 9 20 1 0 4 Z",
+  slope: "M0 0 H100 V10 Z",
+  spikes,
+  arch: "M0 0 H100 V2 Q50 12 0 2 Z",
+  blob: "M0 0 H100 V4 C85 11 72 0 58 5 C44 10 30 2 16 6 C10 8 5 5 0 6 Z"
+});
+function gemSectionDividers(props) {
+  const layers = [];
+  for (const edge of ["top", "bottom"]) {
+    const shape = props?.[`divider_${edge}`];
+    if (typeof shape === "string" && Object.hasOwn(GEM_SECTION_DIVIDER_PATHS, shape)) {
+      const known = shape;
+      layers.push({ edge, shape: known, path: GEM_SECTION_DIVIDER_PATHS[known] });
+    }
+  }
+  return layers;
+}
+function height(value) {
+  if (typeof value !== "number" && typeof value !== "string") return void 0;
+  if (typeof value === "string" && !/^\d+(?:\.\d+)?$/.test(value.trim())) return void 0;
+  const n = Number(value);
+  return Number.isFinite(n) && n >= 0 && n <= 320 ? n : void 0;
+}
+var NAMED_COLORS = /* @__PURE__ */ new Set([
+  "transparent",
+  "currentcolor",
+  "inherit",
+  "initial",
+  "unset",
+  "black",
+  "silver",
+  "gray",
+  "grey",
+  "white",
+  "maroon",
+  "red",
+  "purple",
+  "fuchsia",
+  "green",
+  "lime",
+  "olive",
+  "yellow",
+  "navy",
+  "blue",
+  "teal",
+  "aqua",
+  "orange"
+]);
+var NUMBER = "[+-]?(?:\\d+(?:\\.\\d*)?|\\.\\d+)(?:e[+-]?\\d+)?";
+var CHANNEL = new RegExp(`^${NUMBER}%?$`, "i");
+var PERCENT = new RegExp(`^${NUMBER}%$`, "i");
+var ANGLE = new RegExp(`^${NUMBER}(?:deg|grad|rad|turn)?$`, "i");
+var finite = (value) => Number.isFinite(Number.parseFloat(value));
+var numeric = (value) => CHANNEL.test(value) && finite(value);
+var percentage = (value) => PERCENT.test(value) && finite(value);
+var angle = (value) => ANGLE.test(value) && finite(value);
+function functionalColor(value) {
+  const match = /^(rgb|rgba|hsl|hsla|hwb|lab|lch|oklab|oklch)\(([^()]*)\)$/i.exec(value);
+  if (!match) return false;
+  const name = match[1].toLowerCase(), body = match[2].trim();
+  let channels, alpha;
+  if (body.includes(",")) {
+    if (!["rgb", "rgba", "hsl", "hsla"].includes(name) || body.includes("/")) return false;
+    const parts = body.split(",").map((part) => part.trim());
+    if (parts.length !== 3 && parts.length !== 4) return false;
+    channels = parts.slice(0, 3);
+    alpha = parts[3];
+    if ((name === "rgb" || name === "rgba") && new Set(channels.map((part) => part.endsWith("%"))).size !== 1) return false;
+  } else {
+    const parts = body.split("/");
+    if (parts.length > 2) return false;
+    channels = parts[0].trim().split(/\s+/);
+    alpha = parts[1]?.trim();
+  }
+  if (channels.length !== 3 || alpha !== void 0 && !numeric(alpha)) return false;
+  if (name === "rgb" || name === "rgba") return channels.every(numeric);
+  if (name === "hsl" || name === "hsla" || name === "hwb") {
+    return angle(channels[0]) && percentage(channels[1]) && percentage(channels[2]);
+  }
+  if (name === "lch" || name === "oklch") return numeric(channels[0]) && numeric(channels[1]) && angle(channels[2]);
+  return channels.every(numeric);
+}
+function color(value) {
+  if (typeof value !== "string") return void 0;
+  const v = value.trim();
+  if (!v || v.length > 128 || /[;{}<>\\]/.test(v)) return void 0;
+  if (/^#(?:[0-9a-f]{3,4}|[0-9a-f]{6}|[0-9a-f]{8})$/i.test(v) || NAMED_COLORS.has(v.toLowerCase())) return v;
+  if (functionalColor(v)) return v;
+  const token = /^var\(\s*--[A-Za-z0-9_-]+\s*(?:,\s*([^()]*))?\)$/.exec(v);
+  if (token && (token[1] === void 0 || color(token[1]))) return v;
+  return void 0;
+}
+function gemSectionDividerStyle(props, bandBackground) {
+  if (!gemSectionDividers(props).length) return {};
+  const value = props?.divider_flip;
+  const flip = value === true || value === "true" || value === 1 || value === "1";
+  return {
+    "--gem-element-divider-height": `${height(props?.divider_height) ?? 48}px`,
+    "--gem-element-divider-color": color(props?.divider_color) ?? color(bandBackground) ?? "var(--gem-section-bg, var(--gem-color-background))",
+    "--gem-element-divider-scale-x": flip ? "-1" : "1"
+  };
+}
+function gemSectionDividerResponsiveStyle(props) {
+  const n = height(props?.divider_height);
+  return n === void 0 ? {} : { "--gem-element-divider-height": `${n}px` };
+}
+var GEM_ELEMENT_SECTION_DIVIDER_CSS = [
+  ".gem-el-section[data-gem-element-dividers] { position: relative; }",
+  // A configured edge must escape the band's parallax clip. The media keeps its own clipped
+  // wrapper so releasing the root cannot expose the deliberately oversized moving background.
+  ".gem-el-section[data-gem-parallax][data-gem-element-dividers] { overflow: visible; isolation: auto; }",
+  ".gem-el-section[data-gem-element-dividers] > .gem-el-section__parallax-clip { position: absolute; inset: 0; overflow: hidden; border-radius: inherit; pointer-events: none; z-index: 0; }",
+  // Edge paint may extend into a neighbour with little padding. Only content, never its background,
+  // stacks above it. Guard on the current document's opted-in markup: a retained CSS resource after
+  // navigation must not change a page with no native dividers.
+  // An ordinary neighbouring parallax band also isolates its content by default. Release that
+  // stacking context on divider documents, retaining its existing media clip and direct markup.
+  "body:has(.gem-el-section[data-gem-element-dividers]) .gem-el-section[data-gem-parallax] { isolation: auto; }",
+  "body:has(.gem-el-section[data-gem-element-dividers]) .gem-el-section > .gem-el-section__inner { position: relative; z-index: 2; }",
+  ".gem-el-section > .gem-el-section__divider { position: absolute; display: block; inset-inline: 0; width: 100%; max-width: none; height: var(--gem-element-divider-height, 48px); color: var(--gem-element-divider-color, var(--gem-color-background)); overflow: hidden; pointer-events: none; z-index: 1; transform: scaleX(var(--gem-element-divider-scale-x, 1)); }",
+  ".gem-el-section > .gem-el-section__divider--bottom { top: 100%; }",
+  ".gem-el-section > .gem-el-section__divider--top { bottom: 100%; transform: scaleX(var(--gem-element-divider-scale-x, 1)) scaleY(-1); }"
+].join("\n");
+
 // ../../packages/gem-framework/src/form-set.ts
 var GEM_FORM_TOKEN_KEYS = [
   "radius",
@@ -76,7 +207,7 @@ var GEM_FORM_DEFAULTS = {
   checkboxAccent: "var(--gem-color-accent)",
   checkboxSize: "24px"
 };
-var GEM_FORM_VAR_SCOPE = "[data-gem-form-set], [data-gem-form-set] :is(input, select, textarea, button, form)";
+var GEM_FORM_VAR_SCOPE = "[data-gem-form-set], [data-gem-form-set] :is(input, select, textarea, button, form, output)";
 function gemFormCssBlock(form) {
   const vars = gemFormCssVars(form);
   return vars.length ? `${GEM_FORM_VAR_SCOPE} {
@@ -130,6 +261,30 @@ var GEM_FORM_SETS = [
   }
 ];
 var gemFormSetsFor = (posture) => GEM_FORM_SETS.filter((s) => s.postures.includes(posture));
+var GEM_SOFT_FIELD_FAMILIES = ["natural", "beauty", "home", "food"];
+function deriveFormSetId(source) {
+  const norm = (v) => typeof v === "string" ? v.trim().toLowerCase() : "";
+  const radius = norm(source?.global_settings?.button_radius);
+  const style = norm(source?.global_settings?.button_style);
+  if (radius === "sharp" && style === "outline") return "hairline-underline";
+  if (radius === "pill" && style !== "soft") return "pill-joined";
+  if (style === "soft" || GEM_SOFT_FIELD_FAMILIES.includes(norm(source?.family))) return "soft-filled";
+  return "crisp-outline";
+}
+function gemPlanFormSet(plan) {
+  const tokens = plan?.tokens;
+  if (tokens && typeof tokens === "object" && Object.prototype.hasOwnProperty.call(tokens, "form")) {
+    const own = tokens.form;
+    if (own === null) return null;
+    if (own && typeof own === "object" && !Array.isArray(own)) {
+      if (hasForm(own)) return own;
+      const byId = GEM_FORM_SETS.find((s) => s.id === own.id);
+      if (byId) return { ...byId.form };
+    }
+  }
+  const set = GEM_FORM_SETS.find((s) => s.id === deriveFormSetId({ family: plan?.style_pack?.family, global_settings: plan?.global_settings }));
+  return set ? { ...set.form } : null;
+}
 
 // ../../packages/gem-framework/src/plan-shape.ts
 function gemStyleSpaceFor(plan) {
@@ -230,13 +385,13 @@ function mixHex(from, to, t) {
   const channel = (x, y) => Math.round(x * (1 - t) + y * t).toString(16).padStart(2, "0");
   return `#${channel(a.r, b.r)}${channel(a.g, b.g)}${channel(a.b, b.b)}`;
 }
-function aaTextColor(color, backgrounds, min = MIN_TEXT_CONTRAST) {
-  const from = normalizeHex(color);
+function aaTextColor(color2, backgrounds, min = MIN_TEXT_CONTRAST) {
+  const from = normalizeHex(color2);
   const bgs = backgrounds.map(normalizeHex).filter((bg) => Boolean(bg));
-  if (!from || !bgs.length) return color;
+  if (!from || !bgs.length) return color2;
   const worst = (c) => Math.min(...bgs.map((bg) => hexContrastRatio(c, bg)));
-  let best = { color, score: worst(from) };
-  if (best.score >= min) return color;
+  let best = { color: color2, score: worst(from) };
+  if (best.score >= min) return color2;
   let pass;
   for (const toward of ["#000000", "#ffffff"]) {
     for (let step = 1; step <= 50; step++) {
@@ -280,7 +435,7 @@ function gemButtonGradientEndCss(accent = "var(--gem-color-accent)", accentText
 }
 
 // ../../packages/gem-framework/src/tokens.ts
-var gemFrameworkVersion = "0.16.1";
+var gemFrameworkVersion = "0.18.13";
 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;";
@@ -443,17 +598,17 @@ function gemBandScheme(c, band) {
     danger: aaTextColor(c.danger, grounds)
   };
 }
-function gemBandSchemeColors(color = {}) {
+function gemBandSchemeColors(color2 = {}) {
   const c = Object.fromEntries(
     requiredGemTokenKeys.color.map((key) => {
-      const value = color?.[key];
+      const value = color2?.[key];
       return [key, typeof value === "string" && value.trim() ? stripImportant(value) : defaultGemTokens.color[key]];
     })
   );
   return { dark: gemBandScheme(c, "dark"), accent: gemBandScheme(c, "accent") };
 }
-function gemBandSchemeCssVars(color = {}) {
-  const schemes = gemBandSchemeColors(color);
+function gemBandSchemeCssVars(color2 = {}) {
+  const schemes = gemBandSchemeColors(color2);
   return GEM_BAND_SCHEMES.flatMap(
     (band) => requiredGemTokenKeys.color.map((key) => `--gem-scheme-${band}-${slugify(key)}: ${schemes[band][key]};`)
   );
@@ -749,12 +904,12 @@ function gemMobileTokenCssVars(tokens, phone = readPhoneTokens(tokens)) {
 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 NUMBER2 = /^\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;
+  return (key === "scale" ? NUMBER2.test(v) && Number(v) > 0 : LENGTH.test(v)) ? v : null;
 };
 var GEM_TYPE_MOBILE_MAX = "749px";
 function gemTypeRampCssVars(typography) {
@@ -833,6 +988,14 @@ var GEM_EDITION_SUPPORT_MONTHS = 6;
 var EDITION_2_CSS = [
   `:where(&) { ${GEM_HEADING_SIZE_CSS_VARS.filter((decl) => !decl.startsWith("--gem-section-heading-size-mobile") && !decl.startsWith("--gem-hero-heading-size-mobile")).join(" ")} }`
 ];
+var EDITION_3_ELEMENTS = [
+  `:where(&) .gem-product-card-grid--quick-view-grid .gem-product-card-grid__card { border: 0; border-radius: 0; box-shadow: none; background: transparent; padding: 0; }`,
+  `:where(&) .gem-product-card-grid--quick-view-grid .gem-product-card__media > .gem-product-card__badges { display: flex; }`,
+  `@media (max-width: 989px) { :where(&) .gem-product-card-grid--quick-view-grid .gem-product-card-grid__grid[data-gem-product-grid] { grid-template-columns: repeat(var(--gem-product-card-grid-mobile-columns, 2), minmax(0, 1fr)); } }`,
+  `:where(&) .gem-hero.gem-hero-banner--compact-collection .gem-hero__overlay:not(.has-media) { position: relative; inset: auto; z-index: auto; opacity: 1; width: min(var(--gem-layout-page, 1200px), calc(100% - var(--gem-layout-gutter, 32px))); margin: clamp(24px, 5vw, 48px) auto 0; background: none; color: var(--gem-color-text); border-radius: 0; }`,
+  `:where(&) .gem-hero.gem-hero-banner--compact-collection .gem-hero__overlay:not(.has-media) .gem-hero__heading { color: var(--gem-color-text); }`,
+  `:where(&) .gem-section.gem-hero.gem-hero-banner--compact-collection:not(:has(> .gem-hero__bg)) { padding-block-end: 0; }`
+];
 var GEM_FRAMEWORK_EDITIONS = [
   { edition: 1, since: "0.1.0", released: "2026-07-04", changes: [], css: [] },
   {
@@ -841,6 +1004,18 @@ var GEM_FRAMEWORK_EDITIONS = [
     released: "2026-10-10",
     changes: ["Section headings and hero titles follow your type scale on tablets and computers. Phones keep their current size."],
     css: EDITION_2_CSS
+  },
+  {
+    // Edition 3. Collection pages at Dawn's tiers (12/10/2026, measured on a "Start from scratch" theme): EDITION_3_ELEMENTS.
+    edition: 3,
+    since: "0.17.0",
+    released: "2026-10-12",
+    changes: [
+      "Collection grids: each product photo fills its column, phones and tablets show your mobile column count, and Sale and Sold out badges appear.",
+      "The collection title sits on the page, lined up with the products, in your text colour."
+    ],
+    css: [],
+    elements: EDITION_3_ELEMENTS
   }
 ];
 var LATEST_GEM_FRAMEWORK_EDITION = GEM_FRAMEWORK_EDITIONS[GEM_FRAMEWORK_EDITIONS.length - 1].edition;
@@ -862,6 +1037,9 @@ function addEditionSupportMonths(released) {
 function gemFrameworkEditionScope(edition) {
   return GEM_FRAMEWORK_EDITIONS.filter((e) => e.edition >= edition).map((e) => `[data-gem-edition='${e.edition}']`).join(", ");
 }
+function gemFrameworkEditionElementCss() {
+  return GEM_FRAMEWORK_EDITIONS.flatMap((e) => (e.elements ?? []).map((rule) => rule.replaceAll("&", gemFrameworkEditionScope(e.edition)))).join("\n");
+}
 function gemFrameworkEditionCss() {
   return GEM_FRAMEWORK_EDITIONS.flatMap((e) => e.css.map((rule) => rule.replaceAll("&", gemFrameworkEditionScope(e.edition)))).join("\n");
 }
@@ -1425,18 +1603,8 @@ var GEM_POPUP_SHELL_CSS = GEM_POPUP_SHELL_CSS_LINES.join("\n");
 
 // ../../packages/gem-framework/src/primitives.ts
 var dividerMask = (path) => `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 10' preserveAspectRatio='none'%3E%3Cpath fill='%23fff' d='${path}'/%3E%3C/svg%3E")`;
-var spikePath = (() => {
-  const teeth = [];
-  for (let x = 95; x > 0; x -= 5) teeth.push(`L${x} ${teeth.length % 2 === 0 ? 10 : 3}`);
-  return `M0 0 H100 V3 ${teeth.join(" ")} L0 ${teeth.length % 2 === 0 ? 10 : 3} Z`;
-})();
-var DIVIDER_SHAPES = {
-  wave: "M0 0 H100 V3 C80 9 70 -1 50 4 C30 9 20 1 0 4 Z",
-  slope: "M0 0 H100 V10 Z",
-  spikes: spikePath,
-  arch: "M0 0 H100 V2 Q50 12 0 2 Z",
-  blob: "M0 0 H100 V4 C85 11 72 0 58 5 C44 10 30 2 16 6 C10 8 5 5 0 6 Z"
-};
+var knownValues = (attr, values) => `:where(${values.map((v) => `[${attr}='${v}']`).join(", ")})`;
+var DIVIDER_SHAPES = Object.keys(GEM_SECTION_DIVIDER_PATHS);
 var GEM_DIVIDER_CSS_LINES = [
   // The clip is WIDENED, not removed. `.gem-section` sets `overflow: clip` and the wedge is drawn
   // at `top: 100%` / `bottom: 100%` — entirely outside the box — so the parent deleted every
@@ -1447,7 +1615,8 @@ var GEM_DIVIDER_CSS_LINES = [
   // it entirely would paint square corners over that radius. A browser without
   // `overflow-clip-margin` keeps plain `clip` — the divider stays hidden, which is today's
   // behaviour rather than a broken layout.
-  ":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); }",
+  // Only for a shape that has a mask (knownValues): a "none" edge used to widen the clip by 48px for nothing.
+  `:is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow)[data-gem-divider-top]${knownValues("data-gem-divider-top", DIVIDER_SHAPES)}, :is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow)[data-gem-divider-bottom]${knownValues("data-gem-divider-bottom", DIVIDER_SHAPES)} { position: relative; overflow: clip; overflow-clip-margin: var(--gem-divider-height, 48px); }`,
   // Shared geometry. `top: 100%` / `bottom: 100%` put it outside the box; z-index 1 keeps it above the
   // neighbouring band's background. pointer-events: none so it never eats a click near the seam.
   // Qualified by SHAPE. Unqualified, any value paints a solid 48px slab — including the literal
@@ -1457,7 +1626,7 @@ var GEM_DIVIDER_CSS_LINES = [
   ":is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow)[data-gem-divider-bottom]::after { top: 100%; }",
   // The top edge reuses the same masks, mirrored, so five shapes cover both edges.
   ":is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow)[data-gem-divider-top]::before { bottom: 100%; transform: scaleY(-1); }",
-  ...Object.entries(DIVIDER_SHAPES).flatMap(([name, path]) => {
+  ...Object.entries(GEM_SECTION_DIVIDER_PATHS).flatMap(([name, path]) => {
     const mask = dividerMask(path);
     return [
       `:is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow)[data-gem-divider-bottom='${name}']::after { -webkit-mask-image: ${mask}; mask-image: ${mask}; }`,
@@ -1466,8 +1635,10 @@ var GEM_DIVIDER_CSS_LINES = [
   })
 ];
 var GEM_DIVIDER_CSS = GEM_DIVIDER_CSS_LINES.join("\n");
+var GEM_CARD_STYLES = ["outline", "shadow", "filled"];
 var GEM_CARD_CSS_LINES = [
-  ":is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow)[data-gem-card] :is(.gem-section__inner, [class*='__inner']) { border-radius: var(--gem-radius-md); padding: var(--gem-space-xl); }",
+  // Only for a style that draws (knownValues): "none", the knob's revert value, arrives here as an attribute too.
+  `:is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow)[data-gem-card]${knownValues("data-gem-card", GEM_CARD_STYLES)} :is(.gem-section__inner, [class*='__inner']) { border-radius: var(--gem-radius-md); padding: var(--gem-space-xl); }`,
   ":is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow)[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)[data-gem-card='shadow'] :is(.gem-section__inner, [class*='__inner']) { background: var(--gem-color-surface); box-shadow: var(--gem-shadow-md); }",
   // `filled` tints the section's own ground rather than reaching for a fixed colour, so it stays
@@ -1550,6 +1721,23 @@ var GEM_FORM_SET_CSS_LINES = [
   "  inline-size: var(--gem-checkbox-size);",
   "  block-size: var(--gem-checkbox-size);",
   "  accent-color: var(--gem-checkbox-accent);",
+  "}",
+  // THE QUANTITY STEPPER IS A FIELD OF THE SET (20/10/2026): its box takes the set's height, edge and corner (capped at
+  // 22px, so a pill set draws a round stepper, not a 999px lozenge), its -/+ and number the set's fill and text size, and
+  // the underline shape paints no cell, as it paints no field. The storefront carried these (gemsite #1001/#1007, with its
+  // own element stepper in the :is() lists); the package did not, so every section the kho previewed drew a square 44px
+  // stepper beside 48px pill fields (GemFactory Framework › Controls, measured 20/10/2026).
+  "[data-gem-form-set] :is(.gem-quantity-input) {",
+  "  min-height: var(--gem-input-height);",
+  "  border: var(--gem-input-border-width) solid var(--gem-input-border-color);",
+  "  border-radius: min(var(--gem-input-radius), 22px);",
+  "}",
+  "[data-gem-form-set] :is(.gem-quantity-input__button, .gem-quantity-input__field) {",
+  "  background: var(--gem-input-bg);",
+  "  font-size: var(--gem-input-font-size);",
+  "}",
+  '[data-gem-form-set][data-gem-field-shape="underline"] :is(.gem-quantity-input__button, .gem-quantity-input__field) {',
+  "  background: transparent;",
   "}"
 ];
 var GEM_FORM_SET_CSS = GEM_FORM_SET_CSS_LINES.join("\n");
@@ -1761,7 +1949,7 @@ function createGemBaseCssParts(profile) {
   ].join("\n");
   return {
     // Edition rules close the primitives (editions.ts): custom properties on <html>, scoped :where([data-gem-edition]).
-    primitives: [reset, "", createPrimitiveCss(), "", gemFrameworkEditionCss(), "", ""].join("\n"),
+    primitives: [reset, "", createPrimitiveCss(), "", gemFrameworkEditionElementCss(), "", gemFrameworkEditionCss(), "", ""].join("\n"),
     sections: [createShellCss(), "", createSectionCss(), "", createThemeProfileCss(profile)].join("\n")
   };
 }
@@ -1771,7 +1959,11 @@ function createThemeProfileCss(profile = "dawn-parity") {
 function createMorphProfileCss() {
   return [
     "/* Gem morph profile: style packs and section presets provide visual transformation above core primitives. */",
-    ":root { --gem-profile-mode: morph; }"
+    ":root { --gem-profile-mode: morph; }",
+    // A morph theme's quick-view card is a box drawn from its card tokens (the .gem-card primitive). Edition 3 unboxes this
+    // card for Dawn's collection page; restated here one class higher, so a morph theme keeps its box and its card knobs on
+    // every edition (review of #764). The same values as .gem-card: nothing changes for a morph store on edition 1 or 2.
+    ".gem-product-card-grid--quick-view-grid .gem-card.gem-product-card-grid__card { border: var(--gem-border-subtle, 1px solid var(--gem-color-border)); border-radius: var(--gem-card-radius, var(--gem-radius-md)); background: var(--gem-card-background, var(--gem-color-surface)); padding: var(--gem-component-card-padding, var(--gem-space-md)); box-shadow: var(--gem-shadow-sm, none); }"
   ].join("\n");
 }
 function createPrimitiveCss() {
@@ -1994,8 +2186,9 @@ function createPrimitiveCss() {
     "  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).
+    // A wrapped field gets the join's height too: the dawn-parity profile's 4.5rem floor named .gem-input until 0.18.12, and
+    // only the direct-child rule above outranked it, so a wrapped input stood 72px next to a 44px one (02/10/2026). The
+    // floor no longer names it; this keeps a wrapped field at the join's height whatever a profile floors it at.
     ".gem-field-join > .gem-form-field > :is(.gem-input, .gem-select) {",
     "  width: 100%;",
     "  height: 100%;",
@@ -2033,6 +2226,32 @@ function createPrimitiveCss() {
     "  accent-color: var(--gem-color-accent);",
     "}",
     ...GEM_FORM_SET_CSS_LINES,
+    // HOVER AND ERROR (§9.2 state matrix, 20/10/2026): GemFactory Framework › Controls measured both INERT, so a field a
+    // shopper points at, or one a form marked invalid, looked like any other. Written once for every field, with or
+    // without a form set.
+    // HOVER thickens the edge by 1px in the field's own ink, as Dawn does (`box-shadow: 0 0 0 calc(border + .1rem)`): a
+    // colour change alone was invisible under every form set, whose edge is already the ink (measured #1f2224 → #202223).
+    // The ring follows the box and its corner; an underline or filled field has only a bottom rule, so only that thickens.
+    // ERROR (`aria-invalid="true"`, set by the form) takes the danger colour mixed 70/30 with that ink, which keeps the
+    // edge at 3:1 or more on a white field (9.7:1), an underline field on a dark band (4.2:1) and on an accent band
+    // (3.0:1); plain #b42318 there was 2.4:1 and 1.8:1. Only the edge colour changes, so every shape keeps its edges.
+    // Hover skips a disabled or invalid field (an error must not lose its colour under the pointer), a focused one (the
+    // focus halo on a dark or accent band is a box-shadow, and a click focuses a text field as :focus-visible, so the
+    // pointer still on it would wipe the halo: review) and touch screens, where a tap would leave it stuck.
+    // Specificity: hover (0,6,0; 0,8,0 per shape) outranks the set's field rule (0,3,0); error (0,3,0) ties it and wins by
+    // coming later in the sheet.
+    "@media (hover: hover) {",
+    '  :is(.gem-input, .gem-select, .gem-textarea, .gem-shell-footer__newsletter .gem-input):where(:not(.gem-search-form .gem-input)):hover:not(:disabled):not([aria-invalid="true"]):not(:focus-visible) {',
+    "    border-color: currentColor;",
+    "    box-shadow: 0 0 0 1px currentColor;",
+    "  }",
+    '  [data-gem-form-set]:is([data-gem-field-shape="underline"], [data-gem-field-shape="filled"]) :is(.gem-input, .gem-select, .gem-textarea, .gem-shell-footer__newsletter .gem-input):where(:not(.gem-search-form .gem-input)):hover:not(:disabled):not([aria-invalid="true"]):not(:focus-visible) {',
+    "    box-shadow: 0 1px 0 0 currentColor;",
+    "  }",
+    "}",
+    ':is(.gem-input, .gem-select, .gem-textarea, .gem-shell-footer__newsletter .gem-input):where(:not(.gem-search-form .gem-input))[aria-invalid="true"] {',
+    "  border-color: color-mix(in srgb, var(--gem-color-danger, #b42318) 70%, currentColor);",
+    "}",
     ".gem-submit {",
     "  cursor: pointer;",
     "}",
@@ -2217,17 +2436,25 @@ function createPrimitiveCss() {
     // .gem-rating above is a type rule for a text label; every actual star row in the theme was a
     // hardcoded five-glyph literal, so a captured 4-of-5 (or a half star) had nowhere to land. The
     // fill is a percentage-width overlay, so fractional values render exactly instead of rounding.
+    // SVG stars (GemFactory gap #45, 0.18.11): real review widgets draw each star as an SVG (solid + outline), and the
+    // eight product-reviews sections rebuilt in GemFactory put those SVGs in __base / __fill. Two things broke the fill
+    // (measured 12/10/2026): the base `svg { max-width: 100% }` shrank the SVGs in the clipped __fill to the fill's
+    // width (4.2 drew as five squeezed stars), and a .gem-stars that is a stretched grid / flex item computed its
+    // percentage against the stretched width (3 of 5 drew as 5). The row is as wide as its stars, always, and a star
+    // keeps its own size inside the clip.
     ".gem-stars {",
     "  --gem-stars-total: 5;",
     "  --gem-stars-value: 5;",
     "  position: relative;",
     "  display: inline-block;",
+    "  width: max-content;",
     "  line-height: 1;",
     "  font-size: var(--gem-text-sm, 0.8125rem);",
     "  letter-spacing: 0.1em;",
     "  color: var(--gem-color-border);",
     "}",
     ".gem-stars__base, .gem-stars__fill { display: block; white-space: nowrap; }",
+    ".gem-stars :is(svg, img) { max-width: none; flex: none; }",
     ".gem-stars__fill {",
     "  position: absolute;",
     "  inset: 0;",
@@ -2584,6 +2811,12 @@ function createPrimitiveCss() {
     "  color: var(--gem-color-text);",
     "  text-align: center;",
     "}",
+    // The number in the middle of its cell, as the -/+ beside it (a <button> centres its label; an <output> is inline and
+    // put the digit 8-9px above the middle; Framework › Controls, 20/10/2026).
+    ".gem-quantity-input__field {",
+    "  display: grid;",
+    "  place-items: center;",
+    "}",
     ".gem-quantity-input__button {",
     "  font-weight: 750;",
     "}",
@@ -3733,7 +3966,7 @@ function createDawnParityCss() {
     ".gem-card, .gem-product-card { border: 0; border-radius: 0; box-shadow: none; background: transparent; padding: 0; }",
     ".gem-product-card__media, .gem-media { border: 0; border-radius: 0; box-shadow: none; background: rgb(244 244 244); }",
     ".gem-product-card__media { display: block; position: relative; width: 100%; height: 0; min-block-size: 0; padding-bottom: 100%; aspect-ratio: auto; overflow: hidden; }",
-    ".gem-featured-collection--editorial-grid .gem-product-card__media, .gem-product-card-grid--quick-view-grid .gem-product-card__media, .gem-main-search .gem-product-card__media, .gem-cart-recommendations--dawn-empty .gem-product-card__media { min-block-size: 0 !important; }",
+    ".gem-featured-collection--editorial-grid .gem-product-card__media, .gem-product-card-grid--quick-view-grid .gem-product-card__media, .gem-main-search .gem-product-card__media, .gem-cart-recommendations--dawn-empty .gem-product-card__media, .gem-recommended-products--product-rail .gem-product-card__media, .gem-cart-recommendations--product-rail .gem-product-card__media { min-block-size: 0 !important; }",
     ".gem-product-card__media > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }",
     // Home product grids show generated/lifestyle imagery (not catalog product-on-white shots), so
     // `contain` letterboxes them inside the square card (looks misaligned / floating off the box).
@@ -3750,7 +3983,7 @@ function createDawnParityCss() {
     ".gem-cart-recommendations--dawn-empty .gem-product-card__quick-actions { display: none; }",
     ".gem-featured-collection--editorial-grid > .gem-section__inner > .gem-section__heading, .gem-featured-collection--editorial-grid > .gem-section__inner > .gem-section__body { display: none; }",
     ".gem-featured-collection--editorial-grid { padding-block: 28px 36px; }",
-    ".gem-featured-collection--editorial-grid .gem-section__grid, .gem-product-card-grid--quick-view-grid .gem-section__grid, .gem-main-search .gem-section__grid { grid-template-columns: repeat(var(--gem-product-card-grid-columns, 4), minmax(0, 1fr)); gap: 8px; }",
+    ".gem-featured-collection--editorial-grid .gem-section__grid, .gem-product-card-grid--quick-view-grid .gem-section__grid, .gem-main-search .gem-section__grid, .gem-recommended-products--product-rail .gem-section__grid, .gem-cart-recommendations--product-rail .gem-section__grid { grid-template-columns: repeat(var(--gem-product-card-grid-columns, 4), minmax(0, 1fr)); gap: 8px; }",
     ".gem-product-card-grid--quick-view-grid { padding-top: 0; }",
     ".gem-product-card-grid--quick-view-grid .gem-section__heading:empty { display: none; }",
     // Hide a compare-at only when the price ISN'T actually on sale. The rule used to hide it
@@ -3920,14 +4153,16 @@ function createDawnParityMobileCss() {
     "  .gem-hero-banner--compact-collection { padding-block: 25px; }",
     "  .gem-hero-banner--compact-collection .gem-section__heading { font-size: 30px; line-height: 39px; }",
     "  .gem-product-card-grid--quick-view-grid > .gem-section__inner, .gem-main-search > .gem-section__inner { width: calc(100% - 30px); }",
-    "  .gem-product-card-grid--quick-view-grid .gem-product-card-grid__grid { gap: 4px !important; }",
+    // 8px on a phone too, as the featured collection and the two product rails: the cards are Dawn's flat cards, and with
+    // no padding of their own a 4px gap left two columns of titles 4px apart at 320 (review of gemsite #951).
+    "  .gem-product-card-grid--quick-view-grid .gem-product-card-grid__grid { gap: 8px !important; }",
     "  .gem-product-card__content { padding-top: 8px; gap: 4px; }",
     "  .gem-product-card__title { font-size: 15px; line-height: 24px; }",
     "  .gem-product-card__price, .gem-product-card__price .gem-price { font-size: 16px; line-height: 24px; }",
     // Fallback = the profile's own phone heading, declared once as --gem-heading-phone-cap on the :root above.
     "  .gem-section__heading { font-size: var(--gem-section-heading-size-mobile, var(--gem-heading-phone-cap)); }",
     "  .gem-hero-banner h1, .gem-hero-banner h2 { font-size: var(--gem-hero-heading-size-mobile, var(--gem-heading-phone-cap)); }",
-    "  .gem-featured-collection--editorial-grid .gem-section__grid, .gem-product-card-grid--quick-view-grid .gem-section__grid, .gem-main-search .gem-section__grid { grid-template-columns: repeat(var(--gem-product-card-grid-mobile-columns, 2), minmax(0, 1fr)); }",
+    "  .gem-featured-collection--editorial-grid .gem-section__grid, .gem-product-card-grid--quick-view-grid .gem-section__grid, .gem-main-search .gem-section__grid, .gem-recommended-products--product-rail .gem-section__grid, .gem-cart-recommendations--product-rail .gem-section__grid { grid-template-columns: repeat(var(--gem-product-card-grid-mobile-columns, 2), minmax(0, 1fr)); }",
     "  .gem-product-main[data-gem-product-main-layout='dawn-main'] > .gem-section__inner { width: calc(100% - 30px); }",
     "  .gem-product-main[data-gem-product-main-layout='dawn-main'] .gem-product-media-gallery__frame { display: flex; gap: 0; overflow-x: auto; scroll-snap-type: x mandatory; }",
     "  .gem-product-main[data-gem-product-main-layout='dawn-main'] .gem-product-media-gallery__item { flex: 0 0 100%; scroll-snap-align: start; aspect-ratio: 1 / 1; }",
@@ -4178,7 +4413,10 @@ function createShellCss() {
     ".newsletter-form__field-wrapper, .field {",
     "  position: relative;",
     "}",
-    ".field__input, .field input, .gem-input {",
+    // Dawn's field floor, for Dawn's own field classes. It named .gem-input too, and 4.5rem is Dawn's 45px only on Dawn's
+    // 10px root: on this 16px root a .gem-input stood 72px beside a 44px select and stepper whenever no form set ruled it
+    // (GemFactory Framework › Controls, 20/10/2026). A .gem-input takes the primitive's floor, as every field does.
+    ".field__input, .field input {",
     "  min-height: 4.5rem;",
     "  border-radius: var(--inputs-radius, 0);",
     "}",
@@ -6344,7 +6582,8 @@ var PREVIEW_MEDIA_CSS = [
 function renderGemPreviewDocument(plan, options = {}) {
   const page = options.page ?? "home";
   const profile = plan.theme_profile ?? "dawn-parity";
-  const baseCss = createGemThemeCss(plan.tokens, ":root", { profile, ...gemPlanShapeKnobs(plan) });
+  const formSet = gemPlanFormSet(plan);
+  const baseCss = createGemThemeCss({ ...plan.tokens, form: formSet ?? void 0 }, ":root", { profile, ...gemPlanShapeKnobs(plan) });
   const overflowGuardCss = "html,body{max-width:100%;overflow-x:hidden}*,*::before,*::after{box-sizing:border-box}";
   const css = [baseCss, overflowGuardCss, CHROME_VARIANT_CSS, options.sectionCss, PREVIEW_MEDIA_CSS].filter(Boolean).join("\n");
   const runtimeJs = options.includeRuntime === false ? "" : createGemRuntimeBootstrap(planToRuntimeBootstrapConfig(plan));
@@ -6352,7 +6591,7 @@ function renderGemPreviewDocument(plan, options = {}) {
   const footer = renderGemShellFooter(plan);
   const sectionsHtml = renderGemPageSections(plan, page, options.sectionMarkup ?? {});
   const title = options.title ?? `${plan.name} preview`;
-  const formAttrs = Object.entries(gemFormAttributes(plan.tokens.form)).map(([k, v]) => ` ${k}="${escapeAttribute(v)}"`).join("");
+  const formAttrs = Object.entries(gemFormAttributes(formSet ?? void 0)).map(([k, v]) => ` ${k}="${escapeAttribute(v)}"`).join("");
   const bodyClass = ["gem-theme", `gem-theme--${slugify(profile)}`, options.bodyClassName].filter(Boolean).join(" ");
   const edition = gemFrameworkEditionOf(plan.framework_edition);
   const editionAttr = edition > 1 ? ` data-gem-edition="${edition}"` : "";
@@ -6590,7 +6829,7 @@ function renderGemSectionMarkup(section) {
   const widthRaw = settings.gem_content_width;
   const width = widthRaw === "full" || widthRaw === "contained" || widthRaw === "narrow" ? widthRaw : "";
   const heightRaw = settings.gem_section_height;
-  const height = heightRaw === "short" || heightRaw === "normal" || heightRaw === "tall" ? heightRaw : "";
+  const height2 = heightRaw === "short" || heightRaw === "normal" || heightRaw === "tall" ? heightRaw : "";
   const columnsRaw = settings.gem_grid_columns;
   const columns = columnsRaw === "2" || columnsRaw === "3" || columnsRaw === "4" ? columnsRaw : "";
   const bgRaw = settings.gem_section_background;
@@ -6615,7 +6854,7 @@ function renderGemSectionMarkup(section) {
     media ? ` data-gem-media-position="${media}"` : "",
     spacing ? ` data-gem-content-spacing="${spacing}"` : "",
     width ? ` data-gem-content-width="${width}"` : "",
-    height ? ` data-gem-section-height="${height}"` : "",
+    height2 ? ` data-gem-section-height="${height2}"` : "",
     columns ? ` data-gem-grid-columns="${columns}"` : "",
     background ? ` data-gem-section-background="${background}"` : "",
     priceColor ? ` data-gem-price-color="${priceColor}"` : "",
@@ -7422,6 +7661,7 @@ export {
   GEM_BUTTON_TOKEN_SHAPES,
   GEM_COUNTDOWN_ENDED_CSS,
   GEM_EDITION_SUPPORT_MONTHS,
+  GEM_ELEMENT_SECTION_DIVIDER_CSS,
   GEM_FIELD_JOINS,
   GEM_FIELD_SHAPES,
   GEM_FORM_CSS_VARIABLES,
@@ -7444,6 +7684,8 @@ export {
   GEM_ROW_CSS,
   GEM_ROW_CSS_VARIABLES,
   GEM_ROW_GAP_CSS,
+  GEM_SECTION_DIVIDER_PATHS,
+  GEM_SOFT_FIELD_FAMILIES,
   LATEST_GEM_FRAMEWORK_EDITION,
   MIN_TEXT_CONTRAST,
   MODERN_MINERAL_FAMILY_PACK_ID,
@@ -7473,6 +7715,7 @@ export {
   createThemeProfileCss,
   defaultGemTokens,
   defaultSelection,
+  deriveFormSetId,
   gemBandSchemeColors,
   gemBandSchemeCssVars,
   gemBandSchemeDeclarations,
@@ -7484,6 +7727,7 @@ export {
   gemFormCssVars,
   gemFormSetsFor,
   gemFrameworkEditionCss,
+  gemFrameworkEditionElementCss,
   gemFrameworkEditionOf,
   gemFrameworkEditionScope,
   gemFrameworkEditionSupportedUntil,
@@ -7495,9 +7739,13 @@ export {
   gemMotionScaleCssVars,
   gemPartClass,
   gemPhoneTokenTarget,
+  gemPlanFormSet,
   gemPlanShapeKnobs,
   gemRuntimePluginModuleKeys,
   gemRuntimePluginSources,
+  gemSectionDividerResponsiveStyle,
+  gemSectionDividerStyle,
+  gemSectionDividers,
   getGemFrameworkValidationRule,
   hexContrastRatio,
   hexRelativeLuminance,