@gemboss/ui 0.4.2 → 0.6.0

package/package.json

@@ -1,11 +1,12 @@
 {
   "name": "@gemboss/ui",
-  "version": "0.4.2",
+  "version": "0.6.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,19 @@
  * 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;
+}
+/* Headings get their own line (Polaris heading line-heights are ~1.25-1.4): inheriting the body's 20px made a wrapped 22px
+ * title overlap itself (gempress, 0.5.1). */
+:where(h1, h2, h3) { letter-spacing: -0.01em; line-height: 1.3; }
 
 .gemboss-topbar-start { display: flex; align-items: center; gap: 8px; min-width: 0; }
 .gemboss-topbar-center { display: flex; justify-content: center; min-width: 0; }
@@ -22,6 +35,10 @@
   .gemboss-topbar-center { flex: 1 1 auto; justify-content: flex-start; }
   /* No actions: the empty slot would still take one flex `gap` (8px) off the search at 320px. */
   .gemboss-topbar-end:empty { display: none; }
+  /* Only the search gives. With `min-width: 0` on all three slots, flex shrank them all: the actions slot gave way and its
+   * buttons (justify flex-end) spilled LEFT over the search (two 44px targets, assistant + account, overlapped
+   * partner-radar's search by 15px at 320 and 360), and the start slot squeezed the gem mark to 16px. */
+  .gemboss-topbar-start, .gemboss-topbar-end { flex: 0 0 auto; }
 }
 
 .gnav-heading {
@@ -62,7 +79,11 @@
   overflow: hidden; text-overflow: ellipsis; min-width: 0;
 }
 /* The admin shows only its mark below 460px; so does this. */
-@media (max-width: 460px) { .gb-brand-name { display: none; } }
+@media (max-width: 460px) {
+  .gb-brand-name { display: none; }
+  /* The mark alone is ~21px wide: a 44px target, centred (visual-gate tap_target_link on content-radar at 320, 0.5.1). */
+  .gb-brand { min-width: 44px; height: 44px; justify-content: center; }
+}
 
 /* ── AccountMenu (./account.tsx): its rules live in shell.css since 29/09/2026, because the admin
  * renders AccountMenu too now and loads shell.css, not this file. */

package/src/assistant.css

@@ -495,38 +495,61 @@
   .gb-dock-side .gb-dock-sidegrip, .gb-dock-pinside { display: none; }
 }
 
