@celestia-island/hikari 0.48.0 → 0.49.0

package/package.json

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

package/src/components/HkAboutModal.scss

@@ -228,7 +228,7 @@
   color: rgb(var(--color-warning));
 }
 
-/* ── Chips: licenses and external links ───────────────────────────────── */
+/* ── Links: licenses, external links, credits names and filings ───────── */
 
 .s-about-modal-chips {
   display: flex;
@@ -237,10 +237,10 @@
   gap: var(--space-8, 0.5rem);
 }
 
-// One chip group (licenses / links). Must span the chips block — inside an
+// One link group (licenses / links). Must span the chips block — inside an
 // `align-items: center` column a plain block would shrink to fit-content and
-// a long chip list would then wrap against that collapsed width instead of
-// the modal's.
+// a long list would then wrap against that collapsed width instead of the
+// modal's.
 .s-about-modal-links {
   width: 100%;
 }
@@ -250,10 +250,12 @@
   flex-wrap: wrap;
   justify-content: center;
   gap: var(--space-6, 0.375rem);
+  // The row's own size, so it holds for either face: `plain` links inherit
+  // it (chips set their own).
+  font-size: var(--text-xs, 0.75rem);
 }
 
-// Ghost pills: every link in this dialog is a tag, so they share one face —
-// credits names, licenses, external links and the legal filings.
+// Chip face (default) — the ghost pill.
 .s-about-modal-link {
   padding: var(--space-2, 0.125rem) var(--space-10, 0.625rem);
   border: 1px solid var(--border-subtle, rgb(100 100 100 / 12%));
@@ -268,6 +270,55 @@
     background var(--duration-short, 0.15s) ease;
 }
 
+// Plain face: a bare text link (user direction 2026-09-14 — the organization
+// / author names, the site domains and the filing numbers read as ordinary
+// sentence text, not as tags). No frame, no pill padding, no underline; the
+// hover colour shift is the entire affordance. Colour and size are inherited
+// so the link melts into the run it sits in — the credits sentence
+// (full-contrast text) or a muted link row.
+//
+// The face never has to out-shout the base `:hover` rules below: this rule
+// (0,2,0) beats the chip base (0,1,0), and the `[data-face="plain"]:hover` /
+// `:active` rules (0,3,0) are what keep the hover surface-free and the colour
+// shift alive. Drop those two and the plain face silently regains the chip's
+// tinted hover box.
+.s-about-modal-link[data-face="plain"] {
+  display: inline;
+  margin: 0;
+  padding: 0;
+  border: 0;
+  border-radius: 0;
+  background: none;
+  color: inherit;
+  font-size: inherit;
+  line-height: inherit;
+  vertical-align: baseline;
+}
+
+// A link carrying an icon is one aligned unit (the mark, then the optional
+// label) — icon-only links are how the GitHub mark rides beside the domains.
+// Same specificity as the `plain` block above, so source order decides: this
+// one wins the tie, which is what turns an icon-only link into inline-flex
+// instead of the plain `inline`.
+.s-about-modal-link.s-about-modal-link-has-icon {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-4, 0.25rem);
+  vertical-align: middle;
+}
+
+.s-about-modal-link-icon {
+  flex-shrink: 0;
+}
+
+// An icon-only link carries no text to click, so the mark buys its target
+// width here; its height is whatever the row's line box gives it (the mark is
+// centred in that), which keeps a row of plain links exactly as tall as its
+// text.
+.s-about-modal-link[data-face="plain"].s-about-modal-link-has-icon {
+  padding: 0 var(--space-6, 0.375rem);
+}
+
 // Chips inside the credits sentence sit in a text run: keep them on the
 // baseline and let the surrounding spaces do the spacing.
 .s-about-modal-credit-link {
@@ -282,10 +333,21 @@
   color: rgb(var(--color-primary));
 }
 
