@celestia-island/hikari 0.55.83 → 0.55.85

package/package.json

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

package/src/components/HkThemeToggle.contract.test.ts

@@ -82,4 +82,27 @@ describe("HkThemeToggle row lead-cell contract", () => {
     expect(svgBlock).not.toBeNull();
     expect(svgBlock![0]).toContain("var(--hk-menu-item-icon-box)");
   });
+
+  it("pins the name-suffix mark against the name instead of the trailing edge", () => {
+    const css = read("HkThemeToggle.scss");
+    // happy-dom has no layout engine, so the "reads as part of the name"
+    // claim is pinned as the two declarations that produce it: the name
+    // stops stretching (the shared mixin's `flex: 1` would push the mark
+    // to the row's far end, next to the trailing affordances) and the
+    // suffix eats the leftover width on its leading side. Losing either
+    // one silently turns the marker into a trailing icon.
+    const nameBlock = css.match(
+      /\.s-theme-item-row\[data-name-suffix="slot"\] \.s-theme-item-name\s*\{[^}]*\}/,
+    );
+    expect(nameBlock).not.toBeNull();
+    expect(nameBlock![0]).toContain("flex: 0 1 auto");
+    // Long names must WRAP, not push the mark out of the row: the mixin's
+    // nowrap is exactly what would clip the marker away at narrow widths.
+    expect(nameBlock![0]).toContain("white-space: normal");
+
+    const suffixBlock = css.match(/\.s-theme-item-name-suffix\s*\{[^}]*\}/);
+    expect(suffixBlock).not.toBeNull();
+    expect(suffixBlock![0]).toContain("margin-inline-end: auto");
+    expect(suffixBlock![0]).toContain("flex-shrink: 0");
+  });
 });

package/src/components/HkThemeToggle.scss

@@ -201,6 +201,36 @@
   @include mi.label;
 }
 
