@writedocs/generator 0.4.6 → 0.4.8

package/src/components/GitHubRepo.astro

@@ -0,0 +1,156 @@
+---
+// Mintlify's <GitHub.Repo repo="owner/name" variant="inset|flat"> - a card
+// linking to a public GitHub repository. Attached as GitHub.Repo in
+// components/compound.ts. `repo` is an "owner/name" slug or a full
+// github.com URL.
+//
+// The repository's name and link are built into the page; its description,
+// star count and fork count are fetched from the public GitHub API when the
+// page loads, as on Mintlify. The unauthenticated API allows 60 requests an
+// hour per reader's IP, so the response is cached for the browser session.
+// If the request fails, the card stays a plain link to the repository.
+import AppIcon from './AppIcon.astro';
+
+interface Props {
+  repo: string;
+  variant?: 'inset' | 'flat';
+}
+const { repo, variant = 'inset' } = Astro.props as Props;
+const slug = String(repo ?? '')
+  .trim()
+  .replace(/^(?:https?:\/\/)?(?:www\.)?github\.com\//i, '')
+  .replace(/\.git$/i, '')
+  .split(/[/?#]/)
+  .slice(0, 2)
+  .join('/');
+const valid = /^[\w.-]+\/[\w.-]+$/.test(slug);
+---
+{valid && (
+  <a
+    class:list={['wd-github-repo', `wd-github-repo-${variant}`]}
+    href={`https://github.com/${slug}`}
+    target="_blank"
+    rel="noopener noreferrer"
+    data-repo={slug}
+  >
+    <div class="wd-github-repo-inner">
+      <div class="wd-github-repo-name">
+        <AppIcon icon="fa6-brands:github" class="wd-github-repo-icon" />
+        <span>{slug}</span>
+      </div>
+      <p class="wd-github-repo-description" hidden></p>
+      <div class="wd-github-repo-stats" hidden>
+        <span><span aria-hidden="true">&#9733;</span> <span data-stat="stars"></span> stars</span>
+        <span><span data-stat="forks"></span> forks</span>
+      </div>
+    </div>
+  </a>
+)}
+<script>
+  type RepoInfo = { description: string | null; stargazers_count: number; forks_count: number };
+  const compact = (n: number) =>
+    new Intl.NumberFormat('en', { notation: 'compact', maximumFractionDigits: 1 }).format(n);
+
+  async function loadRepo(slug: string): Promise<RepoInfo | null> {
+    const key = `wd-github-repo:${slug}`;
+    try {
+      const cached = sessionStorage.getItem(key);
+      if (cached) return JSON.parse(cached);
+    } catch {}
+    try {
+      const res = await fetch(`https://api.github.com/repos/${slug}`, {
+        headers: { Accept: 'application/vnd.github+json' },
+      });
+      if (!res.ok) return null;
+      const data = await res.json();
+      const info: RepoInfo = {
+        description: data.description ?? null,
+        stargazers_count: data.stargazers_count ?? 0,
+        forks_count: data.forks_count ?? 0,
+      };
+      try {
+        sessionStorage.setItem(key, JSON.stringify(info));
+      } catch {}
+      return info;
+    } catch {
+      return null;
+    }
+  }
+
+  function initGitHubRepos(root: ParentNode) {
+    root.querySelectorAll<HTMLElement>('.wd-github-repo[data-repo]').forEach(async (card) => {
+      if (card.dataset.wdInit) return;
+      card.dataset.wdInit = 'true';
+      const info = await loadRepo(card.dataset.repo!);
+      if (!info) return;
+      const desc = card.querySelector<HTMLElement>('.wd-github-repo-description');
+      if (desc && info.description) {
+        desc.textContent = info.description;
+        desc.hidden = false;
+      }
+      const stats = card.querySelector<HTMLElement>('.wd-github-repo-stats');
+      if (stats) {
+        stats.querySelector('[data-stat="stars"]')!.textContent = compact(info.stargazers_count);
+        stats.querySelector('[data-stat="forks"]')!.textContent = compact(info.forks_count);
+        stats.hidden = false;
+      }
+    });
+  }
+  initGitHubRepos(document);
+  document.addEventListener('astro:page-load', () => initGitHubRepos(document));
+</script>
+<style>
+  .wd-github-repo {
+    display: block;
+    margin: 1.25rem 0;
+    border: 1px solid var(--wd-border);
+    border-radius: 0.75rem;
+    text-decoration: none;
+    color: inherit;
+    transition: border-color 0.15s ease;
+  }
+  .wd-github-repo:hover {
+    border-color: var(--wd-primary);
+  }
+  /* inset (the default): the details sit on a rounded inner surface. */
+  .wd-github-repo-inset {
+    padding: 0.4rem;
+  }
+  .wd-github-repo-inset .wd-github-repo-inner {
+    padding: 0.9rem 1rem;
+    border-radius: 0.5rem;
+    background: var(--wd-surface);
+  }
+  /* flat: one surface, tighter padding. */
+  .wd-github-repo-flat .wd-github-repo-inner {
+    padding: 0.75rem 0.9rem;
+  }
+  .wd-github-repo-name {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    font-weight: 600;
+    color: var(--wd-text);
+  }
+  :global(svg.wd-github-repo-icon) {
+    width: 1.1rem;
+    height: 1.1rem;
+    flex-shrink: 0;
+  }
+  .wd-github-repo-description {
+    margin: 0.4rem 0 0;
+    font-size: 0.875rem;
+    color: var(--wd-text-muted);
+  }
+  .wd-github-repo-stats {
+    display: flex;
+    gap: 1rem;
+    margin-top: 0.5rem;
+    font-size: 0.8rem;
+    color: var(--wd-text-muted);
+  }
+  .wd-github-repo-stats[hidden],
+  .wd-github-repo-description[hidden] {
+    display: none;
+  }
+</style>

package/src/components/Hint.astro

@@ -11,15 +11,30 @@
 // position predictably; a second <slot> would let an author put
 // arbitrary markup (another Hint, a link, a whole paragraph) in there,
 // which the hover-bubble layout below was never built to hold.
+//
+// `headline`, `cta` and `href` exist for Mintlify's <Tooltip> (see
+// Tooltip.astro): an optional bold line above the tip, and an optional
+// link below it. They're still plain strings, not slots - same reasoning
+// as above. A tooltip with a link has to stay open while the pointer moves
+// from the trigger onto the bubble, so the bubble takes pointer events
+// once shown, and a transparent ::before bridges the gap between them.
 interface Props {
   tip: string;
+  headline?: string;
+  cta?: string;
+  href?: string;
 }
-const { tip } = Astro.props as Props;
+const { tip, headline, cta, href } = Astro.props as Props;
+const hasLink = Boolean(cta && href);
 ---
 
-<span class="wd-hint" tabindex="0">
+<span class:list={["wd-hint", { "wd-hint-rich": Boolean(headline) || hasLink }]} tabindex="0">
   <span class="wd-hint-trigger"><slot /></span>
-  <span class="wd-hint-tooltip" role="tooltip">{tip}</span>
+  <span class="wd-hint-tooltip" role="tooltip">
+    {headline && <span class="wd-hint-headline">{headline}</span>}
+    <span class="wd-hint-tip">{tip}</span>
+    {hasLink && <a class="wd-hint-cta" href={href}>{cta}</a>}
+  </span>
 </span>
 <style>
   .wd-hint {
@@ -91,9 +106,40 @@ const { tip } = Astro.props as Props;
     border-top-color: #18181b;
   }
   .wd-hint:hover .wd-hint-tooltip,
-  .wd-hint:focus-visible .wd-hint-tooltip {
+  .wd-hint:focus-visible .wd-hint-tooltip,
+  .wd-hint:focus-within .wd-hint-tooltip {
     opacity: 1;
     visibility: visible;
     transform: translateX(-50%) translateY(0);
   }
+  /* Only a tooltip with a headline or link is interactive - a plain one
+     keeps pointer-events: none so it never blocks the text under it. */
+  .wd-hint-rich:hover .wd-hint-tooltip,
+  .wd-hint-rich:focus-within .wd-hint-tooltip {
+    pointer-events: auto;
+  }
+  .wd-hint-rich .wd-hint-tooltip::before {
+    content: "";
+    position: absolute;
+    top: 100%;
+    left: 0;
+    right: 0;
+    height: 0.6rem;
+  }
+  .wd-hint-tip,
+  .wd-hint-headline,
+  .wd-hint-cta {
+    display: block;
+  }
+  .wd-hint-rich .wd-hint-tip {
+    font-weight: 400;
+  }
+  .wd-hint-headline {
+    margin-bottom: 0.2rem;
+  }
+  .wd-hint-cta {
+    margin-top: 0.35rem;
+    color: #93c5fd;
+    text-decoration: underline;
+  }
 </style>

package/src/components/Panel.astro

@@ -0,0 +1,11 @@
+---
+// Mintlify's <Panel> - content pinned to the right-hand column on desktop,
+// in place of the table of contents. It's the same docking
+// RequestExample/ResponseExample already use (initExamplePanels() in
+// [...slug].astro): the `wd-example-panel` class is what that script moves
+// into the column at >= 1151px wide, and back into the page below that.
+// A RequestExample/ResponseExample inside a Panel moves with it. On a page
+// with no table-of-contents column (any mode but `default`), the Panel
+// stays where it is in the page.
+---
+<div class="wd-example-panel wd-panel"><slot /></div>

package/src/components/ParamField.astro

@@ -0,0 +1,25 @@
+---
+// Mintlify's <ParamField> - a request parameter row, rendered by
+// Parameter.astro. Mintlify names the parameter through whichever
+// location prop it's in (`path="id"`, `query="limit"`, `body="email"`,
+// `header="Authorization"`) rather than `name`; the first one present
+// becomes the name. The location itself isn't shown - on a Mintlify page
+// it's already implied by the section the field sits in.
+import Parameter from './Parameter.astro';
+interface Props {
+  name?: string;
+  path?: string;
+  query?: string;
+  body?: string;
+  header?: string;
+  type?: string;
+  required?: boolean;
+  default?: unknown;
+  deprecated?: boolean;
+  pre?: string[];
+  post?: string[];
+}
+const { name, path, query, body, header, ...rest } = Astro.props as Props;
+const fieldName = name ?? path ?? query ?? body ?? header ?? '';
+---
+<Parameter name={fieldName} {...rest}><slot /></Parameter>

package/src/components/Parameter.astro

@@ -16,21 +16,37 @@
 // text, an <Expandable> wrapping more Parameters for a nested object's
 // own properties, or both - see Expandable.astro's own comment for that
 // half of the pattern.
+//
+// `deprecated`, `pre` and `post` exist for Mintlify parity (see
+// ParamField.astro/ResponseField.astro, the Mintlify-named wrappers around
+// this): `pre`/`post` are extra labels Mintlify renders before/after the
+// name. `default` accepts any value, not just a string - Mintlify content
+// routinely writes `default={10}` or `default={false}`, and a falsy one
+// (0, false) is still a real default worth showing, so only
+// undefined/null/"" hide the chip.
 interface Props {
   name: string;
   type?: string;
   required?: boolean;
-  default?: string;
+  default?: unknown;
+  deprecated?: boolean;
+  pre?: string[];
+  post?: string[];
 }
-const { name, type, required = false, default: defaultValue } = Astro.props as Props;
+const { name, type, required = false, default: defaultValue, deprecated = false, pre = [], post = [] } =
+  Astro.props as Props;
+const hasDefault = defaultValue !== undefined && defaultValue !== null && defaultValue !== "";
 ---
 
-<div class="wd-parameter">
+<div class:list={["wd-parameter", { "wd-parameter-deprecated": deprecated }]}>
   <div class="wd-parameter-head">
+    {pre.map((label) => <span class="wd-parameter-label">{label}</span>)}
     <span class="wd-parameter-name">{name}</span>
     {type && <span class="wd-parameter-type">{type}</span>}
     {required && <span class="wd-parameter-required">required</span>}
-    {defaultValue && <span class="wd-parameter-default">default: {defaultValue}</span>}
+    {deprecated && <span class="wd-parameter-deprecated-badge">deprecated</span>}
+    {post.map((label) => <span class="wd-parameter-label">{label}</span>)}
+    {hasDefault && <span class="wd-parameter-default">default: {String(defaultValue)}</span>}
   </div>
   <div class="wd-parameter-body">
     <slot />
@@ -96,6 +112,27 @@ const { name, type, required = false, default: defaultValue } = Astro.props as P
     padding: 0.1em 0.5em;
     color: #dc2626;
   }
+  /* Same chip as .wd-parameter-type, in amber - a warning, not an error
+     like .wd-parameter-required. The name itself is struck through below
+     so the field reads as "don't use this" even before the badge. */
+  .wd-parameter-deprecated-badge {
+    font-family: monospace;
+    font-size: 0.8rem;
+    font-weight: 600;
+    background: color-mix(in srgb, #d97706 8%, var(--wd-surface));
+    border: 1px solid color-mix(in srgb, #d97706 35%, var(--wd-border));
+    border-radius: 0.35em;
+    padding: 0.1em 0.5em;
+    color: #d97706;
+  }
+  .wd-parameter-deprecated .wd-parameter-name {
+    text-decoration: line-through;
+    opacity: 0.7;
+  }
+  .wd-parameter-label {
+    font-size: 0.78rem;
+    color: var(--wd-text-muted);
+  }
   .wd-parameter-default {
     font-size: 0.78rem;
     color: var(--wd-text-muted);

package/src/components/Prompt.astro

@@ -0,0 +1,143 @@
+---
+// Mintlify's <Prompt> - a ready-made AI prompt: a card showing
+// `description` (inline Markdown) and an optional icon, with actions to
+// copy the prompt or open it in Cursor. The prompt itself is the slot; it's
+// also viewable in a collapsed "Show prompt" section under the card.
+//
+// What gets copied/sent is the prompt's *source* text - `_text`, read from
+// the MDX file by remarkMintlifyPromptText (lib/mdx-mintlify.js) - so its
+// Markdown survives. Without it (a Prompt used outside MDX), the copy falls
+// back to the rendered text.
+//
+// `actions` defaults to ["copy"]; add "cursor" for an "Open in Cursor"
+// link (Cursor's own https://cursor.com/link/prompt?text=... deeplink,
+// which also works for readers without Cursor installed). Cursor caps a
+// deeplink at 10,000 URL-encoded characters, so a longer prompt gets no
+// Cursor link - just the copy button.
+import AppIcon from './AppIcon.astro';
+import { inlineMarkdown } from '../lib/inline-markdown.js';
+
+interface Props {
+  description?: string;
+  icon?: string;
+  actions?: Array<'copy' | 'cursor'>;
+  _text?: string;
+}
+const { description, icon, actions = ['copy'], _text } = Astro.props as Props;
+const cursorHref = _text ? `https://cursor.com/link/prompt?text=${encodeURIComponent(_text)}` : null;
+const showCursor = actions.includes('cursor') && cursorHref !== null && cursorHref.length <= 10000;
+---
+<div class="wd-prompt">
+  <div class="wd-prompt-head">
+    {icon && <AppIcon icon={icon} class="wd-prompt-icon" />}
+    {description && <div class="wd-prompt-description" set:html={inlineMarkdown(description)} />}
+    <div class="wd-prompt-actions">
+      {actions.includes('copy') && (
+        <button type="button" class="wd-prompt-action" data-role="copy-prompt">Copy prompt</button>
+      )}
+      {showCursor && (
+        <a class="wd-prompt-action" href={cursorHref} target="_blank" rel="noopener noreferrer">Open in Cursor</a>
+      )}
+    </div>
+  </div>
+  <details class="wd-prompt-text">
+    <summary>Show prompt</summary>
+    <div class="wd-prompt-body"><slot /></div>
+  </details>
+  {_text && <template class="wd-prompt-source">{_text}</template>}
+</div>
+<script>
+  function initPrompts(root: ParentNode) {
+    root.querySelectorAll<HTMLButtonElement>('[data-role="copy-prompt"]').forEach((btn) => {
+      if (btn.dataset.wdInit) return;
+      btn.dataset.wdInit = 'true';
+      btn.addEventListener('click', async () => {
+        const card = btn.closest('.wd-prompt');
+        const source = card?.querySelector<HTMLTemplateElement>('template.wd-prompt-source');
+        const text = source ? source.content.textContent ?? '' : card?.querySelector('.wd-prompt-body')?.textContent?.trim() ?? '';
+        try {
+          await navigator.clipboard.writeText(text);
+          btn.textContent = 'Copied';
+        } catch {
+          btn.textContent = 'Copy failed';
+        }
+        setTimeout(() => (btn.textContent = 'Copy prompt'), 1500);
+      });
+    });
+  }
+  initPrompts(document);
+  document.addEventListener('astro:page-load', () => initPrompts(document));
+</script>
+<style>
+  .wd-prompt {
+    margin: 1.25rem 0;
+    border: 1px solid var(--wd-border);
+    border-radius: 0.6rem;
+    overflow: hidden;
+  }
+  .wd-prompt-head {
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+    padding: 0.9rem 1.1rem;
+  }
+  :global(svg.wd-prompt-icon),
+  :global(span.wd-prompt-icon) {
+    flex-shrink: 0;
+    width: 1.1rem;
+    height: 1.1rem;
+    color: var(--wd-primary);
+  }
+  .wd-prompt-description {
+    flex: 1;
+    min-width: 0;
+    color: var(--wd-text);
+  }
+  .wd-prompt-actions {
+    display: flex;
+    flex-shrink: 0;
+    gap: 0.4rem;
+  }
+  .wd-prompt-action {
+    padding: 0.3rem 0.7rem;
+    border: 1px solid var(--wd-border);
+    border-radius: 0.4rem;
+    background: var(--wd-background);
+    color: var(--wd-text);
+    font-size: 0.8rem;
+    text-decoration: none;
+    cursor: pointer;
+    white-space: nowrap;
+  }
+  .wd-prompt-action:hover {
+    border-color: var(--wd-primary);
+    color: var(--wd-primary);
+  }
+  .wd-prompt-text {
+    border-top: 1px solid var(--wd-border);
+    background: var(--wd-surface);
+  }
+  .wd-prompt-text summary {
+    padding: 0.5rem 1.1rem;
+    font-size: 0.8rem;
+    color: var(--wd-text-muted);
+    cursor: pointer;
+  }
+  .wd-prompt-body {
+    padding: 0 1.1rem 0.9rem;
+    font-size: 0.9rem;
+    color: var(--wd-text-muted);
+  }
+  .wd-prompt-body :global(p:first-child) {
+    margin-top: 0;
+  }
+  .wd-prompt-body :global(p:last-child),
+  .wd-prompt-body :global(ul:last-child) {
+    margin-bottom: 0;
+  }
+  @media (max-width: 640px) {
+    .wd-prompt-head {
+      flex-wrap: wrap;
+    }
+  }
+</style>

package/src/components/ResponseField.astro

@@ -0,0 +1,18 @@
+---
+// Mintlify's <ResponseField> - a response field row. Same props as
+// Parameter.astro (`name`, `type`, `required`, `default`, `deprecated`,
+// `pre`, `post`), so this is a straight pass-through; see Parameter.astro
+// for why one component covers both directions.
+import Parameter from './Parameter.astro';
+interface Props {
+  name: string;
+  type?: string;
+  required?: boolean;
+  default?: unknown;
+  deprecated?: boolean;
+  pre?: string[];
+  post?: string[];
+}
+const props = Astro.props as Props;
+---
+<Parameter {...props}><slot /></Parameter>

package/src/components/Step.astro

@@ -1,10 +1,29 @@
 ---
+import AppIcon from './AppIcon.astro';
+// `icon`, `stepNumber` and `titleSize` are Mintlify's. `icon` replaces the
+// number in the step's circle. `stepNumber` sets this step's number; the
+// steps after it keep counting from there (counter-set on the step itself
+// runs before its own ::before increments the counter - see Steps.astro).
+// `titleSize` renders the title as an h2/h3 instead of bold text.
 interface Props {
   title?: string;
+  icon?: string;
+  stepNumber?: number;
+  titleSize?: 'p' | 'h2' | 'h3';
 }
-const { title } = Astro.props as Props;
+const { title, icon, stepNumber, titleSize = 'p' } = Astro.props as Props;
+const style = typeof stepNumber === 'number' ? `counter-set: wd-step ${stepNumber - 1}` : undefined;
+const TitleTag = titleSize === 'h2' || titleSize === 'h3' ? titleSize : 'p';
 ---
-<div class="wd-step">
-  {title && <p class="wd-step-title"><strong>{title}</strong></p>}
+<div class:list={['wd-step', { 'wd-step-has-icon': Boolean(icon) }]} style={style}>
+  {icon && <AppIcon icon={icon} class="wd-step-icon" />}
+  {
+    title &&
+      (TitleTag === 'p' ? (
+        <p class="wd-step-title"><strong>{title}</strong></p>
+      ) : (
+        <TitleTag class="wd-step-title">{title}</TitleTag>
+      ))
+  }
   <slot />
 </div>

package/src/components/Steps.astro

@@ -12,6 +12,28 @@
     margin-left: 0.9rem;
   }
   .wd-step:last-child { border-color: transparent; padding-bottom: 0; }
+  /* A Step with an `icon` (see Step.astro) keeps the same circle - the
+     ::before below still increments the counter so later steps number
+     correctly - and draws the icon on top of it instead of the digit. */
+  .wd-step.wd-step-has-icon::before { color: transparent; }
+  .wd-step-icon {
+    position: absolute;
+    left: -0.95rem;
+    top: 0;
+    width: 1.8rem;
+    height: 1.8rem;
+    padding: 0.45rem;
+    box-sizing: border-box;
+    color: white;
+    z-index: 1;
+  }
+  span.wd-step-icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0;
+    font-size: 0.85rem;
+  }
   .wd-step::before {
     counter-increment: wd-step;
     content: counter(wd-step);

package/src/components/Tab.astro

@@ -1,9 +1,15 @@
 ---
+import AppIcon from './AppIcon.astro';
+// `icon` is Mintlify's: shown before the title in the tab's button. The
+// button is built client-side by Tabs.astro, which moves this hidden,
+// server-rendered icon into it.
 interface Props {
   title: string;
+  icon?: string;
 }
-const { title } = Astro.props as Props;
+const { title, icon } = Astro.props as Props;
 ---
 <div class="wd-tab" data-title={title}>
+  {icon && <span class="wd-tab-icon-src" hidden><AppIcon icon={icon} class="wd-tabs-btn-icon" /></span>}
   <slot />
 </div>

package/src/components/Tabs.astro

@@ -1,4 +1,11 @@
-<div class="wd-tabs">
+---
+// `defaultTabIndex` is Mintlify's: which tab (0-based) starts selected.
+interface Props {
+  defaultTabIndex?: number;
+}
+const { defaultTabIndex = 0 } = Astro.props as Props;
+---
+<div class="wd-tabs" data-default-index={defaultTabIndex}>
   <slot />
 </div>
 <script>
@@ -7,13 +14,20 @@
       if (tabs.dataset.wdInit) return;
       tabs.dataset.wdInit = 'true';
       const panels = Array.from(tabs.querySelectorAll<HTMLElement>(':scope > .wd-tab'));
+      const requested = Number(tabs.dataset.defaultIndex ?? 0);
+      const initial = Number.isInteger(requested) && requested >= 0 && requested < panels.length ? requested : 0;
       const nav = document.createElement('div');
       nav.className = 'wd-tabs-nav';
       panels.forEach((panel, i) => {
         const btn = document.createElement('button');
         btn.type = 'button';
-        btn.textContent = panel.dataset.title ?? `Tab ${i + 1}`;
-        btn.className = 'wd-tabs-btn' + (i === 0 ? ' active' : '');
+        // A Tab's `icon` is rendered server-side (astro-icon only runs at
+        // build time) into a hidden holder inside the panel - see
+        // Tab.astro - and moved into its button here.
+        const icon = panel.querySelector<HTMLElement>(':scope > .wd-tab-icon-src > *');
+        if (icon) btn.appendChild(icon);
+        btn.appendChild(document.createTextNode(panel.dataset.title ?? `Tab ${i + 1}`));
+        btn.className = 'wd-tabs-btn' + (i === initial ? ' active' : '');
         btn.addEventListener('click', () => {
           nav.querySelectorAll('.wd-tabs-btn').forEach((b) => b.classList.remove('active'));
           panels.forEach((p) => (p.style.display = 'none'));
@@ -21,7 +35,7 @@
           panel.style.display = 'block';
         });
         nav.appendChild(btn);
-        panel.style.display = i === 0 ? 'block' : 'none';
+        panel.style.display = i === initial ? 'block' : 'none';
       });
       tabs.prepend(nav);
     });
@@ -45,6 +59,15 @@
     color: var(--wd-text-muted);
     border-bottom: 2px solid transparent;
   }
+  .wd-tabs-btn {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.4rem;
+  }
+  svg.wd-tabs-btn-icon {
+    width: 1em;
+    height: 1em;
+  }
   .wd-tabs-btn.active {
     color: var(--wd-primary);
     border-bottom-color: var(--wd-primary);