@celestia-island/hikari 0.55.82 → 0.55.84

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@celestia-island/hikari",
-  "version": "0.55.82",
+  "version": "0.55.84",
   "private": false,
   "type": "module",
   "description": "Hikari Vue 3 component library — production-grade UI components based on shittim-chest design system",

package/src/components/HkAffixPicker.test.tsx

@@ -1,5 +1,8 @@
 import { afterEach, describe, expect, it } from "vitest";
 import { createApp, h, nextTick } from "vue";
+import { dirname, join } from "node:path";
+import { readFileSync } from "node:fs";
+import { fileURLToPath } from "node:url";
 
 import HkAffixPicker, { type HkAffixOption } from "./HkAffixPicker";
 
@@ -474,3 +477,20 @@ describe("HkAffixPicker", () => {
     expect(document.querySelector(".hk-affix-list .hk-scrollbar-track")).toBeNull();
   });
 });
+
+describe("affix side → popup placement contract", () => {
+  it("anchors side=suffix popups to the bottom-end edge", () => {
+    // The suffix side hosts unit pickers (e.g. KiB/MiB/GiB chips on a
+    // number field — shittim-chest quota editor): the popup must anchor
+    // to the END edge so it opens toward the viewport instead of off
+    // the field's right edge. The mapping is one expression in the
+    // component; this source contract pins it against silent edits.
+    const src = readFileSync(
+      join(dirname(fileURLToPath(import.meta.url)), "HkAffixPicker.tsx"),
+      "utf-8",
+    );
+    expect(src).toContain(
+      'props.side === "suffix" ? "bottom-end" : "bottom-start"',
+    );
+  });
+});

package/src/components/HkNumberInput.affix.test.ts

@@ -149,3 +149,36 @@ describe("HkNumberInput affix contract", () => {
     expect(label?.textContent).toBe("轮播间隔");
   });
 });
+
+describe("HkNumberInput suffix slot interactivity — the affix-picker host contract", () => {
+  it("delivers clicks on interactive suffix content (the unit-picker chip)", () => {
+    // The "unit picker" composition (an affix chip riding the suffix
+    // slot — e.g. HkAffixPicker side="suffix" for KiB/MiB/GiB in the
+    // quota editor) mounts a BUTTON inside the suffix span. The span is
+    // a plain flex item. This pins the event WIRING (a listener inside
+    // the suffix slot fires) — synthetic dispatch bypasses CSS
+    // hit-testing, so the pointer-events half of that guarantee lives
+    // in the SCSS source contract below (R1 observation).
+    let clicks = 0;
+    const { container } = mountNumberInput({
+      slots: {
+        suffix: () =>
+          h("button", { class: "suffix-chip-probe", onClick: () => clicks++ }, "MiB"),
+      },
+    });
+    const chip = query(container, ".hk-number-input-suffix .suffix-chip-probe") as HTMLElement;
+    expect(chip, "chip button inside the suffix span must render").not.toBeNull();
+    chip.dispatchEvent(new MouseEvent("click", { bubbles: true, cancelable: true }));
+    expect(clicks).toBe(1);
+  });
+
+  it("keeps pointer-events off the affix spans themselves (SCSS contract)", () => {
+    // Only the wrapper's `-disabled` state may set pointer-events:none —
+    // the same rule the wrapper uses to disable the whole field. A none
+    // on the affix spans would deaden interactive suffix content while
+    // the field looked enabled.
+    const affixRule =
+      scss.match(/\.hk-number-input-prefix,\s*\.hk-number-input-suffix\s*{[^}]*}/)?.[0] ?? "";
+    expect(affixRule, "affix rule must exist").not.toContain("pointer-events: none");
+  });
+});

package/src/components/HkStatCard.scss

@@ -197,3 +197,50 @@
   gap: var(--space-8, 0.5rem);
   max-width: 100%;
 }
