vocs 2.0.17 → 2.1.2

package/src/server/openapi/pages.test.ts

@@ -0,0 +1,111 @@
+import { describe, expect, test } from 'vitest'
+import { compile, compileSource, compileTraits } from './pages.js'
+
+describe('compile', () => {
+  test('compiles inline content without filesystem access', async () => {
+    const pages = await compile([{ path: '/auth', content: '# Authentication\n\nUse a token.' }])
+    expect(pages).toHaveLength(1)
+    expect(pages[0]?.path).toBe('/auth')
+    expect(pages[0]?.title).toBe('Authentication')
+    expect(pages[0]?.blocks[0]).toMatchObject({ type: 'html' })
+  })
+
+  test('applies a title override', async () => {
+    const pages = await compile([{ path: '/auth', content: '# Heading', title: 'Custom' }])
+    expect(pages[0]?.title).toBe('Custom')
+  })
+
+  test('applies title and description overrides', async () => {
+    const pages = await compile([
+      { path: '/auth', content: 'Body.', title: 'Authentication', description: 'Use a token.' },
+    ])
+    expect(pages[0]?.title).toBe('Authentication')
+    expect(pages[0]?.description).toBe('Use a token.')
+  })
+
+  test('throws when a page has neither file nor content', async () => {
+    await expect(compile([{ path: '/auth' }])).rejects.toThrow(/either `file` or `content`/)
+  })
+})
+
+describe('compileSource', () => {
+  test('compiles markdown to an html block', () => {
+    const page = compileSource('/auth', '# Authentication\n\nUse a token.')
+    expect(page.path).toBe('/auth')
+    expect(page.title).toBe('Authentication')
+    expect(page.blocks).toHaveLength(1)
+    expect(page.blocks[0]).toMatchObject({ type: 'html' })
+    if (page.blocks[0]?.type === 'html') expect(page.blocks[0].html).toContain('Authentication')
+  })
+
+  test('reads title from frontmatter', () => {
+    const page = compileSource('/', '---\ntitle: Overview\n---\n\nHello.')
+    expect(page.title).toBe('Overview')
+    expect(page.blocks).toHaveLength(1)
+  })
+
+  test('adds slug ids to body headings (for the outline + anchors)', () => {
+    const page = compileSource('/auth', 'Intro.\n\n## Getting a key\n\n### Header format')
+    const html = page.blocks[0]?.type === 'html' ? page.blocks[0].html : ''
+    expect(html).toContain('id="getting-a-key"')
+    expect(html).toContain('id="header-format"')
+  })
+
+  test('reads title and description from frontmatter', () => {
+    const page = compileSource(
+      '/auth',
+      '---\ntitle: Authentication\ndescription: How auth works.\n---\n\nHello.',
+    )
+    expect(page.title).toBe('Authentication')
+    expect(page.description).toBe('How auth works.')
+  })
+
+  test('splits around <OpenApi.Endpoints /> into blocks', () => {
+    const page = compileSource('/', 'Intro text.\n\n<OpenApi.Endpoints />\n\nMore text.')
+    expect(page.blocks.map((block) => block.type)).toEqual(['html', 'endpoints', 'html'])
+  })
+
+  test('parses an Endpoints path attribute and strips esm imports', () => {
+    const page = compileSource(
+      '/',
+      'import { OpenApi } from \'vocs\'\n\n<OpenApi.Endpoints path="/api" />',
+    )
+    const endpoints = page.blocks.find((block) => block.type === 'endpoints')
+    expect(endpoints).toMatchObject({ type: 'endpoints', path: '/api' })
+    // The import line is stripped (not rendered as prose).
+    expect(page.blocks.some((b) => b.type === 'html' && b.html.includes('import'))).toBe(false)
+  })
+
+  test('normalizes the route path', () => {
+    expect(compileSource('auth/', 'x').path).toBe('/auth')
+  })
+})
+
+describe('compileTraits', () => {
+  test('uses tag name as title and x-subtitle as description', () => {
+    const pages = compileTraits([
+      { id: 'authentication', name: 'Authentication', description: 'Body.', subtitle: 'How auth.' },
+    ])
+    expect(pages).toHaveLength(1)
+    expect(pages[0]?.path).toBe('/authentication')
+    expect(pages[0]?.title).toBe('Authentication')
+    expect(pages[0]?.description).toBe('How auth.')
+    expect(pages[0]?.blocks[0]).toMatchObject({ type: 'html' })
+    // Trait pages render their title/subtitle as an on-page header (the body
+    // has no heading of its own).
+    expect(pages[0]?.header).toBe(true)
+  })
+
+  test('frontmatter overrides tag name and subtitle', () => {
+    const pages = compileTraits([
+      {
+        id: 'auth',
+        name: 'Auth',
+        subtitle: 'Tag subtitle.',
+        description: '---\ntitle: Custom\ndescription: FM subtitle.\n---\n\nBody.',
+      },
+    ])
+    expect(pages[0]?.title).toBe('Custom')
+    expect(pages[0]?.description).toBe('FM subtitle.')
+  })
+})

