@celestia-island/hikari 0.55.215 → 0.55.216

package/package.json

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

package/src/components/HkIconButton.scss

@@ -21,6 +21,10 @@
   align-items: center;
   justify-content: center;
   flex-shrink: 0;
+  // The status dot's anchor layer (.hk-icon-button-dot below) — a
+  // relative button keeps the mark INSIDE the control's own silhouette
+  // no matter what wrappers or flex rows do around it.
+  position: relative;
   padding: 0;
   line-height: 0;
 
@@ -141,3 +145,25 @@
     transition: none;
   }
 }
+
+// ------
+// Button-owned status dot (dot prop)
+// ------
+
+/* The mark lives INSIDE the button's own box (bottom-right inset), not
+ * straddling a wrapper corner: on a borderless ghost trigger inside a
+ * centered flex row, the corner-straddling badge read as a stray dot
+ * floating below the glyph (2026-10-28 user report). Tone channels come
+ * from HkCornerBadge's variant classes (one badge grammar); the surface
+ * ring keeps the dot legible on any button fill. */
+.hk-icon-button-dot {
+  position: absolute;
+  right: var(--hk-icon-button-dot-inset, 2px);
+  bottom: var(--hk-icon-button-dot-inset, 2px);
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: var(--hk-badge-bg, rgb(var(--color-success)));
+  box-shadow: 0 0 0 1.5px rgb(var(--color-surface) / 85%);
+  pointer-events: none;
+}

package/src/components/HkIconButton.test.tsx

@@ -151,3 +151,78 @@ describe("HkIconButton glyph step", () => {
     expect(block24).toContain("var(--hi-icon-size-xs)");
   });
 });
+
+describe("HkIconButton status dot", () => {
+  it("renders no dot by default", () => {
+    const c = mountComp(() =>
+      h(HkIconButton, { "aria-label": "Filter" }, { icon: () => h("span", "x") }),
+    );
+    expect(c.querySelector(".hk-icon-button-dot")).toBeNull();
+  });
+
+  it("dot renders inside the button with the tone class and stays decorative", () => {
+    const c = mountComp(() =>
+      h(HkIconButton, { dot: true, "aria-label": "Filter" }, { icon: () => h("span", "x") }),
+    );
+    const dot = c.querySelector(".hk-icon-button-dot")!;
+    expect(dot).not.toBeNull();
+    // Tone channels ride HkCornerBadge's variant classes (one grammar).
+    expect(dot.classList.contains("hk-corner-badge-success")).toBe(true);
+    // Decorative by default: the button's own label carries the state.
+    expect(dot.getAttribute("aria-hidden")).toBe("true");
+    expect(dot.getAttribute("role")).toBeNull();
+    // Inside the button's own silhouette — never a detached wrapper mark.
+    expect(dot.closest("button")).not.toBeNull();
+    expect(dot.closest(".hk-corner-badge-anchor")).toBeNull();
+  });
+
+  it("dotVariant switches the tone class", () => {
+    const c = mountComp(() =>
+      h(HkIconButton, { dot: true, dotVariant: "error", "aria-label": "Fail" }, { icon: () => h("span", "x") }),
+    );
+    expect(c.querySelector(".hk-icon-button-dot")!.classList.contains("hk-corner-badge-error")).toBe(true);
+  });
+
+  it("dotLabel promotes the dot to a named mark", () => {
+    const c = mountComp(() =>
+      h(HkIconButton, { dot: true, dotLabel: "Filter engaged", "aria-label": "Filter" }, { icon: () => h("span", "x") }),
+    );
+    const dot = c.querySelector(".hk-icon-button-dot")!;
+    expect(dot.getAttribute("aria-hidden")).toBeNull();
+    expect(dot.getAttribute("role")).toBe("img");
+    expect(dot.getAttribute("aria-label")).toBe("Filter engaged");
+  });
+});
+
+/**
+ * Compiled-stylesheet guard for the button-owned status dot (R3-style
+ * contract, HkCornerBadge.styles.test.ts pattern): the button is the
+ * anchor layer (position: relative) and the dot is an absolutely
+ * positioned INSET mark with pointer-events off — the declarations are
+ * the contract where happy-dom has no cascade.
+ */
+describe("HkIconButton status dot stylesheet contract", () => {
+  const here = dirname(fileURLToPath(import.meta.url));
+  const scss = readFileSync(join(here, "HkIconButton.scss"), "utf8");
+
+  it("the button is the dot's anchor layer (position: relative)", () => {
+    const start = scss.indexOf(".hk-icon-button {");
+    const close = scss.indexOf("}", start);
+    expect(scss.slice(start, close + 1)).toContain("position: relative");
+  });
+
+  it("the dot is an absolute inset mark with pointer-events off and a round cutout ring", () => {
+    const start = scss.indexOf(".hk-icon-button-dot {");
+    const close = scss.indexOf("}", start);
+    const rule = scss.slice(start, close + 1);
+    expect(rule).toContain("position: absolute");
+    expect(rule).toContain("right: var(--hk-icon-button-dot-inset");
+    expect(rule).toContain("bottom: var(--hk-icon-button-dot-inset");
+    expect(rule).toContain("pointer-events: none");
+    expect(rule).toContain("border-radius: 50%");
+    expect(rule).toContain("box-shadow: 0 0 0 1.5px");
+    // Tone rides HkCornerBadge's variant classes; the declaration (not
+    // just the class) is pinned so a tone swap cannot slip silently.
+    expect(rule).toContain("background: var(--hk-badge-bg");
+  });
+});

