@celestia-island/hikari 0.47.1 → 0.49.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@celestia-island/hikari",
-  "version": "0.47.1",
+  "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();