rapidoc 11.0.1 → 12.1.0

package/src/styles/README.md

@@ -0,0 +1,96 @@
+# `src/styles` — RapiDoc Stylesheets and Theme Tokens
+
+## Overview
+
+The CSS of `<rapi-doc>` and `<rapi-doc-mini>`, written as Lit `css` templates (one default export
+per stylesheet file), plus the theming helpers that turn the `theme` attribute into CSS custom
+properties, and string transforms that reuse the same CSS outside a shadow root.
+
+- `theme-tokens.js` defines the custom properties (shadcn/ui names such as `--background`,
+  `--primary`, `--radius`; `--sidebar-*` for navigation; `--h1-font-size`… and `--heading-*`) and
+  switches them on host attributes (`theme`, `color-scheme`, `radius`, `scale`,
+  `nav-item-spacing`). The other stylesheets read those tokens and style component class names.
+- `css-bundle.js` composes every stylesheet into `allStyles` and rewrites `:host` selectors for
+  Light DOM use.
+
+Not owned here: which attributes exist (`src/rapidoc.ts`), the documented token list
+(`docs/src/page-data/styling-data.yaml`), and the portal's own layout CSS.
+
+Dependents: `src/rapidoc.ts`, `src/rapidoc-mini.ts` and the shadow-root components in
+`src/components/` list the stylesheets they need in `static get styles()`; `packages/rapidoc-prerender/src/index.js`
+re-exports `getBundledCss`, `getNavCss` and `getThemeTokensCss` as `@rapidoc/prerender`, and
+`packages/rapidoc-prerender/src/render.js` uses `getBundledCss` for Declarative Shadow DOM output; `@rapidoc/portal`
+(`src/pages/api-reference.astro`) uses `getNavCss` and `getThemeTokensCss`.
+
+## Interface
+
+`theme-tokens.js`:
+
+- `DEFAULT_THEME` (`"ember"`), `THEMES` (preset name to `{ dark, light }` declaration strings),
+  `THEME_PRESETS` (its keys).
+- `isValidHexColor`, `isValidTheme`, `isCustomColor`, `isLightColor`: theme value checks.
+- `normalizeTheme(theme) -> { theme }`: presets lower-cased, hex kept, anything else becomes
+  `DEFAULT_THEME`.
+- `applyCustomTheme(element, themeVal)`: sets inline `--primary` and `--primary-foreground` on
+  the host for a valid hex string, and removes them for anything else (presets, non-strings).
+- default export: the token stylesheet (defaults, geometry switches, color schemes, presets).
+
+`css-bundle.js`:
+
+- `allStyles`: every stylesheet in cascade order, `ThemeTokens` first, `CustomStyles` last.
+- `getBundledCss({ scope })` (also the default export): `allStyles` as one string; with a scope
+  other than `:host`, rewrites `:host(X)` to `<scope>X`, `:host` to `<scope>` and `::slotted(X)` to
+  `X`. Only `scope` is read, although the JSDoc also lists `theme` and `colorScheme`.
+- `getNavCss(scope)`: `nav-styles.js` with the same rewrites, wrapped in a `<scope> { ... }` block
+  that also sets a compact `--sidebar-item-padding`, for the portal sidebar.
+- `getThemeTokensCss(theme, scope = ":root")`: the token stylesheet with `theme` / `color-scheme`
+  host rules rewritten to `[data-theme='dark'|'light'|'system']` selectors (other presets keyed by
+  `[data-theme-preset='<name>']`).
+
+Every other file default-exports one stylesheet named after what it styles (`nav-styles.js`,
+`endpoint-styles.js`, `schema-styles.js`, ...); `custom-styles.js` is an empty slot kept last.
+`flow-styles.js` styles the Arazzo diagram for `<rapi-flow>` and `@rapidoc/prerender` `getFlowCss()`; it
+uses plain class selectors (no `:host`) and is not part of `allStyles`.
+
+The custom properties themselves are not listed here: `theme-tokens.js` is the source of truth and
+`docs/src/page-data/styling-data.yaml` is the documented list (`packages/rapidoc/AGENTS.md` §5,
+rule 6).
+
+## Invariants
+
+- Every custom property RapiDoc reads is defined somewhere in `src`; public tokens are defined
+  with a default in `theme-tokens.js`. `tests/unit/css-variables.test.js` enforces this, forbids
+  the removed v11 names and requires the shadcn/ui core tokens.
+- Tokens are read as plain `var(--x)`, without a fallback. The one exception is the local
+  `--method-color` in `endpoint-styles.js`, which `.m-endpoint` and the verb classes set and which
+  is read with a fallback to `--method-default` or `--primary`.
+- Adding, renaming or removing a token also updates `docs/src/page-data/styling-data.yaml` and the
+  current migration guide.
+- Dark is the default scheme: the dark block matches `:host`, `[color-scheme='dark']`,
+  `[color-scheme='system']` and no `color-scheme`; `system` turns light only under
+  `@media (prefers-color-scheme: light)`. `DEFAULT_THEME` also applies with no `theme` attribute.
+- `--primary` and `--primary-foreground` have no `:host` default; they come from a preset rule or
+  from `applyCustomTheme`. `--ring` follows `--primary`.
+- The `:host(...)` selector shapes written by `presetCss` and the color-scheme block are exactly
+  what `getThemeTokensCss` and `getNavCss` match with regular expressions; change both together.
+  `getThemeTokensCss` rewrites only `theme` / `color-scheme` rules, so the `radius`, `scale` and
+  `nav-item-spacing` rules come out as unusable `<scope>([...])` selectors.
+- `ThemeTokens` is first in `allStyles` and in both components' `static get styles()`.
+  `CustomStyles` is last in `allStyles` and in `rapidoc.ts`; `rapidoc-mini.ts` does not load it
+  and ends with its own inline `css` block.
+- Lit templates are not reformatted by oxfmt; keep the CSS text inside `css` templates as written.
+
+## Side Effects
+
+- Each stylesheet file creates a Lit `CSSResult` at import; `theme-tokens.js` also builds the
+  preset CSS from `THEMES` once.
+- `applyCustomTheme` mutates the element's inline style. Everything else is pure; nothing touches
+  the network or disk.
+
+## Verification
+
+- `npm run test:unit` from the repo root. Suites: `tests/unit/css-variables.test.js` (defined
+  tokens, no undefined reads), `tests/unit/theme-validation.test.js` (`theme-tokens.js` helpers,
+  `nav-styles.js`), `tests/unit/static-renderer.test.js` (`getBundledCss`, `getNavCss`,
+  `getThemeTokensCss` output).
+- After editing, `npm run lint`, `npm run format-fix` and `npm run build:rapidoc`.