+/* `item-name-suffix` slot — a host mark that must read as PART OF the
+ * name, not as a trailing affordance. Layout is what makes that true:
+ * the shared label mixin is `flex: 1`, which would stretch the name to
+ * the full row and leave the mark floating at the far right, next to the
+ * trailing column (and, in the host's cloud/local marker case, next to
+ * the edit button — reading as a per-row action). On suffix rows the
+ * name therefore shrinks to its content (`flex: 0 1 auto`, keeping the
+ * mixin's `min-width: 0` so long names still wrap inside the available
+ * box) and the suffix claims the leftover space on its leading side
+ * (`margin-inline-end: auto`), pinning the mark directly against the
+ * name's trailing edge. `white-space: normal` overrides the mixin's
+ * nowrap so a long name WRAPS instead of pushing the mark out of the
+ * row — a name that clips its own provenance mark defeats the point.
+ * Rows without the slot are untouched (the mixin's behaviour stands). */
+.s-theme-item-row[data-name-suffix="slot"] .s-theme-item-name {
+  flex: 0 1 auto;
+  white-space: normal;
+}
+
+.s-theme-item-name-suffix {
+  display: inline-flex;
+  align-items: center;
+  flex-shrink: 0;
+  margin-inline-start: var(--space-4, 0.25rem);
+  /* Trailing auto-margin eats the row's leftover width, so the mark sits
+   * with the name at the leading edge and the trailing column stays
+   * flush right. */
+  margin-inline-end: auto;
+}
+
 /* Leading slot glyphs share the spec's fixed icon cell — sized for the
  * WIDEST lead mark hosts render there, not the generic 16px box: chest's
  * three-dot palette swatch is 28px (3×8px dots + 2px gaps), and a mark

package/src/components/HkThemeToggle.test.ts

@@ -269,6 +269,7 @@ describe("HkThemeToggle item slots", () => {
   function mountSlotted(
     lead: (scope: { id: string }) => unknown,
     trail: (scope: { id: string }) => unknown,
+    nameSuffix?: (scope: { id: string }) => unknown,
   ): HTMLElement {
     const container = document.createElement("div");
     document.body.appendChild(container);
@@ -279,6 +280,9 @@ describe("HkThemeToggle item slots", () => {
         }, {
           "item-leading": lead,
           "item-trailing": trail,
+          // Only provided when the case exercises it: the slot's ABSENCE is
+          // itself a contract (rows must stay exactly as before).
+          ...(nameSuffix ? { "item-name-suffix": nameSuffix } : {}),
         }),
     });
     app.mount(container);
@@ -342,6 +346,58 @@ describe("HkThemeToggle item slots", () => {
     expect(customRows).toBe(2);
   });
 
+  it("renders the name-suffix cell INSIDE the row button, right after the name", async () => {
+    // The whole point of the slot (vs. reusing item-trailing) is that the
+    // mark reads as part of the NAME. That is a DOM-position claim, so it
+    // is asserted structurally: inside `.s-theme-item-btn`, in the same
+    // row, and immediately after `.s-theme-item-name` — not merely
+    // "somewhere in the row".
+    useTheme().addCustomTheme(anyPresetTokens());
+    const container = mountSlotted(
+      () => null,
+      () => null,
+      (scope) => h("i", { class: "suffix-mark", "data-id": scope.id }),
+    );
+    await settle();
+    openMenu(container);
+    await settle();
+
+    const rows = [...document.body.querySelectorAll<HTMLElement>(".s-theme-menu .s-theme-item-row")];
+    expect(rows.length).toBeGreaterThanOrEqual(2);
+    for (const row of rows) {
+      expect(row.getAttribute("data-name-suffix")).toBe("slot");
+      const cell = row.querySelector<HTMLElement>(".s-theme-item-name-suffix .suffix-mark");
+      expect(cell).toBeTruthy();
+      expect(row.querySelectorAll(".suffix-mark")).toHaveLength(1);
+      const name = row.querySelector<HTMLElement>(".s-theme-item-name");
+      expect(name).toBeTruthy();
+      // Inside the row BUTTON (so a click on the row still selects the
+      // theme) and the name's immediate next sibling.
+      expect(name!.closest(".s-theme-item-btn")).toBeTruthy();
+      expect(cell!.closest(".s-theme-item-name-suffix")!.parentElement).toBe(name!.parentElement);
+      expect(name!.nextElementSibling).toBe(cell!.closest(".s-theme-item-name-suffix"));
+    }
+  });
+
+  it("leaves suffix rows untouched when the host provides no name-suffix slot", async () => {
+    // Absence is a contract: without the slot the row must keep the
+    // unmodified DOM (no empty cell, no data attribute), or every
+    // existing host gains a phantom cell.
+    useTheme().addCustomTheme(anyPresetTokens());
+    const container = mountSlotted(() => null, () => null);
+    await settle();
+    openMenu(container);
+    await settle();
+
+    const rows = [...document.body.querySelectorAll<HTMLElement>(".s-theme-menu .s-theme-item-row")];
+    expect(rows.length).toBeGreaterThanOrEqual(2);
+    for (const row of rows) {
+      expect(row.hasAttribute("data-name-suffix")).toBe(false);
+      expect(row.querySelector(".s-theme-item-name-suffix")).toBeNull();
+      expect(row.querySelector(".s-theme-item-name")).toBeTruthy();
+    }
+  });
+
   it("scopes each row with its resolved preset definition", async () => {
     const presets: Array<unknown> = [];
     // Two rows are the point: with a single built-in row the >= 2 bound

package/src/components/HkThemeToggle.tsx

@@ -45,11 +45,16 @@ export interface ThemeItemScope {
  * color-mode group and preset/custom theme selection (custom themes are
  * removable), and opens HColorSchemeDialog to create a new custom scheme.
  *
- * Theme rows are host-customizable through two scoped slots (both render
+ * Theme rows are host-customizable through three scoped slots (all render
  * in the popover AND the mobile bottom sheet — same DOM):
  *  · `item-leading` — replaces the selected-check cell; renders for
  *    every row in the fixed icon cell so names align regardless of the
  *    active row. Scope: `ThemeItemScope` (id/name/isCustom/preset).
+ *  · `item-name-suffix` — an inline cell rendered INSIDE the row button,
+ *    immediately after the (catalog-resolved) name, so a host mark reads
+ *    as part of the name rather than as an affordance. Renders only when
+ *    the host provides the slot; the cell is `aria-hidden`-free and
+ *    layout-neutral (does not grow, never pushes the trailing column).
  *  · `item-trailing` — reserves a trailing column on every row and owns
  *    it entirely; the built-in custom-delete overlay is suppressed, so
  *    the host renders delete/edit itself where it wants them.
@@ -301,7 +306,10 @@ export const HkThemeToggle = defineComponent({
             {allThemeList.value.map((th) => {
               // Host-customizable row anatomy. `item-leading` replaces the
               // selected-check cell and renders for EVERY row (fixed icon
-              // cell, so names stay aligned); `item-trailing` reserves a
+              // cell, so names stay aligned); `item-name-suffix` renders
+              // INSIDE the row button right after the name, so a host mark
+              // (e.g. a provenance/sync glyph) reads as part of the name
+              // instead of as an affordance; `item-trailing` reserves a
               // real trailing column for every row and takes full
               // ownership of the affordances there — the built-in custom
               // delete overlay is suppressed in that mode, so the host
@@ -315,6 +323,7 @@ export const HkThemeToggle = defineComponent({
                 preset: presetOf(th.id),
               };
               const leadingSlot = slots["item-leading"];
+              const nameSuffixSlot = slots["item-name-suffix"];
               const trailingSlot = slots["item-trailing"];
               // A preset/custom name may be a message key into hikari's own
               // catalog (the documented ThemePreset.name convention — hosts
@@ -329,6 +338,7 @@ export const HkThemeToggle = defineComponent({
                   class="s-theme-item-row"
                   data-custom={th.isCustom || undefined}
                   data-trailing={trailingSlot ? "slot" : undefined}
+                  data-name-suffix={nameSuffixSlot ? "slot" : undefined}
                 >
                   <button
                     type="button"
@@ -344,6 +354,9 @@ export const HkThemeToggle = defineComponent({
                       <span class="hk-menu-item-icon s-theme-item-check"><Check size={14} /></span>
                     ) : null}
                     <span class="s-theme-item-name">{displayName}</span>
+                    {nameSuffixSlot ? (
+                      <span class="s-theme-item-name-suffix">{nameSuffixSlot(scope)}</span>
+                    ) : null}
                   </button>
                   {trailingSlot ? (
                     <span class="s-theme-item-trailing">{trailingSlot(scope)}</span>

package/src/components/HkThirdPartySignInCard.scss

@@ -0,0 +1,38 @@
+/* HkThirdPartySignInCard — the passwordless login card body: the
+ * third-party method list as the card's ONLY content (no credentials
+ * form, no submit button). Everything about the divider, the tile row
+ * and the tiles themselves is owned by HkAuthMethodList.scss and
+ * admin-tokens.scss; this file only re-positions the reused methods
+ * container inside the card body and promotes the tiles one size step.
+ */
+
+/* The body wrapper reuses the `.s-auth-methods` container class — it owns
+   the block's flex-column rhythm, and through the `.s-auth-methods`
+   scope the tile row's centered layout and the tooltip wrappers' flex
+   sizing resolve too. But here the block sits INSIDE the card's
+   `.s-auth-form` body instead of under a credentials form, so the
+   banding that position needs (24px top margin + 8px/2rem padding, put
+   there to separate the divider from a submit button above) collapses
+   away: the body container already owns the padding. The (0,2,0)
+   selector deterministically beats both the container's own (0,1,0)
+   rules (including the ≤480px re-declaration) and the body's generic
+   `.s-auth-form > *` child gap, whatever the stylesheet order is. */
+.s-auth-form .s-auth-third-party-body {
+  margin-top: 0;
+  padding: 0;
+  gap: var(--space-8, 0.5rem);
+  /* Center the block vertically should a consumer give the body more
+     height than the content needs (the card itself still hugs its
+     content); horizontal centering is the tile row's own behavior. */
+  justify-content: center;
+}
+
+/* Primary-flow presence: with the tiles as the card's ONLY content, the
+   standard 44px (2.75rem) alternative-row tile reads undersized next to
+   the card header. One context-scoped step up to 52px — the frame, hover
+   wash, focus ring and icon fit all come from the unchanged tile rules
+   (the icon box is max-100% and follows the frame). */
+.s-auth-third-party-body .s-auth-methods-tile {
+  width: 3.25rem;
+  height: 3.25rem;
+}

