@celestia-island/hikari 0.55.28 → 0.55.29

package/package.json

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

package/src/components/HkIconButtonGroup.scss

@@ -107,6 +107,7 @@
 }
 
 .hk-icon-group-item {
+  position: relative;
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -168,3 +169,29 @@
   font-weight: 600;
   line-height: 1;
 }
+
+/* Status marker (HkIconButtonGroupOption.marker) — a small dot pinned to
+ * the item's bottom-right corner. "success" = the theme's success green
+ * with a surface-colored ring so it stays legible on top of the icon's
+ * corner and across active/muted tints. Purely decorative: the accessible
+ * meaning lives in the option's label/tooltip the host controls. */
+.hk-icon-group-item-marker {
+  position: absolute;
+  right: calc(var(--space-1, 0.25rem) / 2);
+  bottom: calc(var(--space-1, 0.25rem) / 2);
+  width: 0.5rem;
+  height: 0.5rem;
+  border-radius: 999px;
+  pointer-events: none;
+}
+
+.hk-icon-group-item-marker-success {
+  background: rgb(var(--color-success, 14 184 64));
+  box-shadow: 0 0 0 0.125rem rgb(var(--color-surface, 240 244 248));
+}
+
+/* Slider items already establish position:relative for the thumb stack —
+ * keep the marker above the gliding pill, not under it. */
+.hk-icon-group-slider .hk-icon-group-item .hk-icon-group-item-marker {
+  z-index: 1;
+}

package/src/components/HkIconButtonGroup.test.tsx

@@ -1,6 +1,6 @@
 import { readFileSync } from "node:fs";
 import { join } from "node:path";
-import { afterEach, describe, expect, it } from "vitest";
+import { afterEach, describe, expect, it, vi } from "vitest";
 import { createApp, defineComponent, h, nextTick, ref } from "vue";
 
 import HkIconButtonGroup from "./HkIconButtonGroup";
@@ -303,3 +303,41 @@ describe("HkIconButtonGroup", () => {
     });
   });
 });
+describe("option markers", () => {
+  const baseOpts = (marker?: "success", disabled?: boolean) => [
+    { key: "totp", label: "TOTP" },
+    { key: "password", label: "Password", marker, disabled },
+  ];
+
+  it("renders the success marker dot and data-marker attribute", () => {
+    const c = mountComp(() => h(HkIconButtonGroup, {
+      mode: "single",
+      variant: "slider",
+      options: baseOpts("success"),
+      modelValue: "totp",
+    }));
+    const item = c.querySelector('.hk-icon-group-item[data-key="password"]') as HTMLElement;
+    expect(item).toBeTruthy();
+    expect(item.getAttribute("data-marker")).toBe("success");
+    expect(item.querySelector(".hk-icon-group-item-marker-success")).toBeTruthy();
+    // The untouched sibling carries no marker.
+    const sibling = c.querySelector('.hk-icon-group-item[data-key="totp"]') as HTMLElement;
+    expect(sibling.getAttribute("data-marker")).toBeNull();
+  });
+
+  it("ignores activation of a disabled marked option", async () => {
+    const onSelect = vi.fn();
+    const c = mountComp(() => h(HkIconButtonGroup, {
+      mode: "single",
+      variant: "slider",
+      options: baseOpts("success", true),
+      modelValue: "totp",
+      onSelect,
+    }));
+    const item = c.querySelector('.hk-icon-group-item[data-key="password"]') as HTMLButtonElement;
+    expect(item.getAttribute("disabled")).not.toBeNull();
+    item.click();
+    await Promise.resolve();
+    expect(onSelect).not.toHaveBeenCalled();
+  });
+});

package/src/components/HkIconButtonGroup.tsx

@@ -17,6 +17,11 @@ export interface HkIconButtonGroupOption {
    *  host's vue differs. Missing icons fall back to the label's initial. */
   icon?: unknown;
   disabled?: boolean;
+  /** Status dot pinned to the item's bottom-right corner. `"success"`
+   *  draws a small green dot (step-proven factor, completed requirement);
+   *  the dot is decorative — pair it with `disabled` and an updated
+   *  tooltip when it means "this one is done". */
+  marker?: "success";
   /** Tooltip text override; an EMPTY string suppresses the tooltip. */
   tooltip?: string;
 }
@@ -168,6 +173,7 @@ export default defineComponent({
               class="hk-icon-group-item"
               data-key={option.key}
               data-active={active || undefined}
+              data-marker={option.marker || undefined}
               role={props.mode === "single" ? "radio" : undefined}
               aria-checked={props.mode === "single" ? active : undefined}
               aria-pressed={props.mode === "multiple" ? active : undefined}
@@ -185,6 +191,12 @@ export default defineComponent({
                     </span>
                   )}
               </span>
+              {option.marker && (
+                <span
+                  class={`hk-icon-group-item-marker hk-icon-group-item-marker-${option.marker}`}
+                  aria-hidden="true"
+                />
+              )}
             </button>
           );
           // An empty tooltip override suppresses the wrapper entirely.