@gemboss/ui 0.4.2 → 0.5.0

package/gemboss-ui.css

@@ -1,8 +1,8 @@
 /*
  * GemBoss admin design system — GENERATED — do not edit; regenerate from gemboss:
  *   node apps/admin/scripts/export-ui-css.mjs --out <path>   (npm run export:ui-css)
- * gemboss commit: 1ca4f9ec8573ad9a6d72aad5f8a8e223cbf0e459
- * sources sha256: a715d9e6a38a71817c8fc1389151ce000b89959b7ff1577af3851a953df73eba
+ * gemboss commit: 5a8d401f4c0a723a8ed69bbbe8871a0323fd66cd
+ * sources sha256: e74fceb32d9769c9079a6fc1d3cda8d911188ce0b0825965f85ebf185d9200fb
  * contents: 1 allow-listed rule from apps/admin/src/app/globals.css + packages/ui/src/gemboss-tokens.css
  *   (verbatim) + packages/ui/src/ui.css (verbatim) + packages/ui/src/gemboss-field.css (verbatim)
  *   + 180 rules from packages/ui/src/shell.css (the shared shell)
@@ -96,7 +96,7 @@
      and reading as "the font keeps shrinking". New rule: pick a step here, never a
      raw px. Floor is 12px (--fs-caption); 11px (--fs-micro) is reserved for bold
      micro-badges/count-pills ONLY — nothing below that. Body default is 14px, one
-     step up from Polaris bodySm(13) which the app had been leaning on for prose. */
+     step up from Polaris bodyMd (13px; bodySm is 12) which the app had been leaning on for prose. The kit (ui.css) reads --ui-fs-body, 13px, because it sits beside Polaris components. */
   --gemboss-fs-micro: 11px;   /* bold count-pills / status chips only */
   --gemboss-fs-caption: 12px; /* metadata, timestamps, secondary labels */
   --gemboss-fs-body: 14px;    /* default body / reading text */
@@ -218,7 +218,10 @@
   --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);
+  /* ONE focus ring for every control (02/10/2026): the admin's, iris — gemboss-shell.css points Polaris'
+     --p-color-border-focus at --gemboss-accent. Before, kit buttons, tabs and checks drew black, fields
+     and selects #005bd3 (Polaris' default, which the export shipped), and the admin drew iris. */
+  --ui-focus: var(--gemboss-accent, #5661f5);
   --ui-radius-sm: 6px;
   --ui-radius-md: 8px;
   --ui-radius-lg: 12px;
@@ -226,7 +229,10 @@
   --ui-space-2: 8px;
   --ui-space-3: 12px;
   --ui-space-4: 16px;
-  --ui-control-h: 34px;
+  /* ONE control height under a mouse: Polaris' TextField/Select (32px). Field, select, button and
+     segment share it, so a toolbar row is one height (was 32 / 36 / 34 / 36). Under a thumb every
+     control is 44px (the coarse block below; kit-plain.css adds phone WIDTH for non-admin surfaces). */
+  --ui-control-h: 32px;
   --ui-fs-body: 13px;
   --ui-fs-caption: 12px;
   /* Content column width for the seller app shell — ONE source of truth for every wide surface
@@ -323,10 +329,10 @@
    Its BOX is the text field's (29/09/2026, Chris): same --gemboss-field-* tokens for ground, line and
    ink, same hover, same focus ring as `.gemboss-field`. Before, a grey --ui-surface-2 select stood next
    to a bordered white field in the same form (gempress editor, admin forms), and `:focus` removed the
-   outline and only recoloured the border, so a keyboard user saw almost nothing. Height stays 36px
-   (--ui-control-h), because a select sits in toolbars beside 36px `.ui-btn`s. */
+   outline and only recoloured the border, so a keyboard user saw almost nothing. Height is
+   --ui-control-h, the button's and the field's, because a select sits in toolbars beside both. */
 .ui-select {
-  height: 36px; padding: 0 32px 0 12px; max-width: 100%;
+  height: var(--ui-control-h); padding: 0 32px 0 12px; max-width: 100%;
   background: var(--gemboss-field-bg) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 20 20'><path fill='%239a9aa4' d='M5 7l5 5 5-5z'/></svg>") no-repeat right 10px center;
   border: 1px solid var(--gemboss-field-line); border-radius: var(--ui-radius-md);
   color: var(--gemboss-field-ink); font-family: inherit; font-size: var(--ui-fs-body); font-weight: 500;
@@ -338,7 +344,7 @@
 }
 .ui-select:focus { outline: none; }
 .ui-select:focus-visible:not(:disabled) {
-  outline: 2px solid #005bd3; outline-offset: 1px;
+  outline: 2px solid var(--ui-focus); outline-offset: 1px;
   border-color: var(--gemboss-field-line-active);
 }
 .ui-select:disabled { opacity: .5; cursor: not-allowed; }
@@ -349,7 +355,7 @@
    bordered mono token (was gemboss-vault-chip). `accent` tone for the highlighted state. */
 .ui-tag {
   display: inline-flex; align-items: center; gap: 6px;
-  font-size: 10px; font-weight: 600; letter-spacing: 0.03em; text-transform: uppercase;
+  font-size: var(--gemboss-fs-micro, 11px); font-weight: 600; letter-spacing: 0.03em; text-transform: uppercase;
   padding: 1px 6px; border-radius: 6px; background: var(--ui-surface-2); color: var(--ui-text-muted);
 }
 .ui-tag--accent { background: var(--adm-accent-soft, rgba(20,22,26,.05)); color: var(--adm-accent-fg, var(--ui-accent)); }
@@ -371,7 +377,7 @@
   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 #005bd3; outline-offset: 1px; }
+.ui-chips > a.ui-tag--chip:focus-visible { outline: 2px solid var(--ui-focus); 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; }
@@ -391,7 +397,7 @@
    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; }