package/src/styles/auth-styles.js

@@ -0,0 +1,318 @@
+import { css } from "lit";
+
+/**
+ * Authentication: the security-scheme list in the Authentication section and the
+ * security chips on each operation. Loaded by <rapi-doc> and <rapi-doc-mini>.
+ */
+export default css`
+  /* Authentication: one list item per security scheme; OAuth flows nest inside their scheme. */
+  .auth-status {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: space-between;
+    gap: 0.5rem;
+    margin-bottom: 0.5rem;
+  }
+
+  .auth-list {
+    container-type: inline-size;
+    margin: 0;
+    padding: 0;
+    list-style: none;
+    border: 1px solid var(--border);
+    border-radius: min(var(--radius), 0.5rem);
+    /* Card surface, same as .param-list */
+    background: color-mix(in srgb, var(--card) 80%, transparent);
+    font-size: var(--font-size-small);
+    line-height: 1.5;
+    direction: ltr;
+  }
+
+  .auth-scheme {
+    padding: calc(var(--auth-scheme-padding) * 1.5);
+    margin: 0;
+    overflow-wrap: break-word;
+
+    & + .auth-scheme {
+      border-top: 1px solid var(--border);
+    }
+  }
+
+  /* Each block of a scheme (header, description, hint, controls, flows) is spaced by the same gap */
+  .auth-scheme-body,
+  .oauth-flow {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 0.75em;
+
+    & > * {
+      margin: 0;
+      max-width: 100%;
+    }
+  }
+
+  .auth-scheme-header {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 0.5em;
+  }
+
+  .auth-scheme-title {
+    font-size: var(--font-size-regular);
+    font-weight: 600;
+  }
+
+  /* Prose (description, "Send X in header") keeps a readable line length */
+  .auth-scheme-body > .m-markdown,
+  .auth-hint,
+  .auth-host-note {
+    max-width: 70ch;
+  }
+
+  /* "Use a different token" under a host note: a text link, not a full-size button */
+  .auth-host-toggle {
+    font-size: var(--font-size-small);
+  }
+
+  /*
+   * Inputs and their button on a grid of equal columns (12em-16em), so a field that wraps to the next
+   * line keeps the width of the one above it; the button sits at the start of its cell.
+   */
+  .auth-controls {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(12em, 16em));
+    align-items: center;
+    gap: 0.5em;
+    width: 100%;
+
+    & > :is(input, select) {
+      width: 100%;
+      min-width: 0;
+      box-sizing: border-box;
+    }
+
+    & > .btn {
+      justify-self: start;
+    }
+  }
+
+  /* OAuth flows: one after another, each opened by its heading and parted from the previous one by a dashed rule */
+  .oauth-flow {
+    padding-block: 1.25em;
+
+    & + .oauth-flow {
+      border-top: 1px dashed var(--border);
+    }
+
+    &:last-child {
+      padding-bottom: 0;
+    }
+
+    & > .tiny-title {
+      margin: 0;
+    }
+  }
+
+  .oauth-urls {
+    display: grid;
+    grid-template-columns: max-content minmax(0, 1fr);
+    gap: 0.25em 1.5em;
+
+    & > dt {
+      color: var(--muted-foreground);
+    }
+
+    & > dd {
+      margin: 0;
+      overflow-wrap: anywhere;
+    }
+  }
+
+  .oauth-scopes-label {
+    color: var(--muted-foreground);
+    margin-bottom: -0.25em;
+  }
+
+  .oauth-scopes {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5em;
+  }
+
+  /* Scope value in the foreground color, its description muted, with a dash between */
+  .oauth-scope-name {
+    color: var(--foreground);
+  }
+
+  .oauth-scope-descr {
+    color: var(--muted-foreground);
+
+    &::before {
+      content: '– ';
+    }
+  }
+
+  /* Toggle + its text; the text wraps beside the toggle, not under it. The toggle is 1.5em tall,
+     the same as one line of text here, so it lines up with the first line. */
+  .auth-toggle {
+    display: inline-flex;
+    align-items: flex-start;
+    gap: 0.625em;
+    cursor: pointer;
+  }
+
+  .oauth-resp-display:empty {
+    display: none;
+  }
+
+  /* Narrow containers: fields take the full row; URL labels stack above their values */
+  @container (max-width: 30rem) {
+    .auth-controls {
+      grid-template-columns: minmax(0, 1fr);
+    }
+
+    .oauth-urls {
+      grid-template-columns: minmax(0, 1fr);
+
+      & > dd + dt {
+        margin-top: 0.375em;
+      }
+    }
+  }
+
+  /*
+   * Operation security: a lock, then a row of chips right under the method and path, one per alternative,
+   * with "OR" between them. The lock marks the row as authorization (and links to the Authentication
+   * section when that is shown); a chip opens its details popover on hover or focus.
+   */
+  .operation-security {
+    display: flex;
+    align-items: flex-start;
+    gap: 0.375em;
+    margin: 0 0 12px;
+    min-width: 0;
+    max-width: 100%;
+    font-size: var(--font-size-small);
+    line-height: 1.25;
+  }
+  .security-chips {
+    align-items: center;
+    row-gap: 6px;
+
+    /* Keeps "OR" centered on the chip beside it */
+    & > li {
+      display: inline-flex;
+      align-items: center;
+    }
+  }
+  .value-list-items.security-chips > li:not(:last-child)::after {
+    content: 'OR';
+    margin-inline: 0.625em;
+    font-size: var(--font-size-xs);
+    letter-spacing: 0.04em;
+  }
+  .security-chip {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.375em;
+    min-width: 0;
+    max-width: 100%;
+    padding: 0.25em 0.625em;
+    color: var(--foreground);
+    background: color-mix(in srgb, var(--card) 80%, transparent);
+    border: 1px solid var(--input);
+    /* Same radius as buttons, inputs and the popover it opens */
+    border-radius: var(--radius);
+    transition:
+      color 0.15s ease,
+      border-color 0.15s ease;
+
+    &.has-details {
+      cursor: pointer;
+    }
+    &.has-details:is(:hover, :focus-within) {
+      color: var(--primary);
+      border-color: var(--primary);
+    }
+  }
+  /* Same size as a chip (and .btn-sm), so it lines up with the first row of chips */
+  .security-lock-btn {
+    display: inline-flex;
+    flex: none;
+    align-items: center;
+    justify-content: center;
+    width: calc(1.75em + 2px);
+    height: calc(1.75em + 2px);
+    color: var(--muted-foreground);
+    border-radius: var(--radius);
+  }
+  a.security-lock-btn {
+    transition:
+      color 0.15s ease,
+      background-color 0.15s ease;
+
+    &:hover {
+      color: var(--foreground);
+      background: var(--muted);
+    }
+    &:focus-visible {
+      outline: none;
+      box-shadow: var(--focus-shadow);
+    }
+  }
+  .security-lock {
+    width: 1.25em;
+    height: 1.25em;
+    stroke: currentColor;
+    stroke-linecap: round;
+    stroke-linejoin: round;
+  }
+  .security-chip-label {
+    display: block;
+    max-width: 240px;
+    padding: 0;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    color: inherit;
+    text-decoration: none;
+    font: inherit;
+    background: none;
+    border: none;
+    border-radius: 0;
+    cursor: inherit;
+
+    &:focus-visible {
+      outline: 2px solid var(--ring);
+      outline-offset: 2px;
+    }
+  }
+
+  /* Scheme details for a chip: a top-layer popover anchored below it (above when there is no room) */
+  /* Left edge on the chip's left edge, 6px below it; a page-colored surface with a thin border and a soft, tight shadow */
+  .security-popover {
+    inset: auto;
+    margin: 6px 0 6px 0;
+    position-area: bottom span-right;
+    position-try-fallbacks: flip-block;
+    width: max-content;
+    max-width: min(400px, calc(100vw - 16px));
+    padding: 0.75em 1em;
+    color: var(--foreground);
+    background: var(--background);
+    border: 1px solid var(--border);
+    border-radius: var(--radius);
+    box-shadow:
+      0 1px 2px rgba(0, 0, 0, 0.06),
+      0 4px 12px rgba(0, 0, 0, 0.08);
+    font-family: var(--font-sans);
+    font-size: var(--font-size-description);
+    line-height: 1.5;
+    text-align: start;
+    overflow-wrap: anywhere;
+    cursor: auto;
+  }
+`;

