@celestia-island/hikari 0.47.0 → 0.47.1

package/package.json

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

package/src/components/HkAuthMethodList.scss

@@ -1,8 +1,12 @@
-/* Alternative sign-in methods as an icon button group (login card). The
-   block container `.s-auth-methods` and its spacing are owned by
-   HkAuthCard's slot styles (styles/admin-tokens.scss); this file only
-   styles the divider and the icon group row the component renders into
-   that slot. */
+/* Alternative sign-in methods as CENTERED INDEPENDENT framed icon tiles
+ * (login card). The block container `.s-auth-methods` and its spacing are
+ * owned by HkAuthCard's slot styles (styles/admin-tokens.scss); this file
+ * only styles the divider and the tile row the component renders into that
+ * slot.
+ *
+ * Deliberately NOT a button group (2026-09-14 user direction): no shared
+ * track, no shared frame — each provider carries its own border so the row
+ * stays as wide as its content, centered in the card. */
 
 /* "Other ways to sign in" divider row between rules. */
 .s-auth-methods-divider {
@@ -24,16 +28,91 @@
 }
 
 /* The component's own wrapper is `display: contents` — layout-wise the
-   divider and the group row remain direct children of HkAuthCard's
+   divider and the tile row remain direct children of HkAuthCard's
    `.s-auth-methods` slot container. */
 .s-auth-methods-list {
   display: contents;
 }
 
