@writedocs/generator 0.4.7 → 0.4.9

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/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/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/Tile.astro

@@ -0,0 +1,65 @@
+---
+// Mintlify's <Tile> - a visual preview (the slot, usually an image or a
+// light/dark image pair) on a patterned background, with a title and
+// description under it. Usually laid out in a <Columns> grid. `title`
+// takes inline Markdown (`code`, **bold**, *italic*), like Mintlify's.
+import { inlineMarkdown } from '../lib/inline-markdown.js';
+
+interface Props {
+  href?: string;
+  title?: string;
+  description?: string;
+}
+const { href, title, description } = Astro.props as Props;
+const Tag = href ? 'a' : 'div';
+---
+<Tag class="wd-tile" href={href}>
+  <div class="wd-tile-preview"><slot /></div>
+  {title && <div class="wd-tile-title" set:html={inlineMarkdown(title)} />}
+  {description && <div class="wd-tile-description">{description}</div>}
+</Tag>
+<style>
+  .wd-tile {
+    display: block;
+    text-decoration: none;
+    color: inherit;
+  }
+  /* Dotted pattern behind the preview, drawn from the theme's own border
+     color so it reads in both themes. */
+  .wd-tile-preview {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 10rem;
+    overflow: hidden;
+    border: 1px solid var(--wd-border);
+    border-radius: 0.6rem;
+    background-color: var(--wd-surface);
+    background-image: radial-gradient(var(--wd-border) 1px, transparent 1px);
+    background-size: 14px 14px;
+    transition: border-color 0.15s ease;
+  }
+  a.wd-tile:hover .wd-tile-preview {
+    border-color: var(--wd-primary);
+  }
+  .wd-tile-preview :global(img),
+  .wd-tile-preview :global(svg) {
+    max-width: 100%;
+    max-height: 100%;
+    object-fit: contain;
+    margin: 0;
+  }
+  .wd-tile-preview :global(p) {
+    display: contents;
+  }
+  .wd-tile-title {
+    margin-top: 0.6rem;
+    font-weight: 600;
+    color: var(--wd-text);
+  }
+  .wd-tile-description {
+    margin-top: 0.15rem;
+    font-size: 0.875rem;
+    color: var(--wd-text-muted);
+  }
+</style>

package/src/components/Tree.astro