package/src/styles/border-styles.js

@@ -0,0 +1,24 @@
+import { css } from "lit";
+
+export default css`
+  .border-top {
+    border-top: 1px solid var(--border);
+  }
+  .border {
+    border: 1px solid var(--border);
+    border-radius: min(var(--radius), 0.5rem);
+  }
+  .light-border {
+    border: 1px solid var(--border);
+    border-radius: min(var(--radius), 0.5rem);
+  }
+  .pad-8-16 {
+    padding: 8px 16px;
+  }
+  .pad-top-8 {
+    padding-top: 8px;
+  }
+  .mar-top-8 {
+    margin-top: 8px;
+  }
+`;

package/src/styles/css-bundle.js

@@ -0,0 +1,129 @@
+import ThemeTokens, { DEFAULT_THEME } from "./theme-tokens.js";
+import FontStyles from "./font-styles.js";
+import InputStyles from "./input-styles.js";
+import FlexStyles from "./flex-styles.js";
+import AuthStyles from "./auth-styles.js";
+import ParamListStyles from "./param-list-styles.js";
+import EndpointStyles from "./endpoint-styles.js";
+import MicrolighterStyles from "./microlighter-styles.js";
+import TabStyles from "./tab-styles.js";
+import NavStyles from "./nav-styles.js";
+import InfoStyles from "./info-styles.js";
+import DialogBoxStyles from "./dialog-box-styles.js";
+import LayoutStyles from "./layout-styles.js";
+import BorderStyles from "./border-styles.js";
+import SchemaStyles from "./schema-styles.js";
+import CustomStyles from "./custom-styles.js";
+
+export const allStyles = [
+  ThemeTokens,
+  FontStyles,
+  InputStyles,
+  FlexStyles,
+  AuthStyles,
+  ParamListStyles,
+  BorderStyles,
+  EndpointStyles,
+  MicrolighterStyles,
+  TabStyles,
+  NavStyles,
+  InfoStyles,
+  DialogBoxStyles,
+  LayoutStyles,
+  SchemaStyles,
+  CustomStyles,
+];
+
+/**
+ * Returns aggregated CSS text for Declarative Shadow DOM or Light DOM SSR/SSG pre-rendering.
+ *
+ * @param {Object} [options]
+ * @param {string} [options.theme='ember'] - Theme preset name or valid hex color code
+ * @param {'dark'|'light'|'system'} [options.colorScheme='dark'] - Color scheme
+ * @param {string} [options.scope=''] - Optional outer selector (for Light DOM / non-shadow pre-rendering)
+ * @returns {string} Fully concatenated CSS string
+ */
+export function getBundledCss(options = {}) {
+  const { scope = "" } = options;
+
+  let combinedCss = allStyles.map((s) => (s && s.cssText ? s.cssText : String(s || ""))).join("\n");
+
+  // If rendering in Light DOM without Shadow DOM, adapt :host selectors to the container
+  if (scope && scope !== ":host") {
+    combinedCss = combinedCss
+      .replace(/:host\(((?:[^()]|\([^()]*\))+)\)/g, `${scope}$1`)
+      .replace(/:host\b/g, scope)
+      .replace(/::slotted\(([^)]+)\)/g, `$1`);
+  }
+
+  return combinedCss;
+}
+
+/**
+ * Returns RapiDoc's navigation CSS text for shared usage in @rapidoc/portal.
+ *
+ * @param {string} [scope=''] - Optional outer selector
+ * @returns {string} Navigation CSS string
+ */
+export function getNavCss(scope = "") {
+  let navCss = NavStyles && NavStyles.cssText ? NavStyles.cssText : String(NavStyles || "");
+  if (scope && scope !== ":host") {
+    navCss = navCss
+      .replace(
+        /:host\(\[color-scheme='([^']+)'\]\)/g,
+        `[data-theme='$1'] ${scope}, ${scope}[color-scheme='$1']`,
+      )
+      .replace(/:host\(((?:[^()]|\([^()]*\))+)\)/g, `${scope}$1`)
+      .replace(/:host\b/g, scope)
+      .replace(/::slotted\(([^)]+)\)/g, `$1`)
+      .replace(/^\s*\.nav-bar\s*\{/gm, "&.nav-bar, & {");
+    navCss = `${scope} {\n  --sidebar-item-padding: 0.3125rem 1rem 0.3125rem 0.625rem;\n${navCss}\n}\n[data-theme='light'] ${scope} .nav-method.as-colored-block {\n  color: var(--method-badge-fg);\n}\n`;
+  }
+  return navCss;
+}
+
+/**
+ * Returns RapiDoc's design system & theme tokens CSS text for shared usage in @rapidoc/portal.
+ * Converts Web Component :host rules into Light DOM portal selectors (:root, [data-theme='dark'], [data-theme='light']).
+ *
+ * @param {string} [theme='ember'] - Theme preset name (see THEME_PRESETS) or hex color
+ * @param {string} [scope=':root'] - Scope selector
+ * @returns {string} Theme tokens CSS string
+ */
+export function getThemeTokensCss(theme = DEFAULT_THEME, scope = ":root") {
+  let tokensCss =
+    ThemeTokens && ThemeTokens.cssText ? ThemeTokens.cssText : String(ThemeTokens || "");
+  const activeTheme =
+    typeof theme === "string"
+      ? theme.trim().toLowerCase()
+      : typeof theme === "object" && theme?.theme
+        ? String(theme.theme).trim().toLowerCase()
+        : DEFAULT_THEME;
+
+  tokensCss = tokensCss
+    .replace(/:host\(\[theme='([^']+)'\]\[color-scheme='light'\]\)/g, (match, t) =>
+      t === activeTheme ? "[data-theme='light']" : `[data-theme='light'][data-theme-preset='${t}']`,
+    )
+    .replace(/:host\(\[theme='([^']+)'\]\[color-scheme='system'\]\)/g, (match, t) =>
+      t === activeTheme
+        ? "[data-theme='system']"
+        : `[data-theme='system'][data-theme-preset='${t}']`,
+    )
+    .replace(/:host\(\[theme='([^']+)'\]\)/g, (match, t) =>
+      t === activeTheme
+        ? `${scope}, [data-theme='dark']`
+        : `[data-theme='dark'][data-theme-preset='${t}']`,
+    )
+    .replace(/:host\(:not\(\[theme\]\)\[color-scheme='light'\]\)/g, "[data-theme='light']")
+    .replace(/:host\(:not\(\[theme\]\)\[color-scheme='system'\]\)/g, "[data-theme='system']")
+    .replace(/:host\(:not\(\[theme\]\)\)/g, `${scope}, [data-theme='dark']`)
+    .replace(/:host\(\[color-scheme='light'\]\)/g, "[data-theme='light']")
+    .replace(/:host\(\[color-scheme='dark'\]\)/g, "[data-theme='dark']")
+    .replace(/:host\(\[color-scheme='system'\]\)/g, "[data-theme='system']")
+    .replace(/:host\(:not\(\[color-scheme\]\)\)/g, `${scope}, [data-theme='dark']`)
+    .replace(/:host\b/g, scope);
+
+  return tokensCss;
+}
+
+export default getBundledCss;

