@celestia-island/hikari 0.55.12 → 0.55.13

package/package.json

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

package/src/components/HkAdminHeader.tsx

@@ -187,6 +187,10 @@ export const HkAdminHeader = defineComponent({
             aria-expanded={props.avatarAction === "menu" ? userMenuOpen.value : undefined}
             onClick={onAvatarClick}
           >
+            {/* Deliberately NO hover veil here: the trigger opens the user
+             *  MENU (the avatar edit lives one row down as the Camera
+             *  item), so a camera overlay would promise click-to-change
+             *  and lie (user report 2026-09-16). */}
             {props.avatarUrl && !avatarFailed.value ? (
               <img
                 src={props.avatarUrl}
@@ -204,11 +208,6 @@ export const HkAdminHeader = defineComponent({
                 {props.username?.charAt(0).toUpperCase() || "?"}
               </span>
             )}
-            {props.avatarAction === "menu" && (
-              <div class="s-admin-header-avatar-veil">
-                <Camera size={10} class="s-admin-header-veil-icon" />
-              </div>
-            )}
           </button>
           {/* WHERE am I — the open view's title, not the nickname. The
               1.5 line-height (in the class) keeps descenders (g, y, p)

package/src/components/HkButton.test.tsx

@@ -104,7 +104,7 @@ describe("HkButton click guard", () => {
 
   it("clears the loading state back to a clickable button (aria-busy drops off)", () => {
     const busy = mount(h(HkButton, { loading: true }, () => "x"));
-    expect(busy.querySelector(".hk-spinner")).not.toBeNull();
+    expect(busy.querySelector(".hk-btn-ring")).not.toBeNull();
     const idle = mount(h(HkButton, () => "x"));
     const btn = button(idle);
     expect(idle.querySelector(".hk-spinner")).toBeNull();
@@ -123,7 +123,7 @@ describe("HkButton content slots", () => {
     // Loading swaps the icon out for the spinner — never both.
     const busy = mount(h(HkButton, { icon: "close", loading: true }, () => "x"));
     expect(busy.querySelector(".hk-btn-icon")).toBeNull();
-    expect(busy.querySelector(".hk-spinner")).not.toBeNull();
+    expect(busy.querySelector(".hk-btn-ring")).not.toBeNull();
   });
 
   it("renders the suffix icon slot", () => {

package/src/components/HkButton.tsx

@@ -66,7 +66,51 @@ export default defineComponent({
           aria-busy={props.loading || undefined}
           onClick={(e) => emit("click", e)}
         >
-          {props.loading ? <HSpinner size="xs" tone="current" /> : null}
+          {props.loading ? (
+            /* Loading ring as inline SVG + SMIL: renders identically in
+               WebView2 hosts where CSS-border rings got lost to border-
+               color pipelines or where the animation context suspends CSS
+               animations in rAF-starved background windows (user report
+               2026-09-16: an empty gap where the login ring should be).
+               Stroke follows currentcolor; SMIL rotates independently of
+               the CSS animation suspension switch. */
+            <svg
+              class="hk-btn-ring"
+              viewBox="0 0 16 16"
+              width="14"
+              height="14"
+              aria-hidden="true"
+            >
+              <circle
+                cx="8"
+                cy="8"
+                r="6.5"
+                fill="none"
+                stroke="currentColor"
+                stroke-opacity="0.3"
+                stroke-width="1.8"
+              />
+              <circle
+                cx="8"
+                cy="8"
+                r="6.5"
+                fill="none"
+                stroke="currentColor"
+                stroke-width="1.8"
+                stroke-linecap="round"
+                stroke-dasharray="30 11"
+              >
+                <animateTransform
+                  attributeName="transform"
+                  type="rotate"
+                  from="0 8 8"
+                  to="360 8 8"
+                  dur="0.7s"
+                  repeatCount="indefinite"
+                />
+              </circle>
+            </svg>
+          ) : null}
           {!props.loading && props.icon ? (
             <span class="hk-btn-icon">
               <HIcon name={props.icon} size={16} />