-/* The icon button group row: fill the card column and center the
-   provider tiles inside it (descendant match off `.s-auth-methods` —
-   the wrapper generates no box of its own). */
-.s-auth-methods .hk-icon-group.s-auth-methods-group {
+/* The tile row: fill the card column and center the independent tiles
+   inside it. The gap between tiles is the INDEPENDENT-action spacing
+   (--space-12) — comfortable air, unlike a group's shoulder-to-shoulder
+   track gap. */
+.s-auth-methods .s-auth-methods-tiles {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: center;
+  gap: var(--space-12, 0.75rem);
   width: 100%;
+}
+
+/* The HkTooltip wrapper span is the flex child between tiles — let it
+   shrink to the button so the row gap (not the wrapper) spaces them. */
+.s-auth-methods .s-auth-methods-tiles > .hk-tooltip-wrapper {
+  display: inline-flex;
+  flex: none;
+}
+
+/* One provider tile: a framed 44px square (the login-chooser tile size,
+   same as the icon group's md item). Each tile owns its whole frame —
+   border, hover wash, focus ring — with no track around the row. */
+.s-auth-methods-tile {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 2.75rem;
+  height: 2.75rem;
+  padding: 0;
+  font: inherit;
+  color: rgb(var(--color-text, 25 30 40));
+  background: rgb(var(--color-surface, 255 255 255) / 55%);
+  border: 1px solid rgb(var(--color-border, 222 224 228) / 55%);
+  border-radius: var(--radius-md, 8px);
+  cursor: pointer;
+  outline: none;
+  transition-property: background-color, border-color, color, box-shadow, opacity, transform;
+  transition-duration: var(--duration-short, 0.15s);
+  transition-timing-function: ease;
+
+  /* A real <button disabled> still matches :hover — guard the dead ones. */
+  &:hover:not(:disabled) {
+    color: rgb(var(--color-text, 25 30 40));
+    background: var(--c-primary-faint, rgb(var(--color-primary, 90 140 255) / 5%));
+    border-color: var(--c-primary-medium, rgb(var(--color-primary, 90 140 255) / 25%));
+  }
+
+  /* Tactile press feedback — the button-family cadence. */
+  &:active:not(:disabled) {
+    transform: scale(0.96);
+  }
+
+  /* Outset double ring, same grammar as .hk-btn. */
+  &:focus-visible {
+    box-shadow:
+      0 0 0 2px rgb(var(--color-surface, 255 255 255)),
+      0 0 0 4px rgb(var(--color-primary, 90 140 255));
+  }
+
+  &:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+}
+
+.s-auth-methods-tile-icon {
+  display: inline-flex;
+  align-items: center;
   justify-content: center;
+  line-height: 0;
+  /* Brand marks (svg/img vnodes) at their intrinsic size; lucide comps
+     sized by the host. The box never grows past the square. */
+  max-width: 100%;
+  max-height: 100%;
+}
+
+.s-auth-methods-tile-initial {
+  font-size: var(--text-sm, 0.8125rem);
+  font-weight: 600;
+  line-height: 1;
 }

package/src/components/HkAuthMethodList.test.tsx

@@ -28,27 +28,39 @@ const methods = [
 ];
 
 describe("HkAuthMethodList", () => {
-  it("renders the provider row as an icon button group with an optional divider", () => {
+  it("renders centered independent framed tiles with an optional divider", () => {
     // The card's `methods` slot owns the `.s-auth-methods` container —
-    // reproduce that context here (the divider and the group row are layout
+    // reproduce that context here (the divider and the tile row are layout
     // children of it through the component's display:contents wrapper).
     const c = mount(
       h("div", { class: "s-auth-methods" }, h(HkAuthMethodList, { divider: "其他方式登录", methods })),
     );
     const divider = c.querySelector(".s-auth-methods-divider");
     expect(divider?.textContent).toContain("其他方式登录");
-    const group = c.querySelector<HTMLElement>(".s-auth-methods .hk-icon-group");
-    expect(group).toBeTruthy();
-    expect(group!.classList.contains("hk-icon-group-buttons")).toBe(true);
-    const buttons = c.querySelectorAll<HTMLButtonElement>(".s-auth-methods .hk-icon-group-item");
-    expect(buttons.length).toBe(2);
+    const tiles = c.querySelectorAll<HTMLButtonElement>(".s-auth-methods .s-auth-methods-tile");
+    expect(tiles.length).toBe(2);
     // Icon-only: the label is the accessible name + tooltip, never visible text.
-    expect(buttons[0]!.getAttribute("aria-label")).toBe("GitHub");
-    expect(buttons[1]!.getAttribute("aria-label")).toBe("LinuxDo");
-    expect(buttons[0]!.textContent).not.toContain("GitHub");
+    expect(tiles[0]!.getAttribute("aria-label")).toBe("GitHub");
+    expect(tiles[1]!.getAttribute("aria-label")).toBe("LinuxDo");
+    expect(tiles[0]!.textContent).not.toContain("GitHub");
   });
 
-  it("wraps every item in a tooltip carrying the provider label", () => {
+  it("never wraps the providers in a button-group track", () => {
+    // 2026-09-14 user direction: a shared group frame (one wide bordered
+    // track with the icons floating inside) is NOT this component's
+    // grammar — every provider is an independent framed tile. A regression
+    // back to HkIconButtonGroup (or any .hk-icon-group markup) must fail
+    // here, because the button group is reserved for selectors and tight
+    // action strips.
+    const c = mount(
+      h("div", { class: "s-auth-methods" }, h(HkAuthMethodList, { methods })),
+    );
+    expect(c.querySelector(".s-auth-methods .hk-icon-group")).toBeNull();
+    expect(c.querySelector(".s-auth-methods [role='group']")).toBeNull();
+    expect(c.querySelector(".s-auth-methods [role='radiogroup']")).toBeNull();
+  });
+
+  it("wraps every tile in a tooltip carrying the provider label", () => {
     const c = mount(
       h("div", { class: "s-auth-methods" }, h(HkAuthMethodList, { methods })),
     );
@@ -71,12 +83,12 @@ describe("HkAuthMethodList", () => {
         },
       })),
     );
-    const buttons = c.querySelectorAll<HTMLButtonElement>(".s-auth-methods .hk-icon-group-item");
-    buttons[1]!.click();
+    const tiles = c.querySelectorAll<HTMLButtonElement>(".s-auth-methods .s-auth-methods-tile");
+    tiles[1]!.click();
     await nextTick();
     // Both rows are asserted so a constant-literal emit cannot ride an
     // accidental fixture coincidence.
-    buttons[0]!.click();
+    tiles[0]!.click();
     await nextTick();
     expect(picked).toEqual(["linuxdo", "github"]);
   });
@@ -95,15 +107,15 @@ describe("HkAuthMethodList", () => {
         },
       })),
     );
-    const buttons = c.querySelectorAll<HTMLButtonElement>(".s-auth-methods .hk-icon-group-item");
-    expect(buttons.length).toBe(3);
-    // The prebuilt brand vnode renders inside the icon column.
-    expect(buttons[0]!.querySelector(".brand-gh")).toBeTruthy();
+    const tiles = c.querySelectorAll<HTMLButtonElement>(".s-auth-methods .s-auth-methods-tile");
+    expect(tiles.length).toBe(3);
+    // The prebuilt brand vnode renders inside the icon box.
+    expect(tiles[0]!.querySelector(".brand-gh")).toBeTruthy();
     // A missing icon falls back to the label initial (never an empty box).
-    expect(buttons[2]!.querySelector<HTMLElement>(".hk-icon-group-item-initial")?.textContent).toBe("F");
+    expect(tiles[2]!.querySelector<HTMLElement>(".s-auth-methods-tile-initial")?.textContent).toBe("F");
     // Disabled entries render dead and swallow clicks.
-    expect(buttons[1]!.disabled).toBe(true);
-    buttons[1]!.click();
+    expect(tiles[1]!.disabled).toBe(true);
+    tiles[1]!.click();
     await nextTick();
     expect(picked).toBe("");
   });

