@celestia-island/hikari 0.43.5 → 0.43.6

package/package.json

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

@@ -40,4 +40,24 @@ describe("HkThemeToggle row lead-cell contract", () => {
     // target the lead slot class.
     expect(css).not.toMatch(/\.s-theme-item-btn \.hk-menu-item-icon\s*\{/);
   });
+
+  it("aligns the customize row to the lead column without rescaling its glyph", () => {
+    const css = read("HkThemeToggle.scss");
+    // The customize affordance joins the 28px lead column (2026-09-11
+    // field report: its palette sat a full cell left of the rows' bitmap
+    // marks), but the glyph must keep the standard menu icon size —
+    // mi.icon normalizes svg to the cell, so the box is pinned back.
+    const block = css.match(
+      /\.s-theme-item-customize \.hk-menu-item-icon\s*\{[^}]*\}/,
+    );
+    expect(block).not.toBeNull();
+    expect(block![0]).toContain("width: 28px");
+    expect(block![0]).toContain("height: 28px");
+
+    const svgBlock = css.match(
+      /\.s-theme-item-customize \.hk-menu-item-icon > svg\s*\{[^}]*\}/,
+    );
+    expect(svgBlock).not.toBeNull();
+    expect(svgBlock![0]).toContain("var(--hk-menu-item-icon-box)");
+  });
 });

package/src/components/HkThemeToggle.scss

@@ -210,6 +210,26 @@
   height: 28px;
 }
 
+/* The customize affordance joins the theme rows' 28px lead column so the
+ * palette glyph and the row marks sit on one line and every name starts
+ * at the same x (2026-09-11 field report: with the lead cell at 28px and
+ * this row at the generic box, the selected theme's bitmap mark read a
+ * full cell to the right of the customize palette). The cell widens but
+ * the GLYPH keeps the standard menu icon size — mi.icon normalizes svg
+ * to the cell, so the box is pinned back explicitly; widening a cell
+ * must never re-scale its glyph (the 0.42.2 regression class). */
+.s-theme-item-customize .hk-menu-item-icon {
+  @include mi.icon;
+
+  width: 28px;
+  height: 28px;
+}
+
+.s-theme-item-customize .hk-menu-item-icon > svg {
+  width: var(--hk-menu-item-icon-box);
+  height: var(--hk-menu-item-icon-box);
+}
+
 /* Custom rows keep the name clear of the overlaid delete button. */
 .s-theme-item-row[data-custom] .s-theme-item-name {
   margin-right: 2rem;

package/src/components/HkThemeToggle.tsx

@@ -332,7 +332,7 @@ export const HkThemeToggle = defineComponent({
 
             <button
               type="button"
-              class="s-theme-item-btn"
+              class="s-theme-item-btn s-theme-item-customize"
               onClick={() => {
                 menuOpen.value = false;
                 if (props.externalCustomize) {