@celestia-island/hikari 0.55.273 → 0.55.274

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@celestia-island/hikari",
-  "version": "0.55.273",
+  "version": "0.55.274",
   "private": false,
   "type": "module",
   "description": "Hikari UI library, Vue 3 runtime — one design system for Vue 3 and Rust/WASM applications",

package/src/components/HkPersistentToast.scss

@@ -65,6 +65,10 @@ button.hk-persistent-toast {
   color: rgb(var(--color-muted));
 }
 
+.hk-persistent-toast--success .hk-persistent-toast__icon {
+  color: rgb(var(--color-success));
+}
+
 .hk-persistent-toast__label {
   overflow: hidden;
   text-overflow: ellipsis;

package/src/components/HkPersistentToast.test.tsx

@@ -111,6 +111,15 @@ describe("HkPersistentToast inert default", () => {
     expect(container.querySelector(".hk-persistent-toast__spinner")).not.toBeNull();
   });
 
+  it("renders a static icon for the success tone", () => {
+    const { container } = mount({ props: { tone: "success", label: "Saved" } });
+    const c = chip(container);
+    expect(c.classList.contains("hk-persistent-toast--success")).toBe(true);
+    // Success renders a static lucide icon like the other non-loading tones.
+    expect(container.querySelector(".hk-persistent-toast__spinner")).toBeNull();
+    expect(c.querySelector("svg")).not.toBeNull();
+  });
+
   it("renders the ✕ sibling button only when dismissible", () => {
     const onDismiss = vi.fn();
     const { container } = mount({ props: { label: "x", dismissible: true }, onDismiss });

package/src/components/HkPersistentToast.tsx

@@ -1,4 +1,4 @@
-import { AlertTriangle, Info, X } from "lucide-vue-next";
+import { AlertTriangle, Check, Info, X } from "lucide-vue-next";
 import {
   computed,
   defineComponent,
@@ -15,7 +15,7 @@ import { useI18n } from "../i18n/context";
 import "./HkPersistentToast.scss";
 import { ensureOverlayRoot } from "../overlay/overlayRoot";
 
-export type PersistentToastTone = "loading" | "info" | "warning" | "error";
+export type PersistentToastTone = "loading" | "info" | "warning" | "error" | "success";
 
 /** Viewport gutter the detail card clamps into (mirror of
  *  --viewport-gutter's desktop value; the card is chrome-adjacent and
@@ -251,6 +251,8 @@ export default defineComponent({
               <span class="hk-persistent-toast__spinner" aria-hidden="true" />
             ) : props.tone === "error" || props.tone === "warning" ? (
               <AlertTriangle size={12} class="hk-persistent-toast__icon" aria-hidden="true" />
+            ) : props.tone === "success" ? (
+              <Check size={12} class="hk-persistent-toast__icon" aria-hidden="true" />
             ) : (
               <Info size={12} class="hk-persistent-toast__icon" aria-hidden="true" />
             )}