package/src/components/HkAuthMethodList.tsx

@@ -1,23 +1,27 @@
 import { defineComponent } from "vue";
-import HkIconButtonGroup from "./HkIconButtonGroup";
+import HkTooltip from "./HkTooltip";
 import "./HkAuthMethodList.scss";
 
 /**
  * HkAuthMethodList — the auth card's third-party sign-in block (the
  * "other ways to sign in" row under the credentials form).
  *
- * Since 2026-09-13 (user direction) the block renders as the ICON
- * BUTTON GROUP by default: one centered `HkIconButtonGroup` row of
- * icon-only provider buttons (mode "buttons", size md) instead of the
- * stacked full-width [icon | label] buttons. Provider identity is
- * revealed on hover — every item wraps itself in an HkTooltip with the
- * provider label — which matches the platform login-chooser pattern
- * (Windows/macOS account tiles) and keeps the card compact when a
- * deployment offers several providers. The `select` event carries the
- * provider `key` exactly as before, so consumers swap rendering
- * without touching their OAuth flow.
+ * Since 2026-09-14 (user direction) the block renders as CENTERED
+ * INDEPENDENT icon tiles: every provider is its own framed 44px icon
+ * button with its own tooltip — NOT a button group. A group track (one
+ * shared frame stretched across the card with the icons floating in
+ * the middle) reads as an oversized empty box; the button-group
+ * component is reserved for its two fundamental jobs — a selector
+ * (single/multiple) and a tight action strip (see HkIconButtonGroup).
  *
- * The wrapper stays `display: contents`: the divider and the group row
+ * Provider identity is revealed on hover: each tile wraps itself in an
+ * HkTooltip carrying the provider label, which matches the platform
+ * login-chooser pattern (Windows/macOS account tiles) and keeps the
+ * card compact when a deployment offers several providers. The
+ * `select` event carries the provider `key` exactly as before, so
+ * consumers swap rendering without touching their OAuth flow.
+ *
+ * The wrapper stays `display: contents`: the divider and the tile row
  * remain layout children of HkAuthCard's `.s-auth-methods` slot
  * container (it owns the side padding and vertical rhythm).
  */