package/src/server/openapi/pages.ts

@@ -0,0 +1,153 @@
+import * as Markdown from '../../internal/markdown.js'
+import type { CompiledPage, PageBlock } from '../../internal/openapi/app.js'
+import type * as OpenApi from '../../internal/openapi/openapi.js'
+import { normalizePath } from '../../internal/openapi/openapi.js'
+import type { IrTrait } from '../../internal/openapi/parser.js'
+
+/**
+ * Reads and compiles consumer-authored `.md`/`.mdx` override/guide pages for the
+ * standalone handler into serializable {@link CompiledPage}s.
+ *
+ * The standalone handler has no filesystem router, so pages are supplied
+ * explicitly via `config.pages`. Each file is read once at boot and split into
+ * an ordered list of {@link PageBlock}s: prose is rendered to HTML with the same
+ * `data-v` typography as the rest of the docs, while inline
+ * `<OpenApi.Endpoints />` components become `endpoints` blocks re-hydrated as
+ * real React on the client.
+ *
+ * MDX `import`/`export` statements are stripped (the only supported component is
+ * `<OpenApi.Endpoints />`); anything else renders as Markdown.
+ */
+export async function compile(
+  pages: OpenApi.Page[] | undefined,
+  options: compile.Options = {},
+): Promise<CompiledPage[]> {
+  if (!pages || pages.length === 0) return []
+  const { rootDir = typeof process !== 'undefined' ? process.cwd() : '.' } = options
+
+  // Only touch the filesystem when a page actually needs a file read, so inline
+  // `content` pages work on runtimes without `node:fs` (e.g. Cloudflare Workers).
+  const needsFs = pages.some((page) => page.content === undefined && page.file !== undefined)
+  const fsModule = needsFs
+    ? await Promise.all([
+        import('node:fs/promises').then((module) => ({ default: module })),
+        import('node:path'),
+      ])
+    : undefined
+
+  const compiled: CompiledPage[] = []
+  for (const page of pages) {
+    let source: string
+    if (page.content !== undefined) source = page.content
+    else if (page.file !== undefined && fsModule) {
+      const [{ default: fs }, path] = fsModule
+      const filePath = path.isAbsolute(page.file) ? page.file : path.resolve(rootDir, page.file)
+      source = await fs.readFile(filePath, 'utf-8')
+    } else throw new Error(`[vocs] Page "${page.path}" must define either \`file\` or \`content\`.`)
+
+    const result = compileSource(page.path, source)
+    if (page.title) result.title = page.title
+    if (page.description) result.description = page.description
+    compiled.push(result)
+  }
+  return compiled
+}
+
+export declare namespace compile {
+  type Options = {
+    /** Directory `file` paths are resolved against. @default process.cwd() */
+    rootDir?: string | undefined
+  }
+}
+
+/**
+ * Compiles doc-only "trait" tags (`x-traitTag: true`) into guide
+ * {@link CompiledPage}s. The tag `name` is the title and `x-subtitle` the
+ * subtitle, unless overridden by Markdown frontmatter in the description.
+ */
+export function compileTraits(traits: readonly IrTrait[]): CompiledPage[] {
+  return traits.map((trait) => {
+    const result = compileSource(`/${trait.id}`, trait.description ?? '')
+    return {
+      ...result,
+      title: result.title ?? trait.name,
+      description: result.description ?? trait.subtitle,
+      // The tag name/subtitle are the page header (the body has no heading).
+      header: true,
+    }
+  })
+}
+
+/** Matches a self-closing `<OpenApi.Endpoints ... />` or `<Endpoints ... />`. */
+const endpointsRe = /<(?:OpenApi\.)?Endpoints\b([^>]*?)\/>/g
+/** Matches an ESM `import`/`export` statement line. */
+const esmLineRe = /^\s*(?:import|export)\b.*$/gm
+/** Matches a leading YAML frontmatter block. */
+const frontmatterRe = /^---\r?\n([\s\S]*?)\r?\n---\r?\n?/
+
+/** Compiles a single page source string into a {@link CompiledPage}. */
+export function compileSource(routePath: string, source: string): CompiledPage {
+  const { body, title, description } = stripFrontmatter(source)
+
+  const blocks: PageBlock[] = []
+  let lastIndex = 0
+  for (const match of body.matchAll(endpointsRe)) {
+    const index = match.index ?? 0
+    const before = body.slice(lastIndex, index)
+    pushHtml(blocks, before)
+    blocks.push({ type: 'endpoints', path: parsePath(match[1] ?? '') })
+    lastIndex = index + match[0].length
+  }
+  pushHtml(blocks, body.slice(lastIndex))
+
+  // Raw Markdown for the page's `.md` / agent-facing version: drop ESM lines and
+  // the `<OpenApi.Endpoints />` component (it has no Markdown representation).
+  const markdown = body.replace(esmLineRe, '').replace(endpointsRe, '').trim() || undefined
+
+  return {
+    path: normalizePath(routePath),
+    title: title ?? firstHeading(body),
+    description,
+    blocks,
+    markdown,
+  }
+}
+
+/** Renders a Markdown segment to an HTML block (ESM lines stripped). */
+function pushHtml(blocks: PageBlock[], markdown: string): void {
+  const cleaned = markdown.replace(esmLineRe, '').trim()
+  if (!cleaned) return
+  blocks.push({ type: 'html', html: Markdown.toHtml(cleaned) })
+}
+
+/** Extracts the `path="..."` attribute from an `<Endpoints>` tag, if present. */
+function parsePath(attrs: string): string | undefined {
+  const match = attrs.match(/\bpath\s*=\s*["']([^"']*)["']/)
+  return match?.[1]
+}
+
+/** Splits a leading YAML frontmatter block, returning the body, `title`, and `description`. */
+function stripFrontmatter(source: string): {
+  body: string
+  title?: string | undefined
+  description?: string | undefined
+} {
+  const match = source.match(frontmatterRe)
+  if (!match) return { body: source }
+  const title = readField(match[1], 'title')
+  const description = readField(match[1], 'description')
+  return { body: source.slice(match[0].length), title, description }
+}
+
+/** Reads a scalar `key: value` field from a YAML frontmatter block. */
+function readField(frontmatter: string | undefined, key: string): string | undefined {
+  return frontmatter
+    ?.match(new RegExp(`^${key}\\s*:\\s*(.+)$`, 'm'))?.[1]
+    ?.trim()
+    .replace(/^["']|["']$/g, '')
+}
+
+/** Finds the first `# heading` in a Markdown body. */
+function firstHeading(body: string): string | undefined {
+  return body.match(/^#\s+(.+)$/m)?.[1]?.trim()
+}

package/src/server/openapi/state.ts

@@ -0,0 +1,136 @@
+import * as Config from '../../internal/config.js'
+import * as ConfigSerializer from '../../internal/config-serializer.js'
+import type { Payload } from '../../internal/openapi/app.js'
+import type * as OpenApi from '../../internal/openapi/openapi.js'
+import { parse } from '../../internal/openapi/parser.js'
+import * as Sidebar from '../../internal/openapi/sidebar.js'
+import * as Pages from './pages.js'
+
+/**
+ * Parses the configured spec, compiles override/guide pages, and synthesizes a
+ * Vocs config — everything the static browser bundle needs to render the real
+ * Vocs layout for the API reference.
+ *
+ * The sidebar mirrors the site integration: optional `sidebar.top` items, the
+ * generated `Introduction` + per-category items, then optional `sidebar.bottom`
+ * items.
+ */
+export async function prepare(
+  config: OpenApi.Config,
+  options: prepare.Options = {},
+): Promise<Payload> {
+  const { rootDir, baseUrl } = options
+
+  const [ir, configPages] = await Promise.all([
+    parse(config, { rootDir, baseUrl }),
+    Pages.compile(config.pages, { rootDir }),
+  ])
+
+  // Doc-only `x-traitTag` tags become guide pages. By default they nest under
+  // `Introduction`; an `x-parent` (group name) places them under that operation
+  // group instead, or under a new sidebar group when the name has no operations.
+  const traitPages = Pages.compileTraits(ir.traits)
+  const pages = [...traitPages, ...configPages]
+
+  const base = ir.path === '/' ? '' : ir.path.replace(/\/$/, '')
+  const item = (trait: (typeof ir.traits)[number]) => ({
+    text: trait.name,
+    link: `${base}/${trait.id}`,
+  })
+
+  const groupIdByName = new Map(ir.groups.map((group) => [group.name, group.id]))
+  const traitIntro: { text: string; link: string }[] = []
+  const groupExtras = new Map<string, { text: string; link: string }[]>()
+  const extraGroups = new Map<string, { text: string; link: string }[]>()
+  for (const trait of ir.traits) {
+    if (!trait.parent) {
+      traitIntro.push(item(trait))
+      continue
+    }
+    const groupId = groupIdByName.get(trait.parent)
+    const bucket = groupId ? groupExtras : extraGroups
+    const key = groupId ?? trait.parent
+    bucket.set(key, [...(bucket.get(key) ?? []), item(trait)])
+  }
+
+  const top = config.sidebar?.top ?? []
+  const bottom = config.sidebar?.bottom ?? []
+  const intro = [...traitIntro, ...(config.sidebar?.intro ?? [])]
+  const collapsed = config.sidebar?.collapsed ?? false
+  const newGroups = [...extraGroups].map(([name, items]) => ({
+    text: name,
+    collapsed,
+    items,
+  }))
+  const sidebar = [
+    ...top,
+    ...Sidebar.toSidebar(ir, { intro, groupExtras, collapsed }),
+    ...newGroups,
+    ...bottom,
+  ]
+
+  // A real Vocs config so the browser bundle renders the genuine layout/chrome.
+  // `sidebar` is an array (covers the whole section, no path-scoping needed).
+  const vocsConfig = Config.define({
+    title: ir.info.title,
+    description: ir.info.description,
+    rootDir,
+    sidebar,
+    ...config.vocs,
+  })
+
+  return {
+    ir,
+    // `vocs.title` overrides the spec title (used for the HTML shell `<title>`).
+    title: vocsConfig.title ?? ir.info.title,
+    sidebar,
+    pages,
+    // Serialize functions (e.g. search/feedback adapters) so they survive the
+    // JSON embed; the browser deserializes via `virtual:vocs/config`.
+    config: ConfigSerializer.serializeFunctions(vocsConfig),
+  }
+}
+
+export declare namespace prepare {
+  type Options = {
+    /** Directory file-path specs/pages are resolved against. */
+    rootDir?: string | undefined
+    /**
+     * Base URL relative `x-openrpc` URLs (e.g. `/openrpc.json`) resolve against
+     * — the request origin, so the renderer can fetch a host-relative OpenRPC
+     * document at runtime.
+     */
+    baseUrl?: string | undefined
+  }
+}
+
+/**
+ * Resolves consumer-supplied custom CSS for the shell `<head>`: an inline
+ * string is returned as-is, while `{ file }` is read once from disk (resolved
+ * against `rootDir`). Returns `undefined` when no CSS is configured.
+ *
+ * Only touches the filesystem when a `file` is configured, so inline-string CSS
+ * works on runtimes without `node:fs` (e.g. Cloudflare Workers).
+ */
+export async function resolveCss(
+  css: string | { file: string } | undefined,
+  options: resolveCss.Options = {},
+): Promise<string | undefined> {
+  if (css === undefined) return undefined
+  if (typeof css === 'string') return css
+
+  const { rootDir = typeof process !== 'undefined' ? process.cwd() : '.' } = options
+  const [{ default: fs }, path] = await Promise.all([
+    import('node:fs/promises').then((module) => ({ default: module })),
+    import('node:path'),
+  ])
+  const filePath = path.isAbsolute(css.file) ? css.file : path.resolve(rootDir, css.file)
+  return fs.readFile(filePath, 'utf-8')
+}
+
+export declare namespace resolveCss {
+  type Options = {
+    /** Directory `file` paths are resolved against. @default process.cwd() */
+    rootDir?: string | undefined
+  }
+}

package/src/styles/index.css

@@ -7,6 +7,7 @@
 @import "./theme.css" layer(vocs_theme);
 @import "./markdown.css" layer(vocs_components);
 @import "./twoslash.css" layer(vocs_components);
+@import "./openapi.css" layer(vocs_components);
 
 @custom-variant dark (&:where([style*=":dark"], [style*=":dark"] *, [style*=": dark"], [style*=": dark"] *));
 
@@ -149,6 +150,21 @@
     }
   }
 
+  /* Full-bleed content (e.g. OpenAPI reference): span the full available width.
+     Collapsing the centering gutter to the sidebar width re-flows the sidebar,
+     logo, top nav, surface background, and main margin together (they all derive
+     from `--vocs-spacing-gutter`), so content starts flush after the sidebar.
+     The article/footer max-width and the operation grid columns are set via
+     Tailwind utilities on the elements so they cascade in the utilities layer
+     rather than being overridden by it. */
+  [data-v-content-width="full"] {
+    /* biome-ignore lint/correctness/noUnknownFunction: _ */
+    @media (width >= theme(--breakpoint-lg)) {
+      --vocs-spacing-gutter: var(--vocs-spacing-sidebar);
+      --vocs-spacing-logo: var(--vocs-spacing-sidebar);
+    }
+  }
+
   /* Minimal/no-sidebar layout - content scrolls above topnav */
   [data-layout="minimal"] > [data-v-main],
   [data-layout="blank"] > [data-v-main] {

package/src/styles/markdown.css

@@ -81,7 +81,7 @@ hgroup[data-v] {
 }
 
 hgroup[data-v],
-article[data-v-content] > h1[data-v] {
+:is(article[data-v-content], [data-v-openapi-intro], [data-v-openapi-guide]) > h1[data-v] {
   @apply vocs:border-b vocs:border-primary vocs:pb-[0.75em];
 }
 
@@ -90,7 +90,7 @@ hgroup[data-v] p {
 }
 
 hgroup[data-v]:not(:last-child),
-article[data-v-content] > h1[data-v]:not(:last-child) {
+:is(article[data-v-content], [data-v-openapi-intro], [data-v-openapi-guide]) > h1[data-v]:not(:last-child) {
   margin-block-end: calc(calc(var(--vocs-spacing) * 8) * calc(1 - var(--tw-space-y-reverse))) !important;
 }
 
@@ -98,17 +98,19 @@ article[data-v-content] > h1[data-v]:not(:last-child) {
 
 /* #region Secondary Headings (h2, h3, h4, h5, h6) */
 
-article[data-v-content] > :not(:is(hgroup[data-v], h1[data-v])) + h2:not(:only-child) {
+:is(article[data-v-content], [data-v-openapi-intro], [data-v-openapi-guide])
+  > :not(:is(hgroup[data-v], h1[data-v]))
+  + h2:not(:only-child) {
   @apply vocs:pt-8 vocs:mt-10! vocs:border-t vocs:border-primary;
 }
 
-article[data-v-content] > h3:not(:only-child) {
+:is(article[data-v-content], [data-v-openapi-intro], [data-v-openapi-guide]) > h3:not(:only-child) {
   @apply vocs:pt-4;
 }
 
-article[data-v-content] > h4:not(:only-child),
-article[data-v-content] > h5:not(:only-child),
-article[data-v-content] > h6:not(:only-child) {
+:is(article[data-v-content], [data-v-openapi-intro], [data-v-openapi-guide]) > h4:not(:only-child),
+:is(article[data-v-content], [data-v-openapi-intro], [data-v-openapi-guide]) > h5:not(:only-child),
+:is(article[data-v-content], [data-v-openapi-intro], [data-v-openapi-guide]) > h6:not(:only-child) {
   @apply vocs:pt-4;
 }
 

package/src/styles/openapi-playground.css

@@ -0,0 +1,80 @@
+/*
+ * Maps Scalar API client theme variables onto Vocs theme tokens so the modal
+ * matches the surrounding docs. Scoped to our Scalar host and given extra
+ * specificity (`.scalar-app[data-...]`) so it wins over Scalar's own
+ * `.light-mode`/`.dark-mode` definitions. Vocs tokens use `light-dark()`, which
+ * resolves from the inherited `color-scheme`, so a single value covers both
+ * modes. Variables with no clean Vocs equivalent (radius, shadows, brightness)
+ * are intentionally left at Scalar's defaults.
+ */
+.scalar-app[data-v-openapi-playground-root],
+.scalar-app[data-v-openapi-playground-root] .light-mode,
+.scalar-app[data-v-openapi-playground-root] .dark-mode {
+  /* Surfaces & text.
+   * Scalar has four elevation levels; Vocs's `--vocs-color-gray*` tokens are
+   * absolute (not theme-adaptive), so map each level with an explicit
+   * `light-dark()` to keep elevation monotonic in both modes:
+   *   light: white -> 13 -> 12 -> 11 (progressively darker)
+   *   dark:    2   ->  3 ->  4 ->  5 (progressively lighter) */
+  --scalar-background-1: light-dark(white, var(--vocs-color-gray2));
+  --scalar-background-2: light-dark(var(--vocs-color-gray13), var(--vocs-color-gray3));
+  --scalar-background-3: light-dark(var(--vocs-color-gray12), var(--vocs-color-gray4));
+  --scalar-background-4: light-dark(var(--vocs-color-gray11), var(--vocs-color-gray5));
+  --scalar-background-accent: var(--vocs-color-accenta3);
+  --scalar-color-1: var(--vocs-text-color-primary);
+  --scalar-color-2: var(--vocs-text-color-secondary);
+  --scalar-color-3: var(--vocs-text-color-muted);
+  --scalar-color-accent: var(--vocs-color-accent);
+  --scalar-border-color: var(--vocs-border-color-primary);
+
+  /* Links */
+  --scalar-link-color: var(--vocs-text-color-link);
+  --scalar-link-color-hover: var(--vocs-text-color-link-hover);
+  --scalar-link-color-visited: var(--vocs-text-color-link);
+
+  /* Semantic colors */
+  --scalar-color-red: var(--vocs-color-red);
+  --scalar-color-danger: var(--vocs-color-red);
+  --scalar-color-green: var(--vocs-color-green);
+  --scalar-color-blue: var(--vocs-color-blue);
+  --scalar-color-yellow: var(--vocs-color-yellow);
+  --scalar-color-orange: var(--vocs-color-yellow); /* no Vocs orange */
+  --scalar-color-alert: var(--vocs-color-yellow); /* no Vocs orange */
+  --scalar-color-purple: var(--vocs-color-iris);
+  --scalar-background-danger: var(--vocs-color-destructive-tint);
+
+  /* Buttons */
+  --scalar-button-1: var(--vocs-text-color-heading);
+  --scalar-button-1-color: var(--vocs-background-color-surface);
+  --scalar-button-1-hover: var(--vocs-text-color-primary);
+
+  /* Modal sidebar */
+  --scalar-sidebar-background-1: var(--vocs-background-color-surface);
+  --scalar-sidebar-color-1: var(--vocs-text-color-primary);
+  --scalar-sidebar-color-2: var(--vocs-text-color-secondary);
+  --scalar-sidebar-border-color: var(--vocs-border-color-primary);
+  --scalar-sidebar-item-hover-background: var(--vocs-background-color-primary);
+  --scalar-sidebar-item-active-background: var(--vocs-background-color-primary);
+  --scalar-sidebar-color-active: var(--vocs-color-accent);
+  --scalar-sidebar-search-background: var(--vocs-background-color-primary);
+  --scalar-sidebar-search-border-color: var(--vocs-border-color-primary);
+  --scalar-sidebar-search-color: var(--vocs-text-color-muted);
+
+  /* Fonts */
+  --scalar-font: var(--vocs-font-sans);
+  --scalar-font-code: var(--vocs-font-mono);
+}
+
+/*
+ * DataTable enable/disable checkbox (e.g. query/header parameter rows).
+ * Scalar always renders the checkmark glyph and only swaps its color: a faint
+ * `--scalar-background-2` ghost when unchecked, `--scalar-color-1` when checked.
+ * Against Vocs surfaces that ghost reads as a solid (near-black) check, so
+ * disabled params look identical to enabled ones. Hide the glyph entirely when
+ * the checkbox is unchecked; the checked state keeps Scalar's `text-c-1`. The
+ * hover affordance box is a separate `<div>` and is left untouched.
+ */
+.scalar-app input[type="checkbox"].peer:not(:checked) ~ div .scalar-icon,
+.scalar-app input[type="checkbox"].peer:not(:checked) ~ div svg {
+  color: transparent;
+}