@@ -0,0 +1,213 @@
+---
+// Mintlify's <Tree> (alias <FileTree>) - a file/folder tree built from
+// <Tree.Folder> and <Tree.File> (TreeFolder.astro / TreeFile.astro,
+// attached as properties in components/compound.ts), or from a Markdown
+// list, which remarkMintlifyTreeLists (lib/mdx-mintlify.js) rewrites into
+// those same elements at build time.
+//
+// Rendered as an ARIA tree. The script below adds Mintlify's documented
+// keyboard navigation: Up/Down between visible items, Right to open a
+// folder (or step into it), Left to close it (or step out to its parent),
+// Home/End, Enter/Space to toggle, * to open every sibling folder, and
+// type-ahead to jump to an item by its first letters.
+//
+// The highlight color is the `--tree-highlight` custom property, which a
+// page can set on the tree itself: <Tree style={{ "--tree-highlight": "..." }}>.
+interface Props {
+  style?: string | Record<string, string>;
+  class?: string;
+  className?: string;
+}
+const { style, class: className, className: mintlifyClassName } = Astro.props as Props;
+---
+<ul class:list={['wd-tree', className, mintlifyClassName]} role="tree" style={style}><slot /></ul>
+<script>
+  function initTrees(root: ParentNode) {
+    root.querySelectorAll<HTMLElement>('.wd-tree').forEach((tree) => {
+      if (tree.dataset.wdInit) return;
+      tree.dataset.wdInit = 'true';
+      const items = () => Array.from(tree.querySelectorAll<HTMLElement>('.wd-tree-item'));
+      const isFolder = (el: HTMLElement) => el.classList.contains('wd-tree-folder');
+      const isOpen = (el: HTMLElement) => el.getAttribute('aria-expanded') === 'true';
+      // Visible = not inside a closed folder.
+      const visible = () =>
+        items().filter((el) => {
+          let parent = el.parentElement?.closest<HTMLElement>('.wd-tree-folder');
+          while (parent && tree.contains(parent)) {
+            if (!isOpen(parent)) return false;
+            parent = parent.parentElement?.closest<HTMLElement>('.wd-tree-folder');
+          }
+          return true;
+        });
+      const setOpen = (el: HTMLElement, open: boolean) => {
+        if (!isFolder(el) || el.classList.contains('wd-tree-static')) return;
+        el.setAttribute('aria-expanded', String(open));
+      };
+      const focus = (el: HTMLElement | undefined) => {
+        if (!el) return;
+        items().forEach((i) => (i.tabIndex = -1));
+        el.tabIndex = 0;
+        el.focus();
+      };
+      const first = items()[0];
+      if (first) first.tabIndex = 0;
+
+      tree.addEventListener('click', (e) => {
+        const row = (e.target as HTMLElement).closest('.wd-tree-row');
+        const item = row?.parentElement as HTMLElement | null;
+        if (!item || !tree.contains(item)) return;
+        if (isFolder(item)) setOpen(item, !isOpen(item));
+        focus(item);
+      });
+
+      let typed = '';
+      let typedAt = 0;
+      tree.addEventListener('keydown', (e) => {
+        const current = (e.target as HTMLElement).closest<HTMLElement>('.wd-tree-item');
+        if (!current) return;
+        const list = visible();
+        const i = list.indexOf(current);
+        const parentFolder = current.parentElement?.closest<HTMLElement>('.wd-tree-folder');
+        switch (e.key) {
+          case 'ArrowDown':
+            focus(list[i + 1]);
+            break;
+          case 'ArrowUp':
+            focus(list[i - 1]);
+            break;
+          case 'ArrowRight':
+            if (isFolder(current) && !isOpen(current) && !current.classList.contains('wd-tree-static')) setOpen(current, true);
+            else if (isFolder(current) && isOpen(current)) focus(current.querySelector<HTMLElement>('.wd-tree-item') ?? undefined);
+            break;
+          case 'ArrowLeft':
+            if (isFolder(current) && isOpen(current) && !current.classList.contains('wd-tree-static')) setOpen(current, false);
+            else if (parentFolder && tree.contains(parentFolder)) focus(parentFolder);
+            break;
+          case 'Home':
+            focus(list[0]);
+            break;
+          case 'End':
+            focus(list[list.length - 1]);
+            break;
+          case 'Enter':
+          case ' ':
+            if (isFolder(current)) setOpen(current, !isOpen(current));
+            break;
+          case '*':
+            Array.from(current.parentElement?.children ?? [])
+              .filter((el): el is HTMLElement => el instanceof HTMLElement && isFolder(el))
+              .forEach((el) => setOpen(el, true));
+            break;
+          default:
+            if (e.key.length === 1 && /\S/.test(e.key) && !e.ctrlKey && !e.metaKey && !e.altKey) {
+              const now = Date.now();
+              typed = now - typedAt > 700 ? e.key.toLowerCase() : typed + e.key.toLowerCase();
+              typedAt = now;
+              const nameOf = (el: HTMLElement) =>
+                el.querySelector(':scope > .wd-tree-row .wd-tree-name')?.textContent?.toLowerCase() ?? '';
+              // A single letter looks past the current item; a longer
+              // prefix (typed quickly) keeps matching from it, so "pa"
+              // after "p" landed on page.tsx stays there.
+              const startAt = typed.length > 1 ? i : i + 1;
+              const ordered = [...list.slice(startAt), ...list.slice(0, startAt)];
+              const match = ordered.find((el) => nameOf(el).startsWith(typed));
+              if (match) focus(match);
+              break;
+            }
+            return;
+        }
+        e.preventDefault();
+      });
+    });
+  }
+  initTrees(document);
+  document.addEventListener('astro:page-load', () => initTrees(document));
+</script>
+<style is:global>
+  .wd-tree {
+    --wd-tree-accent: var(--tree-highlight, var(--wd-primary));
+    margin: 1.25rem 0;
+    padding: 0.6rem;
+    list-style: none;
+    border: 1px solid var(--wd-border);
+    border-radius: 0.6rem;
+    font-family: monospace;
+    font-size: 0.875rem;
+  }
+  .wd-tree .wd-tree-group {
+    margin: 0;
+    padding-left: 1.1rem;
+    list-style: none;
+  }
+  .wd-tree .wd-tree-item {
+    margin: 0;
+    padding: 0;
+    outline: none;
+  }
+  .wd-tree-folder[aria-expanded='false'] > .wd-tree-group {
+    display: none;
+  }
+  .wd-tree-row {
+    display: flex;
+    align-items: center;
+    gap: 0.4rem;
+    padding: 0.2rem 0.4rem;
+    border-radius: 0.35rem;
+    color: var(--wd-text);
+    cursor: default;
+    user-select: none;
+  }
+  .wd-tree-folder:not(.wd-tree-static) > .wd-tree-row {
+    cursor: pointer;
+  }
+  .wd-tree-row:hover,
+  .wd-tree-item:focus-visible > .wd-tree-row {
+    background: var(--wd-surface);
+  }
+  .wd-tree-item:focus-visible > .wd-tree-row {
+    box-shadow: inset 0 0 0 1px var(--wd-tree-accent);
+  }
+  .wd-tree-chevron {
+    width: 0.8rem;
+    flex-shrink: 0;
+    display: inline-flex;
+    justify-content: center;
+  }
+  .wd-tree-folder > .wd-tree-row > .wd-tree-chevron::before {
+    content: '';
+    width: 0.35rem;
+    height: 0.35rem;
+    border-right: 1.5px solid var(--wd-text-muted);
+    border-bottom: 1.5px solid var(--wd-text-muted);
+    transform: rotate(-45deg);
+    transition: transform 0.12s ease;
+  }
+  .wd-tree-folder[aria-expanded='true'] > .wd-tree-row > .wd-tree-chevron::before {
+    transform: rotate(45deg);
+  }
+  .wd-tree-static > .wd-tree-row > .wd-tree-chevron::before {
+    opacity: 0.35;
+  }
+  svg.wd-tree-icon {
+    width: 1em;
+    height: 1em;
+    flex-shrink: 0;
+    color: var(--wd-text-muted);
+  }
+  .wd-tree-folder[aria-expanded='true'] > .wd-tree-row > .wd-tree-icon-closed,
+  .wd-tree-folder[aria-expanded='false'] > .wd-tree-row > .wd-tree-icon-open {
+    display: none;
+  }
+  /* The highlighted item gets a tinted row; a highlighted folder also
+     tints the text of everything inside it, so the active path reads. */
+  .wd-tree-highlight > .wd-tree-row {
+    background: color-mix(in srgb, var(--wd-tree-accent) 14%, transparent);
+    color: var(--wd-tree-accent);
+    font-weight: 600;
+  }
+  .wd-tree-highlight > .wd-tree-row .wd-tree-icon,
+  .wd-tree-folder.wd-tree-highlight .wd-tree-row,
+  .wd-tree-folder.wd-tree-highlight .wd-tree-icon {
+    color: var(--wd-tree-accent);
+  }
+</style>