+// The plain face owns no surface to tint — only the glyph changes colour.
+.s-about-modal-link[data-face="plain"]:hover {
+  background: none;
+  color: rgb(var(--color-primary));
+}
+
 .s-about-modal-link:active {
   background: var(--c-primary-subtle, rgb(var(--color-primary) / 8%));
 }
 
+.s-about-modal-link[data-face="plain"]:active {
+  background: none;
+  color: var(--c-primary-strong, rgb(var(--color-primary) / 40%));
+}
+
 .s-about-modal-link:focus-visible {
   outline: none;
   box-shadow:
@@ -295,7 +357,7 @@
 
 /* ── Legal footer: filing links + copyright ───────────────────────────── */
 
-// Filing numbers are long, so the legal chips render a notch smaller than
+// Filing numbers are long, so the legal row renders a notch smaller than
 // the license / link rows.
 .s-about-modal-footer-link {
   font-size: var(--text-2xs, 0.625rem);
@@ -307,6 +369,7 @@
   justify-content: center;
   gap: var(--space-6, 0.375rem);
   margin-top: calc(-1 * var(--space-4, 0.25rem));
+  font-size: var(--text-2xs, 0.625rem);
 }
 
 .s-about-modal-footer {

package/src/components/HkAboutModal.styles.test.ts

@@ -55,4 +55,140 @@ describe("HkAboutModal stylesheet contract", () => {
       .sort();
     expect(dead, "stylesheet selectors with no matching element").toEqual([]);
   });
+
+  /**
+   * Declaration-level guards for the two link faces.
+   *
+   * The checks above only compare class *names*, so the whole
+   * `[data-face="plain"]` contract — the part the user actually asked for —
+   * was invisible to them: emptying that rule (Dart Sass then drops the
+   * selector entirely), re-adding a pill padding, or losing `font-size:
+   * inherit` all left the suite green while turning bare text links back
+   * into chips. These assertions read the compiled declarations instead.
+   */
+  describe("link faces", () => {
+    /**
+     * Body of one compiled rule, by exact selector (Sass drops the quotes
+     * around an attribute value: `[data-face=plain]`).
+     *
+     * The selector must compile exactly once: a second copy — say inside a
+     * media query, or a later override — would otherwise stay invisible here
+     * while still winning the cascade.
+     */
+    function ruleBody(sheet: string, selector: string): string {
+      const escaped = selector.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+      const matches = [...sheet.matchAll(new RegExp(`${escaped}\\s*\\{([^}]*)\\}`, "g"))];
+      expect(matches, `${selector} compiles exactly once`).toHaveLength(1);
+      return matches[0]?.[1] ?? "";
+    }
+
+    /**
+     * One declaration's value inside a rule body.
+     *
+     * A property declared twice is a failure rather than a coincidence: CSS
+     * resolves a repeat last-wins, so a first-match reader would report the
+     * stale value and happily accept the override.
+     */
+    function declaration(body: string, property: string): string {
+      const values = [
+        ...body.matchAll(new RegExp(`(?:^|;)\\s*${property}\\s*:([^;]*)`, "g")),
+      ].map((match) => match[1]!.trim());
+      expect(values.length, `${property} is declared at most once`).toBeLessThanOrEqual(1);
+      return values[0] ?? "";
+    }
+
+    const PLAIN = ".s-about-modal-link[data-face=plain]";
+
+    it("keeps the plain face a bare text link", () => {
+      const plain = ruleBody(css, PLAIN);
+      expect(plain, "the plain-face rule must survive compilation").not.toBe("");
+      expect({
+        padding: declaration(plain, "padding"),
+        border: declaration(plain, "border"),
+        radius: declaration(plain, "border-radius"),
+        background: declaration(plain, "background"),
+        // Inherited colour and size are what let a name melt into the credits
+        // sentence (13px) or a domain into the 12px link row, instead of
+        // keeping the chip's own 12px scale.
+        color: declaration(plain, "color"),
+        fontSize: declaration(plain, "font-size"),
+        lineHeight: declaration(plain, "line-height"),
+      }).toEqual({
+        padding: "0",
+        border: "0",
+        radius: "0",
+        background: "none",
+        color: "inherit",
+        fontSize: "inherit",
+        lineHeight: "inherit",
+      });
+      // Both faces promise "no underline" (these rows are text with a click
+      // target, not document links): the base rule turns the UA underline off
+      // and the plain face must not bring one back.
+      expect(declaration(ruleBody(css, ".s-about-modal-link"), "text-decoration")).toBe("none");
+      expect(declaration(plain, "text-decoration")).not.toContain("underline");
+    });
+
+    it("keeps the plain hover a colour shift, not a tinted box", () => {
+      const hover = ruleBody(css, `${PLAIN}:hover`);
+      expect(declaration(hover, "background")).toBe("none");
+      expect(declaration(hover, "color")).toBe("rgb(var(--color-primary))");
+      expect(declaration(ruleBody(css, `${PLAIN}:active`), "background")).toBe("none");
+    });
+
+    it("keeps an icon link one aligned unit with a visible mark", () => {
+      const iconLink = ruleBody(css, ".s-about-modal-link.s-about-modal-link-has-icon");
+      expect(declaration(iconLink, "display")).toBe("inline-flex");
+      expect(declaration(iconLink, "align-items")).toBe("center");
+      // The wrapper is what the alignment hangs off — a hidden or collapsing
+      // one takes the mark with it, leaving an icon-only link as an invisible
+      // target (the failure the empty-entry filter exists to prevent).
+      const iconWrap = ruleBody(css, ".s-about-modal-link-icon");
+      expect(declaration(iconWrap, "flex-shrink")).toBe("0");
+      expect(declaration(iconWrap, "display")).not.toBe("none");
+      // Icon-only: the mark carries no text, so the padding is the target.
+      expect(declaration(ruleBody(css, `${PLAIN}.s-about-modal-link-has-icon`), "padding")).toBe(
+        "0 var(--space-6, 0.375rem)",
+      );
+    });
+
+    it("sizes every row the plain face inherits from", () => {
+      // The plain face inherits, so the rows own the type scale the chips used
+      // to bring themselves (16px body text otherwise): the credits sentence
+      // supplies the names' 13px, the link row the domains' 12px, the legal
+      // row the filings' 10px.
+      expect(declaration(ruleBody(css, ".s-about-modal-credits-line"), "font-size")).toBe(
+        "var(--text-sm, 0.8125rem)",
+      );
+      expect(declaration(ruleBody(css, ".s-about-modal-links-list"), "font-size")).toBe(
+        "var(--text-xs, 0.75rem)",
+      );
+      expect(declaration(ruleBody(css, ".s-about-modal-footer-links"), "font-size")).toBe(
+        "var(--text-2xs, 0.625rem)",
+      );
+    });
+
+    it("keeps the pill the hosts that ask for nothing already ship", () => {
+      // The plain face is additive: a consumer passing `{ label, href }` must
+      // keep exactly the tag it had, so the chip's geometry is pinned here
+      // instead of being assumed.
+      const chip = ruleBody(css, ".s-about-modal-link");
+      expect(declaration(chip, "padding")).toBe(
+        "var(--space-2, 0.125rem) var(--space-10, 0.625rem)",
+      );
+      expect(declaration(chip, "border")).toContain("1px solid var(--border-subtle");
+      expect(declaration(chip, "border-radius")).toBe("var(--radius-full, 9999px)");
+      expect(declaration(chip, "color")).toBe("rgb(var(--color-muted))");
+    });
+
+    it("keeps the icon rule after the plain rule it refines", () => {
+      // Both are (0,2,0), so source order is the only thing that turns an
+      // icon link into inline-flex rather than the plain `inline` — the
+      // tie-break is part of the contract, not an accident of file layout.
+      const plainAt = css.indexOf(`${PLAIN} {`);
+      const iconAt = css.indexOf(".s-about-modal-link.s-about-modal-link-has-icon {");
+      expect(plainAt).toBeGreaterThanOrEqual(0);
+      expect(iconAt).toBeGreaterThan(plainAt);
+    });
+  });
 });