package/src/components/HkIconButton.tsx

@@ -1,7 +1,12 @@
 import { computed, defineComponent, type PropType } from "vue";
 import "./HkIconButton.scss";
 import "./HkIconButtonVars.scss";
+// The status dot borrows HkCornerBadge's tone channels (--hk-badge-bg)
+// so the mark on the button and the badge family stay one grammar; the
+// bundler dedupes the sheet (single source of tones).
+import "./HkCornerBadge.scss";
 import HIcon from "./HkIcon";
+import type { CornerBadgeVariant } from "./HkCornerBadge";
 
 export default defineComponent({
   name: "HkIconButton",
@@ -16,6 +21,21 @@ export default defineComponent({
     // (user report 2026-09-28: 前台全局搜索与主题切换按钮不同尺寸).
     size: { type: Number as PropType<16 | 24 | 28 | 32 | 36 | 40>, default: 32 },
     disabled: { type: Boolean, default: false },
+    /** Button-owned status dot (2026-10-28 user direction: 改进图标按钮
+     *  本身). The former pattern — HkCornerBadge wrapped AROUND the
+     *  trigger — anchors to the WRAPPER's corner (translate 50% straddles
+     *  the box edge), which on a borderless ghost trigger inside a
+     *  centered flex row reads as a stray mark floating below the glyph.
+     *  This dot is laid out INSIDE the button's own box (bottom-right
+     *  inset), so the mark and the control are one silhouette. Intended
+     *  for the ≥24 chrome steps — at 16 the 8px dot would crowd the
+     *  glyph (R2 note; no such consumer today). */
+    dot: { type: Boolean, default: false },
+    /** Tone of the status dot (same variant names as HkCornerBadge). */
+    dotVariant: { type: String as PropType<CornerBadgeVariant>, default: "success" },
+    /** Accessible name for the dot (without it the dot is aria-hidden
+     *  decoration for state the button already announces). */
+    dotLabel: { type: String, default: undefined },
   },
   emits: {
     click: (_e: MouseEvent) => true,
@@ -59,6 +79,14 @@ export default defineComponent({
                   </svg>
                 )}
         </span>
+        {props.dot && (
+          <span
+            class={["hk-icon-button-dot", `hk-corner-badge-${props.dotVariant}`]}
+            aria-hidden={props.dotLabel ? undefined : "true"}
+            role={props.dotLabel ? "img" : undefined}
+            aria-label={props.dotLabel}
+          />
+        )}
       </button>
     );
   },