@celestia-island/hikari 0.55.318 → 0.55.319

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@celestia-island/hikari",
-  "version": "0.55.318",
+  "version": "0.55.319",
   "private": false,
   "type": "module",
   "description": "Hikari UI library, Vue 3 runtime — one design system for Vue 3 and Rust/WASM applications",

package/src/components/HkScrollContainer.tsx

@@ -453,7 +453,13 @@ export default defineComponent({
       }
       const band = vp.getBoundingClientRect();
       const active = pickActiveProgressRoot(band);
-      const rows = active ? active.root.querySelectorAll(props.scrollProgressSelector) : [];
+      // A list may own the row grammar (HkTable's section bands are body
+      // `<tr>`s that are not data rows); its `getRows` wins over the
+      // container selector. No `getRows` (or an undefined return) keeps the
+      // existing selector path byte-for-byte.
+      const rows = active
+        ? active.handle.getRows?.() ?? active.root.querySelectorAll(props.scrollProgressSelector)
+        : [];
       if (!active || rows.length === 0 || vp.scrollHeight <= vp.clientHeight + 1) {
         setProgressHidden();
         return;

package/src/components/HkScrollProgress.test.tsx

@@ -11,6 +11,7 @@ import { createApp, defineComponent, h, inject, nextTick, onMounted, onUnmounted
 
 import HkScrollContainer from "./HkScrollContainer";
 import { HkAdminTablePage } from "./HkAdminTablePage";
+import HTable from "./HkTable";
 import { HK_SCROLL_PROGRESS_REGISTRAR, type HkScrollProgressRegistrar } from "./HkScrollProgress";
 
 const mounts: Array<{ app: ReturnType<typeof createApp>; container: HTMLElement }> = [];
@@ -219,6 +220,24 @@ describe("HkScrollProgress", () => {
     expect(pill.textContent).toBe("11 / 340");
   });
 
+  it("counts only a sectioned HkTable's data rows, not its bands", async () => {
+    // The band is a `<tr>` in the section body but not a row. The table's
+    // handle `getRows` wins over the container's `tbody tr` selector, so
+    // the pill reports 2 sections x 2 rows = 4, not 6.
+    const sections = [
+      { key: "panel-a", label: "Panel A", rows: [{ name: "a0" }, { name: "a1" }] },
+      { key: "panel-b", label: "Panel B", rows: [{ name: "b0" }, { name: "b1" }] },
+    ];
+    const scroller = mountScroller(() =>
+      h(HTable, { columns: [{ key: "name", title: "Name" }], sections }),
+    );
+    stubRootRect(scroller.container, ".hk-table-host", -100, 1900);
+    stubRows(scroller.container, 6, 0);
+    scroller.refresh();
+    await nextTick();
+    expect(scroller.pill()!.textContent).toBe("1 / 4");
+  });
+
   it("falls back to the DOM row count when the total is absent", async () => {
     const List = makeList({ rows: ROWS });
     const scroller = mountScroller(() => h(List));

package/src/components/HkScrollProgress.tsx

@@ -24,6 +24,12 @@ import "./HkScrollProgress.scss";
 export interface HkScrollProgressHandle {
   getRoot(): HTMLElement | null;
   getTotal(): number | undefined;
+  /** The list's own row elements in display order — wins over the
+   *  container's `scrollProgressSelector` when present. This is for a
+   *  list whose DOM rows are not all data rows (HkTable's section bands
+   *  are `<tr>`s in the body, but they are not rows). Return `undefined`
+   *  to fall back to the container's selector. */
+  getRows?(): readonly Element[] | undefined;
 }
 
 /** Provided by every HkScrollContainer instance whose `scrollProgress`

package/src/components/HkTable.scss

@@ -95,6 +95,26 @@
   background: var(--hi-color-bg-subtle, rgba(255, 255, 255, 0.03));
 }
 
+/* A section's band is the first child of its body, so the base zebra rule
+   would shade each section's FIRST data row (child 2). Restart the phase
+   after the band: even data children are unshaded, odd ones carry the
+   stripe — the same first-row-unshaded phase an unsectioned body has. */
+.hk-table-striped .hk-table-section-body .hk-table-row:nth-child(even) {
+  background: none;
+}
+
+.hk-table-striped .hk-table-section-body .hk-table-row:nth-child(odd) {
+  background: var(--hi-color-bg-subtle, rgba(255, 255, 255, 0.03));
+}
+
+/* The sectioned zebra pair above is (0,4,0) — it would out-specify the
+   shared `.hk-table-hover .hk-table-row:hover` rule (0,3,0) and kill hover
+   feedback on EVERY row of a striped sectioned table. Keep the pointer
+   feedback by re-stating it at a spec that beats the pair. */
+.hk-table-striped.hk-table-hover .hk-table-section-body .hk-table-row:hover {
+  background: var(--hi-color-bg-subtle, rgba(255, 255, 255, 0.04));
+}
+
 .hk-table-bordered {
   border: 1px solid var(--hi-color-border, rgba(100,100,100,0.1));
   border-radius: var(--radius-md, 8px);
@@ -153,6 +173,51 @@
   color: var(--hi-color-text-secondary, #666666);
 }
 
+/* ── Section bands (grouped tables) ───────────────────────────────────
+   One `<tbody>` per section, each led by a band row. The band is a
+   rowgroup header, not a data row: it never carries `.hk-table-row`, so
+   the copy layer (which marks and cursor-styles cells via
+   `[data-copy-cell]`), the hover paint, the striped rule, the drag strip
+   and the selection/⋯ tracks all ignore it by construction. The band cell
+   carries no `data-copy-cell`, so it needs no copy-cursor override either.
+
+   The cell itself is TYPE-NEUTRAL for consumer markup: the `section` slot
+   carries arbitrary content (badges, panel names, status chips), so only
+   the track is styled here (padding / hairline / background / start
+   alignment). `font-weight: inherit` neutralizes the UA `th { font-weight:
+   bold }`; nothing here sets `white-space` (long panel names may wrap) or
+   `cursor` (selectable band text keeps its I-beam). Sizing is delivered by
+   the consumer's own classes; the plain `label` fallback gets its own span
+   below. The hk-table-sm/lg ladder steps ONLY the band's padding —
+   typography deliberately does not scale with the table size, because the
+   consumer's slot content owns its type. */
+.hk-table-section-cell {
+  padding: var(--space-8, 8px) var(--space-12, 12px);
+  border-bottom: 1px solid var(--hi-color-border, rgba(100,100,100,0.08));
+  text-align: start;
+  background: var(--hi-color-bg-subtle, rgba(255, 255, 255, 0.03));
+  font-weight: inherit;
+}
+
+/* The default `label` branch only (the `section` slot bypasses this span
+   entirely): the previous text-sm / font-medium band look. */
+.hk-table-section-label {
+  font-size: var(--text-sm, 0.875rem);
+  font-weight: 500;
+}
+
+.hk-table-sm .hk-table-section-cell {
+  padding: var(--space-4, 4px) var(--space-8, 8px);
+}
+
+.hk-table-lg .hk-table-section-cell {
+  padding: var(--space-16, 16px) var(--space-24, 24px);
+}
+
+.hk-table-bordered .hk-table-section-cell {
+  border: 1px solid var(--hi-color-border, rgba(100,100,100,0.06));
+}
+
 /* ── Drag-to-reorder (draggable) ─────────────────────────────────────── */
 
 .hk-table-drag-handle {