package/src/components/HkAboutModal.test.tsx

@@ -16,6 +16,9 @@ import { setLocale } from "../i18n/context";
  * - the backdrop factory renders inside the clipped backdrop layer
  * - licenses and links render as chips under one centered block
  * - footer (filing) links render as external links
+ * - `face: "plain"` turns any of them into a bare text link (still a link,
+ *   still a new tab), and an entry carrying an `icon` renders the mark, with
+ *   an accessible name when it has no label to be named by
  *
  * (Repo test convention: raw createApp + document queries, no
  * @vue/test-utils dependency.)
@@ -104,25 +107,190 @@ describe("HkAboutModal branding", () => {
         { name: "Celestia Island", href: "https://github.com/celestia-island" },
         { text: "，由 " },
         { name: "伊欧", href: "https://github.com/langyo" },
-        { text: " 倾力设计" },
+        { text: " 主创" },
       ],
     });
     await flushModal();
     const line = query<HTMLElement>(".s-about-modal-credits-line");
-    expect(line.textContent).toBe("来自 Celestia Island，由 伊欧 倾力设计");
+    expect(line.textContent).toBe("来自 Celestia Island，由 伊欧 主创");
     const chips = [
       ...document.body.querySelectorAll<HTMLAnchorElement>(".s-about-modal-credit-link"),
     ];
     expect(chips.map((chip) => chip.textContent)).toEqual(["Celestia Island", "伊欧"]);