package/src/styles/custom-styles.js

@@ -0,0 +1,8 @@
+import { css } from "lit";
+
+/*
+This file is reserved for any custom css that developers want to add to
+customize their theme. Simply add your css to this file and yarn build.
+*/
+
+export default css``;

package/src/styles/dialog-box-styles.js

@@ -0,0 +1,102 @@
+import { css } from "lit";
+
+export default css`
+  *,
+  *:before,
+  *:after {
+    box-sizing: border-box;
+  }
+
+  .dialog-box {
+    position: absolute;
+    top: 100px;
+    background: var(--card);
+    padding: 0;
+    color: var(--card-foreground);
+    border-radius: min(var(--radius), 0.5rem);
+    max-height: 70vh;
+    height: 70vh;
+    max-width: 70vw;
+    width: 70vw;
+    border: 1px solid var(--border);
+    overflow: hidden;
+    box-shadow:
+      0 14px 28px rgba(0, 0, 0, 0.25),
+      0 10px 10px rgba(0, 0, 0, 0.22);
+  }
+
+  .dialog-box-header {
+    position: sticky;
+    top: 0;
+    align-self: stretch;
+    z-index: 10;
+    backdrop-filter: blur(12px);
+    display: flex;
+    align-items: center;
+    padding: 0px 16px;
+    min-height: 60px;
+    max-height: 60px;
+    border-bottom: 1px solid var(--border);
+    overflow: hidden;
+    border-top-left-radius: min(var(--radius), 0.5rem);
+    border-top-right-radius: min(var(--radius), 0.5rem);
+    & button {
+      font-size: 1.5rem;
+      font-weight: 700;
+      line-height: 1;
+      color: var(--foreground);
+      border: none;
+      outline: none;
+      background: transparent;
+      cursor: pointer;
+      border: 1px solid transparent;
+      border-radius: 50%;
+      margin-inline-end: -8px;
+
+      &:hover {
+        border-color: var(--primary);
+      }
+    }
+  }
+
+  .dialog-box-content {
+    padding: 1rem;
+    display: block;
+    overflow: auto;
+    height: 100%;
+  }
+
+  .dialog-box-title {
+    flex-grow: 1;
+    font-size: var(--h2-font-size);
+  }
+
+  .search-options-row {
+    display: flex;
+    gap: 16px;
+    flex-wrap: wrap;
+    margin: 8px 0 24px;
+  }
+
+  .search-option-label {
+    cursor: pointer;
+    display: inline-flex;
+    align-items: center;
+    gap: 0.5em;
+    user-select: none;
+  }
+
+  .search-option-label input {
+    cursor: pointer;
+  }
+
+  .search-match-row {
+    padding: 5px;
+    cursor: pointer;
+    border-bottom: 1px solid var(--border);
+  }
+
+  .search-match-row * {
+    pointer-events: none;
+  }
+`;