@celestia-island/hikari 0.55.83 → 0.55.84

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@celestia-island/hikari",
-  "version": "0.55.83",
+  "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/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>