@@ -35,11 +39,11 @@ export default defineComponent({
         /** Accessible name + tooltip text (the hover reveal). */
         label: string;
         /** Prebuilt icon vnode (brand SVG, <img>, …) rendered inside the
-         *  icon-only button. Typed loose on purpose (same as
-         *  HkIconButtonGroup options): hosts materialize hikari against
-         *  their own vue store, and a hard VNode type breaks typecheck
-         *  whenever the host's vue minor differs. A missing icon falls
-         *  back to the label's initial. */
+         *  framed tile. Typed loose on purpose (same as HkIconButtonGroup
+         *  options): hosts materialize hikari against their own vue store,
+         *  and a hard VNode type breaks typecheck whenever the host's vue
+         *  minor differs. A missing icon falls back to the label's
+         *  initial. */
         icon?: unknown;
         disabled?: boolean;
       }>,
@@ -47,7 +51,7 @@ export default defineComponent({
     },
   },
   emits: {
-    /** A provider button was clicked. */
+    /** A provider tile was clicked. */
     select: (_key: string) => true,
   },
   setup(props, { emit }) {
@@ -58,18 +62,42 @@ export default defineComponent({
             <span>{props.divider}</span>
           </div>
         )}
-        <HkIconButtonGroup
-          class="s-auth-methods-group"
-          mode="buttons"
-          size="md"
-          options={props.methods.map((method) => ({
-            key: method.key,
-            label: method.label,
-            icon: method.icon,
-            disabled: method.disabled === true,
-          }))}
-          onSelect={(key: string) => emit("select", key)}
-        />
+        {/* A plain row, deliberately NOT role="group": every tile is an
+            independent action (its own frame, its own tooltip), and the
+            divider above names the section for sighted users. Group
+            semantics belong to the selector/tight-strip components. */}
+        <div class="s-auth-methods-tiles">
+          {props.methods.map((method) => {
+            const tile = (
+              <button
+                key={method.key}
+                type="button"
+                class="s-auth-methods-tile"
+                data-key={method.key}
+                aria-label={method.label}
+                title={undefined} // the HkTooltip popup owns the hover text
+                disabled={method.disabled === true}
+                onClick={() => emit("select", method.key)}
+              >
+                <span class="s-auth-methods-tile-icon" aria-hidden="true">
+                  {method.icon != null
+                    ? method.icon
+                    : (
+                      <span class="s-auth-methods-tile-initial">
+                        {method.label.charAt(0).toUpperCase()}
+                      </span>
+                    )
+                  }
+                </span>
+              </button>
+            );
+            return (
+              <HkTooltip key={method.key} text={method.label} placement="top" delay={300}>
+                {tile}
+              </HkTooltip>
+            );
+          })}
+        </div>
       </div>
     );
   },

package/src/components/HkIconButtonGroup.tsx

@@ -25,13 +25,21 @@ export interface HkIconButtonGroupOption {
  * HkIconButtonGroup — the icon-only variant of the button-group family
  * (the same centered strip grammar as HkTabs, minus the text).
  *
- * Three working modes:
- *   - "buttons"  a plain action group (no selection state) — the auth
- *                card's OAuth provider row
- *   - "single"   a radiogroup: one active key (v-model), re-clicking the
- *                active key is a no-op — radio semantics
- *   - "multiple" a toggle group: v-model is a string[] of active keys,
- *                every item carries aria-pressed
+ * The group has exactly TWO fundamental jobs (2026-09-14 user direction
+ * — a group is a semantic component, not a generic box to throw buttons
+ * into), carried by three working modes:
+ *   - a SELECTOR: "single" (radiogroup: one active key via v-model,
+ *     re-clicking the active key is a no-op — radio semantics) or
+ *     "multiple" (toggle set: v-model is a string[] of active keys,
+ *     every item carries aria-pressed)
+ *   - a TIGHT ACTION STRIP: "buttons" (no selection state) — related
+ *     actions packed shoulder-to-shoulder in ONE shared track, the
+ *     toolbar grammar
+ *
+ * Anything else is NOT a group: independent actions that merely live on
+ * the same row (e.g. a login card's third-party provider tiles) render
+ * as separate framed buttons with comfortable spacing — see
+ * HkAuthMethodList for the reference pattern.
  *
  * Every item is icon-only and rides one size taller than a standard
  * icon button (md = 44px vs the 32px icon button / 40px text button) —