@gemboss/gem-framework 0.18.11 → 0.18.15

package/README.md

@@ -93,6 +93,44 @@ Từ 0.8.2 mỗi module có `.d.ts` cạnh nó (`mount(root?: ParentNode | null,
 
 ## Nhật ký thay đổi
 
+- **0.18.15** (20/10/2026): plugin `reviews`, engine danh sách review (GemFactory gap #44). 8 section product-reviews của
+  GemFactory mỗi cái mang một bản riêng của cùng một lõi trong behavior.js (14–27 KB mỗi cái); nay lõi đó là MỘT plugin:
+  `gem-runtime.js` (load `idle`) hoặc `import { mount } from "@gemboss/gem-framework/plugins/reviews"`. Section xin engine bằng
+  `data-rv-root` trên gốc của nó; section không có dấu đó (vẫn mang lõi riêng) không bị gắn, nên lõi riêng và plugin không chạy
+  chồng. Hợp đồng chỉ là thuộc tính `data-rv-*` (đầy đủ ở đầu `reviews-engine.ts`):
+  - Lõi: sort (menu hoặc select, 13 khoá), lọc sao / có ảnh / chủ đề / quốc gia / tìm (trễ 180 ms) / xoá lọc, trang số (một hay
+    nhiều thanh, cửa sổ cố định hoặc `1 2 3 4 … n`) hoặc xem thêm, đếm, đọc thêm, menu, sheet lọc, hữu ích một lần mỗi review
+    (`gem:review:vote` trên hub và trên window), lightbox.
+  - Chỗ 8 section khác nhau thành thuộc tính: thu gọn N review đầu (`data-rv-collapsed` + `data-rv-expand`), Show N mỗi trang,
+    nhãn trang, sao giữ khi bấm lại (`data-rv-star-keep`), chip bộ lọc đang bật, sheet có Apply / Reset, vùng bật tắt và vùng tự
+    bỏ lọc khi đóng, dải trượt, tô chữ tìm thấy, chữ số ít (`data-rv-count-one`, `data-rv-status-one`), số theo locale
+    (`data-rv-locale`), lightbox (đầu cuối ẩn / mờ / vòng, tập ảnh theo review / nhóm / danh sách JSON của thẻ, bỏ trùng, ảnh kế
+    ló ra, vuốt, nền mờ, bỏ phiếu từ trong lightbox hoặc chỉ xem).
+  - Khác bản cũ có chủ đích: chọn một mục trong menu thì focus về nút của menu (bản cũ để focus rơi xuống `<body>`); cửa sổ trang
+    cố định không còn vẽ dấu … trước trang đầu cửa sổ.
+  - Còn ở behavior của từng section: masonry, carousel vòng vô tận + tự chạy, hộp đọc cả review, dịch, sắp xếp hỏi đáp, thẻ chen
+    giữa. Chúng vẽ lại theo `gem:reviews:render` (phát trên hub VÀ trên gốc section), và nhờ engine vẽ lại bằng
+    `gem:reviews:refresh` trên gốc.
+  Đối chiếu trong Chromium trên markup thật của cả 8 section, cùng một chuỗi thao tác (sort, sao, lọc, trang, xem thêm, đọc thêm,
+  hữu ích, lightbox, menu; 1280 và 390), behavior.js gốc so với engine: trạng thái trùng từng bước, trừ khác biệt có chủ đích ở trên
+  và phần còn ở section.
+- **0.18.14** (20/10/2026): lớp phủ tối là một token (GemFactory gap #17). Khoá màu TUỲ CHỌN `color.scrim` (phát thành
+  `--gem-color-scrim`) là màu lớp phủ ở độ đậm tối đa; nền sau dialog popup (55%), lớp tối trên ảnh nền popup (35% → 60%), nền sau
+  cart drawer (36%) và lớp tối trên ảnh của hero mặc định (32%) đọc nó qua `gemScrim(N)` = `color-mix(in srgb,
+  var(--gem-color-scrim, #000) N%, transparent)`. Không đặt thì ra ĐÚNG như trước (đo Chromium: 5/5 độ đậm trùng từng giá trị
+  pixel với màu viết cứng cũ); preset đặt màu có alpha (`rgb(0 0 0 / .7)`) thì mọi lớp phủ nhạt cùng tỉ lệ. Băng dark / accent
+  không đảo khoá này. Cảnh báo `untokenized_visual_value` trên một màu đen có alpha giờ chỉ thẳng cách viết bằng token, giữ đúng
+  độ đậm.
+- **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.15",
+  "gemtheme_sha": "998fe4dc3096e9bc0a8e9d39e23b27081138b2c9",
   "gemtheme_dirty": false,
-  "framework_version": "0.18.11"
+  "framework_version": "0.18.15"
 }

package/dist/editions.js

@@ -83,6 +83,8 @@ var GEM_MOTION_SCALE_DEFAULTS = {
   blur: "8px"
 };
 var optionalGemTokenKeys = {
+  // Lớp phủ tối (GemFactory gap #17): xem GEM_SCRIM_FALLBACK / gemScrim bên dưới.
+  color: ["scrim"],
   typography: [...GEM_TYPE_RAMP_KEYS, ...GEM_LINE_HEIGHT_TOKEN_KEYS, ...GEM_BUTTON_TOKEN_KEYS.typography],
   spacing: [...Object.keys(GEM_DERIVED_SPACE_STEPS), ...GEM_PHONE_TOKEN_TARGETS.spacing.map((k) => `${k}Mobile`)],
   layout: GEM_PHONE_TOKEN_TARGETS.layout.map((k) => `${k}Mobile`),

package/dist/gem-framework.css

@@ -9,6 +9,7 @@
   --gem-color-success: #008060;
   --gem-color-warning: #9a661a;
   --gem-color-danger: #d72c0d;
+  --gem-color-scrim: #000;
   --gem-font-body: Inter, system-ui, sans-serif;
   --gem-font-heading: Inter, system-ui, sans-serif;
   --gem-font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
@@ -412,6 +413,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 +949,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;
 }
@@ -1267,7 +1296,7 @@ a {
 .gem-cart-drawer__overlay {
   position: fixed;
   inset: 0;
-  background: rgba(0, 0, 0, 0.36);
+  background: color-mix(in srgb, var(--gem-color-scrim, #000) 36%, transparent);
 }
 @keyframes gem-cart-drawer-panel-in { from { translate: calc(var(--gem-drawer-offset, 24px) * var(--gem-drawer-dir, 1)) 0; opacity: 0; } }
 @keyframes gem-cart-drawer-overlay-in { from { opacity: 0; } }
@@ -1543,7 +1572,7 @@ a {
   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__dialog::backdrop { background: color-mix(in srgb, var(--gem-color-scrim, #000) 55%, transparent); }
 .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; }
@@ -1566,7 +1595,7 @@ a {
 .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);
 }
-.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__media::after { content: ''; position: absolute; inset: 0; background: linear-gradient(color-mix(in srgb, var(--gem-color-scrim, #000) 35%, transparent), color-mix(in srgb, var(--gem-color-scrim, #000) 60%, transparent)); }
 .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 {
@@ -1613,10 +1642,10 @@ a {
   .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; }
 }
-: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'] { position: fixed; inset: 0; z-index: 1000; padding: 0; background: color-mix(in srgb, var(--gem-color-scrim, #000) 55%, transparent); }
 :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); }
+:root:has([data-gem-canvas]) .gem-popup-shell[data-gem-popup-preview='true'] { padding: var(--gem-space-xl) var(--gem-layout-gutter); background: color-mix(in srgb, var(--gem-color-scrim, #000) 55%, transparent); }
 @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; }
@@ -1793,7 +1822,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);
 }
@@ -2446,7 +2475,7 @@ main > .gem-section:first-child { padding-top: 0; }
 .gem-hero-banner--default { position: relative; overflow: hidden; padding: 0; color: white; place-items: stretch; }
 .gem-hero-banner--default .gem-hero-banner__inner { position: static; width: 100%; min-height: 720px; height: 100%; display: grid; align-items: end; justify-items: center; padding-bottom: 0; }
 .gem-hero-banner--default .gem-hero-banner__media { position: absolute; inset: 0; z-index: 0; }
-.gem-hero-banner--default .gem-hero-banner__media::after { content: ''; position: absolute; inset: 0; background: rgb(0 0 0 / 32%); }
+.gem-hero-banner--default .gem-hero-banner__media::after { content: ''; position: absolute; inset: 0; background: color-mix(in srgb, var(--gem-color-scrim, #000) 32%, transparent); }
 .gem-hero-banner--default .gem-hero-banner__image, .gem-hero-banner--default .gem-hero-banner__placeholder { width: 100%; height: 100%; object-fit: cover; display: block; }
 .gem-hero-banner--default .gem-hero-banner__copy { position: absolute; z-index: 1; left: 50%; bottom: 50px; transform: translateX(-50%); width: min(702px, 100%); margin: 0; padding: 40px 0; text-align: center; display: block; }
 .gem-hero-banner--default .gem-section__heading { margin: 0; font-size: 52px; line-height: 67.6px; color: currentColor; }