@celestia-island/hikari 0.55.99 → 0.55.100

package/package.json

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

@@ -25,6 +25,73 @@ import { fileURLToPath } from "node:url";
 const here = dirname(fileURLToPath(import.meta.url));
 const read = (f: string): string => readFileSync(join(here, f), "utf-8");
 
+describe("HkThemeToggle theme-row pill contract", () => {
+  // 2026-10-01 user report: with the item-trailing slot reserving a real
+  // column, the row button's hover wash stopped short of the row edge —
+  // theme rows and the standalone 自定义 row hovered at different widths.
+  // The pill therefore lives on `.s-theme-item-row` (full row width no
+  // matter how wide the trailing column is) and the row's button is
+  // chromeless. happy-dom has no layout engine, so the geometry is pinned
+  // as scss-text assertions.
+  it("puts the unified menu-item pill on the row, not the row button", () => {
+    const css = read("HkThemeToggle.scss");
+    const rowBlock = css.match(/\.s-theme-item-row\s*\{[^}]*\}/);
+    expect(rowBlock).not.toBeNull();
+    expect(rowBlock![0]).toContain("@include mi.item;");
+    // The overlaid delete affordance pins to the row (positioning context).
+    expect(rowBlock![0]).toContain("position: relative");
+  });
+
+  it("strips the row button's own chrome so the wash is not doubled", () => {
+    const css = read("HkThemeToggle.scss");
+    const block = css.match(/\.s-theme-item-row \.s-theme-item-btn\s*\{[^}]*\}/);
+    expect(block).not.toBeNull();
+    // The ROW owns the frame: its border 1 + padding 12 put the content at
+    // the same 13px the standalone pills measure (border 1 + padding 12), so
+    // the button drops its own border entirely.
+    expect(block![0]).toContain("border: none;");
+    expect(block![0]).toContain("background: transparent");
+    expect(block![0]).toContain("min-height: 0");
+    // The button stretches over the row's frame (negative block margins
+    // mirrored by re-applied padding) so the WHOLE pill is the click/focus
+    // target — master's pill WAS the button — while the name's content box
+    // keeps the standalone offsets. Losing the stretch drops the button
+    // back to a centered auto-height box inside the row (misaligned and
+    // undersized); losing the bleed pair desyncs the content offset by the
+    // frame width.
+    expect(block![0]).toContain("align-self: stretch");
+    expect(block![0]).toContain("margin-block: calc(");
+    expect(block![0]).toContain("padding-block: calc(");
+  });
+
+  it("suppresses the row button's own hover and active state chrome", () => {
+    const css = read("HkThemeToggle.scss");
+    // The hover override must repeat mi.item's guard chain to out-specify
+    // the mixin's hover rule; the active/checked suppression targets the
+    // state attributes directly.
+    expect(css).toContain(
+      ".s-theme-item-row .s-theme-item-btn:hover:not(:disabled):not([data-disabled]):not([data-active]):not([data-checked])",
+    );
+    expect(css).toMatch(
+      /\.s-theme-item-row \.s-theme-item-btn\[data-active\][^{]*\{[^}]*background: transparent/,
+    );
+  });
+
+  it("registers the theme row family for the mobile sheet token swap", () => {
+    const mi = read("_menu-item.scss");
+    // The row carries the pill, so the sheet-context token binding must
+    // target it too — otherwise sheets keep the desktop 34px metrics.
+    const sheetList = mi.match(
+      /\.hk-popover-panel\.hk-is-sheet[^{]*\{[^{]*\{[^}]*\}/,
+    );
+    expect(sheetList).not.toBeNull();
+    expect(sheetList![0]).toContain(".s-theme-item-row");
+    const modalList = mi.match(/\.hk-modal-content\s*\{[^{]*\{[^}]*\}/);
+    expect(modalList).not.toBeNull();
+    expect(modalList![0]).toContain(".s-theme-item-row");
+  });
+});
+
 describe("HkThemeToggle row lead-cell contract", () => {
   it("sizes the theme-row lead cell to fit a 28px swatch mark", () => {
     const css = read("HkThemeToggle.scss");

package/src/components/HkThemeToggle.scss

@@ -136,32 +136,84 @@
 }
 
 /* ── Theme list rows ────────────────────────────────────────────────────
- * Every row is ONE full-width pill: the delete affordance for custom
- * themes overlays the pill's trailing edge (the row is the positioning
- * context), so built-in rows reserve no trailing column — the old
- * invisible slot left a permanent dead strip right of every row in the
- * mobile bottom sheet — and every pill and highlight still shares the
- * exact same width.
+ * Every row is ONE full-width pill, and the pill is THE ROW (2026-10-01
+ * user report: with the trailing slot reserving a real column, the row
+ * button's wash stopped short of the row edge — theme rows and the
+ * standalone 自定义 row hovered at different widths). The unified
+ * menu-item chrome therefore lives on `.s-theme-item-row` (which also
+ * carries `data-active` from the TSX), and the row's button surrenders
+ * its own chrome below, so the hover/active wash, border and radius
+ * span the full row no matter how wide the trailing column is. The
+ * standalone pills (自定义 row, host mode-extra rows) keep the chrome on
+ * the button itself — same spec, same width as a row.
  *
  * Metrics/states come from the unified menu-item spec (./_menu-item.scss)
  * — the same grammar as menu rows and select options; inside the mobile
  * sheet the shared `.hk-popover-panel.hk-is-sheet` token context applies
- * the 44px touch geometry, so the old component-local media bump is gone
- * (only the overlaid delete button keeps its own touch sizing below).
+ * the 44px touch geometry (the row family is registered there), so the
+ * old component-local media bump is gone (only the overlaid delete
+ * button keeps its own touch sizing below).
  */
 
 .s-theme-item-row {
+  @include mi.item;
+
   position: relative;
-  display: flex;
-  align-items: center;
 }
 
-/* Theme rows speak the SAME grammar as every dropdown option
- * (.hk-select-option): base-size text, roomy pill padding, hairline
- * border that tints on hover and strengthens when active — so a theme
- * list inside the popover reads like any select/menu panel. The old
- * bespoke 6×8 tight rows (small text, borderless 12% wash) are what
- * made the theme sheet read as "not from the standard dropdown". */
+/* The row's button keeps the CLICK and FOCUS semantics (keyboard parity,
+ * screen-reader role) but no visual chrome of its own: background goes
+ * transparent and the border is dropped entirely — the ROW now owns the
+ * frame, and the content x lands on the same offset as the standalone
+ * pills anyway (row border 1 + row padding 12 = the standalone border 1 +
+ * padding 12 = 13px from the pill edge). Vertically the button bleeds
+ * over the row's frame (negative margins) and re-applies the padding
+ * inside, so the WHOLE pill is the click/focus target — master's pill
+ * WAS the button — while the name's content box keeps the standalone
+ * offsets (border 1 + pad-y). Row heights are unchanged: the button's
+ * net layout contribution is its content, so the row's own min-height
+ * rules exactly as the button's did before. */
+.s-theme-item-row .s-theme-item-btn {
+  min-width: 0;
+  min-height: 0;
+  flex: 1;
+  width: auto;
+  /* Fill the row's full cross size (overriding the row's align-items:
+   * center FOR THIS ITEM only) so the click/focus target is the whole
+   * pill, not just the name's line box. */
+  align-self: stretch;
+  /* Bleed over the row's frame — its vertical padding plus the 1px
+   * mi.item border — then re-apply that padding inside: the name's
+   * content box keeps the standalone pills' offsets (border 1 + pad)
+   * while the hit area covers the pill edge to edge. The 1px constant
+   * mirrors mi.item's border width; if the mixin's border ever changes,
+   * this pair moves with it. */
+  margin-block: calc(-1 * var(--hk-menu-item-pad-y, 6px) - 1px);
+  padding-block: calc(var(--hk-menu-item-pad-y, 6px) + 1px);
+  padding-inline: 0;
+  border: none;
+  /* Follow the row's pill radius: the button keeps mi.item's :focus-visible
+   * inset outline (keyboard parity), and outlines follow border-radius —
+   * a zero radius here would render the ring as a sharp rectangle poking
+   * past the row's rounded corners. */
+  border-radius: inherit;
+  background: transparent;
+  font: inherit;
+  color: inherit;
+}
+
+/* Suppress the button's own state chrome — the row above owns the wash.
+ * The hover guard repeats mi.item's guard chain so this override
+ * out-specifies the mixin's (0,6,0) hover rule. */
+.s-theme-item-row .s-theme-item-btn:hover:not(:disabled):not([data-disabled]):not([data-active]):not([data-checked]),
+.s-theme-item-row .s-theme-item-btn[data-active],
+.s-theme-item-row .s-theme-item-btn[data-checked] {
+  background: transparent;
+  border-color: transparent;
+  color: inherit;
+  font-weight: inherit;
+}
+
 .s-theme-item-btn {
   @include mi.item;
 

package/src/components/HkThemeToggle.test.ts

@@ -283,6 +283,13 @@ describe("HkThemeToggle color-mode group", () => {
     // Active check glyph sits inside the pill, leading the name.
     const activeBtn = document.body.querySelector<HTMLButtonElement>(".s-theme-item-btn[data-active]");
     expect(activeBtn?.querySelector(".s-theme-item-check")).toBeTruthy();
+
+    // The ROW is the pill (2026-10-01): the active state surfaces on the
+    // row element too, so the highlight spans the full row width instead
+    // of stopping short at a trailing column.
+    const activeRows = rows.filter((r) => r.hasAttribute("data-active"));
+    expect(activeRows).toHaveLength(1);
+    expect(activeRows[0].querySelector(".s-theme-item-btn[data-active]")).toBeTruthy();
   });
   it("renders the mode-extra strip under the mode group when provided", async () => {
     const container = document.createElement("div");

package/src/components/HkThemeToggle.tsx

@@ -181,16 +181,18 @@ export const HkThemeToggle = defineComponent({
      * cache icon vnodes across renders, or closing/reopening the popover
      * would re-mount the same vnode instances. In AUTO mode the Light/
      * Dark options collapse into the group's merged cell (the altitude
-     * strip) via `mergeKeys`; they stay flagged disabled for the
-     * degradation path (merge requested without the #merged slot) and
-     * for semantic clarity.
+     * strip) via `mergeKeys`. They stay ENABLED (2026-10-01 user report:
+     * disabled Light/Dark read as the mode being locked to the sun): in
+     * the merged rendering they are not rendered at all, and on the
+     * degradation path (merge requested without the #merged slot) a
+     * click must drop OUT of auto onto the pressed side instead of
+     * doing nothing.
      */
     function modeOptions(): TabItem[] {
-      const auto = isAutoMode.value;
       return [
         { key: "system", label: t("hikari::theme.modeAuto"), icon: <Monitor size={16} /> },
-        { key: "light", label: t("hikari::theme.modeLight"), icon: <Sun size={16} />, disabled: auto },
-        { key: "dark", label: t("hikari::theme.modeDark"), icon: <MoonStar size={16} />, disabled: auto },
+        { key: "light", label: t("hikari::theme.modeLight"), icon: <Sun size={16} /> },
+        { key: "dark", label: t("hikari::theme.modeDark"), icon: <MoonStar size={16} /> },
       ];
     }
 
@@ -336,6 +338,13 @@ export const HkThemeToggle = defineComponent({
                   data-custom={th.isCustom || undefined}
                   data-trailing={trailingSlot ? "slot" : undefined}
                   data-name-suffix={nameSuffixSlot ? "slot" : undefined}
+                  // The ROW is the pill: the highlight state lives here so
+                  // the hover/active wash spans the full row width — a
+                  // trailing slot column must not shrink it (2026-10-01
+                  // user report: theme rows and the 自定义 row hovered at
+                  // different widths). The button keeps the click/focus
+                  // semantics; the stylesheet strips its own chrome.
+                  data-active={currentTheme.value === th.id || undefined}
                 >
                   <button
                     type="button"

package/src/components/_menu-item.scss

@@ -79,6 +79,7 @@
   .hk-menu-action-item,
   .hk-select-option,
   .hk-popup-select-item,
+  .s-theme-item-row,
   .s-theme-item-btn,
   .s-popup-menu-item,
   .hk-popup-menu-item,
@@ -98,6 +99,7 @@
     .hk-menu-row,
     .hk-menu-action-item,
     .hk-select-option,
+    .s-theme-item-row,
     .s-theme-item-btn,
     .s-popup-menu-item,
     .hk-popup-menu-item,