package/src/components/HkThirdPartySignInCard.test.tsx

@@ -0,0 +1,178 @@
+import { readFileSync } from "node:fs";
+import { dirname, join } from "node:path";
+import { fileURLToPath } from "node:url";
+
+import { afterEach, describe, expect, it } from "vitest";
+import { createApp, h, nextTick } from "vue";
+
+import { HkThirdPartySignInCard } from "./HkThirdPartySignInCard";
+
+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();
+  }
+  for (const popup of [...document.querySelectorAll(".hk-tooltip-popup")]) popup.remove();
+});
+
+const methods = [
+  { key: "feishu", label: "Feishu" },
+  { key: "github", label: "GitHub" },
+];
+
+describe("HkThirdPartySignInCard", () => {
+  it("renders the auth-card shell with the tiles as the only body content", () => {
+    const c = mount(h(HkThirdPartySignInCard, { title: "Sign in", subtitle: "Welcome back", methods }));
+    expect(c.querySelector(".s-auth-card")).toBeTruthy();
+    expect(c.querySelector(".s-auth-title")?.textContent).toBe("Sign in");
+    expect(c.querySelector(".s-auth-subtitle")?.textContent).toBe("Welcome back");
+    const tiles = c.querySelectorAll<HTMLButtonElement>(".s-auth-methods-tile");
+    expect(tiles.length).toBe(2);
+    // Primary and ONLY content: no credentials form, no submit button.
+    expect(c.querySelector("form")).toBeNull();
+    expect(c.querySelector("button[type='submit']")).toBeNull();
+    expect(c.querySelector(".hk-btn")).toBeNull();
+    // The methods block renders as the card BODY (inside the form-body
+    // container), not as the under-a-form `methods` slot block.
+    const blocks = c.querySelectorAll(".s-auth-methods");
+    expect(blocks.length).toBe(1);
+    expect(blocks[0]!.closest(".s-auth-form")).toBeTruthy();
+  });
+
+  it("forwards the divider text to the method list", () => {
+    const c = mount(
+      h(HkThirdPartySignInCard, { title: "T", divider: "选择登录方式", methods }),
+    );
+    expect(c.querySelector(".s-auth-methods-divider")?.textContent).toContain("选择登录方式");
+  });
+
+  it("emits select with the method key on click", async () => {
+    const picked: string[] = [];
+    const c = mount(
+      h(HkThirdPartySignInCard, {
+        title: "T",
+        methods,
+        onSelect: (key: string) => {
+          picked.push(key);
+        },
+      }),
+    );
+    const tiles = c.querySelectorAll<HTMLButtonElement>(".s-auth-methods-tile");
+    tiles[1]!.click();
+    await nextTick();
+    // Both tiles are asserted so a constant-literal emit cannot ride an
+    // accidental fixture coincidence.
+    tiles[0]!.click();
+    await nextTick();
+    expect(picked).toEqual(["github", "feishu"]);
+  });
+
+  it("disables every tile while loading and swallows clicks", async () => {
+    const picked: string[] = [];
+    const c = mount(
+      h(HkThirdPartySignInCard, {
+        title: "T",
+        methods,
+        loading: true,
+        onSelect: (key: string) => {
+          picked.push(key);
+        },
+      }),
+    );
+    const tiles = c.querySelectorAll<HTMLButtonElement>(".s-auth-methods-tile");
+    expect(tiles.length).toBe(2);
+    for (const tile of tiles) {
+      expect(tile.disabled).toBe(true);
+      tile.click();
+    }
+    await nextTick();
+    expect(picked).toEqual([]);
+  });
+
+  it("renders no tiles for an empty methods list without losing the shell", () => {
+    const c = mount(h(HkThirdPartySignInCard, { title: "T", methods: [] }));
+    expect(c.querySelector(".s-auth-card")).toBeTruthy();
+    expect(c.querySelectorAll(".s-auth-methods-tile").length).toBe(0);
+  });
+
+  it("renders the header logo from logoSrc", () => {
+    const c = mount(h(HkThirdPartySignInCard, { title: "T", logoSrc: "/logo.webp", methods }));
+    const img = c.querySelector(".s-auth-header img") as HTMLImageElement;
+    expect(img.getAttribute("src")).toBe("/logo.webp");
+  });
+
+  it("forwards the top and footer slots", () => {
+    const c = mount(
+      h(HkThirdPartySignInCard, { title: "T", methods }, {
+        top: () => h("div", { id: "top-slot" }, "tabs"),
+        footer: () => h("div", { class: "footer-probe" }, "footer"),
+      }),
+    );
+    const top = c.querySelector("#top-slot") as HTMLElement;
+    expect(top).toBeTruthy();
+    expect(c.querySelector(".s-auth-footer .footer-probe")).toBeTruthy();
+    // The top slot sits above the tiles in the card body.
+    const tiles = c.querySelector(".s-auth-methods-tiles") as HTMLElement;
+    expect(
+      top.compareDocumentPosition(tiles) & Node.DOCUMENT_POSITION_FOLLOWING,
+    ).toBeTruthy();
+  });
+});
+
+// SCSS contract (house pattern, cf. the HkAuthCard methods-block spacing
+// contract): happy-dom does not lay out, so the body re-positioning and
+// the primary-flow tile bump are asserted on the sheet text. Block
+// comments are stripped first so a commented-out declaration cannot
+// satisfy the guard.
+describe("HkThirdPartySignInCard SCSS contract", () => {
+  const here = dirname(fileURLToPath(import.meta.url));
+  const scss = readFileSync(join(here, "./HkThirdPartySignInCard.scss"), "utf-8")
+    .replace(/\/\*[\s\S]*?\*\//g, "");
+
+  it("re-positions the reused methods container as the card body", () => {
+    const rule = scss.match(/\.s-auth-form \.s-auth-third-party-body\s*{[^}]*}/)?.[0] ?? "";
+    expect(rule, "body re-positioning rule must exist").toBeTruthy();
+    // The under-a-form banding collapses (the body container owns the
+    // padding) and the block centers when the body is taller.
+    expect(rule).toContain("margin-top: 0");
+    expect(rule).toContain("padding: 0");
+    expect(rule).toContain("justify-content: center");
+    expect(rule).toContain("gap: var(--space-8, 0.5rem)");
+  });
+
+  it("promotes the tiles one size step in the primary-flow context", () => {
+    const rule = scss.match(/\.s-auth-third-party-body \.s-auth-methods-tile\s*{[^}]*}/)?.[0] ?? "";
+    expect(rule, "tile bump rule must exist").toBeTruthy();
+    expect(rule).toContain("width: 3.25rem");
+    expect(rule).toContain("height: 3.25rem");
+  });
+});
+
+describe("HkThirdPartySignInCard public export surface", () => {
+  // 2026-09-28 R1 finding: removing either spelling from index.ts passed
+  // every gate — nothing guarded the barrel. Importing the full barrel in a
+  // test hangs (750+ transitive modules), so the guard is source-pinned:
+  // both export lines must exist verbatim. A dropped line goes red here.
+  it("exports both the canonical Hk* and legacy H* spellings from the barrel", async () => {
+    const { readFile } = await import("node:fs/promises");
+    const { resolve } = await import("node:path");
+    const index = await readFile(resolve(__dirname, "../index.ts"), "utf8");
+    expect(index).toContain(
+      'export { HkThirdPartySignInCard as HkThirdPartySignInCard } from "./components/HkThirdPartySignInCard";',
+    );
+    expect(index).toContain(
+      'export { HkThirdPartySignInCard as HThirdPartySignInCard } from "./components/HkThirdPartySignInCard";',
+    );
+  });
+});