package/src/components/TreeFile.astro

@@ -0,0 +1,17 @@
+---
+// Mintlify's <Tree.File name="..."> - see Tree.astro. `highlight` marks it
+// as the active item.
+import AppIcon from './AppIcon.astro';
+interface Props {
+  name: string;
+  highlight?: boolean;
+}
+const { name, highlight = false } = Astro.props as Props;
+---
+<li class:list={['wd-tree-item', 'wd-tree-file', { 'wd-tree-highlight': highlight }]} role="treeitem" tabindex="-1">
+  <span class="wd-tree-row">
+    <span class="wd-tree-chevron wd-tree-chevron-spacer" aria-hidden="true"></span>
+    <AppIcon icon="lucide:file" class="wd-tree-icon" />
+    <span class="wd-tree-name">{name}</span>
+  </span>
+</li>

package/src/components/TreeFolder.astro

@@ -0,0 +1,28 @@
+---
+// Mintlify's <Tree.Folder name="..."> - see Tree.astro. `defaultOpen`
+// starts it expanded; `openable={false}` makes it a fixed, non-toggling
+// folder (shown open or closed per `defaultOpen`); `highlight` marks it as
+// the active item and tints everything inside it.
+import AppIcon from './AppIcon.astro';
+interface Props {
+  name: string;
+  defaultOpen?: boolean;
+  openable?: boolean;
+  highlight?: boolean;
+}
+const { name, defaultOpen = false, openable = true, highlight = false } = Astro.props as Props;
+---
+<li
+  class:list={['wd-tree-item', 'wd-tree-folder', { 'wd-tree-highlight': highlight, 'wd-tree-static': !openable }]}
+  role="treeitem"
+  aria-expanded={defaultOpen ? 'true' : 'false'}
+  tabindex="-1"
+>
+  <span class="wd-tree-row">
+    <span class="wd-tree-chevron" aria-hidden="true"></span>
+    <AppIcon icon="lucide:folder" class="wd-tree-icon wd-tree-icon-closed" />
+    <AppIcon icon="lucide:folder-open" class="wd-tree-icon wd-tree-icon-open" />
+    <span class="wd-tree-name">{name}</span>
+  </span>
+  <ul class="wd-tree-group" role="group"><slot /></ul>
+</li>