-/* ── AssistantLauncher (02/10/2026): the floating button that opens the assistant, bottom-right ──────────────────────
-   Top-right is the account corner (AccountMenu). Below the dock (290/320) and the topbar (300), above page content; the
-   phone drawer (1000) covers it. 44px floor at every width; text + shortcut on wide screens, the icon alone on phones
-   (the label stays the accessible name). Clears the iPhone home indicator with safe-area insets. */
+/* ── AssistantLauncher: the button that opens the assistant. NOT floating (03/10/2026) ────────────────────────────────
+   0.4.2 floated it bottom-right (z 280). visual-gate on partner-radar prod, 03/10: `content_covered` red at 5 of 6 widths
+   on every page measured (/, /apps, /sources): a fixed button always sits on whatever text scrolls under it, and at
+   scroll 0 that is a table column. GemCommunity had dropped its floating buttons for the same reason (#239). Chris chose
+   "bỏ nút nổi". It now lives where nothing scrolls under it:
+   · `--rail`   wide screens: the last row of the rail (`railBottom`), a full-width primary button. Hidden ≤760px,
+                where the rail is an off-canvas drawer nobody sees until they open it.
+   · `--topbar` phones (≤760px): a 44px icon button in the topbar's `actions`, left of the account chip. Hidden above.
+   The top-right corner stays the ACCOUNT. A surface renders both; exactly one is displayed at any width. */
 .gb-assistant-launcher {
-  position: fixed;
-  right: calc(20px + env(safe-area-inset-right, 0px));
-  bottom: calc(20px + env(safe-area-inset-bottom, 0px));
-  z-index: 280;
   display: inline-flex;
   align-items: center;
   gap: 8px;
-  min-height: 44px;
-  padding: 0 16px;
   border: 0;
-  border-radius: 999px;
-  background: var(--gemboss-primary, #1b1c1e);
-  color: var(--gemboss-on-primary, #fff);
-  font: 600 14px/1 var(--gemboss-font-sans, system-ui, sans-serif);
-  box-shadow: var(--gemboss-shadow-raised, 0 6px 18px rgba(0, 0, 0, 0.18));
   cursor: pointer;
+  font-family: var(--gemboss-font-sans, system-ui, sans-serif);
 }
-.gb-assistant-launcher:hover { background: var(--gemboss-primary-dark, #000); }
-.gb-assistant-launcher:focus-visible { outline: 2px solid var(--gemboss-accent, #5661f5); outline-offset: 2px; }
 .gb-assistant-launcher svg { flex: 0 0 auto; }
+.gb-assistant-launcher:focus-visible { outline: 2px solid var(--gemboss-accent, #5661f5); outline-offset: 2px; }
+.gb-assistant-launcher--rail {
+  width: 100%;
+  min-height: 44px; /* a control, not a list link: §9.1 asks 44 (visual-gate red at 768 with 36) */
+  margin: 8px 0 4px;
+  padding: 0 12px;
+  border-radius: var(--gemboss-radius-md, 8px);
+  background: var(--gemboss-primary, #1b1c1e);
+  color: var(--gemboss-on-primary, #fff);
+  font-size: 13px;
+  font-weight: 600;
+  line-height: 1;
+  text-align: left;
+}
+.gb-assistant-launcher--rail:hover { background: var(--gemboss-primary-dark, #000); }
+.gb-assistant-launcher--rail .gb-assistant-launcher-label { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 .gb-assistant-launcher-kbd {
   font: inherit; font-size: 11px; opacity: 0.7;
   border: 1px solid currentColor; border-radius: 5px; padding: 1px 5px;
 }
+.gb-assistant-launcher--topbar {
+  display: none;
+  position: relative; /* holds the clipped label: an absolute child of a static button escapes to the nearest positioned box */
+  justify-content: center;
+  flex: 0 0 auto;
+  width: 44px;
+  height: 44px;
+  padding: 0;
+  border-radius: var(--gemboss-radius-md, 8px);
+  background: transparent;
+  color: var(--gemboss-text, #1b1c1e);
+}
+.gb-assistant-launcher--topbar:hover, .gb-assistant-launcher--topbar:active { background: var(--gemboss-hover, #eceef2); }
+.gb-assistant-launcher--topbar .gb-assistant-launcher-label, .gb-assistant-launcher--topbar .gb-assistant-launcher-kbd {
+  position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
+}
 @media (max-width: 760px) {
-  .gb-assistant-launcher { min-width: 52px; min-height: 52px; padding: 0; justify-content: center; }
-  .gb-assistant-launcher-label, .gb-assistant-launcher-kbd {
-    position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
-  }
+  .gb-assistant-launcher--rail { display: none; }
+  .gb-assistant-launcher--topbar { display: inline-flex; }
 }

package/src/auth.tsx

@@ -173,6 +173,9 @@ export function PasswordField({ id, label = "Password", toggleLabels = { show: "
           // ("Hide password, pressed" while the password sits in plain text).
           aria-label={name}
           title={name}
+          // Both names for kit-plain.js `initPasswordFields()` on a page with no React (static render).
+          data-label-show={toggleLabels.show}
+          data-label-hide={toggleLabels.hide}
           className="gb-auth-pw-toggle"
         >
           <EyeIcon off={shown} />

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
@@ -88,7 +88,7 @@ textarea.gemboss-field { height: auto; padding: 6px 12px; resize: vertical; }
 /* ↑ the right edge is what keeps a WHITE swatch visible: without it the block melted into the field (measured). */
 .gemboss-field--group input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; }
 .gemboss-field--group input[type="color"]::-webkit-color-swatch { border: 0; border-radius: 0; }
-.gemboss-field__bare { flex: 1; min-width: 0; align-self: stretch; padding: 0 12px 0 0; border: 0; border-radius: 0; outline: none; background: transparent; color: inherit; font: inherit; }
+.gemboss-field__bare { flex: 1; min-width: 0; align-self: stretch; margin-block: -1px; /* over the group's 1px border: the input is the 44px target, not 42 (0.5.1) */ padding: 0 12px 0 0; border: 0; border-radius: 0; outline: none; background: transparent; color: inherit; font: inherit; }
 /* …and the placeholder, which "draws nothing" does not cover: the surfaces that used to declare
    their own (the /admin search rows, the settings and palette rows) stopped when they stopped
    owning the box, and without this every bare field would fall back to the browser's grey. */

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>

package/src/kit-plain.css

@@ -77,7 +77,7 @@
 .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 {
@@ -86,7 +86,7 @@
 }
 .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 {
@@ -96,8 +96,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;
@@ -214,3 +214,222 @@ button.ui-card__media, a.ui-card__media { cursor: pointer; }
 /* Tab / nhóm nút là ĐIỀU KHIỂN: ≥ 44px dưới ngón tay (§9.1). Khối coarse của ui.css chỉ bắt `pointer: coarse`; ở khổ điện
    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); }
+
+/* ── 0.5.1: what the first surfaces on 0.5.0 still drew themselves (GemFactory, content-radar, 03/10/2026) ─────────── */
+
+/* At phone width a short compact button ("Bỏ") was 44 tall but 41 wide: a target is an area. */
+@media (pointer: coarse), (max-width: 47.9975em) { .ui-btn.ui-btn--sm { min-width: 44px; } }
+
+/* A long label in a badge ("Đã dùng 1 lần + 4 bài cùng nguồn · 2 Hot News") wraps instead of running out of its card. */
+.ui-badge--wrap { white-space: normal; overflow-wrap: anywhere; line-height: 16px; }
+
+/* Page head with actions on the right, wrapping under the title when narrow:
+   `<div class="ui-page-head ui-page-head--actions"><div><h1>…</h1><p>…</p></div><div class="ui-page-head__actions">
+   <button class="ui-btn ui-btn--primary">…</button></div></div>`. */
+.ui-page-head--actions { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 16px; }
+.ui-page-head--actions > :first-child { min-width: 0; }
+.ui-page-head__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ui-space-2); }
+
+/* Chips that TOGGLE (a filter applied in place, no URL): `<div class="ui-chips"><button type="button" class="ui-tag
+   ui-tag--chip" aria-pressed="true">CRO</button>…`. Same box as the link chips (ui.css); pressed = the link's current. */
+.ui-chips > button.ui-tag--chip {
+  min-height: 28px; padding: 4px 12px; border-radius: var(--ui-radius-md, 8px); cursor: pointer;
+  font-family: inherit; font-size: var(--gemboss-fs-caption, 12px); color: var(--ui-text);
+}
+.ui-chips > button.ui-tag--chip:hover { background: var(--ui-surface-2); border-color: var(--ui-text-muted); }
+.ui-chips > button.ui-tag--chip:focus-visible { outline: 2px solid var(--ui-focus, #5661f5); outline-offset: 1px; }
+.ui-chips > button.ui-tag--chip[aria-pressed="true"] { background: var(--ui-accent-soft); border-color: var(--ui-accent); color: var(--ui-accent-strong); font-weight: 600; }
+@media (pointer: coarse), (max-width: 47.9975em) { .ui-chips > button.ui-tag--chip { min-height: 44px; } }
+
+/* Chat at phone WIDTH (gemwatcher's assistant, measured 03/10/2026): the composer read 14px (iOS zooms the page on tap
+   below 16) and "new chat" was 35px wide under a fine pointer. shell.css raises the latter under `pointer: coarse`; a
+   desktop window at 390px reports fine. Here and not in chat.css / shell.css: the admin's first-load budget. */
+@media (max-width: 47.9975em) {
+  /* Class doubled: chat.css is appended AFTER this file in gemboss-ui.css, so a same-weight rule there would win. */
+  .gemboss-ec-input.gemboss-ec-input textarea { font-size: 16px; }
+  .gemboss-assistant-collapse, .gemboss-assistant-newchat { min-height: 44px; min-width: 44px; }
+}
+
+/* Segmented buttons that say their state the accessible way: `aria-pressed="true"` looks like `.active` (ui-tabs reads
+   aria-selected already; gemcare had to set both on every group). */
+.ui-seg button[aria-pressed="true"] { background: var(--ui-accent-soft); color: var(--ui-accent-strong); }
+
+/* Read-only field: visibly not editable (the admin's field has no such state; gempress kept its own `.field[readonly]`).
+   The attribute doubled = (0,3,0), so it also holds over the field's own hover rule, which comes earlier. */
+:is(.gemboss-field, .ui-textarea)[readonly][readonly] { background: var(--ui-surface-2); border-color: var(--ui-border); cursor: default; }
+
+/* A popup whose body and foot sit inside one <form>: the form takes no box, so `.ui-modal > .ui-modal__body` (the
+   scrolling body) and the pinned foot still lay out as the popup's own children (gemcare's escalate form, 0.5.1). */
+.ui-modal > form { display: contents; }
+.ui-modal > form > .ui-modal__head, .ui-modal > form > .ui-modal__foot { flex: none; }
+.ui-modal > form > .ui-modal__body { flex: 1 1 auto; min-height: 0; overflow: auto; }
+
+/* A metric that FILTERS the view below it, as a toggle: `<button type="button" class="ui-metric" aria-pressed="true">`
+   (gemwatcher's Radar cards: as links to the same hash, Cmd-click opened an unfiltered tab, Space did nothing and the
+   chosen card was told by colour alone). A metric link that is the current view: `a.ui-metric[aria-current="page"]`.
+   Selected = iris edge, the shell's "this one" colour. */
+button.ui-metric { font: inherit; text-align: left; color: inherit; cursor: pointer; }
+button.ui-metric:hover { border-color: var(--ui-text-muted); }
+button.ui-metric:focus-visible { outline: 2px solid var(--ui-focus); outline-offset: 1px; }
+/* Class doubled: the chosen card is usually the one under the pointer, and `button.ui-metric:hover` (0,2,1) would
+   repaint its edge grey the moment it is clicked (measured on gemwatcher Radar). */
+.ui-metric.ui-metric:is([aria-pressed="true"], [aria-current="page"]) { border-color: var(--gemboss-accent); box-shadow: inset 0 0 0 1px var(--gemboss-accent); }