+.ui-page-head p { color: var(--ui-text-muted); font-size: var(--ui-fs-body); 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`. */
@@ -426,7 +432,7 @@ a.ui-metric:focus-visible { outline: 2px solid var(--ui-focus); outline-offset:
 /* ── 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 { 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(--ui-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); }
@@ -434,18 +440,19 @@ a.ui-metric:focus-visible { outline: 2px solid var(--ui-focus); outline-offset:
 /* ── 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 { 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(--ui-fs-body); }
 .ui-pager > a:hover { background: var(--ui-surface-2); }
-.ui-pager > a:focus-visible { outline: 2px solid #005bd3; outline-offset: 1px; }
+.ui-pager > a:focus-visible { outline: 2px solid var(--ui-focus); 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). */
+   Polaris' Badge (02/10/2026; was an uppercase mono pill): 12px/550, padding 2/8, radius 8, the secondary
+   fill. The admin's /admin console draws it too (components/ui/Badge.tsx). Tones (`--success|--warning|--critical|
+   --info`, `--dot`) are in kit-plain.css, for the non-React surfaces; the seller app uses Polaris <Badge tone>. */
 .ui-badge {
-  display: inline-flex; align-items: center;
-  font-size: 11px; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase;
-  padding: 1px 8px; border-radius: 6px; background: var(--ui-surface-2); color: var(--ui-text-muted);
-  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  display: inline-flex; align-items: center; gap: 4px;
+  font-size: var(--ui-fs-caption); line-height: 16px; font-weight: 550; white-space: nowrap;
+  padding: 2px 8px; border-radius: var(--ui-radius-md); background: var(--ui-surface-2); color: var(--ui-text-muted);
 }
 
 /* ── Modal ────────────────────────────────────────────────────────────────────
@@ -500,7 +507,7 @@ a.ui-metric:focus-visible { outline: 2px solid var(--ui-focus); outline-offset:
 }
 .ui-textarea:focus { outline: none; }
 .ui-textarea:focus-visible:not(:disabled) {
-  outline: 2px solid #005bd3; outline-offset: 1px;
+  outline: 2px solid var(--ui-focus); outline-offset: 1px;
   border-color: var(--gemboss-field-line-active);
 }
 .ui-textarea:disabled { opacity: .5; cursor: not-allowed; }
@@ -518,7 +525,7 @@ a.ui-metric:focus-visible { outline: 2px solid var(--ui-focus); outline-offset:
    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 :is(button, a) {
-  display: inline-grid; place-items: center; width: 36px; height: 36px;
+  display: inline-grid; place-items: center; width: calc(var(--ui-control-h) - 2px); height: calc(var(--ui-control-h) - 2px);
   border: 0; background: transparent; color: var(--ui-text-muted); cursor: pointer; font-family: inherit;
 }
 .ui-seg :is(button, a).is-text { width: auto; padding: 0 12px; font-size: var(--ui-fs-body); font-weight: 500; }
@@ -702,7 +709,7 @@ body.ui-resizing::after { content: ""; position: fixed; inset: 0; z-index: 9999;
   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;
-  font-family: inherit; font-size: var(--gemboss-fs-body); font-weight: 500; white-space: nowrap;
+  font-family: inherit; font-size: var(--ui-fs-body); font-weight: 500; white-space: nowrap;
   color: var(--ui-text-muted);
   transition: color var(--gemboss-transition-fast) ease, background-color var(--gemboss-transition-fast) ease;
 }
@@ -728,7 +735,7 @@ body.ui-resizing::after { content: ""; position: fixed; inset: 0; z-index: 9999;
   overflow-x: auto; max-width: 100%;
   background: var(--ui-surface); border: 1px solid var(--ui-border); border-radius: var(--ui-radius-lg);
 }
-.ui-table { width: 100%; border-collapse: collapse; font-size: var(--gemboss-fs-body); color: var(--ui-text); }
+.ui-table { width: 100%; border-collapse: collapse; font-size: var(--ui-fs-body); color: var(--ui-text); }
 .ui-table th,
 .ui-table td {
   padding: var(--ui-space-2) var(--ui-space-3); text-align: left; vertical-align: middle;
@@ -752,7 +759,7 @@ body.ui-resizing::after { content: ""; position: fixed; inset: 0; z-index: 9999;
 .ui-empty {
   display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--ui-space-2);
   padding: var(--ui-space-4); padding-block: 40px; text-align: center;
-  color: var(--ui-text-muted); font-size: var(--gemboss-fs-body);
+  color: var(--ui-text-muted); font-size: var(--ui-fs-body);
 }
 .ui-empty__title { margin: 0; font-size: var(--gemboss-fs-h3); font-weight: 600; color: var(--ui-text-strong); }
 .ui-empty__body { margin: 0; max-width: 48ch; line-height: 1.5; }
@@ -811,7 +818,7 @@ input[type="search"]:is(.gemboss-field, .gemboss-field__bare) { -webkit-appearan
 .gemboss-field:hover:not(:disabled),
 .gemboss-control:hover:not(:disabled) { border-color: var(--gemboss-field-line-hover); background-color: var(--gemboss-field-bg-hover); }
 .gemboss-field:focus-visible,
-.gemboss-control:focus-visible { outline: 2px solid #005bd3; outline-offset: 1px; border-color: var(--gemboss-field-line-active); }
+.gemboss-control:focus-visible { outline: 2px solid var(--ui-focus, #5661f5); outline-offset: 1px; border-color: var(--gemboss-field-line-active); }
 .gemboss-field:disabled,
 .gemboss-control:disabled { opacity: 0.5; cursor: not-allowed; }
 /* Polaris' own breakpoint for the same switch: under it a field reads 16px, so iOS does not zoom. */
@@ -840,7 +847,7 @@ textarea.gemboss-field { height: auto; padding: 6px 12px; resize: vertical; }
    rows, the two places a field is made of parts. A media query does not outrank anything; source
    order decided it, and the fix is to say it again after. (/code-review, 23/09/2026.) */
 @media (max-width: 47.9975em) { .gemboss-field--group { min-height: 44px; } }
-.gemboss-field--group:focus-within { outline: 2px solid #005bd3; outline-offset: 1px; border-color: var(--gemboss-field-line-active); }
+.gemboss-field--group:focus-within { outline: 2px solid var(--ui-focus, #5661f5); outline-offset: 1px; border-color: var(--gemboss-field-line-active); }
 /* The colour swatch in a group: FLUSH to the group's left edge and full height — it covers the group's
    1px border top and bottom and its 12px left padding, so it is the whole 44px target the panel's rule
    asks for, rounded by the group's own corner (overflow: hidden), and never clipped. A 44px swatch
@@ -2002,6 +2009,17 @@ body.gemboss-assistant-unread .gnav-item.gnav-assistant::after {
  * these elements wins, wherever it sits in the cascade. Re-theme with the token, not a body rule.
  * The admin does not load this file, so its own rendering is untouched. */
 :where(html, body, button) { font-family: var(--gemboss-font-sans); }
+/* …and the rest of Polaris' body text (02/10/2026): bodyMd, 13px on a 20px line, weight 450, the text colour,
+ * antialiased. With the face alone, every surface picked its own size — measured on the sign-in pages that day:
+ * 14, 15 and 16px bodies, one in Lora serif — so every line outside a kit class read differently from the admin.
+ * Same (0,0,0) as above: a surface that sets its own body text still wins, and should delete that rule.
+ * BODY only, never `html`: the root size is what `rem` means, and gemwatcher alone has ~200 rem lengths that a 13px
+ * root would shrink by a fifth (review #3665). Polaris does the same: html stays at the browser's 100%. */
+:where(body) {
+  font-size: 13px; line-height: 20px; font-weight: 450; color: var(--gemboss-text);
+  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
+}
+:where(h1, h2, h3) { letter-spacing: -0.01em; }
 
 .gemboss-topbar-start { display: flex; align-items: center; gap: 8px; min-width: 0; }
 .gemboss-topbar-center { display: flex; justify-content: center; min-width: 0; }
@@ -3278,7 +3296,7 @@ body.gemboss-assistant-unread .gnav-item.gnav-assistant::after {
 .ui-link:hover,
 .ui-prose a:not([class]):hover { color: var(--gemboss-accent, #5661f5); text-decoration-thickness: 2px; }
 .ui-link:focus-visible,
-.ui-prose a:not([class]):focus-visible { outline: 2px solid var(--ui-focus, #005bd3); outline-offset: 2px; border-radius: 2px; }
+.ui-prose a:not([class]):focus-visible { outline: 2px solid var(--ui-focus, #5661f5); outline-offset: 2px; border-radius: 2px; }
 
 .ui-card--media { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
 .ui-card__media {
@@ -3287,7 +3305,7 @@ body.gemboss-assistant-unread .gnav-item.gnav-assistant::after {
 }
 .ui-card__media > img { display: block; width: 100%; height: 100%; object-fit: cover; }
 button.ui-card__media, a.ui-card__media { cursor: pointer; }
-.ui-card__media:focus-visible { outline: 2px solid var(--ui-focus, #005bd3); outline-offset: -2px; }
+.ui-card__media:focus-visible { outline: 2px solid var(--ui-focus, #5661f5); outline-offset: -2px; }
 /* justify-items: start: a tag or a button in the body keeps its own width instead of stretching across the card. */
 .ui-card__body { display: grid; justify-items: start; gap: var(--ui-space-2, 8px); padding: var(--ui-space-3, 12px) var(--ui-space-4, 16px); min-width: 0; }
 .ui-card__foot {
@@ -3297,8 +3315,8 @@ button.ui-card__media, a.ui-card__media { cursor: pointer; }
 }
 
 /* Popup body and foot: `<div class="ui-modal__body">…</div><div class="ui-modal__foot"><button class="ui-btn">…</button></div>`.
-   The admin's Modal.tsx pads its own children, so ui.css never styled these; every non-React surface padded them by
-   hand (GemFactory: 16/20 and a hairline above the actions). kit-plain.js's openModal writes exactly this shape. */
+   ui.css never styled these, and the admin does not load this file: its Modal.tsx children carry their own padding
+   (or none). Every non-React surface padded them by hand (GemFactory: 16/20 and a hairline above the actions). kit-plain.js's openModal writes exactly this shape. */
 .ui-modal__body { padding: 16px 20px; }
 .ui-modal__foot {
   display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end;
@@ -3416,6 +3434,165 @@ button.ui-card__media, a.ui-card__media { cursor: pointer; }
    thoại trình duyệt máy tính vẫn báo `fine`, nên nâng theo khổ như ui-btn--icon ở trên. */
 @media (pointer: coarse), (max-width: 47.9975em) { .ui-seg :is(button, a) { height: 44px; min-height: 44px; } }
 
+/* ── Polaris parity: the primitives every surface was drawing for itself (02/10/2026) ──────────────────────
+   An audit of the six surfaces on the package (gemwatcher, GemFactory, gempress, gemcare, partner-radar,
+   content-radar) found the same gaps re-filled six ways: no destructive button (four surfaces fell back to the
+   browser's `confirm()`), one-tone badges, banners as bare colour blocks, hand-made radio / switch / tooltip /
+   spinner, and help and error text under a field in five sizes. The admin has all of them from Polaris; this is
+   the same shape in plain CSS, with Polaris' measurements and GemBoss' tokens (the danger / success / warning
+   set the kit's tags and notices already use). The admin does not load this file. */
+
+/* Destructive button: `ui-btn ui-btn--critical` (red text on the default button) and
+   `ui-btn ui-btn--primary ui-btn--critical` (red fill), Polaris' `tone="critical"` in both variants. Red text is
+   --gemboss-danger-strong: 7.3:1 on white, 5.7:1 on the hover ground (shell.css says why not --gemboss-danger). */
+.ui-btn--critical { color: var(--gemboss-danger-strong); }
+.ui-btn--critical:hover { background: var(--gemboss-danger-soft); color: var(--gemboss-danger-strong); }
+.ui-btn--primary.ui-btn--critical { background: var(--gemboss-danger); border-color: var(--gemboss-danger); color: var(--gemboss-on-primary); }
+.ui-btn--primary.ui-btn--critical:hover { background: var(--gemboss-danger-strong); border-color: var(--gemboss-danger-strong); color: var(--gemboss-on-primary); }
+.ui-btn--critical:focus-visible { outline-color: var(--gemboss-danger-strong); }
+
+/* Under a thumb, and at phone WIDTH (a desktop browser at 320px reports pointer: fine), EVERY kit button is a 44px
+   control, the compact one included: §9.1 has no density exception, and GemFactory, gempress and gemcare each
+   restated this floor for `--sm` themselves. ui.css's coarse block leaves `--sm` alone for the admin's own
+   settings page; this file is not loaded there. */
+@media (pointer: coarse), (max-width: 47.9975em) {
+  .ui-btn, .ui-btn.ui-btn--sm { min-height: 44px; }
+  .ui-select.ui-select { min-height: 44px; }
+  /* A target is an AREA: the compact icon button (28 wide) and an icon segment (30) grow sideways as well. */
+  .ui-btn--icon.ui-btn--sm, .ui-seg :is(button, a):not(.is-text) { min-width: 44px; }
+}
+
+/* Badge tones: `<span class="ui-badge ui-badge--success">Active</span>`. Polaris' tones on GemBoss' soft grounds (Polaris' `attention` is `--warning` here: the fleet has one amber).
+   `ui-badge--dot` puts a status dot before the label (filled = done, the tone's colour). */
+.ui-badge--success { background: var(--gemboss-success-soft); color: var(--gemboss-success-strong); }
+.ui-badge--warning { background: var(--gemboss-warning-soft); color: var(--gemboss-warning); }
+.ui-badge--critical { background: var(--gemboss-danger-soft); color: var(--gemboss-danger-strong); }
+.ui-badge--info { background: var(--gemboss-accent-soft); color: var(--gemboss-accent-strong); }
+.ui-badge--dot::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
+
+/* Banner: Polaris' in-page Banner. A tone strip with an icon and a title, a body, optional actions, optional
+   dismiss. `ui-notice` stays for a one-line note; a banner is for something the person must read or act on.
+   <div class="ui-banner ui-banner--warning" role="status">
+     <div class="ui-banner__head"><svg class="ui-banner__icon" …/><h3 class="ui-banner__title">Slack token expired</h3>
+       <button type="button" class="ui-banner__close" aria-label="Dismiss">…</button></div>
+     <div class="ui-banner__body"><p>Monday's digest will not send.</p>
+       <div class="ui-banner__actions"><a class="ui-btn" href>Reconnect</a></div></div></div>
+   No tone = neutral. role="status" / "alert" only when it appears after the page loaded. */
+.ui-banner {
+  --ui-banner-bg: var(--ui-surface-2); --ui-banner-fg: var(--ui-text);
+  border-radius: var(--ui-radius-lg); overflow: hidden; background: var(--ui-surface); color: var(--ui-text);
+  box-shadow: 0 0 0 1px var(--ui-border), 0 3px 1px -1px rgba(26, 26, 26, 0.07);
+  font-size: var(--ui-fs-body); line-height: 20px;
+}
+.ui-banner--success { --ui-banner-bg: var(--gemboss-success-soft); --ui-banner-fg: var(--gemboss-success-strong); }
+.ui-banner--warning { --ui-banner-bg: var(--gemboss-warning-soft); --ui-banner-fg: var(--gemboss-warning); }
+.ui-banner--critical { --ui-banner-bg: var(--gemboss-danger-soft); --ui-banner-fg: var(--gemboss-danger-strong); }
+.ui-banner--info { --ui-banner-bg: var(--gemboss-accent-soft); --ui-banner-fg: var(--gemboss-accent-strong); }
+.ui-banner__head { display: flex; align-items: center; gap: var(--ui-space-2); min-height: 32px; padding: 6px var(--ui-space-3); background: var(--ui-banner-bg); color: var(--ui-banner-fg); }
+.ui-banner__icon { flex: none; width: 20px; height: 20px; fill: currentColor; }
+.ui-banner__title { flex: 1 1 auto; min-width: 0; margin: 0; font-size: var(--ui-fs-body); font-weight: 650; line-height: 20px; }
+.ui-banner__close {
+  flex: none; display: inline-grid; place-items: center; width: 32px; height: 32px; margin: -6px -8px -6px 0;
+  border: 0; border-radius: var(--ui-radius-md); background: transparent; color: inherit; cursor: pointer;
+}
+.ui-banner__close:hover { background: color-mix(in srgb, currentColor 10%, transparent); }
+.ui-banner__close:focus-visible { outline: 2px solid var(--ui-focus); outline-offset: -2px; }
+.ui-banner__close svg { width: 16px; height: 16px; }
+.ui-banner__body { padding: var(--ui-space-3) var(--ui-space-4); }
+.ui-banner__body > :first-child { margin-top: 0; }
+.ui-banner__body > :last-child { margin-bottom: 0; }
+.ui-banner__actions { display: flex; flex-wrap: wrap; gap: var(--ui-space-2); margin-top: var(--ui-space-3); }
+@media (pointer: coarse), (max-width: 47.9975em) { .ui-banner__close { width: 44px; height: 44px; margin: -12px -12px -12px 0; } }
+
+/* Help and error text under a field, Polaris' Labelled help text and InlineError:
+   <label class="ui-label" for="x">Domain</label><input id="x" class="gemboss-field gemboss-field--tall"
+     aria-describedby="x-help x-err" aria-invalid="true"><p class="ui-help" id="x-help">Without https://</p>
+   <p class="ui-error" id="x-err">This store is already tracked.</p>
+   aria-invalid paints the field in the critical tone; the message says what to do, not only what is wrong. */
+.ui-help { margin: var(--ui-space-1) 0 0; font-size: var(--ui-fs-body); line-height: 20px; color: var(--ui-text-muted); }
+.ui-error:empty { display: none; }   /* a placeholder kept for aria-describedby draws no icon */
+.ui-error { display: flex; gap: 6px; margin: var(--ui-space-1) 0 0; font-size: var(--ui-fs-body); line-height: 20px; color: var(--gemboss-danger-strong); }
+.ui-error::before {
+  content: ""; flex: none; width: 16px; height: 16px; margin-top: 2px; background: currentColor;
+  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path d='M10 2a8 8 0 1 0 0 16 8 8 0 0 0 0-16Zm-.75 4h1.5v5.5h-1.5V6Zm.75 9a1 1 0 1 1 0-2 1 1 0 0 1 0 2Z'/></svg>") center / contain no-repeat;
+          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path d='M10 2a8 8 0 1 0 0 16 8 8 0 0 0 0-16Zm-.75 4h1.5v5.5h-1.5V6Zm.75 9a1 1 0 1 1 0-2 1 1 0 0 1 0 2Z'/></svg>") center / contain no-repeat;
+}
+.gemboss-field[aria-invalid="true"], .gemboss-field--group:has([aria-invalid="true"]),
+.ui-select[aria-invalid="true"], .ui-textarea[aria-invalid="true"] {
+  border-color: var(--gemboss-danger-strong); background-color: var(--gemboss-danger-soft);
+}
+
+/* Radio: the checkbox's row with `type="radio"` — `<fieldset class="ui-choices"><legend class="ui-label">Plan</legend>
+   <label class="ui-check"><input type="radio" name="plan" checked> Basic</label>…</fieldset>`. */
+.ui-choices { display: grid; gap: 0; margin: 0; padding: 0; border: 0; min-width: 0; }
+.ui-choices > legend { padding: 0; }
+
+/* Switch: a checkbox that reads as on / off, for a setting that applies at once (no Save button).
+   `<label class="ui-check ui-switch"><input type="checkbox" role="switch" checked> Send Monday digest</label>`.
+   Track 32×20, thumb 16; the row stays the checkbox's 44px target. */
+.ui-switch > input[type="checkbox"] {
+  appearance: none; -webkit-appearance: none; position: relative; width: 32px; height: 20px; margin: 0;
+  border-radius: var(--gemboss-radius-full); background: var(--gemboss-field-line); /* 3.5:1 on white, WCAG 1.4.11 */ transition: background-color var(--gemboss-transition-fast) ease;
+}
+.ui-switch > input[type="checkbox"]::before {
+  content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%;
+  background: var(--gemboss-surface); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); transition: transform var(--gemboss-transition-fast) ease;
+}
+.ui-switch > input[type="checkbox"]:checked { background: var(--ui-accent); }
+.ui-switch > input[type="checkbox"]:checked::before { transform: translateX(12px); }
+@media (prefers-reduced-motion: reduce) { .ui-switch > input[type="checkbox"], .ui-switch > input[type="checkbox"]::before { transition: none; } }
+
+/* Tooltip: a SHORT label for an icon-only control, shown on hover and keyboard focus. Not for anything the person
+   needs to act on (a touch screen never hovers).
+   <span class="ui-tooltip"><button class="ui-btn ui-btn--icon" aria-describedby="t1" aria-label="Archive">…</button>
+     <span class="ui-tooltip__bubble" role="tooltip" id="t1">Archive</span></span>   `--end` aligns it right. */
+.ui-tooltip { position: relative; display: inline-flex; }
+.ui-tooltip__bubble {
+  position: absolute; z-index: 30; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%);
+  width: max-content; max-width: 240px; padding: 4px 8px; border-radius: var(--ui-radius-md);
+  background: var(--ui-surface); color: var(--ui-text); font-size: var(--ui-fs-body); line-height: 20px; font-weight: 450;
+  box-shadow: 0 8px 16px -4px rgba(26, 26, 26, 0.22), 0 0 0 1px var(--ui-border);
+  opacity: 0; visibility: hidden; pointer-events: none; transition: opacity var(--gemboss-transition-fast) ease;
+}
+.ui-tooltip--end .ui-tooltip__bubble { left: auto; right: 0; transform: none; }
+.ui-tooltip:hover > .ui-tooltip__bubble, .ui-tooltip:focus-within > .ui-tooltip__bubble { opacity: 1; visibility: visible; }
+
+/* Spinner: `<span class="ui-spinner" role="status"><span class="ui-sr-only">Loading…</span></span>`, 20px
+   (Polaris small); `--lg` is 44px. Reduced motion turns it slower, never off: it is the only sign of waiting. */
+.ui-spinner {
+  display: inline-block; flex: none; width: 20px; height: 20px; box-sizing: border-box; border-radius: 50%;
+  border: 2px solid color-mix(in srgb, var(--ui-text) 18%, transparent); border-top-color: var(--ui-text);
+  animation: ui-spin 0.7s linear infinite; vertical-align: middle;
+}
+.ui-spinner--lg { width: 44px; height: 44px; border-width: 4px; }
+@keyframes ui-spin { to { transform: rotate(360deg); } }
+@media (prefers-reduced-motion: reduce) { .ui-spinner { animation-duration: 2s; } }
+
+/* Progress: `<progress class="ui-progress" value="37" max="100" aria-label="Import">37%</progress>`, 8px, the
+   primary fill (Polaris' small ProgressBar). Tones: `--success`, `--critical`. */
+.ui-progress { appearance: none; -webkit-appearance: none; display: block; width: 100%; height: 8px; border: 0; border-radius: var(--gemboss-radius-full); overflow: hidden; background: var(--gemboss-divider); color: var(--ui-accent); }
+.ui-progress::-webkit-progress-bar { background: var(--gemboss-divider); border-radius: inherit; }
+.ui-progress::-webkit-progress-value { background: currentColor; border-radius: inherit; }
+.ui-progress::-moz-progress-bar { background: currentColor; border-radius: inherit; }
+.ui-progress--success { color: var(--gemboss-success); }
+.ui-progress--critical { color: var(--gemboss-danger); }
+
+/* Wider popup: `openModal({ className: "ui-modal--wide" })`, Polaris' default Modal (620px). The kit's own 460 is
+   Polaris' small step plus one; a form with two columns or a table needs this one. */
+.ui-modal--wide { width: min(620px, 100%); }
+
+/* Native popup: `<dialog class="ui-modal">` opened with `showModal()`, for React (and other) surfaces that do not load
+   kit-plain.js. The browser does what openModal does by hand: Escape closes it, the page behind is inert, it sits in
+   the top layer above the shell's topbar. Same head / body / foot markup; `::backdrop` is the kit's overlay. gemcare
+   and content-radar already used `<dialog>`, each with its own width, padding and backdrop (02/10/2026: four shapes,
+   420 to 760 wide). Close on a backdrop click yourself: a click whose target IS the dialog landed outside the panel.
+   `<dialog class="ui-modal" aria-labelledby="t"><div class="ui-modal__head"><div class="ui-modal__title" id="t">…</div>
+   <button type="button" class="ui-modal__close" aria-label="Close">…</button></div><div class="ui-modal__body">…</div>
+   <div class="ui-modal__foot">…</div></dialog>` */
+dialog.ui-modal { padding: 0; max-width: calc(100% - 40px); max-height: calc(100dvh - 40px); color: var(--ui-text); }
+dialog.ui-modal[open] { display: flex; flex-direction: column; }
+dialog.ui-modal::backdrop { background: rgba(0, 0, 0, 0.6); backdrop-filter: blur(2px); }
+
 /* ═══ @gemboss/ui src/chat.css ═══ */
 /*
  * The chat BODY — what an answer looks like, wherever a GemBoss surface puts a chat (01/10/2026).
@@ -3774,7 +3951,7 @@ button.ui-card__media, a.ui-card__media { cursor: pointer; }
  * chat can sit in a 380px sidebar — and capped in height so five thumbnails read as a shortlist, not
  * five screens. The link around it is the tap target: keyboard focus has to be visible on it. */
 .gemboss-md-imglink { display: inline-block; max-width: 100%; margin: 4px 0 8px; border-radius: 8px; line-height: 0; }
-.gemboss-md-imglink:focus-visible { outline: 2px solid var(--gemboss-focus, #005bd3); outline-offset: 2px; }
+.gemboss-md-imglink:focus-visible { outline: 2px solid var(--gemboss-focus, var(--ui-focus, #5661f5)); outline-offset: 2px; }
 .gemboss-md-img {
   display: block;
   max-width: 100%;
@@ -3960,4 +4137,4 @@ button.ui-card__media, a.ui-card__media { cursor: pointer; }
 .gemboss-ec-stop svg { width: 12px; height: 12px; fill: currentColor; }
 .gemboss-ec-stop:disabled { opacity: 0.6; cursor: default; }
 .gemboss-ec-stop:hover { filter: brightness(1.08); }
-.gemboss-ec-stop:focus-visible { outline: 2px solid var(--gemboss-focus, #005bd3); outline-offset: 2px; }
+.gemboss-ec-stop:focus-visible { outline: 2px solid var(--gemboss-focus, var(--ui-focus, #5661f5)); outline-offset: 2px; }

package/package.json

@@ -1,11 +1,12 @@
 {
   "name": "@gemboss/ui",
-  "version": "0.4.2",
+  "version": "0.5.0",
   "description": "GemBoss design system for every surface in the fleet: the admin shell (topbar + rail + drawer) as React components, and the admin stylesheet exported as one CSS file.",
   "license": "UNLICENSED",
   "type": "module",
   "sideEffects": [
-    "*.css"
+    "*.css",
+    "./src/kit-plain.js"
   ],
   "main": "./src/index.ts",
   "types": "./src/index.ts",
@@ -24,13 +25,15 @@
     "./kit-plain.js": "./src/kit-plain.js",
     "./assistant": "./src/assistant/index.ts",
     "./assistant/dock": "./src/assistant/dock.ts",
-    "./assistant.css": "./src/assistant.css"
+    "./assistant.css": "./src/assistant.css",
+    "./icon.svg": "./src/icon.svg"
   },
   "files": [
     "src/**/*.ts",
     "src/**/*.tsx",
     "src/*.css",
     "src/kit-plain.js",
+    "src/icon.svg",
     "!src/**/*.test.*",
     "gemboss-ui.css",
     "catalog/index.html",

package/src/app-shell.css

@@ -13,6 +13,17 @@
  * these elements wins, wherever it sits in the cascade. Re-theme with the token, not a body rule.
  * The admin does not load this file, so its own rendering is untouched. */
 :where(html, body, button) { font-family: var(--gemboss-font-sans); }
+/* …and the rest of Polaris' body text (02/10/2026): bodyMd, 13px on a 20px line, weight 450, the text colour,
+ * antialiased. With the face alone, every surface picked its own size — measured on the sign-in pages that day:
+ * 14, 15 and 16px bodies, one in Lora serif — so every line outside a kit class read differently from the admin.
+ * Same (0,0,0) as above: a surface that sets its own body text still wins, and should delete that rule.
+ * BODY only, never `html`: the root size is what `rem` means, and gemwatcher alone has ~200 rem lengths that a 13px
+ * root would shrink by a fifth (review #3665). Polaris does the same: html stays at the browser's 100%. */
+:where(body) {
+  font-size: 13px; line-height: 20px; font-weight: 450; color: var(--gemboss-text);
+  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
+}
+:where(h1, h2, h3) { letter-spacing: -0.01em; }
 
 .gemboss-topbar-start { display: flex; align-items: center; gap: 8px; min-width: 0; }
 .gemboss-topbar-center { display: flex; justify-content: center; min-width: 0; }

package/src/chat-composer.css

@@ -107,4 +107,4 @@
 .gemboss-ec-stop svg { width: 12px; height: 12px; fill: currentColor; }
 .gemboss-ec-stop:disabled { opacity: 0.6; cursor: default; }
 .gemboss-ec-stop:hover { filter: brightness(1.08); }
-.gemboss-ec-stop:focus-visible { outline: 2px solid var(--gemboss-focus, #005bd3); outline-offset: 2px; }
+.gemboss-ec-stop:focus-visible { outline: 2px solid var(--gemboss-focus, var(--ui-focus, #5661f5)); outline-offset: 2px; }

package/src/chat.css

@@ -355,7 +355,7 @@
  * chat can sit in a 380px sidebar — and capped in height so five thumbnails read as a shortlist, not
  * five screens. The link around it is the tap target: keyboard focus has to be visible on it. */
 .gemboss-md-imglink { display: inline-block; max-width: 100%; margin: 4px 0 8px; border-radius: 8px; line-height: 0; }
-.gemboss-md-imglink:focus-visible { outline: 2px solid var(--gemboss-focus, #005bd3); outline-offset: 2px; }
+.gemboss-md-imglink:focus-visible { outline: 2px solid var(--gemboss-focus, var(--ui-focus, #5661f5)); outline-offset: 2px; }
 .gemboss-md-img {
   display: block;
   max-width: 100%;

package/src/gemboss-field.css

@@ -50,7 +50,7 @@ input[type="search"]:is(.gemboss-field, .gemboss-field__bare) { -webkit-appearan
 .gemboss-field:hover:not(:disabled),
 .gemboss-control: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)); }
 .gemboss-field:focus-visible,
-.gemboss-control:focus-visible { 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)); }
+.gemboss-control:focus-visible { outline: 2px solid var(--p-color-border-focus, var(--ui-focus, #5661f5)); outline-offset: 1px; border-color: var(--p-color-input-border-active, var(--gemboss-field-line-active)); }
 .gemboss-field:disabled,
 .gemboss-control:disabled { opacity: 0.5; cursor: not-allowed; }
 /* Polaris' own breakpoint for the same switch: under it a field reads 16px, so iOS does not zoom. */
@@ -79,7 +79,7 @@ textarea.gemboss-field { height: auto; padding: 6px 12px; resize: vertical; }
    rows, the two places a field is made of parts. A media query does not outrank anything; source
    order decided it, and the fix is to say it again after. (/code-review, 23/09/2026.) */
 @media (max-width: 47.9975em) { .gemboss-field--group { min-height: 44px; } }
-.gemboss-field--group:focus-within { 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)); }
+.gemboss-field--group:focus-within { outline: 2px solid var(--p-color-border-focus, var(--ui-focus, #5661f5)); outline-offset: 1px; border-color: var(--p-color-input-border-active, var(--gemboss-field-line-active)); }
 /* The colour swatch in a group: FLUSH to the group's left edge and full height — it covers the group's
    1px border top and bottom and its 12px left padding, so it is the whole 44px target the panel's rule
    asks for, rounded by the group's own corner (overflow: hidden), and never clipped. A 44px swatch

package/src/gemboss-tokens.css

@@ -79,7 +79,7 @@
      and reading as "the font keeps shrinking". New rule: pick a step here, never a
      raw px. Floor is 12px (--fs-caption); 11px (--fs-micro) is reserved for bold
      micro-badges/count-pills ONLY — nothing below that. Body default is 14px, one
-     step up from Polaris bodySm(13) which the app had been leaning on for prose. */
+     step up from Polaris bodyMd (13px; bodySm is 12) which the app had been leaning on for prose. The kit (ui.css) reads --ui-fs-body, 13px, because it sits beside Polaris components. */
   --gemboss-fs-micro: 11px;   /* bold count-pills / status chips only */
   --gemboss-fs-caption: 12px; /* metadata, timestamps, secondary labels */
   --gemboss-fs-body: 14px;    /* default body / reading text */

package/src/icon.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="100" height="100"><rect width="100" height="100" rx="24" fill="#0B0B0C"/><g transform="translate(18,10) scale(0.66)"><polygon points="26,14 74,14 66,50 34,50" fill="#5661F5"/><path d="M26,14 74,14 96,50 50,110 4,50Z" fill="none" stroke="#fff" stroke-width="9" stroke-linejoin="round"/><path d="M4,50H96M26,14 34,50M74,14 66,50M34,50 50,110M66,50 50,110" fill="none" stroke="#fff" stroke-width="5.6" stroke-linejoin="round"/></g></svg>