@gemboss/ui 0.1.1 → 0.2.1

package/src/ui.css

@@ -31,6 +31,10 @@
   --ui-accent-soft: var(--gemboss-active-bg, #f0f1f4);   /* tinted bg for a selected/active state */
   --ui-accent-strong: var(--gemboss-active-fg, #1b1c1e); /* readable accent text ON --ui-accent-soft */
   --ui-text-strong: var(--gemboss-text-strong, #1b1c1e);
+  /* Chữ theo tông (ui-metric, …). Nền tối của admin ánh xạ lại bên dưới để còn đọc được. */
+  --ui-success-fg: var(--gemboss-success);
+  --ui-warning-fg: var(--gemboss-primary-dark);
+  --ui-danger-fg: var(--gemboss-danger-strong);
   --ui-focus: var(--gemboss-primary, #1b1c1e);
   --ui-radius-sm: 6px;
   --ui-radius-md: 8px;
@@ -90,6 +94,10 @@
   --ui-accent-soft: var(--adm-accent-soft);
   --ui-accent-strong: var(--adm-accent-fg);
   --ui-text-strong: var(--adm-text-strong);
+  /* Tông trên nền tối #16161a: pha 70% với trắng ⇒ tương phản 6,2 / 9,5 / 4,8 (đo 01/10/2026, review #3609). */
+  --ui-success-fg: color-mix(in srgb, var(--gemboss-success) 70%, #ffffff);
+  --ui-warning-fg: color-mix(in srgb, #c99a2e 70%, #ffffff);
+  --ui-danger-fg: color-mix(in srgb, var(--gemboss-danger-strong) 70%, #ffffff);
   --ui-focus: var(--adm-accent);
 }
 
@@ -120,6 +128,11 @@
   padding: var(--ui-space-4); color: var(--ui-text);
 }
 .ui-card__title { font-size: 14px; font-weight: 600; margin: 0 0 var(--ui-space-2); }
+/* Đầu thẻ có nút: `<div class="ui-card__head"><h2 class="ui-card__title">…</h2><button class="ui-btn">…</button></div>`.
+   Tiêu đề trái, hành động phải, xuống dòng khi hẹp (01/10/2026: partner-radar rel-head / agr). */
+.ui-card__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--ui-space-2); margin-bottom: var(--ui-space-2); }
+.ui-card__head > .ui-card__title { margin: 0; }
+.ui-card__head > :last-child:not(.ui-card__title) { display: flex; flex-wrap: wrap; gap: var(--ui-space-2); }
 
 /* ── Select ──────────────────────────────────────────────────────────────────
    Native <select> reskinned; custom caret as an inline SVG data-URI (caret color
@@ -141,7 +154,7 @@
   background-color: var(--p-color-input-bg-surface-hover, var(--gemboss-field-bg-hover));
 }
 .ui-select:focus { outline: none; }
-.ui-select:focus-visible {
+.ui-select:focus-visible:not(:disabled) {
   outline: 2px solid var(--p-color-border-focus, #005bd3); outline-offset: 1px;
   border-color: var(--p-color-input-border-active, var(--gemboss-field-line-active));
 }
@@ -164,6 +177,85 @@
 }
 .ui-tag--chip.ui-tag--accent { color: var(--adm-accent-fg, var(--ui-accent)); border-color: var(--ui-accent); background: transparent; }
 
+/* Danh sách link dạng chip: `<div class="ui-chips"><a class="ui-tag ui-tag--chip" href>…</a>…</div>` (01/10/2026,
+   partner-radar /competitors: "đã tích hợp với GemPages"). `.ui-tag--chip` vốn là nhãn TĨNH cao ~19px, dưới mức 24px
+   của link trong danh sách (WCAG 2.5.8, §9.1) — visual-gate đo đúng chỗ đó đỏ ở 320 / 390 / 768. Chip là link thì cao
+   ≥ 28px, chữ thường (không mono), có hover + focus-visible; dưới ngón tay là điều khiển, lên 44px (khối coarse dưới).
+   Khe 8px: hai target nhỏ hơn 44px phải cách nhau ≥ 8px. */
+.ui-chips { display: flex; flex-wrap: wrap; gap: var(--ui-space-2, 8px); margin: 0; padding: 0; list-style: none; }
+.ui-chips > a.ui-tag--chip {
+  min-height: 28px; padding: 4px 12px; border-radius: var(--ui-radius-md, 8px);
+  font-family: inherit; font-size: var(--gemboss-fs-caption, 12px); color: var(--ui-text); text-decoration: none;
+}
+.ui-chips > a.ui-tag--chip:hover { background: var(--ui-surface-2); border-color: var(--ui-text-muted); }
+.ui-chips > a.ui-tag--chip:focus-visible { outline: 2px solid var(--p-color-border-focus, #005bd3); outline-offset: 1px; }
+/* Danh sách LỌC dài (chuyên môn, hạng…) dùng ui-chips thay ui-seg: ui-seg không xuống dòng nên tràn ngang ở 320px.
+   Ô đang chọn = `aria-current="page"` (lọc là một URL), cùng tông với ui-seg đang chọn. */
+.ui-chips > a.ui-tag--chip[aria-current="page"] { background: var(--ui-accent-soft); border-color: var(--ui-accent); color: var(--ui-accent-strong); font-weight: 600; }
+
+/* ── Tông màu cho tag: `ui-tag--success | --warning | --danger` (token ngữ nghĩa có sẵn). Trạng thái, nguồn,
+   kết quả kiểm — thay cho màu viết cứng ở từng surface. */
+.ui-tag--success { background: var(--gemboss-success-soft); color: var(--gemboss-success-strong, var(--gemboss-success)); }
+.ui-tag--warning { background: var(--gemboss-warning-soft); color: var(--gemboss-warning); }
+.ui-tag--danger { background: var(--gemboss-danger-soft); color: var(--gemboss-danger-strong, var(--gemboss-danger)); }
+
+/* ── Chữ phụ: `<p class="ui-muted">`, `<span class="ui-muted">` — mô tả, chú thích, dòng meta. Cỡ caption, màu muted.
+   Trước đây mỗi surface tự viết `.muted` (partner-radar: 180 chỗ). */
+.ui-muted { color: var(--ui-text-muted); font-size: var(--gemboss-fs-caption); }
+
+/* ── Tiêu đề trang: `<div class="ui-page-head"><h1>…</h1><p>…</p></div>`. Đưa lên NGUYÊN VĂN từ admin
+   `.gemboss-admin-page-head` (01/10/2026, Chris: một chủ sở hữu; admin dùng bản này). Cố ý không đặt margin cho h1
+   và không dùng flex: admin không reset margin tiêu đề, nên đổi ở đây là đổi khoảng cách của 14 trang admin. */
+.ui-page-head { margin-bottom: 20px; }
+.ui-page-head h1 { color: var(--ui-text-strong); font-size: 22px; font-weight: 650; letter-spacing: -0.01em; }
+.ui-page-head p { color: var(--ui-text-muted); font-size: 14px; margin-top: 4px; }
+
+/* ── Thanh công cụ: `<div class="ui-toolbar">` — ô tìm giãn, điều khiển bám phải, một hàng gọn, xuống dòng khi hẹp.
+   Đưa lên từ admin `.gemboss-admin-toolbar`. Chỉ BỐ CỤC: ô tìm là `gemboss-field gemboss-field--group`. */
+.ui-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 20px; }
+
+/* ── Ô số liệu: `<div class="ui-metrics"><div class="ui-metric"><span class="ui-metric__val">12</span>
+   <span class="ui-metric__lbl">Nhãn</span></div></div>`; tông `ui-metric--success | --warning | --danger`.
+   Đưa lên từ admin `.gemboss-ec-metric` (GemChat). Khác `ui-stat` (viên đếm nhỏ, có thể bấm làm bộ lọc). */
+.ui-metrics { display: flex; flex-wrap: wrap; gap: 8px; margin: 2px 0; }
+.ui-metric { display: flex; flex-direction: column; gap: 1px; min-width: 78px; padding: 8px 12px; background: var(--ui-surface); border: 1px solid var(--ui-border); border-radius: 12px; }
+/* Cả ô là link (`<a class="ui-metric" href>`): vùng chạm là cả ô (~52px), không phải con số 20px bên trong
+   (visual-gate đỏ ở partner-radar /ops 01/10/2026 khi link nằm trong __val). */
+a.ui-metric { text-decoration: none; color: inherit; }
+a.ui-metric:hover { border-color: var(--ui-text-muted); }
+a.ui-metric:focus-visible { outline: 2px solid var(--ui-focus); outline-offset: 1px; }
+.ui-metric__val { font-size: 17px; font-weight: 700; color: var(--ui-text); font-variant-numeric: tabular-nums; line-height: 1.15; }
+.ui-metric__lbl { font-size: var(--gemboss-fs-caption); font-weight: 500; color: var(--ui-text-muted); }
+.ui-metric--success { border-color: color-mix(in srgb, var(--gemboss-success) 40%, transparent); }
+.ui-metric--success .ui-metric__val { color: var(--ui-success-fg); }
+.ui-metric--warning { border-color: color-mix(in srgb, #c99a2e 40%, transparent); }
+.ui-metric--warning .ui-metric__val { color: var(--ui-warning-fg); }
+.ui-metric--danger { border-color: color-mix(in srgb, var(--gemboss-danger-strong) 40%, transparent); }
+.ui-metric--danger .ui-metric__val { color: var(--ui-danger-fg); }
+
+/* ── Cặp nhãn – giá trị: `<dl class="ui-dl"><div><dt>Quốc gia</dt><dd>IL</dd></div>…</dl>` — dữ kiện của một hồ sơ.
+   Lưới tự giãn: mỗi ô ≥ 160px, xuống dòng khi hẹp. */
+.ui-dl { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px 16px; margin: 0; }
+.ui-dl > div { min-width: 0; }
+.ui-dl dt { font-size: var(--gemboss-fs-caption); color: var(--ui-text-muted); }
+.ui-dl dd { margin: 4px 0 0; font-weight: 600; color: var(--ui-text); overflow-wrap: anywhere; }
+
+/* ── Thông báo: `<div class="ui-notice ui-notice--warning">…</div>`. Lỗi tải, cảnh báo cấu hình, việc cần người
+   làm. Mỗi tông mang màu chữ riêng (nền tông luôn sáng, kể cả trong admin tối). Không có tông = ghi chú trung tính.
+   role="status"/"alert" CHỈ khi thông báo xuất hiện sau khi trang đã tải (vùng live); có sẵn lúc tải thì không role. */
+.ui-notice { padding: 12px 16px; border-radius: var(--ui-radius-md); border: 1px solid var(--ui-border); background: var(--ui-surface-2); color: var(--ui-text); font-size: var(--gemboss-fs-body); }
+.ui-notice--warning { background: var(--gemboss-warning-soft); border-color: var(--gemboss-warning-border); color: var(--gemboss-warning); }
+.ui-notice--danger { background: var(--gemboss-danger-soft); border-color: var(--gemboss-danger-border); color: var(--gemboss-danger-strong); }
+.ui-notice--success { background: var(--gemboss-success-soft); border-color: var(--gemboss-success-border); color: var(--gemboss-success-strong); }
+
+/* ── Phân trang: `<nav class="ui-pager" aria-label="Trang"><a href rel="prev"><span aria-hidden="true">‹</span> Trước</a><span aria-current="page">2 / 9</span>
+   <a href rel="next">Sau ›</a></nav>`. Link ≥ 32px (≥ 24px WCAG 2.5.8), 44px dưới ngón tay (khối coarse). */
+.ui-pager { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 16px 0; }
+.ui-pager > a { display: inline-flex; align-items: center; min-height: 32px; padding: 0 12px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-md); color: var(--ui-text); text-decoration: none; font-size: var(--gemboss-fs-body); }
+.ui-pager > a:hover { background: var(--ui-surface-2); }
+.ui-pager > a:focus-visible { outline: 2px solid var(--p-color-border-focus, #005bd3); outline-offset: 1px; }
+.ui-pager > [aria-current="page"] { color: var(--ui-text-muted); font-size: var(--gemboss-fs-caption); }
+
 /* ── Badge ────────────────────────────────────────────────────────────────────
    Uppercase mono pill for a status/label (was gemboss-admin-storage-badge). */
 .ui-badge {
@@ -208,24 +300,50 @@
    consumer belongs in that consumer's chunk (see SettingsDialog.module.css). */
 .ui-modal--lg { position: relative; }
 
+/* The kit's multi-line field joins the ONE field family (01/10/2026, Chris: "form control đồng bộ"):
+   same input-border token, hover and focus ring as `gemboss-field` and `.ui-select`. Before, it drew a
+   lighter --ui-border box at 14px with no focus ring, so on GemFactory's compose form a textarea sat
+   beside selects of a darker border and text fields of a third look (measured on prod). */
 .ui-textarea {
   width: 100%; min-height: 96px; resize: vertical; box-sizing: border-box;
-  background: var(--ui-surface); border: 1px solid var(--ui-border); border-radius: var(--ui-radius-md);
-  padding: 12px; color: var(--ui-text); font-size: 14px; font-family: inherit; outline: none;
+  background: var(--p-color-input-bg-surface, var(--gemboss-field-bg));
+  border: 1px solid var(--p-color-input-border, var(--gemboss-field-line)); border-radius: var(--ui-radius-md);
+  padding: 12px; color: var(--p-color-text, var(--gemboss-field-ink)); font-size: var(--ui-fs-body); line-height: 1.5; font-family: inherit;
+}
+.ui-textarea::placeholder { color: var(--p-color-text-secondary, var(--gemboss-field-placeholder)); }
+.ui-textarea:hover:not(:disabled) {
+  border-color: var(--p-color-input-border-hover, var(--gemboss-field-line-hover));
+  background-color: var(--p-color-input-bg-surface-hover, var(--gemboss-field-bg-hover));
+}
+.ui-textarea:focus { outline: none; }
+.ui-textarea:focus-visible:not(:disabled) {
+  outline: 2px solid var(--p-color-border-focus, #005bd3); outline-offset: 1px;
+  border-color: var(--p-color-input-border-active, var(--gemboss-field-line-active));
+}
+.ui-textarea:disabled { opacity: .5; cursor: not-allowed; }
+/* On a PHONE-WIDTH screen every field of the family reads 16px (iOS zooms the page on tap below that)
+   and a select is a 44px target — by WIDTH, as `gemboss-field` does, because a desktop browser at 320px
+   still reports pointer: fine. Measured on GemFactory at 390px before this: select 13px, textarea 14px. */
+@media (max-width: 47.9975em) {
+  .ui-select.ui-select, .ui-textarea { font-size: 16px; }
+  /* Height only for the full select: `--slim` is a density decision (table rows), as the coarse block keeps it. */
+  .ui-select:not(.ui-select--slim) { min-height: 44px; }
 }
-.ui-textarea:focus { border-color: var(--ui-accent); }
 
 /* ── Segmented control ────────────────────────────────────────────────────────
    Grouped toggle: icon squares (.ui-seg button) or text tabs (.is-text). The
    selected segment uses the accent-soft state. */
 .ui-seg { display: inline-flex; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-md); overflow: hidden; }
-.ui-seg button {
+.ui-seg :is(button, a) {
   display: inline-grid; place-items: center; width: 36px; height: 36px;
   border: 0; background: transparent; color: var(--ui-text-muted); cursor: pointer; font-family: inherit;
 }
-.ui-seg button.is-text { width: auto; padding: 0 12px; font-size: var(--ui-fs-body); font-weight: 500; }
-.ui-seg button + button { border-left: 1px solid var(--ui-border); }
-.ui-seg button:hover { background: var(--ui-surface-2); color: var(--ui-text); }
+.ui-seg :is(button, a).is-text { width: auto; padding: 0 12px; font-size: var(--ui-fs-body); font-weight: 500; }
+.ui-seg :is(button, a) + :is(button, a) { border-left: 1px solid var(--ui-border); }
+.ui-seg :is(button, a):hover { background: var(--ui-surface-2); color: var(--ui-text); }
+/* Lọc / chế độ xem bằng LINK (trang server-render, chọn = đổi URL): `<a aria-current="page">` là ô đang chọn. */
+.ui-seg a { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; color: var(--ui-text-muted); }
+.ui-seg a[aria-current="page"],
 .ui-seg button.active { background: var(--ui-accent-soft); color: var(--ui-accent-strong); }
 .ui-seg svg { width: 16px; height: 16px; fill: currentColor; }
 
@@ -307,7 +425,9 @@
      decision, not an oversight; it gets its own measurement pass or none. */
   .ui-btn:not(.ui-btn--sm),
   .ui-stat.is-clickable,
-  .ui-seg button { min-height: 44px; }
+  .ui-chips > a.ui-tag--chip,
+  .ui-pager > a,
+  .ui-seg :is(button, a) { min-height: 44px; }
   /* A clickable stat whose label is one short token ("7d" on /admin/gem-intelligence) measured 40x44
      in the 13/09/2026 sweep: the height floor held, the width did not. */
   .ui-stat.is-clickable { min-width: 44px; justify-content: center; }
@@ -316,7 +436,7 @@
   .ui-select.ui-select,
   .ui-select--slim.ui-select--slim { min-height: 44px; }
   /* The icon-only segment is 36 WIDE as well — a target is an area. */
-  .ui-seg button { min-width: 44px; }
+  .ui-seg :is(button, a) { min-width: 44px; }
 }
 
 /* ── Skeleton ─────────────────────────────────────────────────────────────────
@@ -340,6 +460,46 @@
 
 }
 
+/* ── Resizer: the seam you drag between two panels ────────────────────────────
+   One look for every split in the fleet: the admin's editors (chat | preview) today; made for gemcare's
+   inbox columns too (they adopt it at their next ui:sync). The element is the drag target; its GEOMETRY (a flex item, a grid edge, an absolutely
+   placed strip) belongs to the surface. While a drag runs the surface puts `ui-resizing` on <body>
+   (and may put `dragging` on the seam itself to keep its grip lit).
+   Markup: <div class="ui-resizer" role="separator" aria-orientation="vertical" tabindex="0"
+   aria-label="…" aria-valuenow aria-valuemin aria-valuemax>. Pointer events, not mouse events (touch
+   is a pointer); arrow keys move it — a focusable separator that ignores the keyboard is INERT. */
+/* `touch-action: none` is what makes a FINGER drag reach this element at all. `preventDefault()` on
+   `pointerdown` does not stop panning: the browser hands the gesture to the nearest scroller and sends
+   `pointercancel`, so the seam jumps once and stops. */
+.ui-resizer { cursor: col-resize; position: relative; touch-action: none; outline: none; }
+/* The grip pill is invisible at rest (a clean seam) and fades in over the zone, on keyboard focus,
+   and while a drag runs. Focus shows the pill rather than a ring: on a 5px seam a ring is a smear. */
+.ui-resizer::before {
+  content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
+  width: 4px; height: 44px; border-radius: var(--gemboss-radius-full);
+  background: var(--gemboss-primary);
+  opacity: 0;
+  transition: opacity 0.14s ease, height 0.14s ease;
+}
+.ui-resizer:hover::before,
+.ui-resizer:focus-visible::before,
+.ui-resizer.dragging::before,
+body.ui-resizing .ui-resizer::before { opacity: 1; height: 52px; }
+/* A FINGER NEEDS MORE THAN 5px, and the line must still look like 5px. WCAG 2.5.8 puts the floor for
+   this kind of target at 24px, so the HIT area grows and the visible seam does not — widening the
+   element itself would also move the columns. Only where the pointer is coarse. */
+@media (pointer: coarse) {
+  .ui-resizer::after {
+    content: ""; position: absolute; top: 0; bottom: 0; left: -14px; right: -14px;
+    touch-action: none;   /* the band must claim the gesture too, or the scroller still wins */
+    z-index: 2;           /* above the panels either side, transparent */
+  }
+}
+body.ui-resizing, body.ui-resizing * { cursor: col-resize !important; user-select: none !important; }
+/* While dragging, a full-viewport transparent shield sits above everything — iframes included — so the
+   pointer stream is never captured by a cross-document frame (the classic "stuck cursor"). */
+body.ui-resizing::after { content: ""; position: fixed; inset: 0; z-index: 9999; cursor: col-resize; }
+
 /* ── Tabs · Table · Empty state ───────────────────────────────────────────────
    Plain-CSS primitives for surfaces that are NOT React (gemcare's vanilla dashboard reads this
    file through `npm run export:ui-css`). The React app has Polaris <Tabs>/<DataTable>/<EmptyState>
@@ -354,7 +514,8 @@
   display: flex; gap: var(--ui-space-1); border-bottom: 1px solid var(--ui-border);
   overflow-x: auto; scrollbar-width: none;
 }
-.ui-tabs > button {
+.ui-tabs > button,
+.ui-tabs > a {
   position: relative; flex: 0 0 auto; display: inline-flex; align-items: center; gap: var(--ui-space-2);
   min-height: 44px; padding: 0 var(--ui-space-3); border: 0; background: transparent; cursor: pointer;
   border-radius: var(--ui-radius-sm) var(--ui-radius-sm) 0 0;
@@ -362,9 +523,15 @@
   color: var(--ui-text-muted);
   transition: color var(--gemboss-transition-fast) ease, background-color var(--gemboss-transition-fast) ease;
 }
-.ui-tabs > button:hover { color: var(--ui-text); background: var(--ui-surface-2); }
-.ui-tabs > button:focus-visible { outline: 2px solid var(--ui-focus); outline-offset: -2px; }
+.ui-tabs > button:hover,
+.ui-tabs > a:hover { color: var(--ui-text); background: var(--ui-surface-2); }
+.ui-tabs > button:focus-visible,
+.ui-tabs > a:focus-visible { outline: 2px solid var(--ui-focus); outline-offset: -2px; }
+.ui-tabs > a { text-decoration: none; }
+/* Tab bằng link (mỗi tab là một URL): `<nav class="ui-tabs"><a aria-current="page">` — cùng hình với tab nút. */
+.ui-tabs > a[aria-current="page"],
 .ui-tabs > button[aria-selected="true"] { color: var(--ui-text-strong); font-weight: 600; }
+.ui-tabs > a[aria-current="page"]::after,
 .ui-tabs > button[aria-selected="true"]::after {
   content: ""; position: absolute; left: var(--ui-space-3); right: var(--ui-space-3); bottom: 0;
   height: 2px; border-radius: var(--gemboss-radius-full); background: var(--ui-accent);
@@ -390,6 +557,12 @@
 .ui-table tbody tr:last-child > td { border-bottom: 0; }
 .ui-table tbody tr:hover { background: var(--ui-surface-2); }
 .ui-table .is-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
+/* Dòng phụ dưới nội dung chính của một ô (lớp, nguồn, ngày…): `<td><a>Loox</a><span class="ui-sub">Cộng sinh</span></td>`.
+   Trước đây mỗi surface tự viết `.muted` riêng trong ô bảng (partner-radar, gemwatcher). */
+/* Link nằm thẳng trong ô (tên bản ghi dẫn sang trang chi tiết) là link trong DANH SÁCH: ≥ 24px (WCAG 2.5.8, §9.1).
+   Chữ 13px cho hộp 17px; visual-gate đo đỏ ở partner-radar /competitors 01/10/2026. inline-flex giữ nó trên dòng. */
+.ui-table td > a { display: inline-flex; align-items: center; min-height: 24px; }
+.ui-table .ui-sub { display: block; margin-top: 2px; font-size: var(--gemboss-fs-caption); color: var(--ui-text-muted); font-weight: 400; }
 
 /* Empty state: `<div class="ui-empty"><p class="ui-empty__title">…</p><p class="ui-empty__body">…</p>
    <button class="ui-btn">…</button></div>`. Says what is missing and what to do next. */