@gemboss/gem-framework 0.5.2 → 0.9.0

package/dist/section-gate.js

@@ -1,3 +1,18 @@
+// ../../packages/gem-framework/src/form-set.ts
+var FORM_CSS_VAR = {
+  radius: "--gem-input-radius",
+  borderWidth: "--gem-input-border-width",
+  borderColor: "--gem-input-border-color",
+  fill: "--gem-input-bg",
+  height: "--gem-input-height",
+  paddingInline: "--gem-input-padding-inline",
+  fontSize: "--gem-input-font-size",
+  focusRing: "--gem-input-focus-ring",
+  checkboxAccent: "--gem-checkbox-accent",
+  checkboxSize: "--gem-checkbox-size"
+};
+var GEM_FORM_CSS_VARIABLES = Object.values(FORM_CSS_VAR);
+
 // ../../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;";
@@ -229,6 +244,22 @@ var gemFrameworkPrimitiveGroups = [
       "gem-cart-line-item__price"
     ]
   },
+  {
+    // The popup shell: the dialog frame popup sections draw their content in. Styled by popup-shell.ts
+    // (GEM_POPUP_SHELL_CSS), which ships as its own popup-shell.css since 0.8.3, not in primitives.css: a page that
+    // draws one of these loads that file (gem-framework.css, the whole file, carries it too).
+    group: "popup-shell",
+    classes: [
+      "gem-popup-shell",
+      "gem-popup-shell__dialog",
+      "gem-popup-shell__frame",
+      "gem-popup-shell__media",
+      "gem-popup-shell__image",
+      "gem-popup-shell__panel",
+      "gem-popup-shell__close",
+      "gem-popup-shell__teaser"
+    ]
+  },
   {
     group: "sections",
     classes: [
@@ -331,6 +362,122 @@ var gemFrameworkValidationRules = [
   { code: "external_dependency", severity: "error", surface: "runtime" }
 ];
 
+// ../../packages/gem-framework/src/popup-shell.ts
+var GEM_POPUP_SHELL_CSS_LINES = [
+  ".gem-popup-shell { padding: 0; }",
+  ".gem-popup-shell__dialog {",
+  "  padding: 0; border: 0; margin: auto; color: var(--gem-color-text); background: var(--gem-color-background);",
+  "  width: min(880px, 92vw); max-width: none; max-height: min(640px, 92vh); overflow: hidden;",
+  "  border-radius: var(--gem-radius-lg); box-shadow: var(--gem-shadow-md);",
+  "}",
+  ".gem-popup-shell__dialog::backdrop { background: rgb(0 0 0 / 0.55); }",
+  ".gem-popup-shell__frame { position: relative; display: grid; grid-template-columns: 1fr 1fr; min-height: 520px; height: 100%; }",
+  ".gem-popup-shell__media { position: relative; min-width: 0; overflow: hidden; background: var(--gem-color-surface); }",
+  ".gem-popup-shell__image { display: block; width: 100%; height: 100%; object-fit: cover; }",
+  ".gem-popup-shell__panel {",
+  "  position: relative; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: var(--gem-space-md);",
+  "  padding: var(--gem-space-2xl) var(--gem-space-xl); overflow-y: auto; align-items: center; text-align: center;",
+  "}",
+  ".gem-popup-shell[data-gem-popup-align='start'] .gem-popup-shell__panel { align-items: stretch; text-align: start; }",
+  ".gem-popup-shell[data-gem-popup-desktop='split-right'] .gem-popup-shell__media { order: 2; }",
+  ".gem-popup-shell[data-gem-popup-media='none'] .gem-popup-shell__frame,",
+  ".gem-popup-shell[data-gem-popup-desktop='card'] .gem-popup-shell__frame { grid-template-columns: 1fr; }",
+  // Thẻ hẹp chỉ là bố cục DESKTOP. Viết ngoài media query thì nó (độ ưu tiên 0,3,0) thắng rule takeover 100vw của mobile
+  // (0,1,0): đo 04/10/2026, popup chọn desktop "card" hay không ảnh chỉ rộng 92vw trên điện thoại, không phủ kín.
+  "@media (min-width: 750px) {",
+  "  .gem-popup-shell[data-gem-popup-media='none'] .gem-popup-shell__dialog,",
+  "  .gem-popup-shell[data-gem-popup-desktop='card'] .gem-popup-shell__dialog { width: min(480px, 92vw); }",
+  "}",
+  ".gem-popup-shell[data-gem-popup-media='none'] .gem-popup-shell__media { display: none; }",
+  ".gem-popup-shell[data-gem-popup-desktop='card'] .gem-popup-shell__media { max-height: 200px; }",
+  ".gem-popup-shell[data-gem-popup-desktop='card-over-image'] .gem-popup-shell__frame { grid-template-columns: 1fr; place-items: center; }",
+  ".gem-popup-shell[data-gem-popup-desktop='card-over-image'] .gem-popup-shell__media { position: absolute; inset: 0; }",
+  ".gem-popup-shell[data-gem-popup-desktop='card-over-image'] .gem-popup-shell__panel {",
+  "  width: min(420px, 86%); margin: var(--gem-space-xl) 0; background: var(--gem-color-background); border-radius: var(--gem-radius-lg); box-shadow: var(--gem-shadow-sm);",
+  "}",
+  // Image behind the text: light text over a dark wash, every size. A card over the image has its own
+  // background, so on desktop it keeps the preset's text colour.
+  ".gem-popup-shell[data-gem-popup-media='background'] .gem-popup-shell__media::after { content: ''; position: absolute; inset: 0; background: linear-gradient(rgb(0 0 0 / 0.35), rgb(0 0 0 / 0.6)); }",
+  ".gem-popup-shell[data-gem-popup-media='background'] .gem-popup-shell__panel,",
+  ".gem-popup-shell[data-gem-popup-media='background'] .gem-popup-shell__close { color: #fff; }",
+  ".gem-popup-shell__close {",
+  "  position: absolute; inset-block-start: var(--gem-space-xs); inset-inline-end: var(--gem-space-xs); z-index: 2;",
+  "  display: inline-grid; place-items: center; width: var(--gem-tap-min); height: var(--gem-tap-min); padding: 0;",
+  "  border: 0; border-radius: var(--gem-radius-pill); color: inherit; background: transparent; cursor: pointer;",
+  "}",
+  ".gem-popup-shell__close:focus-visible { outline: var(--gem-focus-ring); outline-offset: var(--gem-focus-offset); }",
+  ".gem-popup-shell__teaser {",
+  "  position: fixed; inset-block-end: var(--gem-space-md); inset-inline-end: var(--gem-space-md); z-index: 40;",
+  "  min-height: var(--gem-tap-min); padding: 0 var(--gem-space-md); font: inherit; font-weight: 600; cursor: pointer;",
+  "  color: var(--gem-color-accent-text); background: var(--gem-color-accent); border: 0; border-radius: var(--gem-radius-pill); box-shadow: var(--gem-shadow-md);",
+  "}",
+  ".gem-popup-shell__teaser[data-position='left'] { inset-inline-end: auto; inset-inline-start: var(--gem-space-md); }",
+  ".gem-popup-shell__teaser[hidden] { display: none; }",
+  "@media (min-width: 750px) {",
+  // Fullscreen: the dialog covers the viewport. The image goes right; behind the text when media=background,
+  // and then text aligned to the start keeps the left half so it never sits half on the image.
+  "  .gem-popup-shell[data-gem-popup-desktop='fullscreen'] .gem-popup-shell__dialog { width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; margin: 0; border-radius: 0; box-shadow: none; }",
+  "  .gem-popup-shell[data-gem-popup-desktop='fullscreen'] .gem-popup-shell__frame { min-height: 100%; }",
+  "  .gem-popup-shell[data-gem-popup-desktop='fullscreen'] .gem-popup-shell__media { order: 2; }",
+  "  .gem-popup-shell[data-gem-popup-desktop='fullscreen'] .gem-popup-shell__panel { padding: var(--gem-space-3xl); }",
+  "  .gem-popup-shell[data-gem-popup-desktop='fullscreen'][data-gem-popup-align='start'] .gem-popup-shell__panel { padding-inline-start: max(var(--gem-space-3xl), 8vw); }",
+  "  .gem-popup-shell[data-gem-popup-desktop='fullscreen'][data-gem-popup-media='background'] .gem-popup-shell__frame { grid-template-columns: 1fr; }",
+  "  .gem-popup-shell[data-gem-popup-desktop='fullscreen'][data-gem-popup-media='background'][data-gem-popup-align='start'] .gem-popup-shell__frame { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }",
+  "  .gem-popup-shell[data-gem-popup-desktop='fullscreen'][data-gem-popup-media='background'] .gem-popup-shell__media { position: absolute; inset: 0; }",
+  "  .gem-popup-shell[data-gem-popup-desktop='fullscreen'][data-gem-popup-media='background'] .gem-popup-shell__panel { position: relative; z-index: 1; }",
+  "  .gem-popup-shell[data-gem-popup-desktop='card-over-image'][data-gem-popup-media='background'] .gem-popup-shell__panel { color: var(--gem-color-text); }",
+  // Ở split-left / split-right / card ảnh nằm CẠNH chữ trên desktop, không nằm sau (chỉ mobile, fullscreen, card-over-image
+  // đặt ảnh ra sau): chữ sáng và lớp tối của ảnh nền ở đây là chữ trắng trên nền sáng. Quét tương phản 629 bản ghép
+  // 04/10/2026: 1,04:1 ở mọi bản ghép như vậy.
+  "  .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__panel,",
+  "  .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; }",
+  "}",
+  "@media (max-width: 749px) {",
+  // Mobile: takeover is the whole screen; a sheet rises from the bottom to at most 88% of it. The image
+  // sits under the text (top when media=top), capped at a third of the screen; with no image or the image
+  // behind, the text is centred vertically like the measured takeovers.
+  "  .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; }",
+  "  .gem-popup-shell__frame { grid-template-columns: 1fr; grid-template-rows: auto 1fr; min-height: 100%; }",
+  "  .gem-popup-shell__panel { justify-content: flex-start; padding: var(--gem-space-3xl) var(--gem-space-lg) var(--gem-space-xl); }",
+  "  .gem-popup-shell[data-gem-popup-media='none'] .gem-popup-shell__panel,",
+  "  .gem-popup-shell[data-gem-popup-media='background'] .gem-popup-shell__panel { justify-content: center; }",
+  // Mobile không có thẻ nổi: panel thôi nền riêng. Giữ nền thẻ (--gem-color-background) mà ảnh làm nền thì chữ sáng của
+  // ảnh nền nằm trên nền nhạt của thẻ: đo 04/10/2026, preset soft-pastel ra chữ trắng trên hồng nhạt, không đọc được.
+  "  .gem-popup-shell[data-gem-popup-desktop='card-over-image'] .gem-popup-shell__panel { width: 100%; margin: 0; border-radius: 0; box-shadow: none; background: transparent; }",
+  "  .gem-popup-shell[data-gem-popup-desktop='card-over-image'] .gem-popup-shell__media { position: relative; }",
+  "  .gem-popup-shell__media { order: 2; max-height: 34dvh; }",
+  "  .gem-popup-shell[data-gem-popup-media='top'] .gem-popup-shell__media { order: 0; }",
+  "  .gem-popup-shell[data-gem-popup-media='top'] .gem-popup-shell__panel { padding-top: var(--gem-space-lg); }",
+  "  .gem-popup-shell[data-gem-popup-media='none'] .gem-popup-shell__frame,",
+  "  .gem-popup-shell[data-gem-popup-media='background'] .gem-popup-shell__frame { grid-template-rows: 1fr; }",
+  "  .gem-popup-shell[data-gem-popup-media='background'] .gem-popup-shell__media { position: absolute; inset: 0; max-height: none; }",
+  "}",
+  // Bản xem trước (thẻ thư viện, trang ghép, lab). Ngoài canvas editor nó PHỦ CẢ KHUNG NHÌN như popup thật mở bằng
+  // showModal (top layer, che cả header và thanh thông báo): Chris 04/10/2026 thấy popup của trang ghép nằm dưới header,
+  // trong luồng trang, không giống store. Trong canvas editor nó vẫn nằm trong luồng trang trên một nền mờ giả, để chọn
+  // và sửa được như mọi band khác.
+  // Dialog định vị ĐÚNG như modal của trình duyệt (position: fixed; inset: 0; margin: auto), nên mọi bố cục (fullscreen,
+  // thẻ, takeover, sheet kéo tới 88dvh) ra cùng khung chữ nhật với popup mở thật; nền chỉ thay ::backdrop (không có ở
+  // dialog không-modal).
+  ":root:not(:has([data-gem-canvas])) .gem-popup-shell[data-gem-popup-preview='true'] { position: fixed; inset: 0; z-index: 1000; padding: 0; background: rgb(0 0 0 / 0.55); }",
+  ":root:not(:has([data-gem-canvas])) .gem-popup-shell[data-gem-popup-preview='true'] .gem-popup-shell__dialog { position: fixed; inset: 0; display: block; }",
+  ":root:has([data-gem-canvas]) .gem-popup-shell[data-gem-popup-preview='true'] .gem-popup-shell__dialog { position: relative; display: block; inset: auto; }",
+  ":root:has([data-gem-canvas]) .gem-popup-shell[data-gem-popup-preview='true'] { padding: var(--gem-space-xl) var(--gem-layout-gutter); background: rgb(0 0 0 / 0.55); }",
+  "@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; }",
+  "}",
+  "@media (max-width: 749px) {",
+  "  :root:has([data-gem-canvas]) .gem-popup-shell[data-gem-popup-preview='true'] { padding: 0; }",
+  "  :root:has([data-gem-canvas]) .gem-popup-shell[data-gem-popup-preview='true'] .gem-popup-shell__dialog { height: 844px; max-height: none; width: 100%; max-width: 100%; }",
+  "  :root:has([data-gem-canvas]) .gem-popup-shell[data-gem-popup-preview='true'][data-gem-popup-mobile='sheet'] { padding-top: 160px; }",
+  "  :root:has([data-gem-canvas]) .gem-popup-shell[data-gem-popup-preview='true'][data-gem-popup-mobile='sheet'] .gem-popup-shell__dialog { min-height: 0; }",
+  "}"
+];
+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 = (() => {
@@ -355,34 +502,112 @@ 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, .gem-footer)[data-gem-divider-top], :is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow, .gem-footer)[data-gem-divider-bottom] { position: relative; overflow: clip; overflow-clip-margin: var(--gem-divider-height, 48px); }",
+  ":is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow)[data-gem-divider-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); }",
   // 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
   // "none", which the attribute writer forwards unchanged. The clip used to hide that; widening
   // it above makes a stray value visible.
-  ":is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow, .gem-footer)[data-gem-divider-bottom='wave']::after, :is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow, .gem-footer)[data-gem-divider-bottom='slope']::after, :is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow, .gem-footer)[data-gem-divider-bottom='spikes']::after, :is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow, .gem-footer)[data-gem-divider-bottom='arch']::after, :is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow, .gem-footer)[data-gem-divider-bottom='blob']::after, :is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow, .gem-footer)[data-gem-divider-top='wave']::before, :is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow, .gem-footer)[data-gem-divider-top='slope']::before, :is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow, .gem-footer)[data-gem-divider-top='spikes']::before, :is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow, .gem-footer)[data-gem-divider-top='arch']::before, :is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow, .gem-footer)[data-gem-divider-top='blob']::before { content: ''; position: absolute; left: 0; right: 0; z-index: 1; pointer-events: none; height: var(--gem-divider-height, 48px); background: var(--gem-section-bg, var(--gem-color-background)); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; }",
-  ":is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow, .gem-footer)[data-gem-divider-bottom]::after { top: 100%; }",
+  ":is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow)[data-gem-divider-bottom='wave']::after, :is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow)[data-gem-divider-bottom='slope']::after, :is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow)[data-gem-divider-bottom='spikes']::after, :is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow)[data-gem-divider-bottom='arch']::after, :is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow)[data-gem-divider-bottom='blob']::after, :is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow)[data-gem-divider-top='wave']::before, :is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow)[data-gem-divider-top='slope']::before, :is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow)[data-gem-divider-top='spikes']::before, :is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow)[data-gem-divider-top='arch']::before, :is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow)[data-gem-divider-top='blob']::before { content: ''; position: absolute; left: 0; right: 0; z-index: 1; pointer-events: none; height: var(--gem-divider-height, 48px); background: var(--gem-section-bg, var(--gem-color-background)); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; }",
+  ":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, .gem-footer)[data-gem-divider-top]::before { bottom: 100%; transform: scaleY(-1); }",
+  ":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]) => {
     const mask = dividerMask(path);
     return [
-      `:is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow, .gem-footer)[data-gem-divider-bottom='${name}']::after { -webkit-mask-image: ${mask}; mask-image: ${mask}; }`,
-      `:is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow, .gem-footer)[data-gem-divider-top='${name}']::before { -webkit-mask-image: ${mask}; mask-image: ${mask}; }`
+      `: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}; }`,
+      `:is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow)[data-gem-divider-top='${name}']::before { -webkit-mask-image: ${mask}; mask-image: ${mask}; }`
     ];
   })
 ];
 var GEM_DIVIDER_CSS = GEM_DIVIDER_CSS_LINES.join("\n");
 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] :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, .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)[data-gem-card] :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
   // legible on an accent or dark band instead of punching a light panel into it.