+
+/* ── foot row — the `action` slot's corner anchor ──────────────────────
+   When a card hosts the `action` slot, the hint line is wrapped in a
+   relative foot row and the action content is pinned to the row's
+   trailing edge — the card's bottom-right corner (the per-card "⋯"
+   affordance). Clicks stop at the wrapper (the TSX stops propagation),
+   so an action button never double-fires a clickable card's click. */
+.hk-stat-card-foot {
+  position: relative;
+  display: flex;
+  align-items: center;
+  min-width: 0;
+  max-width: 100%;
+}
+
+/* The ring variant centers its detail line — keep the hint visually
+   centered while the action hugs the trailing edge. The card centers
+   its children (align-items:center), which would leave the foot row
+   fit-content-wide and BOTH of those goals dead: the centering would
+   have nothing to center and the absolutely-positioned action would
+   anchor to the hint's edge instead of the card's corner — so the foot
+   explicitly stretches back to the full card width (R2). */
+.hk-stat-card-ring .hk-stat-card-foot {
+  align-self: stretch;
+  justify-content: center;
+}
+
+/* Reserve the corner: a min-height keeps an action-only foot (no hint)
+   from collapsing onto the content above, and the hint truncates before
+   it can slide under the affordance. */
+.hk-stat-card-foot[data-has-action] {
+  min-height: 1.5rem;
+}
+
+.hk-stat-card-foot[data-has-action] .hk-stat-card-hint {
+  padding-inline-end: 1.75rem;
+}
+
+.hk-stat-card-action {
+  position: absolute;
+  inset-inline-end: calc(-1 * var(--space-4, 0.25rem));
+  top: 50%;
+  transform: translateY(-50%);
+  display: inline-flex;
+  align-items: center;
+  flex-shrink: 0;
+}

package/src/components/HkStatCard.tsx

@@ -15,12 +15,20 @@ export type StatTone = "success" | "warning" | "error" | "info" | "primary" | "m
  *   hint (the original anatomy, still the default).
  * - `chip`  — horizontal: a tone-tinted icon chip beside value + label,
  *   with an optional trailing `aside` slot (tier badge, delta, …).
- *   Every variant also takes a `footer` slot — a free-form content row
- *   under the value/hint for badge rows and deltas.
  * - `ring`  — a single utilization ring with the value inside, the label
  *   (with the icon) underneath, and the hint as the detail line.
  * - `bar`   — label + value on one row over a tone-colored progress bar,
  *   with the hint as the detail line.
+ *
+ * Every variant also takes a `footer` slot — a free-form content row
+ * under the value/hint for badge rows and deltas — and an `action`
+ * slot: a corner affordance
+ * (typically an icon button) pinned to the trailing edge of the hint
+ * line — the card's bottom-right corner. Hosts use it for per-card
+ * controls ("⋯" customization buttons) that must live on the KPI cell
+ * itself. Clicks inside the action wrapper stop at the wrapper, so an
+ * action button never double-fires a `clickable` card's click. Without
+ * the slot the hint renders exactly as before (no wrapper node).
  */
 export type StatVariant = "plain" | "chip" | "ring" | "bar";
 