-    // Every link in the dialog is a tag and opens in a new tab.
+    // Every link in the dialog opens in a new tab; the chip is the default
+    // face, so an entry that asks for nothing keeps the tag.
     for (const chip of chips) {
       expect(chip.classList.contains("s-about-modal-link")).toBe(true);
+      expect(chip.getAttribute("data-face")).toBe("chip");
       expect(chip.getAttribute("target")).toBe("_blank");
       expect(chip.getAttribute("rel")).toContain("noopener");
     }
     expect(chips[0]!.getAttribute("href")).toBe("https://github.com/celestia-island");
   });
 
+  it("renders a credit name as a plain text link when the entry asks for it", async () => {
+    mountAbout({
+      credits: [
+        { text: "来自 " },
+        { name: "Celestia Island", href: "https://github.com/celestia-island", face: "plain" },
+        { text: "，由 " },
+        { name: "伊欧", href: "https://github.com/langyo", face: "plain" },
+        { text: " 主创" },
+      ],
+    });
+    await flushModal();
+    // The names stay inside the sentence — same text, same flow, no frame.
+    expect(query<HTMLElement>(".s-about-modal-credits-line").textContent).toBe(
+      "来自 Celestia Island，由 伊欧 主创",
+    );
+    const links = [
+      ...document.body.querySelectorAll<HTMLAnchorElement>(".s-about-modal-credit-link"),
+    ];
+    expect(links.map((link) => link.textContent)).toEqual(["Celestia Island", "伊欧"]);
+    for (const link of links) {
+      expect(link.getAttribute("data-face")).toBe("plain");
+      expect(link.classList.contains("s-about-modal-link")).toBe(true);
+      expect(link.getAttribute("target")).toBe("_blank");
+      // A text link is named by its own text — no redundant aria-label.
+      expect(link.getAttribute("aria-label")).toBeNull();
+    }
+  });
+
+  it("renders plain faces across the link rows and the legal filings", async () => {
+    mountAbout({
+      links: [
+        { label: "celestia.world", href: "https://celestia.world", face: "plain" },
+        { label: "celestia.ac.cn", href: "https://celestia.ac.cn", face: "plain" },
+      ],
+      footerLinks: [
+        { label: "苏ICP备2025155733号-2", href: "https://beian.miit.gov.cn/", face: "plain" },
+      ],
+    });
+    await flushModal();
+    const links = [
+      ...document.body.querySelectorAll<HTMLAnchorElement>(
+        ".s-about-modal-links-list .s-about-modal-link",
+      ),
+    ];
+    expect(links.map((link) => link.textContent)).toEqual(["celestia.world", "celestia.ac.cn"]);
+    expect(links.map((link) => link.getAttribute("data-face"))).toEqual(["plain", "plain"]);
+    expect(
+      query<HTMLElement>(".s-about-modal-footer-link").getAttribute("data-face"),
+    ).toBe("plain");
+  });
+
+  it("renders an icon-only link with an accessible name beside the text links", async () => {
+    mountAbout({
+      links: [
+        { label: "celestia.world", href: "https://celestia.world", face: "plain" },
+        {
+          icon: "github",
+          href: "https://github.com/celestia-island/shittim-chest",
+          face: "plain",
+          ariaLabel: "GitHub",
+        },
+      ],
+    });
+    await flushModal();
+    const links = [
+      ...document.body.querySelectorAll<HTMLAnchorElement>(
+        ".s-about-modal-links-list .s-about-modal-link",
+      ),
+    ];
+    expect(links.length).toBe(2);
+    const mark = links[1]!;
+    expect(mark.textContent).toBe("");
+    expect(mark.classList.contains("s-about-modal-link-has-icon")).toBe(true);
+    expect(mark.getAttribute("aria-label")).toBe("GitHub");
+    expect(mark.getAttribute("href")).toBe("https://github.com/celestia-island/shittim-chest");
+    expect(mark.getAttribute("target")).toBe("_blank");
+    expect(mark.querySelector(".s-about-modal-link-icon svg")).toBeTruthy();
+    // …and it is the GitHub mark, not just any glyph.
+    expect(
+      mark
+        .querySelector(".s-about-modal-link-icon svg")!
+        .classList.contains("lucide-github-icon"),
+    ).toBe(true);
+    // The mark is decoration: it must not join the link's accessible name.
+    expect(
+      mark.querySelector(".s-about-modal-link-icon")!.getAttribute("aria-hidden"),
+    ).toBe("true");
+    // The text link next to it stays text: no mark, no extra naming.
+    expect(links[0]!.querySelector("svg")).toBeNull();
+    expect(links[0]!.getAttribute("aria-label")).toBeNull();
+  });
+
+  it("names an icon-only link from the icon when none is given", async () => {
+    mountAbout({ links: [{ icon: "github", href: "https://example.test/repo", face: "plain" }] });
+    await flushModal();
+    const mark = query<HTMLElement>(".s-about-modal-link");
+    expect(mark.getAttribute("aria-label")).toBe("GitHub");
+    expect(mark.getAttribute("data-face")).toBe("plain");
+  });
+
+  it("lets a host name a text link explicitly", async () => {
+    mountAbout({
+      links: [
+        {
+          label: "celestia.world",
+          href: "https://celestia.world",
+          ariaLabel: "Celestia World 官网",
+        },
+      ],
+    });
+    await flushModal();
+    // An explicit name outranks the visible text (and the visible text stays).
+    const link = query<HTMLAnchorElement>(".s-about-modal-link");
+    expect(link.getAttribute("aria-label")).toBe("Celestia World 官网");
+    expect(link.textContent).toBe("celestia.world");
+  });
+
+  it("drops a link entry with neither a label nor an icon", async () => {
+    mountAbout({
+      links: [
+        { label: "celestia.world", href: "https://celestia.world", face: "plain" },
+        // No text and no mark: an invisible but focusable link named by its
+        // raw URL is worse than no link.
+        { href: "https://example.test/blank" },
+      ],
+    });
+    await flushModal();
+    const links = [
+      ...document.body.querySelectorAll<HTMLAnchorElement>(
+        ".s-about-modal-links-list .s-about-modal-link",
+      ),
+    ];
+    expect(links.map((link) => link.textContent)).toEqual(["celestia.world"]);
+    expect(document.body.textContent).not.toContain("example.test/blank");
+  });
+
+  it("renders no link row when every entry is empty", async () => {
+    mountAbout({ links: [{ href: "https://example.test/blank" }] });
+    await flushModal();
+    expect(document.body.querySelector(".s-about-modal-links")).toBeNull();
+  });
+
+  it("drops an empty legal entry too", async () => {
+    mountAbout({
+      footerLinks: [
+        { label: "苏ICP备2025155733号-2", href: "https://beian.miit.gov.cn/" },
+        { href: "https://example.test/blank-filing" },
+      ],
+    });
+    await flushModal();
+    const links = [
+      ...document.body.querySelectorAll<HTMLAnchorElement>(".s-about-modal-footer-link"),
+    ];
+    expect(links.map((link) => link.textContent)).toEqual(["苏ICP备2025155733号-2"]);
+    expect(document.body.textContent).not.toContain("example.test/blank-filing");
+  });
+
+  it("renders no legal row when every filing is empty", async () => {
+    mountAbout({ footerLinks: [{ href: "https://example.test/blank-filing" }] });
+    await flushModal();
+    expect(document.body.querySelector(".s-about-modal-footer-links")).toBeNull();
+  });
+
   it("keeps a credit name as plain text when no href is given", async () => {
     mountAbout({ credits: [{ text: "由 " }, { name: "伊欧" }, { text: " 主创" }] });
     await flushModal();

package/src/components/HkAboutModal.tsx

@@ -1,13 +1,45 @@
 import { defineComponent, type PropType } from "vue";
+import { Github } from "lucide-vue-next";
 import { HBadge, HModal } from "@celestia-island/hikari";
 
 import { useI18n } from "../i18n/context";
 
 import "./HkAboutModal.scss";
 
+/**
+ * How a link presents itself.
+ *
+ * `chip` is the dialog's original face — a ghost tag. `plain` is bare text:
+ * no frame, no underline, so the hover colour shift is the whole
+ * affordance. Chosen per link, because one dialog can want both (the
+ * credits names / URLs / filings read as sentence text, the licenses stay
+ * tags).
+ */
+export type HAboutLinkFace = "chip" | "plain";
+
+/** Leading icon a link can carry; an icon-only link shows it alone. */
+export type HAboutLinkIcon = "github";
+
+// The mark behind each icon key. Brand names are locale-invariant, so they
+// double as the accessible name of an icon-only link.
+const ICONS: Record<HAboutLinkIcon, typeof Github> = { github: Github };
+const ICON_NAMES: Record<HAboutLinkIcon, string> = { github: "GitHub" };
+
 export interface HAboutLink {
-  label: string;
+  /** Visible text. Omit for an icon-only link — then name it with
+   *  `ariaLabel`. */
+  label?: string;
   href: string;
+  /** Optional leading icon (e.g. the project's GitHub home). */
+  icon?: HAboutLinkIcon;
+  /** Link face; defaults to `chip`. */
+  face?: HAboutLinkFace;
+  /**
+   * Accessible name for an icon-only link — falls back to `label`, then to
+   * the icon's own name (brand names are locale-invariant, so they need no
+   * i18n key of their own).
+   */
+  ariaLabel?: string;
 }
 
 /**
@@ -15,17 +47,19 @@ export interface HAboutLink {
  *
  * The line is a sentence assembled from parts so a host can phrase (and
  * order) it freely per locale: literal `text` runs sit between linked
- * `name` chips (organization first, author second, …). The names render as
- * the same chips as the license / link rows — every link in this dialog is
- * a tag.
+ * `name` runs (organization first, author second, …). Each linked name
+ * carries its own `face`, so one dialog can mix a chip here with bare text
+ * there (and an unlinked name is always plain text).
  */
 export interface HAboutCredit {
   /** Literal sentence fragment (mutually exclusive with `name`). */
   text?: string;
-  /** Linked chip label (mutually exclusive with `text`). */
+  /** Linked name (mutually exclusive with `text`). */
   name?: string;
-  /** Target for a `name` chip; opens in a new tab. */
+  /** Target for a `name`; opens in a new tab. */
   href?: string;
+  /** Face for a linked `name` (an unlinked name stays plain text). */
+  face?: HAboutLinkFace;
 }
 
 /**
@@ -51,12 +85,14 @@ export interface HAboutComponentVersion {
  *
  * Layout (2026-09 redesign): a centered identity hero (haloed logo, name,
  * then version + tagline on one compact line), an optional credits block
- * (a sentence built from text runs and linked name chips, plus the
+ * (a sentence built from text runs and linked names, plus the
  * organization blurb), a
  * bordered spec card holding the software-component versions, and the
- * link rows — licenses, external links, legal filings and the credits
- * names all render as the same ghost tag. Every one opens in a new tab. Every branding prop is optional — the modal degrades
- * to the plain identity card when none are given.
+ * link rows — licenses, external links and legal filings. Every link opens
+ * in a new tab and renders in the face its entry asks for: the ghost chip,
+ * or bare text (`plain`) for names / URLs / filings that should read as
+ * ordinary sentence text. Every branding prop is optional — the modal
+ * degrades to the plain identity card when none are given.
  */
 export const HkAboutModal = defineComponent({
   name: "HkAboutModal",
@@ -73,12 +109,12 @@ export const HkAboutModal = defineComponent({
     /** Optional centered small line under the credits (organization blurb). */
     description: { type: String, default: undefined },
     /**
-     * Credits sentence, assembled from text runs and linked name chips
-     * (e.g. 来自 <Celestia Island>，由 <伊欧> 倾力设计). Names render as the
-     * same chips as the license / link rows.
+     * Credits sentence, assembled from text runs and linked names
+     * (e.g. 来自 <Celestia Island>，由 <伊欧> 主创). Each name renders in the
+     * face its entry asks for — `chip`, or bare text with `plain`.
      */
     credits: { type: Array as PropType<HAboutCredit[]>, default: () => [] },
-    /** License chips (e.g. SySL-1.0 / BUSL-1.1), rendered centered. */
+    /** License links (e.g. SySL-1.0 / BUSL-1.1), rendered centered. */
     licenses: { type: Array as PropType<HAboutLink[]>, default: () => [] },
     /** Software-component version rows (WebUI / engines), label + value. */
     componentVersions: {
@@ -87,7 +123,11 @@ export const HkAboutModal = defineComponent({
     },
     /** Optional copyright holder in the footer (defaults to the app name). */
     copyright: { type: String, default: undefined },
-    /** Optional external links (e.g. GitHub, docs). */
+    /**
+     * Optional external links (e.g. the site domains, the project's GitHub
+     * home). An entry may carry an `icon` instead of a `label` — that is how
+     * the GitHub mark rides at the end of the domain row.
+     */
     links: { type: Array as PropType<HAboutLink[]>, default: () => [] },
     /** Optional centered legal links above the copyright (ICP filings). */
     footerLinks: { type: Array as PropType<HAboutLink[]>, default: () => [] },
@@ -105,19 +145,45 @@ export const HkAboutModal = defineComponent({
   setup(props, { emit }) {
     const { t } = useI18n();
 
-    // One chip renderer for every link in the dialog: credits names,
-    // licenses, external links and the legal filings all render as tags.
-    const renderChip = (label: string, href: string, extraClass: string) => (
-      <a
-        key={`${extraClass}:${href}`}
-        class={`s-about-modal-link ${extraClass}`}
-        href={href}
-        target="_blank"
-        rel="noopener noreferrer"
-      >
-        {label}
-      </a>
-    );
+    // One link renderer for every link in the dialog: credits names,
+    // licenses, external links and the legal filings. `face` picks the tag
+    // or the bare-text face; an `icon` may replace or lead the label.
+    const renderLink = (
+      item: HAboutLink,
+      extraClass: string,
+      key: string,
+    ) => {
+      const label = item.label ?? "";
+      const Icon = item.icon ? ICONS[item.icon] : undefined;
+      const classes = ["s-about-modal-link", extraClass];
+      if (Icon) classes.push("s-about-modal-link-has-icon");
+      return (
+        <a
+          key={key}
+          class={classes}
+          data-face={item.face ?? "chip"}
+          href={item.href}
+          target="_blank"
+          rel="noopener noreferrer"
+          // A text link is named by its own label unless the host names it
+          // explicitly; an icon-only link has no text to be named by, so it
+          // always needs a name of its own.
+          aria-label={
+            item.ariaLabel ?? (label ? undefined : item.icon ? ICON_NAMES[item.icon] : item.href)
+          }
+        >
+          {Icon && (
+            // Wrapped rather than classed on the lucide component: lucide
+            // merges its own classes with the passed ones and emits the token
+            // twice.
+            <span class="s-about-modal-link-icon" aria-hidden="true">
+              <Icon size={14} />
+            </span>
+          )}
+          {label}
+        </a>
+      );
+    };
 
     const renderCredits = () => {
       const parts = props.credits.filter((part) => part.text || part.name);
@@ -127,7 +193,11 @@ export const HkAboutModal = defineComponent({
           {parts.map((part, index) =>
             part.name ? (
               part.href ? (
-                renderChip(part.name, part.href, "s-about-modal-credit-link")
+                renderLink(
+                  { label: part.name, href: part.href, face: part.face },
+                  "s-about-modal-credit-link",
+                  `name:${index}`,
+                )
               ) : (
                 <span key={`name:${index}`} class="s-about-modal-credit-name">
                   {part.name}
@@ -141,12 +211,19 @@ export const HkAboutModal = defineComponent({
       );
     };
 
-    const renderChips = (items: HAboutLink[], slot: string) => {
-      if (items.length === 0) return null;
+    // An entry with neither text nor a mark would render an invisible but
+    // focusable link whose only name is its raw URL — drop it rather than
+    // ship a blank target. Every row filters through here.
+    const visibleLinks = (items: HAboutLink[]) =>
+      items.filter((item) => item.label || item.icon);
+
+    const renderLinks = (items: HAboutLink[], slot: string) => {
+      const visible = visibleLinks(items);
+      if (visible.length === 0) return null;
       return (
         <div class="s-about-modal-links" data-slot={slot}>
           <div class="s-about-modal-links-list">
-            {items.map((item) => renderChip(item.label, item.href, ""))}
+            {visible.map((item, index) => renderLink(item, "", `${slot}:${index}`))}
           </div>
         </div>
       );
@@ -229,15 +306,15 @@ export const HkAboutModal = defineComponent({
 
             {(props.licenses.length > 0 || props.links.length > 0) && (
               <div class="s-about-modal-chips">
-                {renderChips(props.licenses, "licenses")}
-                {renderChips(props.links, "links")}
+                {renderLinks(props.licenses, "licenses")}
+                {renderLinks(props.links, "links")}
               </div>
             )}
 
-            {props.footerLinks.length > 0 && (
+            {visibleLinks(props.footerLinks).length > 0 && (
               <div class="s-about-modal-footer-links">
-                {props.footerLinks.map((link) =>
-                  renderChip(link.label, link.href, "s-about-modal-footer-link"),
+                {visibleLinks(props.footerLinks).map((link, index) =>
+                  renderLink(link, "s-about-modal-footer-link", `legal:${index}`),
                 )}
               </div>
             )}

package/src/index.ts

@@ -380,6 +380,8 @@ export {
   type HAboutComponentVersion,
   type HAboutCredit,
   type HAboutLink,
+  type HAboutLinkFace,
+  type HAboutLinkIcon,
 } from "./components/HkAboutModal";
 export { HkLogWindow as HLogWindow, type HLogTab } from "./components/HkLogWindow";
 export { HkCookieConsent as HCookieConsent } from "./components/HkCookieConsent";