-  ":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); }"
+  ":is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow)[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_FORM_SET_CSS_LINES = [
+  // FORM SET (form-set.ts). Every rule is scoped under [data-gem-form-set], which <body> carries only when the plan
+  // sets `tokens.form`: a store without one renders as before. The variables are always COMPLETE (missing keys take
+  // GEM_FORM_DEFAULTS) and are declared on the controls themselves (GEM_FORM_VAR_SCOPE), so these rules never fall back
+  // to a value nobody chose and a band that redefines its palette recolours its fields.
+  // THE FIELD LIST names the dawn-parity footer field (0,2,0, later in the sheet) so :is() — which takes its most
+  // specific argument — outranks it: before, that field ignored every form set (review of #665). The main search is
+  // LEFT OUT (`:where(:not(…))`, no specificity): it is a field and a button drawn as one block whose button belongs to
+  // the profile, and restyling only the field half left it open on one side.
+  // .gem-field-join is joined by construction (the seller chose the join element), so `data-gem-field-join` does not
+  // open it; gemsite's own field + button pairs read that attribute.
+  "[data-gem-form-set] :is(.gem-input, .gem-select, .gem-textarea, .gem-shell-footer__newsletter .gem-input):where(:not(.gem-search-form .gem-input)) {",
+  "  min-height: var(--gem-input-height);",
+  "  height: auto;",
+  "  border: var(--gem-input-border-width) solid var(--gem-input-border-color);",
+  "  border-radius: var(--gem-input-radius);",
+  "  background: var(--gem-input-bg);",
+  "  padding-inline: var(--gem-input-padding-inline);",
+  "  font-size: var(--gem-input-font-size);",
+  "}",
+  // A textarea is two rows tall and never a pill: a 999px radius grows with the box as the shopper drags it. Keyed on
+  // the ELEMENT, not .gem-textarea, so a copy whose list adds its own fields (gemsite's cart note) reaches them too.
+  "[data-gem-form-set] textarea:is(.gem-input, .gem-select, .gem-textarea, .gem-shell-footer__newsletter .gem-input):where(:not(.gem-search-form .gem-input)) {",
+  "  min-height: calc(var(--gem-input-height) * 2);",
+  "  border-radius: min(var(--gem-input-radius), 12px);",
+  "  padding-block: var(--gem-space-sm);",
+  "}",
+  "[data-gem-form-set] :is(.gem-input, .gem-select, .gem-textarea, .gem-shell-footer__newsletter .gem-input):where(:not(.gem-search-form .gem-input)):focus-visible {",
+  "  outline: var(--gem-input-focus-ring, var(--gem-focus-ring, 2px solid var(--gem-color-accent)));",
+  "  outline-offset: var(--gem-focus-offset, 2px);",
+  "}",
+  // underline: only the bottom rule, no box. filled: the tinted field keeps its top corners and a bottom rule.
+  '[data-gem-form-set][data-gem-field-shape="underline"] :is(.gem-input, .gem-select, .gem-textarea, .gem-shell-footer__newsletter .gem-input):where(:not(.gem-search-form .gem-input)) {',
+  "  border-width: 0 0 var(--gem-input-border-width);",
+  "  border-radius: 0;",
+  "  background: transparent;",
+  // Transparent, so it reads on whatever is behind it: the ink of the band it sits on, not the page's. A dark section
+  // changes `color` and leaves --gem-color-text dark (review of #665: dark text on #202223, 1:1).
+  "  color: inherit;",
+  "}",
+  // On a band its placeholder must follow that ink too (the UA grey does not: 3.47:1 on a dark band, the footer field's
+  // only visible label), and a select's options keep the system's own pair: the popup on Windows/Linux takes the
+  // select's colours, so inherited light ink on a transparent field drew light options on a light list.
+  '[data-gem-form-set][data-gem-field-shape="underline"] :is(.gem-input, .gem-select, .gem-textarea, .gem-shell-footer__newsletter .gem-input):where(:not(.gem-search-form .gem-input))::placeholder {',
+  "  color: color-mix(in srgb, currentColor 70%, transparent);",
+  "}",
+  '[data-gem-form-set][data-gem-field-shape="underline"] :is(.gem-input, .gem-select, .gem-textarea, .gem-shell-footer__newsletter .gem-input):where(:not(.gem-search-form .gem-input)) option {',
+  "  color: CanvasText;",
+  "  background: Canvas;",
+  "}",
+  '[data-gem-form-set][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)) {',
+  "  border-width: 0 0 var(--gem-input-border-width);",
+  "  border-end-start-radius: 0;",
+  "  border-end-end-radius: 0;",
+  "}",
+  // The main search stays the profile's: the variables are declared on (and inherited by) every input, and the
+  // profile's base .gem-input rule reads two of them as hooks, so set those back to "unset" here (morph: 1 → 2px).
+  // DISABLED keeps a tinted fill (the base :disabled rule is 0,2,0 and the field rule above outranks it): the tint goes
+  // OVER the field's own fill, so a white field on a dark band stays white under its dark text (review of #665: a
+  // transparent tint there was 1:1). §9.2 state matrix: a disabled field must still look disabled, not only fainter.
+  "[data-gem-form-set] :is(.gem-input, .gem-select, .gem-textarea, .gem-shell-footer__newsletter .gem-input):where(:not(.gem-search-form .gem-input)):disabled {",
+  "  background: color-mix(in srgb, currentColor 6%, var(--gem-input-bg));",
+  "}",
+  // An underline field has no fill of its own (its ink is the band's): tint the band, not a fill it does not draw.
+  '[data-gem-form-set][data-gem-field-shape="underline"] :is(.gem-input, .gem-select, .gem-textarea, .gem-shell-footer__newsletter .gem-input):where(:not(.gem-search-form .gem-input)):disabled {',
+  "  background: color-mix(in srgb, currentColor 6%, transparent);",
+  "}",
+  "[data-gem-form-set] .gem-search-form .gem-input {",
+  "  --gem-input-border-width: initial;",
+  "  --gem-input-radius: initial;",
+  "}",
+  "[data-gem-form-set] .gem-checkbox {",
+  "  inline-size: var(--gem-checkbox-size);",
+  "  block-size: var(--gem-checkbox-size);",
+  "  accent-color: var(--gem-checkbox-accent);",
+  "}"
+];
+var GEM_FORM_SET_CSS = GEM_FORM_SET_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; }",
@@ -445,12 +670,12 @@ var GEM_ROW_CSS_LINES = [
 var GEM_ROW_GAP_CSS = GEM_ROW_GAP_CSS_LINES.join("\n");
 var GEM_ROW_CSS = GEM_ROW_CSS_LINES.join("\n");
 var GEM_GRID_COLUMNS_KNOB_CSS_LINES = [
-  ":is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow, .gem-footer)[data-gem-grid-columns='2'] :is(.gem-section__grid, [class*='__grid']):not(.gem-row) { grid-template-columns: repeat(2, minmax(0, 1fr)); }",
-  ":is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow, .gem-footer)[data-gem-grid-columns='2'] .gem-row:is(.gem-section__grid, [class*='__grid']):not(.gem-row .gem-row) { --gem-row-cols: 2; --gem-row-cols-md: 2; --gem-row-tracks: initial; --gem-row-tracks-md: initial; }",
-  ":is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow, .gem-footer)[data-gem-grid-columns='3'] :is(.gem-section__grid, [class*='__grid']):not(.gem-row) { grid-template-columns: repeat(3, minmax(0, 1fr)); }",
-  ":is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow, .gem-footer)[data-gem-grid-columns='3'] .gem-row:is(.gem-section__grid, [class*='__grid']):not(.gem-row .gem-row) { --gem-row-cols: 3; --gem-row-cols-md: 3; --gem-row-tracks: initial; --gem-row-tracks-md: initial; }",
-  ":is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow, .gem-footer)[data-gem-grid-columns='4'] :is(.gem-section__grid, [class*='__grid']):not(.gem-row) { grid-template-columns: repeat(4, minmax(0, 1fr)); }",
-  ":is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow, .gem-footer)[data-gem-grid-columns='4'] .gem-row:is(.gem-section__grid, [class*='__grid']):not(.gem-row .gem-row) { --gem-row-cols: 4; --gem-row-cols-md: 4; --gem-row-tracks: initial; --gem-row-tracks-md: initial; }"
+  ":is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow)[data-gem-grid-columns='2'] :is(.gem-section__grid, [class*='__grid']):not(.gem-row) { grid-template-columns: repeat(2, minmax(0, 1fr)); }",
+  ":is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow)[data-gem-grid-columns='2'] .gem-row:is(.gem-section__grid, [class*='__grid']):not(.gem-row .gem-row) { --gem-row-cols: 2; --gem-row-cols-md: 2; --gem-row-tracks: initial; --gem-row-tracks-md: initial; }",
+  ":is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow)[data-gem-grid-columns='3'] :is(.gem-section__grid, [class*='__grid']):not(.gem-row) { grid-template-columns: repeat(3, minmax(0, 1fr)); }",
+  ":is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow)[data-gem-grid-columns='3'] .gem-row:is(.gem-section__grid, [class*='__grid']):not(.gem-row .gem-row) { --gem-row-cols: 3; --gem-row-cols-md: 3; --gem-row-tracks: initial; --gem-row-tracks-md: initial; }",
+  ":is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow)[data-gem-grid-columns='4'] :is(.gem-section__grid, [class*='__grid']):not(.gem-row) { grid-template-columns: repeat(4, minmax(0, 1fr)); }",
+  ":is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow)[data-gem-grid-columns='4'] .gem-row:is(.gem-section__grid, [class*='__grid']):not(.gem-row .gem-row) { --gem-row-cols: 4; --gem-row-cols-md: 4; --gem-row-tracks: initial; --gem-row-tracks-md: initial; }"
 ];
 var GEM_GRID_COLUMNS_ROW_KNOB_CSS = GEM_GRID_COLUMNS_KNOB_CSS_LINES.filter((line) => line.includes(" .gem-row:is(")).join("\n");
 
@@ -522,12 +747,111 @@ var countdownPluginRegistrationLines = [
   "      const targetNode = timer.querySelector && timer.querySelector(selector);",
   "      if (targetNode) targetNode.textContent = pad(value);",
   "    };",
+  // Relative mode: `data-gem-countdown-duration="N"` counts N seconds for THIS shopper instead of running to a
+  // calendar deadline (a popup offer: "this code is yours for 1:00"). `data-gem-countdown-start` says when the N
+  // seconds begin: "mount" (default) at bind; "visible" only while the timer is on screen, which is what a popup
+  // wants: hidden until the popup opens, paused while the shopper has it closed or has moved past the step that
+  // holds it, and no race with the open event (this plugin loads on `viewport`, so it can bind after a popup
+  // that opened at once); any other value is an event name heard on the timer's section. Readouts:
+  // [data-gem-countdown-days|hours|minutes|seconds] (two digits) and [data-gem-countdown-clock] ("1:00", "1:02:05").
+  // At zero the TIMER gets data-gem-countdown-ended="true" and a bubbling gem:countdown:complete leaves it, so
+  // the section that owns the offer can end it. The band is NOT marked: this ending belongs to one shopper, and
+  // the band rule above (data-gem-countdown-end) removes a band from the store for everyone.
+  "    const clockText = (s) => {",
+  "      const h = Math.floor(s / 3600), m = Math.floor((s % 3600) / 60), sec = s % 60;",
+  "      return (h ? h + ':' + pad(m) : String(m)) + ':' + pad(sec);",
+  "    };",
+  "    const bindDuration = (timer, total) => {",
+  "      const scope = (timer.closest && timer.closest('[data-gem-section-id]')) || document;",
+  "      const mode = String(timer.getAttribute('data-gem-countdown-start') || 'mount').trim() || 'mount';",
+  "      const stopEvent = String(timer.getAttribute('data-gem-countdown-stop') || '').trim();",
+  "      let left = total * 1000;",
+  "      let endAt = 0;",
+  "      let handle = null;",
+  "      let state = 'idle';",
+  // gem:countdown:start means the N seconds began: once. A visible-mode timer pauses and resumes as it leaves and
+  // re-enters the screen, and each resume used to announce a new start (gemboss PR #3758 review, item 7).
+  "      let started = false;",
+  // The visible-mode observer, released as soon as the timer can no longer run (complete or stopped), not at the
+  // next intersection change after it.
+  "      let observer = null;",
+  "      const release = () => { if (observer) { observer.disconnect(); observer = null; } };",
+  "      const detail = () => ({ source: 'gem-runtime', id: timer.id || undefined, mode: 'duration', duration: total, remainingSeconds: Math.max(0, Math.ceil(left / 1000)) });",
+  "      const render = () => {",
+  "        const s = Math.max(0, Math.ceil(left / 1000));",
+  "        timer.dataset.gemCountdownState = state;",
+  "        timer.dataset.gemCountdownRemainingSeconds = String(s);",
+  "        write(timer, '[data-gem-countdown-days]', Math.floor(s / 86400));",
+  "        write(timer, '[data-gem-countdown-hours]', Math.floor((s % 86400) / 3600));",
+  "        write(timer, '[data-gem-countdown-minutes]', Math.floor((s % 3600) / 60));",
+  "        write(timer, '[data-gem-countdown-seconds]', s % 60);",
+  "        const readout = timer.querySelector && timer.querySelector('[data-gem-countdown-clock]');",
+  "        if (readout) readout.textContent = clockText(s);",
+  "      };",
+  "      const halt = () => { if (handle !== null && target.clearInterval) target.clearInterval(handle); handle = null; };",
+  "      const finish = () => {",
+  "        halt();",
+  "        release();",
+  "        left = 0;",
+  "        state = 'complete';",
+  "        render();",
+  "        timer.setAttribute('data-gem-countdown-ended', 'true');",
+  // One event, not two: dispatched from the timer it bubbles to the document; api.emit would add a second
+  // document event. Without a dispatchable timer (tests, detached nodes) fall back to api.emit.
+  "        if (timer.dispatchEvent && timer.isConnected !== false) {",
+  "          timer.dispatchEvent(new CustomEvent('gem:countdown:complete', { bubbles: true, detail: detail() }));",
+  "          for (const callback of api.listeners['gem:countdown:complete'] || []) callback(detail());",
+  "        } else api.emit('gem:countdown:complete', detail());",
+  "      };",
+  "      const tick = () => { left = endAt - Date.now(); if (left <= 0) finish(); else render(); };",
+  "      const run = () => {",
+  "        if (state === 'running' || state === 'complete' || state === 'stopped') return;",
+  "        state = 'running';",
+  "        endAt = Date.now() + left;",
+  "        render();",
+  "        if (target.setInterval) handle = target.setInterval(tick, 250);",
+  "        if (!started) { started = true; api.emit('gem:countdown:start', detail()); }",
+  "      };",
+  "      const pause = (next) => {",
+  "        if (state === 'running') { left = Math.max(0, endAt - Date.now()); halt(); }",
+  "        if (state === 'complete' || state === 'stopped') return;",
+  "        state = next;",
+  "        if (next === 'stopped') release();",
+  "        render();",
+  "      };",
+  "      render();",
+  "      if (stopEvent && canListen(scope)) scope.addEventListener(stopEvent, () => pause('stopped'));",
+  "      if (mode === 'visible' && target.IntersectionObserver) {",
+  "        observer = new target.IntersectionObserver((entries) => {",
+  "          for (const entry of entries) entry.isIntersecting ? run() : pause('paused');",
+  "        });",
+  "        observer.observe(timer);",
+  "      } else if (mode === 'mount' || mode === 'visible') run();",
+  "      else if (canListen(scope)) scope.addEventListener(mode, run);",
+  "    };",
   "    timers.forEach((timer) => {",
   "      if (!mark(timer, 'countdown')) return;",
+  "      const duration = Number(timer.getAttribute && timer.getAttribute('data-gem-countdown-duration'));",
+  "      if (Number.isFinite(duration) && duration > 0) {",
+  "        bindDuration(timer, Math.min(Math.round(duration), 86400));",
+  "        bound += 1;",
+  "        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;",
+  // Two readout schemes, one countdown (gem-framework 0.8.0). The runtime's own cells are
+  // [data-gem-countdown-days|hours|minutes|seconds]; the Liquid theme's initCountdown and gemsite write
+  // [data-gem-cd-days|hours|mins|secs] (gemsite CountdownBannerOfferBar.tsx). Both are written; a cell the markup
+  // does not carry is skipped. The readout ticks every second only when it shows seconds, else once a minute ON the
+  // minute of the remaining time (0.8.2): the next update is set for the instant the minute digit changes,
+  // (remaining % 60000) + a few ms, and re-aimed from the clock each time, so the digit is never a minute late.
+  // In the last minute the next change IS the end, so the chain aims at the end itself and stops there: nothing is
+  // left scheduled after it, and a deadline too far off for the one-shot end timer below still ends on time.
+  // A once-a-minute interval from mount time (0.8.0, 0.8.1) let it lag the true remaining time by up to 59 s.
+  "      const hasSecondsCell = Boolean(timer.querySelector && (timer.querySelector('[data-gem-cd-secs]') || timer.querySelector('[data-gem-countdown-seconds]')));",
   "      let handle = null;",
+  "      let announced = '';",
   "      const update = () => {",
   "        if (!Number.isFinite(targetTime)) {",
   "          timer.dataset.gemCountdownState = 'invalid';",
@@ -538,20 +862,43 @@ var countdownPluginRegistrationLines = [
   "        const days = Math.floor(remainingSeconds / 86400);",
   "        const hours = Math.floor((remainingSeconds % 86400) / 3600);",
   "        const minutes = Math.floor((remainingSeconds % 3600) / 60);",
+  "        const seconds = remainingSeconds % 60;",
+  // ONE end state: data-gem-countdown-state="complete" (the runtime's word, same as the event
+  // gem:countdown:complete and the duration timer). gemsite's port wrote "ended"; its meaning travels as the
+  // attribute data-gem-countdown-ended="true" on the timer, the same mark a duration timer gets at zero. A timer
+  // that is itself a section root is left to the band rule above, so it never hides a band that does not own a deadline.
   "        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);",
+  "        write(timer, '[data-gem-countdown-seconds]', seconds);",
+  "        write(timer, '[data-gem-cd-days]', days);",
+  "        write(timer, '[data-gem-cd-hours]', hours);",
+  "        write(timer, '[data-gem-cd-mins]', minutes);",
+  "        write(timer, '[data-gem-cd-secs]', seconds);",
   "        if (ms <= 0) {",
   "          if (band) band.setAttribute('data-gem-countdown-ended', 'true');",
+  "          if (timer.setAttribute && !(timer.hasAttribute && timer.hasAttribute('data-gem-section-id'))) timer.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 });",
+  // start: once a minute as before, but a per-second readout announces it once; complete: once.
+  "        const event = ms > 0 ? 'gem:countdown:start' : 'gem:countdown:complete';",
+  "        if (event === announced && (event === 'gem:countdown:complete' || hasSecondsCell)) return;",
+  "        announced = event;",
+  "        api.emit(event, { source: 'gem-runtime', id: timer.id || undefined, remainingSeconds });",
+  "      };",
+  "      const onTheMinute = () => {",
+  "        const ms = targetTime - Date.now();",
+  "        if (!(ms > 0) || !target.setTimeout) return;",
+  "        target.setTimeout(() => { update(); onTheMinute(); }, Math.min((ms % 60000) + 5, ms));",
   "      };",
   "      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
+  "      if (Number.isFinite(targetTime) && targetTime - Date.now() > 0) {",
+  "        if (!hasSecondsCell) onTheMinute();",
+  "        else if (target.setInterval) handle = target.setInterval(update, 1000);",
+  "      }",
+  // A minute 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);",
@@ -592,7 +939,9 @@ var canonicalCssVariableNames = /* @__PURE__ */ new Set([
   "--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
+  ...GEM_ROW_CSS_VARIABLES,
+  // The form set's variables (form-set.ts): set from a plan's `tokens.form`, read by fields under [data-gem-form-set].
+  ...GEM_FORM_CSS_VARIABLES
 ]);
 var TOKENIZED_PROPERTIES = [
   "background",
@@ -997,6 +1346,67 @@ var PROMISE_VI_PARTS = {
   moneyBack: `${VI_START}(?<!kh\xF4ng(?:\\s+(?:\u0111\u01B0\u1EE3c|th\u1EC3))?\\s)(?:nh\u1EADn|ho\xE0n|tr\u1EA3|g\u1EEDi)\\s+l\u1EA1i\\s+(?:(?:to\xE0n b\u1ED9|\u0111\u1EE7|\u0111\u1EA7y \u0111\u1EE7|100\\s*%)\\s+)?(?:s\u1ED1\\s+)?ti\u1EC1n(?!\\s+(?:th\u1EEBa|th\u1ED1i|l\u1EBB))${VI_END}`
 };
 var PROMISE_VI = new RegExp(Object.values(PROMISE_VI_PARTS).join("|"), "iu");
+var SHIP = String.raw`(?:shipping|delivery)`;
+var MONEY = String.raw`(?:fees?|costs?|charges?)`;
+var TAIL = String.raw`(?:\s+(?:apply(?:\s+to\s+(?:this|your)\s+order)?|at\s+checkout|on\s+(?:this|your|every)\s+order|for\s+members|ever|will\s+be\s+charged))?`;
+var LEAD = String.raw`(?:(?:plus|and|also|absolutely|with|yes|so|oh,?\s+and)[,!]?\s+)?`;
+var VI_SHIP_WORD = String.raw`(?:ship|vận chuyển|giao hàng)`;
+var SHIPPING_ZERO_SENTENCES = {
+  noExtraShipping: new RegExp(String.raw`^${LEAD}no\s+(?:extra|additional|added)\s+${SHIP}(?:\s+${MONEY})?${TAIL}$`, "i"),
+  noExtraChargeForShipping: new RegExp(String.raw`^${LEAD}no\s+(?:extra|additional|added)\s+${MONEY}\s+for\s+${SHIP}${TAIL}$`, "i"),
+  noShippingFees: new RegExp(String.raw`^${LEAD}no\s+${SHIP}\s+${MONEY}${TAIL}$`, "i"),
+  zeroShippingFees: new RegExp(String.raw`^${LEAD}zero\s+${SHIP}\s+${MONEY}${TAIL}$`, "i"),
+  // "Shipping included", "Shipping costs: included", "Shipping — included". "Total: Shipping included" không khớp: câu bắt
+  // đầu bằng "Total" (nhãn giỏ, cố ý sạch).
+  shippingIncluded: new RegExp(String.raw`^${LEAD}(?:(?:taxes?|duties)\s+(?:and|&)\s+)?${SHIP}(?:\s+(?:and|&)\s+handling)?(?:\s+${MONEY})?(?:['’]s|\s+(?:is|are)|\s*[:—–-])?\s+(?:always\s+)?included(?:\s+in\s+(?:the\s+)?price)?$`, "i"),
+  // Chỉ "Includes" (ngôi thứ ba, một lời mô tả gói hàng). "Include shipping" là nhãn tuỳ chọn / công tắc.
+  includesShipping: new RegExp(String.raw`^includes\s+${SHIP}$`, "i"),
+  // "Không cần trả thêm phí giao hàng", "Không mất phí ship", "Không thu phí vận chuyển". KHÔNG nhận "không trả phí ship…"
+  // trần ("Shop không trả phí ship đổi trả" là lời từ chối) và "không tính phí…" (nhãn giá: CHƯA tính phí ship).
+  viNoFee: new RegExp(String.raw`^không\s+(?:cần\s+(?:trả|mất|tốn)|mất|thu|tốn)\s+(?:thêm\s+)?(?:phí|tiền)\s+${VI_SHIP_WORD}$`, "iu"),
+  viNoFeeBare: new RegExp(String.raw`^không\s+(?:phí|tiền)\s+${VI_SHIP_WORD}$`, "iu"),
+  // "Giá đã bao gồm phí ship", "Đã gồm phí ship". BẮT BUỘC "đã": "Bao gồm phí ship" trần là nhãn tuỳ chọn (như "Include
+  // shipping" bên tiếng Anh). "Chưa/không bao gồm…" không khớp vì câu phải BẮT ĐẦU bằng các chữ này.
+  viIncludedFee: new RegExp(String.raw`^(?:giá(?:\s+(?:sản phẩm|trên))?\s+)?đã\s+(?:bao\s+)?gồm\s+(?:cả\s+)?phí\s+${VI_SHIP_WORD}$`, "iu"),
+  // "Phí ship đã bao gồm" (trong giá). "Phí ship đã bao gồm VAT" không khớp trọn câu: phí đó CÓ, nó gồm thứ khác.
+  viFeeIncluded: new RegExp(String.raw`^phí\s+${VI_SHIP_WORD}\s+đã\s+(?:được\s+)?(?:bao\s+)?gồm(?:\s+trong\s+giá)?$`, "iu")
+};
+var DECOR = String.raw`[\s\-*+>•·–—✓✔☑\p{Extended_Pictographic}️]`;
+var DECOR_START = new RegExp(`^${DECOR}+`, "u");
+var DECOR_END = new RegExp(String.raw`(?:${DECOR}|[.!,;:)])+$`, "u");
+var ABBREV = /\b(?:e\.g|i\.e|approx|ex|etc|vs|incl|excl|mr|mrs|ms|dr)\.$/iu;
+var LABEL_LEAD = /^(?:(?:grand\s+|sub\s*)?total|subtotal|price|unless\s+noted|tổng(?:\s+cộng)?|tạm\s+tính|giá)\b/iu;
+var QUESTION_END = /[?？❓❔][\s\p{Extended_Pictographic}\uFE0F]*$/u;
+var MENTIONS_SHIPPING = /ship|deliver|vận chuyển|giao hàng/iu;
+var SHIPPING_ZERO_ENTRIES = Object.entries(SHIPPING_ZERO_SENTENCES);
+function sentencesOf(text) {
+  const out = [];
+  for (const line of text.split(/\n+|\s[|•·]\s|\s(?=[✓✔☑]\s)/u)) {
+    let cur = "";
+    for (const piece of line.split(/(?<=[.!?;])\s+/u)) {
+      cur = cur ? `${cur} ${piece}` : piece;
+      if (!ABBREV.test(cur)) {
+        out.push(cur);
+        cur = "";
+      }
+    }
+    if (cur) out.push(cur);
+  }
+  return out.map((x) => x.trim()).filter(Boolean);
+}
+function shippingZeroPromiseIn(raw) {
+  if (!MENTIONS_SHIPPING.test(raw)) return null;
+  const text = raw.normalize("NFC").replace(/\\n/g, "\n").replace(/\\(['"’])/g, "$1");
+  for (const sentence of sentencesOf(text)) {
+    if (QUESTION_END.test(sentence)) continue;
+    const whole = sentence.replace(DECOR_START, "").replace(DECOR_END, "").trim();
+    const clauses = LABEL_LEAD.test(whole) ? [whole] : [whole, ...whole.split(/,\s+|\s+[—–]\s+/u)].map((c) => c.replace(DECOR_START, "").replace(DECOR_END, "").trim());
+    for (const clause of clauses) {
+      for (const [name, re] of SHIPPING_ZERO_ENTRIES) if (re.test(clause)) return name;
+    }
+  }
+  return null;
+}
 var INVENTED_PERSON_VI = /^\s*[-–—]?\s*(?:(?:Chị|Anh|Cô|Chú|Bác|Em|Bạn|Ông|Bà|Nguyễn|Trần|Lê|Phạm|Hoàng|Huỳnh|Phan|Vũ|Võ|Đặng|Bùi|Đỗ|Ngô|Dương|Đinh|Trương|Đoàn|Lương|Trịnh|Lý)(?:\s+\p{Lu}\p{Ll}*){1,3}\s*(?:,|\(|\s[-–—·])\s*\S|(?:Nguyễn|Trần|Lê|Phạm|Hoàng|Huỳnh|Phan|Vũ|Võ|Đặng|Bùi|Đỗ|Ngô|Dương|Đinh|Trương|Đoàn|Lương|Trịnh|Lý)\s+(?:Thị|Văn)(?:\s+\p{Lu}\p{Ll}*){1,2}\s*$)/u;
 var PRICE_K_VI = /(?<![\p{L}\p{N}.,])\d{2,3}(?:[.,]\d{3})*\s?k(?![\p{L}\p{N}])/u;
 var DISPLAY_QUANTITY = /(_to_show|_per_page|_per_row|_limit|_max|_visible|_columns?)$/;
@@ -1052,7 +1462,7 @@ function claimIn(raw) {
   if (INVENTED_PERSON.test(`"${text}"`) || INVENTED_PERSON_VI.test(text)) return "invented person";
   if (isQuestion(text)) return PRICE_ANY.test(text) || PRICE_K_VI.test(text) ? "promise the merchant never made" : null;
   if (PRICE_K_VI.test(text) && /^\s*\d[\d.,]*\s?k\s*\+?\s*$/.test(text)) return "hardcoded figure";
-  if (PROMISE.test(text) || PROMISE_VI.test(text) || PRICE_K_VI.test(text)) return "promise the merchant never made";
+  if (PROMISE.test(text) || PROMISE_VI.test(text) || shippingZeroPromiseIn(text) || PRICE_K_VI.test(text)) return "promise the merchant never made";
   return null;
 }
 function demoInvents(value) {
@@ -1294,6 +1704,7 @@ export {
   requiredArtifactPaths,
   sectionClassesIn,
   sectionLibraryIdOf,
+  shippingZeroPromiseIn,
   slotContractDrift,
   slotSourceFromElementTree,
   slotsReadBy,