@@ -109,6 +117,35 @@ export const HkStatCard = defineComponent({
           : undefined,
       };
 
+      // The hint line, optionally hosting the `action` slot at the foot
+      // row's trailing edge (the card's bottom-right corner). WITHOUT an
+      // action slot the hint renders exactly as before — the foot wrapper
+      // exists only when a corner affordance needs the anchor, and each
+      // variant keeps its pre-slot attributes (the chip variant's hint
+      // never carried a title — R1), so hosts not using the slot see a
+      // byte-identical DOM.
+      const renderHint = (detailClass?: string, titled = true) => {
+        const hintEl = props.hint && (
+          <div
+            class={detailClass ? ["hk-stat-card-hint", detailClass] : "hk-stat-card-hint"}
+            title={titled ? props.hint : undefined}
+          >
+            {props.hint}
+          </div>
+        );
+        if (!slots.action) return hintEl;
+        return (
+          <div class="hk-stat-card-foot" data-has-action="">
+            {hintEl}
+            {/* The corner affordance stops clicks here: an action button
+                must never double-fire a clickable card's click. */}
+            <div class="hk-stat-card-action" onClick={(e: MouseEvent) => e.stopPropagation()}>
+              {slots.action()}
+            </div>
+          </div>
+        );
+      };
+
       if (props.variant === "chip") {
         return (
           <div {...shared}>
@@ -127,7 +164,7 @@ export const HkStatCard = defineComponent({
               </div>
               {slots.aside && <div class="hk-stat-card-aside">{slots.aside()}</div>}
             </div>
-            {props.hint && <div class="hk-stat-card-hint">{props.hint}</div>}
+            {renderHint(undefined, false)}
             {slots.footer && <div class="hk-stat-card-footer">{slots.footer()}</div>}
           </div>
         );
@@ -155,11 +192,7 @@ export const HkStatCard = defineComponent({
               {props.icon && h(props.icon, { size: 13, "aria-hidden": true })}
               <span class="hk-stat-card-ring-label-text">{props.label}</span>
             </div>
-            {props.hint && (
-              <div class="hk-stat-card-hint hk-stat-card-ring-detail" title={props.hint}>
-                {props.hint}
-              </div>
-            )}
+            {renderHint("hk-stat-card-ring-detail")}
             {slots.footer && <div class="hk-stat-card-footer">{slots.footer()}</div>}
           </div>
         );
@@ -177,11 +210,7 @@ export const HkStatCard = defineComponent({
               size="xs"
               segments={[{ value: clampPct(props.pct), color: statToneColor(props.tone) }]}
             />
-            {props.hint && (
-              <div class="hk-stat-card-hint hk-stat-card-bar-detail" title={props.hint}>
-                {props.hint}
-              </div>
-            )}
+            {renderHint("hk-stat-card-bar-detail")}
             {slots.footer && <div class="hk-stat-card-footer">{slots.footer()}</div>}
           </div>
         );
@@ -195,7 +224,7 @@ export const HkStatCard = defineComponent({
             <span class={`hk-stat-card-dot hk-stat-card-dot-${props.tone}`} aria-hidden="true" />
           </div>
           <div class="hk-stat-card-value">{props.value}</div>
-          {props.hint && <div class="hk-stat-card-hint" title={props.hint}>{props.hint}</div>}
+          {renderHint()}
           {slots.footer && <div class="hk-stat-card-footer">{slots.footer()}</div>}
         </div>
       );

package/src/components/HkStatCard.variants.test.tsx

@@ -1,5 +1,8 @@
 import { afterEach, describe, expect, it } from "vitest";
 import { createApp, h, defineComponent, nextTick } from "vue";
+import { dirname, join } from "node:path";
+import { readFileSync } from "node:fs";
+import { fileURLToPath } from "node:url";
 
 import { HkStatCard, statToneColor } from "./HkStatCard";
 
@@ -240,3 +243,128 @@ describe("statToneColor", () => {
     expect(statToneColor("info")).toBe("rgb(var(--color-info, rgb(var(--color-primary))))");
   });
 });
+
+describe("HkStatCard action slot — the corner affordance", () => {
+  it("hosts the action at the foot row's trailing edge on ring, hint stays centered-class", () => {
+    const c = mount(
+      h(
+        HkStatCard,
+        {
+          variant: "ring", tone: "success", pct: 37.5, value: "38%", unit: "cores",
+          icon: FakeIcon, label: "Cores", hint: "12 / 32 · monthly",
+        },
+        { action: () => h("button", { class: "action-probe" }, "⋯") },
+      ),
+    );
+    // The action content rides the dedicated wrapper inside the foot row.
+    const foot = c.querySelector(".hk-stat-card-foot") as HTMLElement;
+    expect(foot).toBeTruthy();
+    expect(foot.hasAttribute("data-has-action")).toBe(true);
+    expect(c.querySelector(".hk-stat-card-action .action-probe")?.textContent).toBe("⋯");
+    // The hint keeps its anatomy classes inside the foot — it is wrapped,
+    // not replaced.
+    expect(c.querySelector(".hk-stat-card-foot .hk-stat-card-hint")?.textContent).toBe(
+      "12 / 32 · monthly",
+    );
+    expect(c.querySelector(".hk-stat-card-foot .hk-stat-card-ring-detail")).toBeTruthy();
+  });
+
+  it("wraps the hint on plain, chip and bar the same way", () => {
+    for (const variant of ["plain", "chip", "bar"] as const) {
+      const c = mount(
+        h(HkStatCard, { variant, value: "v", label: "L", hint: "detail" }, {
+          action: () => h("span", { class: "action-probe-generic" }, "⋯"),
+        }),
+      );
+      expect(c.querySelector(".hk-stat-card-foot[data-has-action]")).toBeTruthy();
+      expect(c.querySelector(".hk-stat-card-action .action-probe-generic")).toBeTruthy();
+      expect(c.querySelector(".hk-stat-card-foot .hk-stat-card-hint")?.textContent).toBe("detail");
+    }
+  });
+
+  it("keeps the hint DOM bare (no foot wrapper) when the slot is absent", () => {
+    // The wrapper exists ONLY for the action anchor: a host not using the
+    // slot must see the exact pre-slot DOM. This kills an "always wrap"
+    // mutation, which would silently re-nest every existing hint.
+    for (const variant of ["plain", "chip", "ring", "bar"] as const) {
+      const c = mount(h(HkStatCard, { variant, value: "v", label: "L", hint: "detail" }));
+      expect(c.querySelector(".hk-stat-card-foot")).toBeNull();
+      expect(c.querySelector(".hk-stat-card > .hk-stat-card-hint")?.textContent).toBe("detail");
+    }
+  });
+
+  it("keeps each variant's pre-slot hint attributes when the slot is absent", () => {
+    // R1 finding: the chip variant's hint never carried a title before
+    // the action slot existed — "byte-identical without the slot" must
+    // hold attribute-for-attribute, not just structure-for-structure.
+    // plain/ring/bar always titled their hint; chip never did.
+    const titled = (variant: "plain" | "chip" | "ring" | "bar") => {
+      const c = mount(h(HkStatCard, { variant, value: "v", label: "L", hint: "detail" }));
+      const hint = c.querySelector(".hk-stat-card > .hk-stat-card-hint") as HTMLElement;
+      return hint.hasAttribute("title");
+    };
+    expect(titled("chip")).toBe(false);
+    expect(titled("plain")).toBe(true);
+    expect(titled("ring")).toBe(true);
+    expect(titled("bar")).toBe(true);
+  });
+
+  it("keeps the action-corner SCSS contract (source pin)", () => {
+    // happy-dom never applies the stylesheet, so the data-has-action
+    // layout rules (corner clearance + action-only min-height) are
+    // otherwise removable with zero red (R1 mutation c). The house
+    // source-contract style pins them.
+    const scss = readFileSync(
+      join(dirname(fileURLToPath(import.meta.url)), "HkStatCard.scss"),
+      "utf-8",
+    );
+    const foot = scss.match(/\.hk-stat-card-foot\[data-has-action\]\s*{[^}]*}/)?.[0] ?? "";
+    expect(foot, "action-only foot min-height rule must exist").toContain("min-height");
+    const clearance = scss.match(
+      /\.hk-stat-card-foot\[data-has-action\] \.hk-stat-card-hint\s*{[^}]*}/,
+    )?.[0];
+    expect(clearance, "hint corner-clearance rule must exist").toBeTruthy();
+    expect(clearance).toContain("padding-inline-end");
+    // The ring card centers its children, which would leave the foot
+    // fit-content-wide — dead centering AND a hint-edge-anchored action
+    // (R2 Major). The stretch is what puts the corner back.
+    const ringFoot = scss.match(
+      /\.hk-stat-card-ring \.hk-stat-card-foot\s*{[^}]*}/,
+    )?.[0];
+    expect(ringFoot, "ring foot stretch rule must exist").toBeTruthy();
+    expect(ringFoot).toContain("align-self: stretch");
+    expect(ringFoot).toContain("justify-content: center");
+  });
+
+  it("stops action clicks from double-firing a clickable card's click", async () => {
+    const clicks: number[] = [];
+    const c = mount(
+      h(
+        HkStatCard,
+        { variant: "ring", value: "38%", label: "L", pct: 38, clickable: true, onClick: () => clicks.push(1) },
+        { action: () => h("button", { class: "action-btn-probe" }, "⋯") },
+      ),
+    );
+    const btn = c.querySelector(".action-btn-probe") as HTMLElement;
+    btn.dispatchEvent(new MouseEvent("click", { bubbles: true, cancelable: true }));
+    await nextTick();
+    expect(clicks).toEqual([]);
+    // …while a click on the card surface itself still fires.
+    const card = c.querySelector(".hk-stat-card") as HTMLElement;
+    card.dispatchEvent(new MouseEvent("click", { bubbles: true, cancelable: true }));
+    await nextTick();
+    expect(clicks).toEqual([1]);
+  });
+
+  it("renders an action-only foot (no hint) without collapsing onto the card body", () => {
+    const c = mount(
+      h(HkStatCard, { variant: "ring", value: "38%", label: "L", pct: 38 }, {
+        action: () => h("span", { class: "action-only-probe" }, "⋯"),
+      }),
+    );
+    const foot = c.querySelector(".hk-stat-card-foot") as HTMLElement;
+    expect(foot).toBeTruthy();
+    expect(foot.querySelector(".hk-stat-card-hint")).toBeNull();
+    expect(c.querySelector(".hk-stat-card-action .action-only-probe")).toBeTruthy();
+  });
+});

package/src/components/HkThemeToggle.contract.test.ts

@@ -82,4 +82,27 @@ describe("HkThemeToggle row lead-cell contract", () => {
     expect(svgBlock).not.toBeNull();
     expect(svgBlock![0]).toContain("var(--hk-menu-item-icon-box)");
   });
+
+  it("pins the name-suffix mark against the name instead of the trailing edge", () => {
+    const css = read("HkThemeToggle.scss");
+    // happy-dom has no layout engine, so the "reads as part of the name"
+    // claim is pinned as the two declarations that produce it: the name
+    // stops stretching (the shared mixin's `flex: 1` would push the mark
+    // to the row's far end, next to the trailing affordances) and the
+    // suffix eats the leftover width on its leading side. Losing either
+    // one silently turns the marker into a trailing icon.
+    const nameBlock = css.match(
+      /\.s-theme-item-row\[data-name-suffix="slot"\] \.s-theme-item-name\s*\{[^}]*\}/,
+    );
+    expect(nameBlock).not.toBeNull();
+    expect(nameBlock![0]).toContain("flex: 0 1 auto");
+    // Long names must WRAP, not push the mark out of the row: the mixin's
+    // nowrap is exactly what would clip the marker away at narrow widths.
+    expect(nameBlock![0]).toContain("white-space: normal");
+
+    const suffixBlock = css.match(/\.s-theme-item-name-suffix\s*\{[^}]*\}/);
+    expect(suffixBlock).not.toBeNull();
+    expect(suffixBlock![0]).toContain("margin-inline-end: auto");
+    expect(suffixBlock![0]).toContain("flex-shrink: 0");
+  });
 });

