@gemboss/ui 0.33.4 → 0.34.2

package/CHANGELOG.md

@@ -2,6 +2,63 @@
 
 Versions up to 0.9.0 are described in the README, each in the section that introduced it.
 
+## 0.34.2 (11/10/2026)
+
+Fixed
+- **The page bar's centre wraps on a narrow screen** (`.gemboss-pageedit-top .gemboss-editor-tb-center`, ≤900px), like its
+  right side. The admin's page editor now carries Funnel · Canvas · Page beside the device toggle there when a funnel draws
+  the page; at 320 the two came to ~325px in a horizontal scroller, the last device button past the edge.
+
+## 0.34.1 (11/10/2026)
+
+Fixed
+- **A phone's pane tabs are 44px** (`.gemboss-editor-mobile-tab`, EditorPaneTabs): they were 38px, under §9.1's floor for a
+  control under a finger, in every editor that shows one pane at a time (≤760px). Measured on the funnel Studio
+  (Details · Funnel) and the canvas (Edit · Canvas) at 320 and 390. The row grows 6px.
+
+## 0.34.0 (11/10/2026)
+
+**A row that opens in place** (collections: the last hand-made pattern in GemWatcher's Feed). README "Collections".
+
+Added
+- `DisclosureItem` (client), used inside `ResourceList`: a summary row whose detail opens UNDER it, in place (a store and
+  its changes), not a page. The whole summary is one `<button aria-expanded aria-controls>` (the row's body: title with a
+  chevron, sub, meta, badges as phrasing content); media, `aside` and `actions` stay outside it, so a link to the item's
+  own page ("Profile →") is its own target and never nested in the button. The panel wraps under the row at full width,
+  also in the ≤400 two-band layout; its content is built on open (`keepMounted` to keep it). It is not a landmark unless
+  `panelRole="region"` (then labelled by the button): a Feed of open groups would otherwise be dozens of regions.
+  Controlled (`open` + `onOpenChange`) or not (`defaultOpen`). 44px under a finger. In development it warns when `open`
+  has no `onOpenChange` (the row never changes) and when the summary holds a link or button (nested interactive content).
+- collections.css: `.ui-list__item--disclosure`, `.ui-list__toggle`, `.ui-list__chev`, `.ui-list__panel`.
+- `DataTable flush` (`.ui-table-wrap--flush`, the loading skeleton too): inside a card that is already the frame, no
+  border, radius or shadow of its own, as `ResourceList flush`. GemWatcher Ad Intel's two tables in Panels drew two frames.
+
+Changed
+- Badges past the third read "+N more", not "+N" (which did not say N of what), in `ResourceItem`, `DisclosureItem`
+  and `MediaCard` (which cut them without a word). The hidden badges follow the count out of sight (`ui-sr-only`), so a
+  screen reader reads them; a tooltip would never show, the title's link covers the row. `false` / `null` entries
+  (`cond && badge`) are no badge: not counted, not read out.
+
+Fixed
+- The last row of a table has no bottom rule under its row header either (`tr:last-child > :is(td, th)`): a DataTable
+  row starts with `th scope=row`, and `> td` left a stub of a line under the first cell.
+- A row nested in another row's panel no longer takes the outer row's hover, focus ring or open chevron, and `wrap` on a
+  list reaches its own rows only (the row-state and `wrap` selectors were descendant, they are now child). The open row
+  is not left shaded after a tap (row hover only under `hover: hover`, never on the open row). The chevron is drawn in
+  `CanvasText` under forced colours (it was a background, which forced colours remove).
+
+## 0.33.5 (11/10/2026)
+
+**A Resource list whose titles are what people read can let them wrap** (gemfeedback #77). collections.
+
+Added
+- `wrap` on `ResourceList` and `SelectableResourceList` (`ui-list--wrap`, the class CompactList's `wrap` already uses):
+  `.ui-list__title` wraps instead of ending in "…". One line cut 26 of the first 50 titles at 320 on GemFeedback's board,
+  and `titleText` is a mouse-only tooltip. Default unchanged (one line + ellipsis).
+- `columnHeading` (2 | 3 | 4) on `Board`: each column's name is a real `<hN>` (same look: `font: inherit; margin: 0`), so
+  moving by heading reaches the columns. GemFeedback's roadmap lost its per-column h2 when it moved to Board. Default
+  unchanged (`<span>`).
+
 ## 0.33.4 (10/10/2026)
 
 Fixed

package/README.md

@@ -1474,6 +1474,9 @@ the admin's first load (`kit-plain-bundles.test.ts` checks the shell import carr
   `minWidth` (DataTable) is the floor of a column whose cells wrap, and replaces the row header's (`0` for a row
   header that is always short: a date, an id). A link alone on its
   line is 24px in the row header and in a list inside a cell (`li > a`), as `td > a` already was.
+- **A data table in a card is `flush` (0.34.0)**, as a resource list in a card: the card is the frame, so the wrap drops its
+  own border, radius and shadow (two frames otherwise). The last row has no bottom rule, row header included. The card
+  clips its corners (`overflow: hidden`, as GemWatcher's Panel): the last row's hover, the totals and the footer are square.
 - **A media card is 16:10, 4:3 or 1:1 (0.18.0)** (`MediaCard ratio`, `data-ratio="4/3" | "1/1"`): 1:1 for a square
   picture (a moodboard, a product shot, a social post). No other ratio: any other value draws 16:10.
 - **A board column of more than a few dozen cards pages on the SERVER (0.18.0).** The 0.13.0 board puts every card in
@@ -1511,6 +1514,11 @@ the admin's first load (`kit-plain-bundles.test.ts` checks the shell import carr
   its own rule sets its button on `gb:selection`, which fires after). collections-gate reports a list with selection
   boxes and no bar (`select-without-bulk`). An open ⋯ menu or dialog takes Escape first; a closed one kept in a row
   does not.
+- **A row that opens in place (0.34.0):** `DisclosureItem` inside a `ResourceList` when the detail is read right there (a
+  group and its items), not on a page of its own. The whole summary toggles; a link to the item's page goes in `actions`,
+  outside the button. Use `ResourceItem href` when the row opens a page.
+- **Titles that are the content wrap (0.33.5):** `ResourceList wrap` (and `SelectableResourceList wrap`) for a list whose
+  title is what people read (a request, a post); the default stays one line + "…" with `titleText`.
 - **The bulk bar is one row (0.33.0).** Bulk actions that do not fit after the box and the count go into a ⋯ menu at
   the bar's end, in order (Polaris BulkActions). React measures the real button widths, so the fold follows the labels,
   not a breakpoint; pass every action and let the bar decide. Order them by use: the first ones stay buttons.

package/catalog/editor.html

@@ -8,7 +8,7 @@
 .cat-code summary{padding:10px 16px;font-size:13px;cursor:pointer;color:var(--gemboss-text-muted);border-top:1px solid var(--gemboss-divider);min-height:24px}
 .cat-code pre,.cat-api{margin:0;padding:12px 16px;overflow:auto;background:#0f1012;color:#e8e8e6;font-size:12px;line-height:1.5;border-radius:0}
 .cat-api{border-radius:12px;margin:0 0 16px}</style></head><body><div class="cat">
-<h1>@gemboss/ui 0.33.4 · Editor</h1>
+<h1>@gemboss/ui 0.34.2 · Editor</h1>
 <p>Khung của mọi editor: <code>EditorFrame</code> (cột trái · khe kéo · preview · cột phải dock trên mép phải preview) và <code>EditorTopbar</code> (← · tiêu đề · cụm giữa · cụm phải · dòng trạng thái). Là đúng khung của theme / page / section editor trong admin. Gói chỉ vẽ KHUNG; chat, Configure, canvas, page picker, menu, Publish là của editor, đi vào bằng slot. Trang HTML thuần nạp <code>editor.css</code> + <code>editor-plain.js</code> rồi gọi <code>gembossUI.initEditorFrame()</code>: kéo khe (chuột, chạm, phím mũi tên / Home / End), đổi thiết bị, mở ⋯ và Publish ▾, ẩn cột trái, Chat | Preview trên điện thoại. <a href="index.html">← Catalog</a></p>
 <h2>React</h2><pre class="cat-api"><code>import &quot;@gemboss/ui/editor.css&quot;;
 import { EditorFrame, EditorTopbar, EditorBack, EditorChatToggle, EditorPaneTabs, EditorSaveState, DeviceToggle } from &quot;@gemboss/ui/editor&quot;;

package/catalog/index.html

@@ -27,7 +27,7 @@ body{margin:0;background:var(--gemboss-app-bg,#f1f1f1);color:var(--gemboss-text)
 @media (max-width:760px){.cat{grid-template-columns:1fr;padding:16px}.cat-nav{position:static;flex-direction:row;flex-wrap:wrap}}
 </style></head><body>
 <div class="cat"><nav class="cat-nav" aria-label="Mục"><a href="#tokens">Token</a><a href="#buttons">Nút</a><a href="#fields">Ô nhập</a><a href="#choice">Tab, nhóm nút, thẻ</a><a href="#surfaces">Thẻ, số liệu, bảng, trạng thái trống</a><a href="#report">Báo cáo</a><a href="#collections">Bảng, list, lưới, board</a><a href="#resizer">Thanh kéo giữa hai cột</a><a href="#modal">Hộp thoại, toast, menu (JS thuần)</a><a href="#shell">Khung app</a><a href="#nav">Chờ điều hướng</a><a href="#page">Bề rộng nội dung</a><a href="#portal">Cổng công khai: tab trên topbar, tìm kiếm, sáng / tối, người dẫn đầu</a><a href="#auth">Đăng nhập</a><a href="#setup">Hướng dẫn thiết lập</a><a href="#chat">Thân chat</a><a href="#reactions">Reactions</a><a href="#action-card">Thẻ hành động</a><a href="#assistant-engine">Trợ lý: chọn engine</a><a href="#assistant-bridge">Trợ lý: cầu nối trên máy (0.32.0)</a><a href="#assistant-chat">Trợ lý: khung chat (0.29.0)</a><a href="#assistant">Trợ lý: cột phiên</a><a href="#icons">Icon</a><a href="#editor">Editor</a></nav>
-<main><header class="cat-head"><h1>@gemboss/ui 0.33.4</h1><p>Ngôn ngữ thiết kế chung của các công cụ GemBoss. Markup dưới mỗi ví dụ là đúng thứ package render ra; bề mặt không dùng React (HTML tĩnh, Python) chép markup này và nạp <code>gemboss-ui.css</code>. Dựng từ gemboss <code>4ca04c7a0d43</code>.</p></header>
+<main><header class="cat-head"><h1>@gemboss/ui 0.34.2</h1><p>Ngôn ngữ thiết kế chung của các công cụ GemBoss. Markup dưới mỗi ví dụ là đúng thứ package render ra; bề mặt không dùng React (HTML tĩnh, Python) chép markup này và nạp <code>gemboss-ui.css</code>. Dựng từ gemboss <code>7c930a334088</code>.</p></header>
 <section id="tokens"><h2>Token</h2><p>Đổi giao diện một bề mặt bằng cách đặt lại token, không viết đè class. Tên và giá trị đọc thẳng từ gemboss-ui.css.</p><div class="cat-swatches"><div class="cat-swatch"><i style="background:var(--gemboss-primary)"></i><code>--gemboss-primary</code><span>#1b1c1e</span></div><div class="cat-swatch"><i style="background:var(--gemboss-primary-dark)"></i><code>--gemboss-primary-dark</code><span>#000000</span></div><div class="cat-swatch"><i style="background:var(--gemboss-primary-soft)"></i><code>--gemboss-primary-soft</code><span>#f2f3f5</span></div><div class="cat-swatch"><i style="background:var(--gemboss-accent)"></i><code>--gemboss-accent</code><span>#5661f5</span></div><div class="cat-swatch"><i style="background:var(--gemboss-accent-strong)"></i><code>--gemboss-accent-strong</code><span>#3a44de</span></div><div class="cat-swatch"><i style="background:var(--gemboss-accent-soft)"></i><code>--gemboss-accent-soft</code><span>#eef0fe</span></div><div class="cat-swatch"><i style="background:var(--gemboss-text-strong)"></i><code>--gemboss-text-strong</code><span>#1b1c1e</span></div><div class="cat-swatch"><i style="background:var(--gemboss-text)"></i><code>--gemboss-text</code><span>#1b1c1e</span></div><div class="cat-swatch"><i style="background:var(--gemboss-text-muted)"></i><code>--gemboss-text-muted</code><span>#686b71</span></div><div class="cat-swatch"><i style="background:var(--gemboss-surface)"></i><code>--gemboss-surface</code><span>#ffffff</span></div><div class="cat-swatch"><i style="background:var(--gemboss-canvas)"></i><code>--gemboss-canvas</code><span>#ffffff</span></div><div class="cat-swatch"><i style="background:var(--gemboss-preview-canvas)"></i><code>--gemboss-preview-canvas</code><span>#eceef1</span></div><div class="cat-swatch"><i style="background:var(--gemboss-rail-bg)"></i><code>--gemboss-rail-bg</code><span>#ffffff</span></div><div class="cat-swatch"><i style="background:var(--gemboss-panel-bg)"></i><code>--gemboss-panel-bg</code><span>#ffffff</span></div><div class="cat-swatch"><i style="background:var(--gemboss-divider)"></i><code>--gemboss-divider</code><span>#e5e7ea</span></div><div class="cat-swatch"><i style="background:var(--gemboss-divider-soft)"></i><code>--gemboss-divider-soft</code><span>#edeff2</span></div><div class="cat-swatch"><i style="background:var(--gemboss-hover)"></i><code>--gemboss-hover</code><span>#eceef2</span></div><div class="cat-swatch"><i style="background:var(--gemboss-active-bg)"></i><code>--gemboss-active-bg</code><span>#f0f1f4</span></div><div class="cat-swatch"><i style="background:var(--gemboss-active-fg)"></i><code>--gemboss-active-fg</code><span>#1b1c1e</span></div><div class="cat-swatch"><i style="background:var(--gemboss-danger)"></i><code>--gemboss-danger</code><span>#d72c0d</span></div><div class="cat-swatch"><i style="background:var(--gemboss-danger-strong)"></i><code>--gemboss-danger-strong</code><span>#b42318</span></div><div class="cat-swatch"><i style="background:var(--gemboss-danger-soft)"></i><code>--gemboss-danger-soft</code><span>#fff0e9</span></div><div class="cat-swatch"><i style="background:var(--gemboss-danger-border)"></i><code>--gemboss-danger-border</code><span>#f5c9bc</span></div><div class="cat-swatch"><i style="background:var(--gemboss-success)"></i><code>--gemboss-success</code><span>#007f5f</span></div><div class="cat-swatch"><i style="background:var(--gemboss-success-strong)"></i><code>--gemboss-success-strong</code><span>#0a6a4c</span></div><div class="cat-swatch"><i style="background:var(--gemboss-success-soft)"></i><code>--gemboss-success-soft</code><span>#e3f1df</span></div><div class="cat-swatch"><i style="background:var(--gemboss-success-border)"></i><code>--gemboss-success-border</code><span>#b7dfcd</span></div><div class="cat-swatch"><i style="background:var(--gemboss-warning)"></i><code>--gemboss-warning</code><span>#9a6700</span></div><div class="cat-swatch"><i style="background:var(--gemboss-warning-soft)"></i><code>--gemboss-warning-soft</code><span>#fff8e0</span></div><div class="cat-swatch"><i style="background:var(--gemboss-warning-border)"></i><code>--gemboss-warning-border</code><span>#f5d569</span></div><div class="cat-swatch"><i style="background:var(--gemboss-dark-bg)"></i><code>--gemboss-dark-bg</code><span>#0a0a0c</span></div><div class="cat-swatch"><i style="background:var(--gemboss-dark-rail)"></i><code>--gemboss-dark-rail</code><span>#0e0e11</span></div><div class="cat-swatch"><i style="background:var(--gemboss-dark-surface)"></i><code>--gemboss-dark-surface</code><span>#16161a</span></div><div class="cat-swatch"><i style="background:var(--gemboss-dark-surface-2)"></i><code>--gemboss-dark-surface-2</code><span>#1e1e24</span></div><div class="cat-swatch"><i style="background:var(--gemboss-dark-divider)"></i><code>--gemboss-dark-divider</code><span>#2a2a31</span></div><div class="cat-swatch"><i style="background:var(--gemboss-dark-text)"></i><code>--gemboss-dark-text</code><span>#ededf0</span></div><div class="cat-swatch"><i style="background:var(--gemboss-dark-muted)"></i><code>--gemboss-dark-muted</code><span>#9a9aa4</span></div><div class="cat-swatch"><i style="background:var(--gemboss-field-bg)"></i><code>--gemboss-field-bg</code><span>#fdfdfd</span></div><div class="cat-swatch"><i style="background:var(--gemboss-field-bg-hover)"></i><code>--gemboss-field-bg-hover</code><span>#fafafa</span></div><div class="cat-swatch"><i style="background:var(--gemboss-field-ink)"></i><code>--gemboss-field-ink</code><span>#303030</span></div><div class="cat-swatch"><i style="background:var(--gemboss-field-placeholder)"></i><code>--gemboss-field-placeholder</code><span>#616161</span></div><div class="cat-swatch"><i style="background:var(--gemboss-field-line)"></i><code>--gemboss-field-line</code><span>#8a8a8a</span></div><div class="cat-swatch"><i style="background:var(--gemboss-field-line-hover)"></i><code>--gemboss-field-line-hover</code><span>#616161</span></div><div class="cat-swatch"><i style="background:var(--gemboss-field-line-active)"></i><code>--gemboss-field-line-active</code><span>#1a1a1a</span></div><div class="cat-swatch"><i style="background:var(--gemboss-chip-ink)"></i><code>--gemboss-chip-ink</code><span>#303633</span></div><div class="cat-swatch"><i style="background:var(--gemboss-chip-line)"></i><code>--gemboss-chip-line</code><span>#cfd6ce</span></div><div class="cat-swatch"><i style="background:var(--gemboss-chip-line-hover)"></i><code>--gemboss-chip-line-hover</code><span>#aab4ad</span></div><div class="cat-swatch"><i style="background:var(--gemboss-chip-bg-hover)"></i><code>--gemboss-chip-bg-hover</code><span>#f6f7f5</span></div><div class="cat-swatch"><i style="background:var(--gemboss-on-primary)"></i><code>--gemboss-on-primary</code><span>#ffffff</span></div><div class="cat-swatch"><i style="background:var(--gemboss-app-bg)"></i><code>--gemboss-app-bg</code><span>#ffffff</span></div></div><table class="ui-table cat-scale"><thead><tr><th>Token</th><th>Giá trị</th><th>Mẫu</th></tr></thead><tbody><tr><td><code>--gemboss-fs-micro</code></td><td>11px</td><td style="font-size:var(--gemboss-fs-micro)">Ngôn ngữ thiết kế chung</td></tr><tr><td><code>--gemboss-fs-caption</code></td><td>12px</td><td style="font-size:var(--gemboss-fs-caption)">Ngôn ngữ thiết kế chung</td></tr><tr><td><code>--gemboss-fs-body</code></td><td>14px</td><td style="font-size:var(--gemboss-fs-body)">Ngôn ngữ thiết kế chung</td></tr><tr><td><code>--gemboss-fs-body-lg</code></td><td>16px</td><td style="font-size:var(--gemboss-fs-body-lg)">Ngôn ngữ thiết kế chung</td></tr><tr><td><code>--gemboss-fs-h3</code></td><td>16px</td><td style="font-size:var(--gemboss-fs-h3)">Ngôn ngữ thiết kế chung</td></tr><tr><td><code>--gemboss-fs-h2</code></td><td>20px</td><td style="font-size:var(--gemboss-fs-h2)">Ngôn ngữ thiết kế chung</td></tr><tr><td><code>--gemboss-fs-h1</code></td><td>24px</td><td style="font-size:var(--gemboss-fs-h1)">Ngôn ngữ thiết kế chung</td></tr><tr><td><code>--gemboss-fs-display</code></td><td>30px</td><td style="font-size:var(--gemboss-fs-display)">Ngôn ngữ thiết kế chung</td></tr><tr><td><code>--gemboss-radius-xs</code></td><td>4px</td><td><i class="cat-radius" style="border-radius:var(--gemboss-radius-xs)"></i></td></tr><tr><td><code>--gemboss-radius-sm</code></td><td>6px</td><td><i class="cat-radius" style="border-radius:var(--gemboss-radius-sm)"></i></td></tr><tr><td><code>--gemboss-radius-md</code></td><td>8px</td><td><i class="cat-radius" style="border-radius:var(--gemboss-radius-md)"></i></td></tr><tr><td><code>--gemboss-radius-lg</code></td><td>12px</td><td><i class="cat-radius" style="border-radius:var(--gemboss-radius-lg)"></i></td></tr><tr><td><code>--gemboss-radius-xl</code></td><td>16px</td><td><i class="cat-radius" style="border-radius:var(--gemboss-radius-xl)"></i></td></tr><tr><td><code>--gemboss-radius-2xl</code></td><td>20px</td><td><i class="cat-radius" style="border-radius:var(--gemboss-radius-2xl)"></i></td></tr><tr><td><code>--gemboss-radius-full</code></td><td>999px</td><td><i class="cat-radius" style="border-radius:var(--gemboss-radius-full)"></i></td></tr><tr><td><code>--gemboss-shadow-resting</code></td><td class="cat-small">0 1px 2px rgba(31, 30, 29, 0.04), 0 2px 6px rgba(31, 30, 29, 0.06)</td><td><i class="cat-radius" style="box-shadow:var(--gemboss-shadow-resting);border:0"></i></td></tr><tr><td><code>--gemboss-shadow-raised</code></td><td class="cat-small">0 4px 16px rgba(31, 30, 29, 0.10)</td><td><i class="cat-radius" style="box-shadow:var(--gemboss-shadow-raised);border:0"></i></td></tr><tr><td><code>--gemboss-shadow-overlay</code></td><td class="cat-small">0 16px 48px rgba(31, 30, 29, 0.18)</td><td><i class="cat-radius" style="box-shadow:var(--gemboss-shadow-overlay);border:0"></i></td></tr></tbody></table></section>
 <section id="buttons"><h2>Nút</h2><p>Một lớp <code>ui-btn</code>, ba biến thể, tông đỏ, một cỡ nhỏ. Cao 28px dưới chuột như Button của Polaris (ô nhập và ô chọn 32, như TextField), 44px dưới ngón tay và ở khổ điện thoại, cỡ nhỏ cũng vậy. Dùng được trên <code>&lt;button&gt;</code> lẫn <code>&lt;a&gt;</code> (căn giữa sẵn).</p><figure class="cat-demo"><figcaption>Mặc định · chính · ghost · nhỏ · tắt</figcaption><div class="cat-live"><div class="cat-row"><button type="button" class="ui-btn">Lưu nháp</button><button type="button" class="ui-btn ui-btn--primary">Xuất bản</button><button type="button" class="ui-btn ui-btn--ghost">Huỷ</button><button type="button" class="ui-btn ui-btn--sm">Nhỏ</button><button type="button" class="ui-btn ui-btn--primary" disabled>Đang lưu…</button><a class="ui-btn" href="#buttons">Link dạng nút</a></div></div><details class="cat-code"><summary>Markup</summary><pre><code>&lt;div class=&quot;cat-row&quot;&gt;
   &lt;button type=&quot;button&quot; class=&quot;ui-btn&quot;&gt;Lưu nháp&lt;/button&gt;
@@ -1614,7 +1614,7 @@ body{margin:0;background:var(--gemboss-app-bg,#f1f1f1);color:var(--gemboss-text)
       &lt;/tbody&gt;
     &lt;/table&gt;
   &lt;/div&gt;
-&lt;/div&gt;</code></pre></details></figure><figure class="cat-demo"><figcaption>3 · Resource list (<code>ResourceList</code> + <code>ResourceItem</code>): media 32 · tiêu đề · 2 dòng phụ · meta · badge (3 rồi +N) · aside · 1 nút. Cả hàng là link</figcaption><div class="cat-live"><ul class="ui-list" aria-label="Candidates"><li class="ui-list__item"><div class="ui-list__media"><span class="gb-avatar gb-avatar--32" data-tone="1" aria-hidden="true">LT</span></div><div class="ui-list__body"><a class="ui-list__title" href="#p0">Lily Tran</a><p class="ui-list__sub">Head of CRO at Ruggable</p><p class="ui-list__meta">Replied 2 days ago</p><div class="ui-list__badges"><span class="ui-badge">CRO</span><span class="ui-badge">Plus</span></div></div><div class="ui-list__aside"><b>82</b></div><div class="ui-list__actions"><button type="button" class="ui-btn ui-btn--sm">Invite</button></div></li><li class="ui-list__item"><div class="ui-list__media"><span class="gb-avatar gb-avatar--32" data-tone="0" aria-hidden="true">MB</span></div><div class="ui-list__body"><a class="ui-list__title" href="#p1">Marcus Bell</a><p class="ui-list__sub">Founder, Bell &amp; Co. Media. Runs Meta ads for 40 Shopify brands, mostly apparel and home goods; asked about the agency plan twice.</p><p class="ui-list__meta">New</p><div class="ui-list__badges"><span class="ui-badge">Media buyer</span></div></div><div class="ui-list__aside"><b>77</b></div><div class="ui-list__actions"><button type="button" class="ui-btn ui-btn--sm">Invite</button></div></li><li class="ui-list__item"><div class="ui-list__media"><span class="gb-avatar gb-avatar--32" data-tone="5" aria-hidden="true">AS</span></div><div class="ui-list__body"><a class="ui-list__title" href="#p2">Aiko Sato</a><p class="ui-list__sub">Shopify app founder (reviews)</p><p class="ui-list__meta">Waiting on intro</p><div class="ui-list__badges"><span class="ui-badge">App</span><span class="ui-badge">Japan</span><span class="ui-badge">Plus</span><span class="ui-badge">+1</span></div></div><div class="ui-list__aside"><b>64</b></div><div class="ui-list__actions"><button type="button" class="ui-btn ui-btn--sm">Invite</button></div></li></ul></div><details class="cat-code"><summary>Markup</summary><pre><code>&lt;ul class=&quot;ui-list&quot; aria-label=&quot;Candidates&quot;&gt;
+&lt;/div&gt;</code></pre></details></figure><figure class="cat-demo"><figcaption>3 · Resource list (<code>ResourceList</code> + <code>ResourceItem</code>): media 32 · tiêu đề · 2 dòng phụ · meta · badge (3 rồi +N) · aside · 1 nút. Cả hàng là link</figcaption><div class="cat-live"><ul class="ui-list" aria-label="Candidates"><li class="ui-list__item"><div class="ui-list__media"><span class="gb-avatar gb-avatar--32" data-tone="1" aria-hidden="true">LT</span></div><div class="ui-list__body"><a class="ui-list__title" href="#p0">Lily Tran</a><p class="ui-list__sub">Head of CRO at Ruggable</p><p class="ui-list__meta">Replied 2 days ago</p><div class="ui-list__badges"><span class="ui-badge">CRO</span><span class="ui-badge">Plus</span></div></div><div class="ui-list__aside"><b>82</b></div><div class="ui-list__actions"><button type="button" class="ui-btn ui-btn--sm">Invite</button></div></li><li class="ui-list__item"><div class="ui-list__media"><span class="gb-avatar gb-avatar--32" data-tone="0" aria-hidden="true">MB</span></div><div class="ui-list__body"><a class="ui-list__title" href="#p1">Marcus Bell</a><p class="ui-list__sub">Founder, Bell &amp; Co. Media. Runs Meta ads for 40 Shopify brands, mostly apparel and home goods; asked about the agency plan twice.</p><p class="ui-list__meta">New</p><div class="ui-list__badges"><span class="ui-badge">Media buyer</span></div></div><div class="ui-list__aside"><b>77</b></div><div class="ui-list__actions"><button type="button" class="ui-btn ui-btn--sm">Invite</button></div></li><li class="ui-list__item"><div class="ui-list__media"><span class="gb-avatar gb-avatar--32" data-tone="5" aria-hidden="true">AS</span></div><div class="ui-list__body"><a class="ui-list__title" href="#p2">Aiko Sato</a><p class="ui-list__sub">Shopify app founder (reviews)</p><p class="ui-list__meta">Waiting on intro</p><div class="ui-list__badges"><span class="ui-badge">App</span><span class="ui-badge">Japan</span><span class="ui-badge">Plus</span><span class="ui-badge">+1 more<span class="ui-sr-only">: <span class="ui-badge">Partner</span></span></span></div></div><div class="ui-list__aside"><b>64</b></div><div class="ui-list__actions"><button type="button" class="ui-btn ui-btn--sm">Invite</button></div></li></ul></div><details class="cat-code"><summary>Markup</summary><pre><code>&lt;ul class=&quot;ui-list&quot; aria-label=&quot;Candidates&quot;&gt;
   &lt;li class=&quot;ui-list__item&quot;&gt;
     &lt;div class=&quot;ui-list__media&quot;&gt;
       &lt;span class=&quot;gb-avatar gb-avatar--32&quot; data-tone=&quot;1&quot; aria-hidden=&quot;true&quot;&gt;LT&lt;/span&gt;
@@ -1666,7 +1666,9 @@ body{margin:0;background:var(--gemboss-app-bg,#f1f1f1);color:var(--gemboss-text)
         &lt;span class=&quot;ui-badge&quot;&gt;App&lt;/span&gt;
         &lt;span class=&quot;ui-badge&quot;&gt;Japan&lt;/span&gt;
         &lt;span class=&quot;ui-badge&quot;&gt;Plus&lt;/span&gt;
-        &lt;span class=&quot;ui-badge&quot;&gt;+1&lt;/span&gt;
+        &lt;span class=&quot;ui-badge&quot;&gt;+1 more&lt;span class=&quot;ui-sr-only&quot;&gt;: &lt;span class=&quot;ui-badge&quot;&gt;Partner&lt;/span&gt;
+          &lt;/span&gt;
+        &lt;/span&gt;
       &lt;/div&gt;
     &lt;/div&gt;
     &lt;div class=&quot;ui-list__aside&quot;&gt;
@@ -1710,7 +1712,7 @@ body{margin:0;background:var(--gemboss-app-bg,#f1f1f1);color:var(--gemboss-text)
       &lt;p class=&quot;ui-list__sub&quot;&gt;content-radar · 6 min read · 03/10/2026&lt;/p&gt;
     &lt;/div&gt;
   &lt;/li&gt;
-&lt;/ul&gt;</code></pre></details></figure><figure class="cat-demo"><figcaption>3 · Resource list chọn được (0.16.0, React <code>SelectableResourceList</code>, đang chọn 2): checkbox đầu khe media; thanh hành động là header của list, có từ đầu ("0 selected", nút tắt) nên tích ô đầu không đẩy hàng; Shift+click chọn dải; Escape bỏ chọn; bấm hàng vẫn mở chi tiết</figcaption><div class="cat-live"><div class="ui-resource"><div class="ui-bulkbar" data-fit="pending"><label class="ui-table__checkbox"><input type="checkbox" aria-label="Select all"/></label><span class="ui-bulkbar__count" aria-live="polite">2 selected</span><span class="ui-bulkbar__actions"><button type="button" class="ui-btn ui-btn--sm">Shortlist</button><button type="button" class="ui-btn ui-btn--sm">Compare</button><button type="button" class="ui-btn ui-btn--sm ui-btn--critical">Not fit</button></span><span class="ui-bulkbar__measure" aria-hidden="true"><span class="ui-btn ui-btn--sm">Shortlist</span><span class="ui-btn ui-btn--sm">Compare</span><span class="ui-btn ui-btn--sm ui-btn--critical">Not fit</span><span class="ui-btn ui-btn--icon"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="4.5" cy="10" r="1"></circle><circle cx="10" cy="10" r="1"></circle><circle cx="15.5" cy="10" r="1"></circle></g></svg></span></span></div><ul class="ui-list" aria-label="Candidates"><li class="ui-list__item is-selected"><div class="ui-list__media"><label class="ui-list__check"><input type="checkbox" aria-label="Select Lily Tran" checked=""/></label><span class="gb-avatar gb-avatar--32" data-tone="1" aria-hidden="true">LT</span></div><div class="ui-list__body"><a class="ui-list__title" href="#s0">Lily Tran</a><p class="ui-list__sub">Head of CRO at Ruggable</p><p class="ui-list__meta">Replied 2 days ago</p><div class="ui-list__badges"><span class="ui-badge">CRO</span><span class="ui-badge">Plus</span></div></div><div class="ui-list__aside"><b>82</b></div></li><li class="ui-list__item"><div class="ui-list__media"><label class="ui-list__check"><input type="checkbox" aria-label="Select Marcus Bell"/></label><span class="gb-avatar gb-avatar--32" data-tone="0" aria-hidden="true">MB</span></div><div class="ui-list__body"><a class="ui-list__title" href="#s1">Marcus Bell</a><p class="ui-list__sub">Founder, Bell &amp; Co. Media. Runs Meta ads for 40 Shopify brands, mostly apparel and home goods; asked about the agency plan twice.</p><p class="ui-list__meta">New</p><div class="ui-list__badges"><span class="ui-badge">Media buyer</span></div></div><div class="ui-list__aside"><b>77</b></div></li><li class="ui-list__item is-selected"><div class="ui-list__media"><label class="ui-list__check"><input type="checkbox" aria-label="Select Aiko Sato" checked=""/></label><span class="gb-avatar gb-avatar--32" data-tone="5" aria-hidden="true">AS</span></div><div class="ui-list__body"><a class="ui-list__title" href="#s2">Aiko Sato</a><p class="ui-list__sub">Shopify app founder (reviews)</p><p class="ui-list__meta">Waiting on intro</p><div class="ui-list__badges"><span class="ui-badge">App</span><span class="ui-badge">Japan</span><span class="ui-badge">Plus</span><span class="ui-badge">+1</span></div></div><div class="ui-list__aside"><b>64</b></div></li></ul></div></div><details class="cat-code"><summary>Markup</summary><pre><code>&lt;div class=&quot;ui-resource&quot;&gt;
+&lt;/ul&gt;</code></pre></details></figure><figure class="cat-demo"><figcaption>3 · Resource list chọn được (0.16.0, React <code>SelectableResourceList</code>, đang chọn 2): checkbox đầu khe media; thanh hành động là header của list, có từ đầu ("0 selected", nút tắt) nên tích ô đầu không đẩy hàng; Shift+click chọn dải; Escape bỏ chọn; bấm hàng vẫn mở chi tiết</figcaption><div class="cat-live"><div class="ui-resource"><div class="ui-bulkbar" data-fit="pending"><label class="ui-table__checkbox"><input type="checkbox" aria-label="Select all"/></label><span class="ui-bulkbar__count" aria-live="polite">2 selected</span><span class="ui-bulkbar__actions"><button type="button" class="ui-btn ui-btn--sm">Shortlist</button><button type="button" class="ui-btn ui-btn--sm">Compare</button><button type="button" class="ui-btn ui-btn--sm ui-btn--critical">Not fit</button></span><span class="ui-bulkbar__measure" aria-hidden="true"><span class="ui-btn ui-btn--sm">Shortlist</span><span class="ui-btn ui-btn--sm">Compare</span><span class="ui-btn ui-btn--sm ui-btn--critical">Not fit</span><span class="ui-btn ui-btn--icon"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="4.5" cy="10" r="1"></circle><circle cx="10" cy="10" r="1"></circle><circle cx="15.5" cy="10" r="1"></circle></g></svg></span></span></div><ul class="ui-list" aria-label="Candidates"><li class="ui-list__item is-selected"><div class="ui-list__media"><label class="ui-list__check"><input type="checkbox" aria-label="Select Lily Tran" checked=""/></label><span class="gb-avatar gb-avatar--32" data-tone="1" aria-hidden="true">LT</span></div><div class="ui-list__body"><a class="ui-list__title" href="#s0">Lily Tran</a><p class="ui-list__sub">Head of CRO at Ruggable</p><p class="ui-list__meta">Replied 2 days ago</p><div class="ui-list__badges"><span class="ui-badge">CRO</span><span class="ui-badge">Plus</span></div></div><div class="ui-list__aside"><b>82</b></div></li><li class="ui-list__item"><div class="ui-list__media"><label class="ui-list__check"><input type="checkbox" aria-label="Select Marcus Bell"/></label><span class="gb-avatar gb-avatar--32" data-tone="0" aria-hidden="true">MB</span></div><div class="ui-list__body"><a class="ui-list__title" href="#s1">Marcus Bell</a><p class="ui-list__sub">Founder, Bell &amp; Co. Media. Runs Meta ads for 40 Shopify brands, mostly apparel and home goods; asked about the agency plan twice.</p><p class="ui-list__meta">New</p><div class="ui-list__badges"><span class="ui-badge">Media buyer</span></div></div><div class="ui-list__aside"><b>77</b></div></li><li class="ui-list__item is-selected"><div class="ui-list__media"><label class="ui-list__check"><input type="checkbox" aria-label="Select Aiko Sato" checked=""/></label><span class="gb-avatar gb-avatar--32" data-tone="5" aria-hidden="true">AS</span></div><div class="ui-list__body"><a class="ui-list__title" href="#s2">Aiko Sato</a><p class="ui-list__sub">Shopify app founder (reviews)</p><p class="ui-list__meta">Waiting on intro</p><div class="ui-list__badges"><span class="ui-badge">App</span><span class="ui-badge">Japan</span><span class="ui-badge">Plus</span><span class="ui-badge">+1 more<span class="ui-sr-only">: <span class="ui-badge">Partner</span></span></span></div></div><div class="ui-list__aside"><b>64</b></div></li></ul></div></div><details class="cat-code"><summary>Markup</summary><pre><code>&lt;div class=&quot;ui-resource&quot;&gt;
   &lt;div class=&quot;ui-bulkbar&quot; data-fit=&quot;pending&quot;&gt;
     &lt;label class=&quot;ui-table__checkbox&quot;&gt;
       &lt;input type=&quot;checkbox&quot; aria-label=&quot;Select all&quot;/&gt;
@@ -1794,7 +1796,9 @@ body{margin:0;background:var(--gemboss-app-bg,#f1f1f1);color:var(--gemboss-text)
         &lt;span class=&quot;ui-badge&quot;&gt;App&lt;/span&gt;
         &lt;span class=&quot;ui-badge&quot;&gt;Japan&lt;/span&gt;
         &lt;span class=&quot;ui-badge&quot;&gt;Plus&lt;/span&gt;
-        &lt;span class=&quot;ui-badge&quot;&gt;+1&lt;/span&gt;
+        &lt;span class=&quot;ui-badge&quot;&gt;+1 more&lt;span class=&quot;ui-sr-only&quot;&gt;: &lt;span class=&quot;ui-badge&quot;&gt;Partner&lt;/span&gt;
+          &lt;/span&gt;
+        &lt;/span&gt;
       &lt;/div&gt;
     &lt;/div&gt;
     &lt;div class=&quot;ui-list__aside&quot;&gt;
@@ -1802,7 +1806,7 @@ body{margin:0;background:var(--gemboss-app-bg,#f1f1f1);color:var(--gemboss-text)
     &lt;/div&gt;
   &lt;/li&gt;
 &lt;/ul&gt;
-&lt;/div&gt;</code></pre></details></figure><figure class="cat-demo cat-screen"><figcaption>3 · Resource list chọn được ở 390px: ô chọn 44 (điều khiển dưới ngón tay) kéo vào lề hàng, ảnh không bị đẩy</figcaption><div class="cat-wide"><iframe title="3 · Resource list chọn được ở 390px: ô chọn 44 (điều khiển dưới ngón tay) kéo vào lề hàng, ảnh không bị đẩy" style="height:420px;width:390px" srcdoc="&lt;!doctype html&gt;&lt;html&gt;&lt;head&gt;&lt;meta charset=&quot;utf-8&quot;&gt;&lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../gemboss-ui.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/collections.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/reactions.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/assistant-engine.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/action-card.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/assistant-chat.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/minichart.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/setup-guide.css&quot;&gt;&lt;/head&gt;&lt;body&gt;&lt;div style=&quot;padding:16px&quot;&gt;&lt;div class=&quot;ui-resource&quot;&gt;&lt;div class=&quot;ui-bulkbar&quot; data-fit=&quot;pending&quot;&gt;&lt;label class=&quot;ui-table__checkbox&quot;&gt;&lt;input type=&quot;checkbox&quot; aria-label=&quot;Select all&quot;/&gt;&lt;/label&gt;&lt;span class=&quot;ui-bulkbar__count&quot; aria-live=&quot;polite&quot;&gt;0 selected&lt;/span&gt;&lt;span class=&quot;ui-bulkbar__actions&quot;&gt;&lt;button type=&quot;button&quot; class=&quot;ui-btn ui-btn--sm&quot; disabled=&quot;&quot;&gt;Shortlist&lt;/button&gt;&lt;button type=&quot;button&quot; class=&quot;ui-btn ui-btn--sm&quot; disabled=&quot;&quot;&gt;Compare&lt;/button&gt;&lt;button type=&quot;button&quot; class=&quot;ui-btn ui-btn--sm ui-btn--critical&quot; disabled=&quot;&quot;&gt;Not fit&lt;/button&gt;&lt;/span&gt;&lt;span class=&quot;ui-bulkbar__measure&quot; aria-hidden=&quot;true&quot;&gt;&lt;span class=&quot;ui-btn ui-btn--sm&quot;&gt;Shortlist&lt;/span&gt;&lt;span class=&quot;ui-btn ui-btn--sm&quot;&gt;Compare&lt;/span&gt;&lt;span class=&quot;ui-btn ui-btn--sm ui-btn--critical&quot;&gt;Not fit&lt;/span&gt;&lt;span class=&quot;ui-btn ui-btn--icon&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;20&quot; height=&quot;20&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;circle cx=&quot;4.5&quot; cy=&quot;10&quot; r=&quot;1&quot;&gt;&lt;/circle&gt;&lt;circle cx=&quot;10&quot; cy=&quot;10&quot; r=&quot;1&quot;&gt;&lt;/circle&gt;&lt;circle cx=&quot;15.5&quot; cy=&quot;10&quot; r=&quot;1&quot;&gt;&lt;/circle&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/span&gt;&lt;/span&gt;&lt;/div&gt;&lt;ul class=&quot;ui-list&quot; aria-label=&quot;Candidates&quot;&gt;&lt;li class=&quot;ui-list__item&quot;&gt;&lt;div class=&quot;ui-list__media&quot;&gt;&lt;label class=&quot;ui-list__check&quot;&gt;&lt;input type=&quot;checkbox&quot; aria-label=&quot;Select Lily Tran&quot;/&gt;&lt;/label&gt;&lt;span class=&quot;gb-avatar gb-avatar--32&quot; data-tone=&quot;1&quot; aria-hidden=&quot;true&quot;&gt;LT&lt;/span&gt;&lt;/div&gt;&lt;div class=&quot;ui-list__body&quot;&gt;&lt;a class=&quot;ui-list__title&quot; href=&quot;#s0&quot;&gt;Lily Tran&lt;/a&gt;&lt;p class=&quot;ui-list__sub&quot;&gt;Head of CRO at Ruggable&lt;/p&gt;&lt;p class=&quot;ui-list__meta&quot;&gt;Replied 2 days ago&lt;/p&gt;&lt;div class=&quot;ui-list__badges&quot;&gt;&lt;span class=&quot;ui-badge&quot;&gt;CRO&lt;/span&gt;&lt;span class=&quot;ui-badge&quot;&gt;Plus&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class=&quot;ui-list__aside&quot;&gt;&lt;b&gt;82&lt;/b&gt;&lt;/div&gt;&lt;/li&gt;&lt;li class=&quot;ui-list__item&quot;&gt;&lt;div class=&quot;ui-list__media&quot;&gt;&lt;label class=&quot;ui-list__check&quot;&gt;&lt;input type=&quot;checkbox&quot; aria-label=&quot;Select Marcus Bell&quot;/&gt;&lt;/label&gt;&lt;span class=&quot;gb-avatar gb-avatar--32&quot; data-tone=&quot;0&quot; aria-hidden=&quot;true&quot;&gt;MB&lt;/span&gt;&lt;/div&gt;&lt;div class=&quot;ui-list__body&quot;&gt;&lt;a class=&quot;ui-list__title&quot; href=&quot;#s1&quot;&gt;Marcus Bell&lt;/a&gt;&lt;p class=&quot;ui-list__sub&quot;&gt;Founder, Bell &amp;amp; Co. Media. Runs Meta ads for 40 Shopify brands, mostly apparel and home goods; asked about the agency plan twice.&lt;/p&gt;&lt;p class=&quot;ui-list__meta&quot;&gt;New&lt;/p&gt;&lt;div class=&quot;ui-list__badges&quot;&gt;&lt;span class=&quot;ui-badge&quot;&gt;Media buyer&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class=&quot;ui-list__aside&quot;&gt;&lt;b&gt;77&lt;/b&gt;&lt;/div&gt;&lt;/li&gt;&lt;li class=&quot;ui-list__item&quot;&gt;&lt;div class=&quot;ui-list__media&quot;&gt;&lt;label class=&quot;ui-list__check&quot;&gt;&lt;input type=&quot;checkbox&quot; aria-label=&quot;Select Aiko Sato&quot;/&gt;&lt;/label&gt;&lt;span class=&quot;gb-avatar gb-avatar--32&quot; data-tone=&quot;5&quot; aria-hidden=&quot;true&quot;&gt;AS&lt;/span&gt;&lt;/div&gt;&lt;div class=&quot;ui-list__body&quot;&gt;&lt;a class=&quot;ui-list__title&quot; href=&quot;#s2&quot;&gt;Aiko Sato&lt;/a&gt;&lt;p class=&quot;ui-list__sub&quot;&gt;Shopify app founder (reviews)&lt;/p&gt;&lt;p class=&quot;ui-list__meta&quot;&gt;Waiting on intro&lt;/p&gt;&lt;div class=&quot;ui-list__badges&quot;&gt;&lt;span class=&quot;ui-badge&quot;&gt;App&lt;/span&gt;&lt;span class=&quot;ui-badge&quot;&gt;Japan&lt;/span&gt;&lt;span class=&quot;ui-badge&quot;&gt;Plus&lt;/span&gt;&lt;span class=&quot;ui-badge&quot;&gt;+1&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class=&quot;ui-list__aside&quot;&gt;&lt;b&gt;64&lt;/b&gt;&lt;/div&gt;&lt;/li&gt;&lt;/ul&gt;&lt;/div&gt;&lt;/div&gt;&lt;/body&gt;&lt;/html&gt;"></iframe></div><details class="cat-code"><summary>Markup</summary><pre><code>&lt;div style=&quot;padding:16px&quot;&gt;
+&lt;/div&gt;</code></pre></details></figure><figure class="cat-demo cat-screen"><figcaption>3 · Resource list chọn được ở 390px: ô chọn 44 (điều khiển dưới ngón tay) kéo vào lề hàng, ảnh không bị đẩy</figcaption><div class="cat-wide"><iframe title="3 · Resource list chọn được ở 390px: ô chọn 44 (điều khiển dưới ngón tay) kéo vào lề hàng, ảnh không bị đẩy" style="height:420px;width:390px" srcdoc="&lt;!doctype html&gt;&lt;html&gt;&lt;head&gt;&lt;meta charset=&quot;utf-8&quot;&gt;&lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../gemboss-ui.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/collections.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/reactions.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/assistant-engine.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/action-card.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/assistant-chat.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/minichart.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/setup-guide.css&quot;&gt;&lt;/head&gt;&lt;body&gt;&lt;div style=&quot;padding:16px&quot;&gt;&lt;div class=&quot;ui-resource&quot;&gt;&lt;div class=&quot;ui-bulkbar&quot; data-fit=&quot;pending&quot;&gt;&lt;label class=&quot;ui-table__checkbox&quot;&gt;&lt;input type=&quot;checkbox&quot; aria-label=&quot;Select all&quot;/&gt;&lt;/label&gt;&lt;span class=&quot;ui-bulkbar__count&quot; aria-live=&quot;polite&quot;&gt;0 selected&lt;/span&gt;&lt;span class=&quot;ui-bulkbar__actions&quot;&gt;&lt;button type=&quot;button&quot; class=&quot;ui-btn ui-btn--sm&quot; disabled=&quot;&quot;&gt;Shortlist&lt;/button&gt;&lt;button type=&quot;button&quot; class=&quot;ui-btn ui-btn--sm&quot; disabled=&quot;&quot;&gt;Compare&lt;/button&gt;&lt;button type=&quot;button&quot; class=&quot;ui-btn ui-btn--sm ui-btn--critical&quot; disabled=&quot;&quot;&gt;Not fit&lt;/button&gt;&lt;/span&gt;&lt;span class=&quot;ui-bulkbar__measure&quot; aria-hidden=&quot;true&quot;&gt;&lt;span class=&quot;ui-btn ui-btn--sm&quot;&gt;Shortlist&lt;/span&gt;&lt;span class=&quot;ui-btn ui-btn--sm&quot;&gt;Compare&lt;/span&gt;&lt;span class=&quot;ui-btn ui-btn--sm ui-btn--critical&quot;&gt;Not fit&lt;/span&gt;&lt;span class=&quot;ui-btn ui-btn--icon&quot;&gt;&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;20&quot; height=&quot;20&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;&lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;circle cx=&quot;4.5&quot; cy=&quot;10&quot; r=&quot;1&quot;&gt;&lt;/circle&gt;&lt;circle cx=&quot;10&quot; cy=&quot;10&quot; r=&quot;1&quot;&gt;&lt;/circle&gt;&lt;circle cx=&quot;15.5&quot; cy=&quot;10&quot; r=&quot;1&quot;&gt;&lt;/circle&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/span&gt;&lt;/span&gt;&lt;/div&gt;&lt;ul class=&quot;ui-list&quot; aria-label=&quot;Candidates&quot;&gt;&lt;li class=&quot;ui-list__item&quot;&gt;&lt;div class=&quot;ui-list__media&quot;&gt;&lt;label class=&quot;ui-list__check&quot;&gt;&lt;input type=&quot;checkbox&quot; aria-label=&quot;Select Lily Tran&quot;/&gt;&lt;/label&gt;&lt;span class=&quot;gb-avatar gb-avatar--32&quot; data-tone=&quot;1&quot; aria-hidden=&quot;true&quot;&gt;LT&lt;/span&gt;&lt;/div&gt;&lt;div class=&quot;ui-list__body&quot;&gt;&lt;a class=&quot;ui-list__title&quot; href=&quot;#s0&quot;&gt;Lily Tran&lt;/a&gt;&lt;p class=&quot;ui-list__sub&quot;&gt;Head of CRO at Ruggable&lt;/p&gt;&lt;p class=&quot;ui-list__meta&quot;&gt;Replied 2 days ago&lt;/p&gt;&lt;div class=&quot;ui-list__badges&quot;&gt;&lt;span class=&quot;ui-badge&quot;&gt;CRO&lt;/span&gt;&lt;span class=&quot;ui-badge&quot;&gt;Plus&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class=&quot;ui-list__aside&quot;&gt;&lt;b&gt;82&lt;/b&gt;&lt;/div&gt;&lt;/li&gt;&lt;li class=&quot;ui-list__item&quot;&gt;&lt;div class=&quot;ui-list__media&quot;&gt;&lt;label class=&quot;ui-list__check&quot;&gt;&lt;input type=&quot;checkbox&quot; aria-label=&quot;Select Marcus Bell&quot;/&gt;&lt;/label&gt;&lt;span class=&quot;gb-avatar gb-avatar--32&quot; data-tone=&quot;0&quot; aria-hidden=&quot;true&quot;&gt;MB&lt;/span&gt;&lt;/div&gt;&lt;div class=&quot;ui-list__body&quot;&gt;&lt;a class=&quot;ui-list__title&quot; href=&quot;#s1&quot;&gt;Marcus Bell&lt;/a&gt;&lt;p class=&quot;ui-list__sub&quot;&gt;Founder, Bell &amp;amp; Co. Media. Runs Meta ads for 40 Shopify brands, mostly apparel and home goods; asked about the agency plan twice.&lt;/p&gt;&lt;p class=&quot;ui-list__meta&quot;&gt;New&lt;/p&gt;&lt;div class=&quot;ui-list__badges&quot;&gt;&lt;span class=&quot;ui-badge&quot;&gt;Media buyer&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class=&quot;ui-list__aside&quot;&gt;&lt;b&gt;77&lt;/b&gt;&lt;/div&gt;&lt;/li&gt;&lt;li class=&quot;ui-list__item&quot;&gt;&lt;div class=&quot;ui-list__media&quot;&gt;&lt;label class=&quot;ui-list__check&quot;&gt;&lt;input type=&quot;checkbox&quot; aria-label=&quot;Select Aiko Sato&quot;/&gt;&lt;/label&gt;&lt;span class=&quot;gb-avatar gb-avatar--32&quot; data-tone=&quot;5&quot; aria-hidden=&quot;true&quot;&gt;AS&lt;/span&gt;&lt;/div&gt;&lt;div class=&quot;ui-list__body&quot;&gt;&lt;a class=&quot;ui-list__title&quot; href=&quot;#s2&quot;&gt;Aiko Sato&lt;/a&gt;&lt;p class=&quot;ui-list__sub&quot;&gt;Shopify app founder (reviews)&lt;/p&gt;&lt;p class=&quot;ui-list__meta&quot;&gt;Waiting on intro&lt;/p&gt;&lt;div class=&quot;ui-list__badges&quot;&gt;&lt;span class=&quot;ui-badge&quot;&gt;App&lt;/span&gt;&lt;span class=&quot;ui-badge&quot;&gt;Japan&lt;/span&gt;&lt;span class=&quot;ui-badge&quot;&gt;Plus&lt;/span&gt;&lt;span class=&quot;ui-badge&quot;&gt;+1 more&lt;span class=&quot;ui-sr-only&quot;&gt;: &lt;span class=&quot;ui-badge&quot;&gt;Partner&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class=&quot;ui-list__aside&quot;&gt;&lt;b&gt;64&lt;/b&gt;&lt;/div&gt;&lt;/li&gt;&lt;/ul&gt;&lt;/div&gt;&lt;/div&gt;&lt;/body&gt;&lt;/html&gt;"></iframe></div><details class="cat-code"><summary>Markup</summary><pre><code>&lt;div style=&quot;padding:16px&quot;&gt;
   &lt;div class=&quot;ui-resource&quot;&gt;
     &lt;div class=&quot;ui-bulkbar&quot; data-fit=&quot;pending&quot;&gt;
       &lt;label class=&quot;ui-table__checkbox&quot;&gt;
@@ -1887,7 +1891,9 @@ body{margin:0;background:var(--gemboss-app-bg,#f1f1f1);color:var(--gemboss-text)
         &lt;span class=&quot;ui-badge&quot;&gt;App&lt;/span&gt;
         &lt;span class=&quot;ui-badge&quot;&gt;Japan&lt;/span&gt;
         &lt;span class=&quot;ui-badge&quot;&gt;Plus&lt;/span&gt;
-        &lt;span class=&quot;ui-badge&quot;&gt;+1&lt;/span&gt;
+        &lt;span class=&quot;ui-badge&quot;&gt;+1 more&lt;span class=&quot;ui-sr-only&quot;&gt;: &lt;span class=&quot;ui-badge&quot;&gt;Partner&lt;/span&gt;
+          &lt;/span&gt;
+        &lt;/span&gt;
       &lt;/div&gt;
     &lt;/div&gt;
     &lt;div class=&quot;ui-list__aside&quot;&gt;