@celestia-island/hikari 0.50.0 → 0.50.2

package/package.json

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

package/src/components/HkPasswordInput.tsx

@@ -9,6 +9,7 @@ import {
 } from "vue";
 
 import { useI18n } from "../i18n/context";
+import { credentialAutocomplete } from "../runtime/credentialAutofill";
 
 import { onFrame, onceFrame, type AnimationHandle } from "../runtime/animationBus";
 import { scheduleCronAfter, type CronHandle } from "../runtime/cronBus";
@@ -763,7 +764,7 @@ export default defineComponent({
             type="password"
             value={props.modelValue}
             name={props.name}
-            autocomplete={props.autocomplete ?? "off"}
+            autocomplete={props.autocomplete ?? credentialAutocomplete("password", "off")}
             data-1p-ignore
             data-lpignore="true"
             disabled={props.disabled}

package/src/components/HkSignInCard.tsx

@@ -1,3 +1,4 @@
+import { credentialAutocomplete } from "../runtime/credentialAutofill";
 import { defineComponent, ref } from "vue";
 import { useI18n } from "../i18n/context";
 
@@ -56,9 +57,11 @@ export const HkSignInCard = defineComponent({
     loading: { type: Boolean, default: false },
     /** Extra guard on top of the built-in empty-field check. */
     disabled: { type: Boolean, default: false },
-    /** autocomplete hints, override only when the flow demands it. */
-    usernameAutocomplete: { type: String, default: "username" },
-    passwordAutocomplete: { type: String, default: "current-password" },
+    /** Autocomplete hints. Undefined (the default) resolves through
+     * the runtime credential policy: browser = standard tokens, Tauri
+     * webview = suppression (no native credential chrome). */
+    usernameAutocomplete: { type: String, default: undefined },
+    passwordAutocomplete: { type: String, default: undefined },
     /** Submit label; defaults to the hikari::signIn.submit locale. */
     submitLabel: { type: String, default: undefined },
     /** Username-field type; switch to "email" for identifier logins. */
@@ -100,7 +103,7 @@ export const HkSignInCard = defineComponent({
                   onUpdate:modelValue={(v: string) => (username.value = v)}
                   type={props.usernameType}
                   name="signin-username"
-                  autocomplete={props.usernameAutocomplete}
+                  autocomplete={props.usernameAutocomplete ?? credentialAutocomplete("username", "username")}
                   placeholder={
                     props.usernamePlaceholder ??
                     t("hikari::signIn.usernamePlaceholder", "Username")
@@ -136,7 +139,7 @@ export const HkSignInCard = defineComponent({
                 modelValue={password.value}
                 onUpdate:modelValue={(v: string) => (password.value = v)}
                 name="signin-password"
-                autocomplete={props.passwordAutocomplete}
+                autocomplete={props.passwordAutocomplete ?? credentialAutocomplete("password", "current-password")}
                 placeholder={t("hikari::signIn.passwordPlaceholder", "Password")}
                 disabled={props.loading || props.disabled}
                 submitOnEnter={attemptSubmit}

package/src/components/HkStepFlow.tsx

@@ -135,7 +135,6 @@ export default defineComponent({
           <Transition
             name={dir === "back" ? "hk-stepflow-back" : "hk-stepflow-fwd"}
             mode="out-in"
-            appear
           >
             <div key={props.modelValue} class="hk-stepflow-body">
               {slotFn?.({ key: props.modelValue, index, direction: dir })}

package/src/runtime/credentialAutofill.test.ts

@@ -0,0 +1,90 @@
+import { afterEach, describe, expect, it } from "vitest";
+import { createApp, h } from "vue";
+
+import { credentialAutocomplete } from "./credentialAutofill";
+import HkPasswordInput from "../components/HkPasswordInput";
+import { HkSignInCard } from "../components/HkSignInCard";
+
+const mounts: Array<{ app: ReturnType<typeof createApp>; container: HTMLElement }> = [];
+
+function mount(node: ReturnType<typeof h>) {
+  const container = document.createElement("div");
+  document.body.appendChild(container);
+  const app = createApp({ render: () => node });
+  app.mount(container);
+  mounts.push({ app, container });
+  return container;
+}
+
+afterEach(() => {
+  for (const { app, container } of mounts.splice(0)) {
+    app.unmount();
+    container.remove();
+  }
+  delete (window as unknown as Record<string, unknown>).__TAURI_INTERNALS__;
+});
+
+function setTauri(on: boolean) {
+  const w = window as unknown as Record<string, unknown>;
+  if (on) w.__TAURI_INTERNALS__ = { invoke: () => {} };
+  else delete w.__TAURI_INTERNALS__;
+}
+
+describe("credentialAutocomplete policy", () => {
+  it("keeps the browser defaults outside a Tauri webview", () => {
+    setTauri(false);
+    expect(credentialAutocomplete("username", "username")).toBe("username");
+    expect(credentialAutocomplete("password", "current-password")).toBe("current-password");
+    expect(credentialAutocomplete("password", "off")).toBe("off");
+  });
+
+  it("degrades to suppression tokens inside a Tauri webview", () => {
+    setTauri(true);
+    expect(credentialAutocomplete("username", "username")).toBe("off");
+    // new-password is the one token the Chromium family respects for
+    // suppressing saved-credential fill; plain "off" is ignored on login forms.
+    expect(credentialAutocomplete("password", "current-password")).toBe("new-password");
+    expect(credentialAutocomplete("password", "off")).toBe("new-password");
+  });
+});
+
+describe("HkSignInCard credential fields", () => {
+  it("renders standard tokens in the browser", () => {
+    setTauri(false);
+    const c = mount(h(HkSignInCard, { title: "t", onSubmit: () => {} }));
+    const inputs = Array.from(c.querySelectorAll("input"));
+    const username = inputs[0] as HTMLInputElement;
+    const password = inputs.find((i) => i.type === "password") as HTMLInputElement;
+    expect(username.autocomplete).toBe("username");
+    expect(password.autocomplete).toBe("current-password");
+  });
+
+  it("renders suppression tokens inside a Tauri webview", () => {
+    setTauri(true);
+    const c = mount(h(HkSignInCard, { title: "t", onSubmit: () => {} }));
+    const inputs = Array.from(c.querySelectorAll("input"));
+    const username = inputs[0] as HTMLInputElement;
+    const password = inputs.find((i) => i.type === "password") as HTMLInputElement;
+    expect(username.autocomplete).toBe("off");
+    expect(password.autocomplete).toBe("new-password");
+  });
+
+  it("lets an explicit prop override the policy in Tauri too", () => {
+    setTauri(true);
+    const c = mount(h(HkSignInCard, { title: "t", onSubmit: () => {}, usernameAutocomplete: "email" }));
+    const username = c.querySelector("input") as HTMLInputElement;
+    expect(username.autocomplete).toBe("email");
+  });
+});
+
+describe("HkPasswordInput credential field", () => {
+  it("keeps the off default in the browser and degrades in Tauri", () => {
+    setTauri(false);
+    const browser = mount(h(HkPasswordInput, { modelValue: "" }));
+    expect((browser.querySelector(".hk-pwd-input") as HTMLInputElement).autocomplete).toBe("off");
+
+    setTauri(true);
+    const tauri = mount(h(HkPasswordInput, { modelValue: "" }));
+    expect((tauri.querySelector(".hk-pwd-input") as HTMLInputElement).autocomplete).toBe("new-password");
+  });
+});

package/src/runtime/credentialAutofill.ts

@@ -0,0 +1,38 @@
+import { isTauri } from "./env";
+
+/**
+ * Credential-field autocomplete policy (user direction 2026-09-14): no
+ * Tauri app in the group may surface the webview's native credential
+ * machinery — the stored-password dropdown or the save-password bubble.
+ *
+ * The policy is *runtime Tauri-aware*, not absolute: the same hikari app
+ * runs in plain browsers too, where password managers are welcome and the
+ * standard tokens (`username` / `current-password`) are the correct UX.
+ *
+ * Inside a Tauri webview we degrade to the strongest suppression tokens:
+ *
+ *  - password: `new-password` — the one autocomplete token Chromium-family
+ *    engines (WebView2 included) respect for suppressing saved-credential
+ *    fill; plain `off` is explicitly ignored by them for login forms.
+ *  - username: `off` — WebView2's fill store is additionally emptied by the
+ *    native hardening layer each app ships (`webview_hardening.rs` flips
+ *    `ICoreWebView2Settings4.IsPasswordAutosaveEnabled` and
+ *    `IsGeneralAutofillEnabled` off), so there is nothing to offer; the
+ *    token here keeps the DOM contract aligned on engines without that
+ *    native layer.
+ *
+ * Extensions such as 1Password/LastPass are signaled separately by the
+ * components (`data-1p-ignore` / `data-lpignore`).
+ *
+ * @param kind which credential field the token is for.
+ * @param browserDefault the token this component uses in a plain browser.
+ */
+export function credentialAutocomplete(
+  kind: "username" | "password",
+  browserDefault: string,
+): string {
+  if (isTauri()) {
+    return kind === "password" ? "new-password" : "off";
+  }
+  return browserDefault;
+}

package/src/runtime/index.ts

@@ -1,3 +1,4 @@
+export { credentialAutocomplete } from "./credentialAutofill";
 export * from "./animationBus";
 export * from "./cronBus";
 export * from "./intervalBus";