package/src/components/HkThemeToggle.scss

@@ -201,6 +201,36 @@
   @include mi.label;
 }
 
+/* `item-name-suffix` slot — a host mark that must read as PART OF the
+ * name, not as a trailing affordance. Layout is what makes that true:
+ * the shared label mixin is `flex: 1`, which would stretch the name to
+ * the full row and leave the mark floating at the far right, next to the
+ * trailing column (and, in the host's cloud/local marker case, next to
+ * the edit button — reading as a per-row action). On suffix rows the
+ * name therefore shrinks to its content (`flex: 0 1 auto`, keeping the
+ * mixin's `min-width: 0` so long names still wrap inside the available
+ * box) and the suffix claims the leftover space on its leading side
+ * (`margin-inline-end: auto`), pinning the mark directly against the
+ * name's trailing edge. `white-space: normal` overrides the mixin's
+ * nowrap so a long name WRAPS instead of pushing the mark out of the
+ * row — a name that clips its own provenance mark defeats the point.
+ * Rows without the slot are untouched (the mixin's behaviour stands). */
+.s-theme-item-row[data-name-suffix="slot"] .s-theme-item-name {
+  flex: 0 1 auto;
+  white-space: normal;
+}
+
+.s-theme-item-name-suffix {
+  display: inline-flex;
+  align-items: center;
+  flex-shrink: 0;
+  margin-inline-start: var(--space-4, 0.25rem);
+  /* Trailing auto-margin eats the row's leftover width, so the mark sits
+   * with the name at the leading edge and the trailing column stays
+   * flush right. */
+  margin-inline-end: auto;
+}
+
 /* Leading slot glyphs share the spec's fixed icon cell — sized for the
  * WIDEST lead mark hosts render there, not the generic 16px box: chest's
  * three-dot palette swatch is 28px (3×8px dots + 2px gaps), and a mark

package/src/components/HkThemeToggle.test.ts

@@ -269,6 +269,7 @@ describe("HkThemeToggle item slots", () => {
   function mountSlotted(
     lead: (scope: { id: string }) => unknown,
     trail: (scope: { id: string }) => unknown,
+    nameSuffix?: (scope: { id: string }) => unknown,
   ): HTMLElement {
     const container = document.createElement("div");
     document.body.appendChild(container);
@@ -279,6 +280,9 @@ describe("HkThemeToggle item slots", () => {
         }, {
           "item-leading": lead,
           "item-trailing": trail,
+          // Only provided when the case exercises it: the slot's ABSENCE is
+          // itself a contract (rows must stay exactly as before).
+          ...(nameSuffix ? { "item-name-suffix": nameSuffix } : {}),
         }),
     });
     app.mount(container);
@@ -342,6 +346,58 @@ describe("HkThemeToggle item slots", () => {
     expect(customRows).toBe(2);
   });
 
+  it("renders the name-suffix cell INSIDE the row button, right after the name", async () => {
+    // The whole point of the slot (vs. reusing item-trailing) is that the
+    // mark reads as part of the NAME. That is a DOM-position claim, so it
+    // is asserted structurally: inside `.s-theme-item-btn`, in the same
+    // row, and immediately after `.s-theme-item-name` — not merely
+    // "somewhere in the row".
+    useTheme().addCustomTheme(anyPresetTokens());
+    const container = mountSlotted(
+      () => null,
+      () => null,
+      (scope) => h("i", { class: "suffix-mark", "data-id": scope.id }),
+    );
+    await settle();
+    openMenu(container);
+    await settle();
+
+    const rows = [...document.body.querySelectorAll<HTMLElement>(".s-theme-menu .s-theme-item-row")];
+    expect(rows.length).toBeGreaterThanOrEqual(2);
+    for (const row of rows) {
+      expect(row.getAttribute("data-name-suffix")).toBe("slot");
+      const cell = row.querySelector<HTMLElement>(".s-theme-item-name-suffix .suffix-mark");
+      expect(cell).toBeTruthy();
+      expect(row.querySelectorAll(".suffix-mark")).toHaveLength(1);
+      const name = row.querySelector<HTMLElement>(".s-theme-item-name");
+      expect(name).toBeTruthy();
+      // Inside the row BUTTON (so a click on the row still selects the
+      // theme) and the name's immediate next sibling.
+      expect(name!.closest(".s-theme-item-btn")).toBeTruthy();
+      expect(cell!.closest(".s-theme-item-name-suffix")!.parentElement).toBe(name!.parentElement);
+      expect(name!.nextElementSibling).toBe(cell!.closest(".s-theme-item-name-suffix"));
+    }
+  });
+
+  it("leaves suffix rows untouched when the host provides no name-suffix slot", async () => {
+    // Absence is a contract: without the slot the row must keep the
+    // unmodified DOM (no empty cell, no data attribute), or every
+    // existing host gains a phantom cell.
+    useTheme().addCustomTheme(anyPresetTokens());
+    const container = mountSlotted(() => null, () => null);
+    await settle();
+    openMenu(container);
+    await settle();
+
+    const rows = [...document.body.querySelectorAll<HTMLElement>(".s-theme-menu .s-theme-item-row")];
+    expect(rows.length).toBeGreaterThanOrEqual(2);
+    for (const row of rows) {
+      expect(row.hasAttribute("data-name-suffix")).toBe(false);
+      expect(row.querySelector(".s-theme-item-name-suffix")).toBeNull();
+      expect(row.querySelector(".s-theme-item-name")).toBeTruthy();
+    }
+  });
+
   it("scopes each row with its resolved preset definition", async () => {
     const presets: Array<unknown> = [];
     // Two rows are the point: with a single built-in row the >= 2 bound

package/src/components/HkThemeToggle.tsx

@@ -45,11 +45,16 @@ export interface ThemeItemScope {
  * color-mode group and preset/custom theme selection (custom themes are
  * removable), and opens HColorSchemeDialog to create a new custom scheme.
  *
- * Theme rows are host-customizable through two scoped slots (both render
+ * Theme rows are host-customizable through three scoped slots (all render
  * in the popover AND the mobile bottom sheet — same DOM):
  *  · `item-leading` — replaces the selected-check cell; renders for
  *    every row in the fixed icon cell so names align regardless of the
  *    active row. Scope: `ThemeItemScope` (id/name/isCustom/preset).
+ *  · `item-name-suffix` — an inline cell rendered INSIDE the row button,
+ *    immediately after the (catalog-resolved) name, so a host mark reads
+ *    as part of the name rather than as an affordance. Renders only when
+ *    the host provides the slot; the cell is `aria-hidden`-free and
+ *    layout-neutral (does not grow, never pushes the trailing column).
  *  · `item-trailing` — reserves a trailing column on every row and owns
  *    it entirely; the built-in custom-delete overlay is suppressed, so
  *    the host renders delete/edit itself where it wants them.
@@ -301,7 +306,10 @@ export const HkThemeToggle = defineComponent({
             {allThemeList.value.map((th) => {
               // Host-customizable row anatomy. `item-leading` replaces the
               // selected-check cell and renders for EVERY row (fixed icon
-              // cell, so names stay aligned); `item-trailing` reserves a
+              // cell, so names stay aligned); `item-name-suffix` renders
+              // INSIDE the row button right after the name, so a host mark
+              // (e.g. a provenance/sync glyph) reads as part of the name
+              // instead of as an affordance; `item-trailing` reserves a
               // real trailing column for every row and takes full
               // ownership of the affordances there — the built-in custom
               // delete overlay is suppressed in that mode, so the host
@@ -315,6 +323,7 @@ export const HkThemeToggle = defineComponent({
                 preset: presetOf(th.id),
               };
               const leadingSlot = slots["item-leading"];
+              const nameSuffixSlot = slots["item-name-suffix"];
               const trailingSlot = slots["item-trailing"];
               // A preset/custom name may be a message key into hikari's own
               // catalog (the documented ThemePreset.name convention — hosts
@@ -329,6 +338,7 @@ export const HkThemeToggle = defineComponent({
                   class="s-theme-item-row"
                   data-custom={th.isCustom || undefined}
                   data-trailing={trailingSlot ? "slot" : undefined}
+                  data-name-suffix={nameSuffixSlot ? "slot" : undefined}
                 >
                   <button
                     type="button"
@@ -344,6 +354,9 @@ export const HkThemeToggle = defineComponent({
                       <span class="hk-menu-item-icon s-theme-item-check"><Check size={14} /></span>
                     ) : null}
                     <span class="s-theme-item-name">{displayName}</span>
+                    {nameSuffixSlot ? (
+                      <span class="s-theme-item-name-suffix">{nameSuffixSlot(scope)}</span>
+                    ) : null}
                   </button>
                   {trailingSlot ? (
                     <span class="s-theme-item-trailing">{trailingSlot(scope)}</span>