package/src/components/HkThirdPartySignInCard.tsx

@@ -0,0 +1,130 @@
+import { defineComponent } from "vue";
+
+import { HkAuthCard } from "./HkAuthCard";
+import HkAuthMethodList from "./HkAuthMethodList";
+
+import "./HkThirdPartySignInCard.scss";
+
+/**
+ * HkThirdPartySignInCard — the passwordless sign-in card: the auth shell
+ * with third-party method tiles as its PRIMARY and ONLY content.
+ *
+ * For deployments where password login is disabled (the ERP login page in
+ * Feishu-only mode, shittim-chest's org channel), the login UI must show
+ * centered provider buttons and NOTHING else — no username/password
+ * fields, no submit button, no "alternative ways" framing. This card is
+ * that composition: `HkAuthCard` (title/subtitle/logo header) with an
+ * `HkAuthMethodList` rendered into the card's form-body slot, promoted to
+ * primary-flow presence through a context-scoped tile modifier.
+ *
+ * NOTE on `methods`: it is a PROP (the provider array). Unlike HkSignInCard
+ * there is NO `#methods` slot on this card — a slot of that name is silently
+ * ignored; pass the array through the prop.
+ *
+ * Control contract (same split as HkSignInCard): the card owns no state
+ * and never talks to a backend. The consumer passes the provider
+ * `methods` (same item shape as HkAuthMethodList) and binds the OAuth
+ * redirect/popup to `select(key)`; the in-flight state feeds back through
+ * `loading`, which disables every tile for the duration.
+ *
+ * Layout contract: the list renders into the card BODY (`.s-auth-form`
+ * container), NOT the `methods` slot — that slot's top margin and banding
+ * exist to separate "alternative" buttons from a credentials form above,
+ * and would read as dead space with nothing above them. The body wrapper
+ * (`.s-auth-third-party-body`) restores the methods block's own
+ * divider→tile rhythm and centers the row; its scss also scales the tiles
+ * up one step, because the standard 44px "alternative row" tile reads
+ * undersized when it is the whole card.
+ *
+ * Slots: `top` (content between the header and the tiles — channel tabs
+ * and similar; there is no `<form>` to keep it out of), `footer`
+ * (remember-me / protocol rows, forwarded to HkAuthCard's centered
+ * footer group) and `logo` (replaces the `logoSrc` image).
+ *
+ * i18n: hikari ships no dictionary for consumer copy — `title`,
+ * `subtitle` and the `divider` text are all consumer-localized on
+ * purpose, exactly like HkAuthMethodList's divider.
+ *
+ * ```tsx
+ * <HThirdPartySignInCard
+ *   title="Sign in"
+ *   subtitle="Continue with Feishu"
+ *   :logo-src="logo"
+ *   :loading="pending"
+ *   :methods="[{ key: 'feishu', label: 'Feishu', icon: feishuIcon }]"
+ *   @select="(key) => startOAuth(key)"
+ * />
+ * ```
+ */
+export const HkThirdPartySignInCard = defineComponent({
+  name: "HkThirdPartySignInCard",
+  props: {
+    title: { type: String, required: true },
+    subtitle: { type: String, default: "" },
+    /** Optional logo image URL for the card header. */
+    logoSrc: { type: String, default: undefined },
+    /** External in-flight state; disables every tile while true. */
+    loading: { type: Boolean, default: false },
+    /** Optional divider text above the tiles, forwarded to
+     *  HkAuthMethodList (consumer-localized on purpose). */
+    divider: { type: String, default: "" },
+    /** Provider entries, in render order — same item shape as
+     *  HkAuthMethodList's `methods`. */
+    methods: {
+      type: Array as unknown as () => Array<{
+        key: string;
+        /** Accessible name + tooltip text (the hover reveal). */
+        label: string;
+        /** Prebuilt icon vnode rendered inside the framed tile; a
+         *  missing icon falls back to the label's initial. */
+        icon?: unknown;
+        disabled?: boolean;
+      }>,
+      required: true,
+    },
+  },
+  emits: {
+    /** A provider tile was clicked; carries the method `key`. */
+    select: (_key: string) => true,
+  },
+  setup(props, { emit, slots }) {
+    return () => (
+      <HkAuthCard title={props.title} subtitle={props.subtitle}>
+        {{
+          logo: () =>
+            slots.logo ? (
+              slots.logo()
+            ) : props.logoSrc ? (
+              <img class="hk-logo-img" src={props.logoSrc} alt="" style={{ width: "3.5rem", height: "3.5rem" }} />
+            ) : null,
+          default: () => (
+            <>
+              {slots.top?.()}
+              {/* The wrapper carries BOTH classes: `s-auth-methods` is
+                  the container HkAuthMethodList's scoped rules resolve
+                  against (tile-row centering, tooltip-wrapper sizing),
+                  `s-auth-third-party-body` re-positions it as the card
+                  body — see the scss. */}
+              <div class="s-auth-methods s-auth-third-party-body">
+                {/* `loading` maps onto the per-entry disabled flag so the
+                    list itself stays untouched: HkAuthMethodList already
+                    renders disabled tiles dead and click-swallowing. An
+                    entry's own disabled bit survives (OR, not replace). */}
+                <HkAuthMethodList
+                  divider={props.divider}
+                  methods={
+                    props.loading
+                      ? props.methods.map((method) => ({ ...method, disabled: true }))
+                      : props.methods
+                  }
+                  onSelect={(key: string) => emit("select", key)}
+                />
+              </div>
+            </>
+          ),
+          footer: () => slots.footer?.(),
+        }}
+      </HkAuthCard>
+    );
+  },
+});

