@gemboss/gem-framework 0.18.11 → 0.18.13

package/README.md

@@ -93,6 +93,16 @@ Từ 0.8.2 mỗi module có `.d.ts` cạnh nó (`mount(root?: ParentNode | null,
 
 ## Nhật ký thay đổi
 
+- **0.18.13** (20/10/2026): ô nhập, select, textarea có trạng thái hover và lỗi (§9.2; GemFactory Framework › Controls đo cả
+  hai là INERT). Hover dày viền thêm 1px theo màu chữ của ô (vòng theo hộp; ô gạch chân và ô tô nền chỉ dày cạnh đáy), chỉ trên
+  máy có chuột (`@media (hover: hover)`), không áp cho ô disabled hay ô lỗi. Lỗi (`aria-invalid="true"`, do form đặt) tô viền
+  bằng `--gem-color-danger` trộn 70/30 với màu chữ của ô: đạt 3:1 trở lên cả trên ô trắng lẫn ô gạch chân trong băng tối/accent
+  (màu danger thuần chỉ 2,4:1 và 1,8:1 ở đó). Áp cho mọi store, có hay không có bộ form.
+- **0.18.12** (20/10/2026): control nền thành một bộ (đo trên GemFactory Framework › Controls). Ô số lượng là một field của
+  bộ form: hộp theo chiều cao, viền và góc của bộ (góc tối đa 22px, bộ pill ra ô số lượng tròn), −/+ và con số theo nền và cỡ
+  chữ của bộ, shape underline không tô ô (`GEM_FORM_SET_CSS`). Con số nằm giữa ô (`<output>` lệch lên 8–9px). Luật sàn của Dawn
+  (`min-height: 4.5rem`) không còn gọi `.gem-input`: trên gốc chữ 16px nó là 72px, ô nhập cao gấp rưỡi select khi không có bộ
+  form; `.gem-input` theo sàn của primitive như mọi field.
 - **0.18.11** (19/10/2026): `.gem-stars` nhận sao SVG (gap #45 của GemFactory). Hàng sao rộng đúng bằng các ngôi sao
   (`width: max-content`), và `svg` / `img` trong hàng sao không bị luật nền `max-width: 100%` bóp. Trước đó sao SVG trong
   lớp tô bị co theo bề rộng lớp tô (4,2 vẽ thành năm sao ép), và hàng sao là item bị giãn của grid / flex thì phần trăm tô

package/dist/SOURCE.json

@@ -1,7 +1,7 @@
 {
   "package": "@gemboss/gem-framework",
-  "version": "0.18.11",
-  "gemtheme_sha": "8ba104ab54bc3c5e5e2e837a5a6a83a2d3fd14c4",
+  "version": "0.18.13",
+  "gemtheme_sha": "74aee046a4ea5b333966a87c337ec1d855508775",
   "gemtheme_dirty": false,
-  "framework_version": "0.18.11"
+  "framework_version": "0.18.13"
 }

package/dist/gem-framework.css

@@ -412,6 +412,30 @@ a {
   block-size: var(--gem-checkbox-size);
   accent-color: var(--gem-checkbox-accent);
 }
+[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;
+}
+@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;
 }
@@ -924,6 +948,10 @@ a {
   color: var(--gem-color-text);
   text-align: center;
 }
+.gem-quantity-input__field {
+  display: grid;
+  place-items: center;
+}
 .gem-quantity-input__button {
   font-weight: 750;
 }
@@ -1793,7 +1821,7 @@ sticky-header.header-wrapper {
 .newsletter-form__field-wrapper, .field {
   position: relative;
 }
-.field__input, .field input, .gem-input {
+.field__input, .field input {
   min-height: 4.5rem;
   border-radius: var(--inputs-radius, 0);
 }

package/dist/index.js

@@ -435,7 +435,7 @@ function gemButtonGradientEndCss(accent = "var(--gem-color-accent)", accentText
 }
 
 // ../../packages/gem-framework/src/tokens.ts
-var gemFrameworkVersion = "0.18.11";
+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;";
@@ -1721,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");
@@ -2169,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%;",
@@ -2208,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;",
     "}",
@@ -2767,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;",
     "}",
@@ -4363,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);",
     "}",

package/dist/primitives.css

@@ -321,6 +321,30 @@ a {
   block-size: var(--gem-checkbox-size);
   accent-color: var(--gem-checkbox-accent);
 }
+[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;
+}
+@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;
 }
@@ -833,6 +857,10 @@ a {
   color: var(--gem-color-text);
   text-align: center;
 }
+.gem-quantity-input__field {
+  display: grid;
+  place-items: center;
+}
 .gem-quantity-input__button {
   font-weight: 750;
 }

package/dist/section-gate.js

@@ -1262,6 +1262,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");
@@ -1703,8 +1720,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%;",
@@ -1742,6 +1760,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;",
     "}",
@@ -2301,6 +2345,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;",
     "}",
@@ -3897,7 +3947,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);",
     "}",

package/dist/sections.css

@@ -163,7 +163,7 @@ sticky-header.header-wrapper {
 .newsletter-form__field-wrapper, .field {
   position: relative;
 }
-.field__input, .field input, .gem-input {
+.field__input, .field input {
   min-height: 4.5rem;
   border-radius: var(--inputs-radius, 0);
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gemboss/gem-framework",
-  "version": "0.18.11",
+  "version": "0.18.13",
   "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",