package/src/index.ts

@@ -472,6 +472,7 @@ export { HkThemeToggle as HThemeToggle, type ThemeItemScope } from "./components
 export { HkAuthCard as HAuthCard } from "./components/HkAuthCard";
 export { default as HAuthMethodList } from "./components/HkAuthMethodList";
 export { HkSignInCard as HSignInCard } from "./components/HkSignInCard";
+export { HkThirdPartySignInCard as HThirdPartySignInCard } from "./components/HkThirdPartySignInCard";
 export { default as HAuthSubmitButton } from "./components/HkAuthSubmitButton";
 export {
   HkMfaVerifyCard as HMfaVerifyCard,
@@ -745,6 +746,7 @@ export { HkNavSidebar as HkNavSidebar } from "./components/HkNavSidebar";
 export { HkThemeToggle as HkThemeToggle } from "./components/HkThemeToggle";
 export { HkAuthCard as HkAuthCard } from "./components/HkAuthCard";
 export { HkSignInCard as HkSignInCard } from "./components/HkSignInCard";
+export { HkThirdPartySignInCard as HkThirdPartySignInCard } from "./components/HkThirdPartySignInCard";
 export { HkMfaVerifyCard as HkMfaVerifyCard } from "./components/HkMfaVerifyCard";
 export { type HkMfaFactor as HkMfaFactor } from "./components/HkMfaVerifyCard";
 export { HkLocalePicker as HkLocalePicker } from "./components/HkLocalePicker";