@sakura-ui/sakura-ui 0.5.1 → 0.5.3

package/packages/markdown/tests/__snapshots__/Markdown.test.tsx.snap

@@ -0,0 +1,446 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`Markdown > directives > should render card 1`] = `
+"<div class="py-8 flex flex-col gap-8"><div><div class="border border-solid border-solid-gray-500 rounded-2xl sm:rounded-3xl text-solid-gray-900 overflow-hidden" data-sakura="card"><img class="object-cover mb-2 w-full aspect-[352/226]" src="/a.png" alt="図" data-sakura="card-img">
+<h3 class="m-0 text-base leading-[2rem] font-medium first:pt-4 pt-2 last:pb-4 px-6" data-sakura="card-title" id="タイトル">タイトル</h3>
+<div class="text-base-sm leading-[1.85rem] first:pt-4 pt-2 last:pb-4 px-6" data-sakura="card-description">説明</div>
+</div>
+</div></div>"
+`;
+
+exports[`Markdown > directives > should render cell 1`] = `
+"<div class="py-8 flex flex-col gap-8"><div><div data-sakura="cell"><img class="mb-4" src="/a.png" alt="図" data-sakura="cell-img">
+<p>本文</p>
+</div>
+</div></div>"
+`;
+
+exports[`Markdown > directives > should render faq 1`] = `
+"<div class="py-8 flex flex-col gap-8"><div><dl class="flex flex-col gap-8" data-sakura="faq"><dt class="flex flex-row gap-8 mt-8 text-h-med-m sm:text-h-med" data-sakura="faq-q"><span aria-hidden="true">Q</span><span>質問は？</span></dt>
+<dd class="flex flex-row items-start gap-8" data-sakura="faq-a"><span class="text-h-med-m sm:text-h-med !leading-none" aria-hidden="true">A</span><span>回答です。</span></dd>
+<dt class="flex flex-row gap-8 mt-8 text-h-med-m sm:text-h-med" data-sakura="faq-q"><span aria-hidden="true">Q</span><span>二つ目の質問は？</span></dt>
+<dd class="flex flex-row items-start gap-8" data-sakura="faq-a"><span class="text-h-med-m sm:text-h-med !leading-none" aria-hidden="true">A</span><span>二つ目の回答。</span></dd>
+</dl>
+</div></div>"
+`;
+
+exports[`Markdown > directives > should render grid 1`] = `
+"<div class="py-8 flex flex-col gap-8"><div><ul class="flex flex-col md:grid md:grid-cols-3 gap-8" data-sakura="grid-cols-3"><li class="sm:grid"><div class="border border-solid border-solid-gray-500 rounded-2xl sm:rounded-3xl text-solid-gray-900 overflow-hidden" data-sakura="card"><h3 class="m-0 text-base leading-[2rem] font-medium first:pt-4 pt-2 last:pb-4 px-6" data-sakura="card-title" id="1つ目">1つ目</h3>
+</div></li>
+<li class="sm:grid"><div class="border border-solid border-solid-gray-500 rounded-2xl sm:rounded-3xl text-solid-gray-900 overflow-hidden" data-sakura="card"><h3 class="m-0 text-base leading-[2rem] font-medium first:pt-4 pt-2 last:pb-4 px-6" data-sakura="card-title" id="2つ目">2つ目</h3>
+</div></li>
+</ul>
+</div></div>"
+`;
+
+exports[`Markdown > directives > should render gridMixed 1`] = `
+"<div class="py-8 flex flex-col gap-8"><div><div class="flex flex-col md:grid md:grid-cols-2 gap-8" data-sakura="grid-cols-2"><div class="border border-solid border-solid-gray-500 rounded-2xl sm:rounded-3xl text-solid-gray-900 overflow-hidden" data-sakura="card"><h3 class="m-0 text-base leading-[2rem] font-medium first:pt-4 pt-2 last:pb-4 px-6" data-sakura="card-title" id="1つ目">1つ目</h3>
+</div>
+<div data-sakura="cell"><p>本文</p>
+</div>
+</div>
+</div></div>"
+`;
+
+exports[`Markdown > directives > should render gridOfCells 1`] = `
+"<div class="py-8 flex flex-col gap-8"><div><div class="flex flex-col md:grid md:grid-cols-2 gap-8" data-sakura="grid-cols-2"><div data-sakura="cell"><p><img src="/a.png" alt="alt"><br>本文1</p>
+</div>
+<div data-sakura="cell"><p>本文2</p>
+</div>
+</div>
+</div></div>"
+`;
+
+exports[`Markdown > directives > should render linkButton 1`] = `
+"<div class="py-8 flex flex-col gap-8"><div><p>ご案内です。<a class="inline-block text-button text-center cursor-pointer select-none touch-manipulation whitespace-nowrap outline-offset-2 border border-solid border-blue-900 hover:border-blue-1000 active:border-blue-1200 disabled:border-solid-gray-500 disabled:cursor-not-allowed text-blue-900 hover:text-blue-1000 active:text-blue-1200 bg-transparent hover:bg-blue-200 active:bg-blue-300 disabled:bg-transparent disabled:text-solid-gray-500 hover:underline hover:underline-offset-[calc(3/16*1rem)] focus-visible:outline-4 focus-visible:outline-black focus-visible:ring-yellow-300 focus-visible:outline-offset-[calc(2/16*1rem)] focus-visible:ring-[calc(2/16*1rem)] focus-visible:rounded-sm p-4 text-button leading-snug rounded-lg" href="/services" data-sakura="link-button">サービス一覧</a> をどうぞ。</p>
+</div></div>"
+`;
+
+exports[`Markdown > directives > should render linkCard 1`] = `
+"<div class="py-8 flex flex-col gap-8"><div><div class="border border-solid border-solid-gray-500 rounded-2xl sm:rounded-3xl text-solid-gray-900 overflow-hidden relative z-0 group hover:outline hover:outline-2 hover:outline-black hover:bg-solid-gray-50 has-[a:focus-visible]:outline has-[a:focus-visible]:outline-4 has-[a:focus-visible]:outline-black has-[a:focus-visible]:outline-offset-[calc(2/16*1rem)] has-[a:focus-visible]:ring-[calc(2/16*1rem)] has-[a:focus-visible]:ring-yellow-300" data-sakura="card"><h3 class="m-0 text-base leading-[2rem] font-medium first:pt-4 pt-2 last:pb-4 px-6 decoration-blue-900 underline underline-offset-[calc(3/16*1rem)] group-hover:text-blue-900 group-hover:decoration-[calc(3/16*1rem)]" data-sakura="card-title" id="タイトル"><a class="after:content-[''] after:absolute after:inset-0 after:z-10 focus-visible:outline-none" href="/x" data-sakura="card-title">タイトル</a></h3>
+<div class="text-base-sm leading-[1.85rem] first:pt-4 pt-2 last:pb-4 px-6" data-sakura="card-description">説明</div>
+<div class="sticky top-full text-base-sm leading-[1.85rem] first:pt-4 pt-2 last:pb-4 px-6 flex justify-between items-center" data-sakura="card-footer"><span>2026年8月</span><span class="inline-flex items-center justify-center w-6 h-6 text-blue-1000 border border-blue-1000 rounded-full group-hover:bg-blue-1000 group-hover:text-white"><span aria-hidden="true" class="!text-[16px] font-icon font-light inline-block leading-none align-middle whitespace-nowrap">arrow_forward</span><span class="sr-only"></span></span></div>
+</div>
+</div></div>"
+`;
+
+exports[`Markdown > directives > should render linkCardWithoutTitle 1`] = `
+"<div class="py-8 flex flex-col gap-8"><div><div class="border border-solid border-solid-gray-500 rounded-2xl sm:rounded-3xl text-solid-gray-900 overflow-hidden" data-sakura="card"><div class="text-base-sm leading-[1.85rem] first:pt-4 pt-2 last:pb-4 px-6" data-sakura="card-description">説明</div>
+<div class="sticky top-full text-base-sm leading-[1.85rem] first:pt-4 pt-2 last:pb-4 px-6" data-sakura="card-footer">2026年8月</div>
+</div>
+</div></div>"
+`;
+
+exports[`Markdown > directives > should render youtube 1`] = `
+"<div class="py-8 flex flex-col gap-8"><div><iframe title="動画タイトル" src="https://www.youtube-nocookie.com/embed/yXdbvBzxeb8" class="aspect-video w-full max-w-[470px]" style="width:560px;" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen="" loading="lazy" data-sakura="youtube"></iframe>
+</div></div>"
+`;
+
+exports[`Markdown > heading shift > should move the headings down by the given amount 1`] = `
+"<div class="py-8 flex flex-col gap-8"><div><h2 id="見出し1" class="text-h-med-m sm:text-h-med pt-[4rem] sm:pt-[4.5rem]">見出し1</h2>
+<h3 id="見出し2" class="text-h-sm-m sm:text-h-sm pt-[4rem] sm:pt-[4.5rem]">見出し2</h3>
+</div></div>"
+`;
+
+exports[`Markdown > headings > should render duplicated 1`] = `
+"<div class="py-8 flex flex-col gap-8"><div><h2 id="概要" class="text-h-med-m sm:text-h-med pt-[4rem] sm:pt-[4.5rem]">概要</h2>
+<h2 id="概要-1" class="text-h-med-m sm:text-h-med pt-[4rem] sm:pt-[4.5rem]">概要</h2>
+<h2 id="概要-2" class="text-h-med-m sm:text-h-med pt-[4rem] sm:pt-[4.5rem]">概要</h2>
+</div></div>"
+`;
+
+exports[`Markdown > headings > should render japanese 1`] = `
+"<div class="py-8 flex flex-col gap-8"><div><h2 id="概要" class="text-h-med-m sm:text-h-med pt-[4rem] sm:pt-[4.5rem]">概要</h2>
+<h2 id="はじめに概要" class="text-h-med-m sm:text-h-med pt-[4rem] sm:pt-[4.5rem]">はじめに（概要）</h2>
+<h2 id="ab-テスト" class="text-h-med-m sm:text-h-med pt-[4rem] sm:pt-[4.5rem]">A/B テスト</h2>
+<h2 id="サービスアプリ" class="text-h-med-m sm:text-h-med pt-[4rem] sm:pt-[4.5rem]">サービス・アプリ</h2>
+</div></div>"
+`;
+
+exports[`Markdown > headings > should render withCode 1`] = `
+"<div class="py-8 flex flex-col gap-8"><div><h2 id="code-を含む見出し" class="text-h-med-m sm:text-h-med pt-[4rem] sm:pt-[4.5rem]"><code class="bg-solid-gray-50 font-mono">code</code> を含む見出し</h2>
+</div></div>"
+`;
+
+exports[`Markdown > headings > should render withImage 1`] = `
+"<div class="py-8 flex flex-col gap-8"><div><h2 id="-会社概要" class="text-h-med-m sm:text-h-med pt-[4rem] sm:pt-[4.5rem]"><img src="/a.png" alt="ロゴ"> 会社概要</h2>
+</div></div>"
+`;
+
+exports[`Markdown > headings > should render withInlineHtml 1`] = `
+"<div class="py-8 flex flex-col gap-8"><div><h2 id="太字-タイトル" class="text-h-med-m sm:text-h-med pt-[4rem] sm:pt-[4.5rem]"><b>太字</b> タイトル</h2>
+</div></div>"
+`;
+
+exports[`Markdown > malformed html > should recover from closingBr 1`] = `
+"<div class="py-8 flex flex-col gap-8"><div><p>一行目<br>二行目<br>三行目<br>四行目</p>
+</div></div>"
+`;
+
+exports[`Markdown > malformed html > should recover from crossedNesting 1`] = `
+"<div class="py-8 flex flex-col gap-8"><div><ul class="list-disc [&amp;_&amp;]:list-circle [&amp;_&amp;_&amp;]:list-square pl-8">
+<details>
+<summary>まとめ</summary>
+中身
+</details>
+</ul></div></div>"
+`;
+
+exports[`Markdown > malformed html > should recover from mistypedClose 1`] = `"<div class="py-8 flex flex-col gap-8"><div><div class="w-full overflow-x-auto whitespace-nowrap print:overflow-visible print:whitespace-normal" data-sakura-table-container="true"><table class="border border-collapse border-solid-gray-420"><tbody><tr class="border border-collapse border-solid-gray-420"><td class="p-2 text-label border border-collapse border-solid-gray-420">値</td></tr></tbody></table></div></div></div>"`;
+
+exports[`Markdown > malformed html > should recover from unclosedCell 1`] = `"<div class="py-8 flex flex-col gap-8"><div><div class="w-full overflow-x-auto whitespace-nowrap print:overflow-visible print:whitespace-normal" data-sakura-table-container="true"><table class="border border-collapse border-solid-gray-420"><tbody><tr class="border border-collapse border-solid-gray-420"><td class="p-2 text-label border border-collapse border-solid-gray-420">閉じ忘れ</td></tr><tr class="border border-collapse border-solid-gray-420"><td class="p-2 text-label border border-collapse border-solid-gray-420">次の行</td></tr></tbody></table></div></div></div>"`;
+
+exports[`Markdown > plain markdown > should render blockquote 1`] = `
+"<div class="py-8 flex flex-col gap-8"><div><blockquote>
+<p>引用文<br>続き</p>
+</blockquote>
+</div></div>"
+`;
+
+exports[`Markdown > plain markdown > should render cjkSoftBreak 1`] = `
+"<div class="py-8 flex flex-col gap-8"><div><p>東京都<br>港区</p>
+</div></div>"
+`;
+
+exports[`Markdown > plain markdown > should render codeFence 1`] = `
+"<div class="py-8 flex flex-col gap-8"><div><pre class="p-4 bg-solid-gray-50 rounded-lg whitespace-pre-wrap overflow-y-scroll"><code class="language-sh bg-solid-gray-50 font-mono">echo "hello"
+</code></pre>
+<pre class="p-4 bg-solid-gray-50 rounded-lg whitespace-pre-wrap overflow-y-scroll"><code class="bg-solid-gray-50 font-mono">言語指定なし
+</code></pre>
+</div></div>"
+`;
+
+exports[`Markdown > plain markdown > should render footnote 1`] = `
+"<div class="py-8 flex flex-col gap-8"><div><p>本文<a href="%E8%84%9A%E6%B3%A8%E3%81%AE%E4%B8%AD%E8%BA%AB" class="cursor-pointer text-blue-1000 active:text-orange-700 visited:text-magenta-900 focus-visible:outline-4 focus-visible:outline-black focus-visible:ring-yellow-300 focus-visible:outline-offset-[calc(2/16*1rem)] focus-visible:ring-[calc(2/16*1rem)] focus-visible:bg-yellow-300 focus-visible:rounded-sm underline underline-offset-[calc(3/16*1rem)] hover:decoration-[calc(3/16*1rem)] disabled:border-solid-gray-500 [overflow-wrap:anywhere]">^1</a></p>
+</div></div>"
+`;
+
+exports[`Markdown > plain markdown > should render gfmTable 1`] = `
+"<div class="py-8 flex flex-col gap-8"><div><div class="w-full overflow-x-auto whitespace-nowrap print:overflow-visible print:whitespace-normal" data-sakura-table-container="true"><table class="border border-collapse border-solid-gray-420">
+<thead>
+<tr class="border border-collapse border-solid-gray-420">
+<th class="p-2 bg-[#f8f8fb] text-label text-left border border-collapse border-solid-gray-420">見出し</th>
+<th class="p-2 bg-[#f8f8fb] text-label text-left border border-collapse border-solid-gray-420">値</th>
+</tr>
+</thead>
+<tbody><tr class="border border-collapse border-solid-gray-420">
+<td class="p-2 text-label border border-collapse border-solid-gray-420">あ</td>
+<td class="p-2 text-label border border-collapse border-solid-gray-420">1</td>
+</tr>
+<tr class="border border-collapse border-solid-gray-420">
+<td class="p-2 text-label border border-collapse border-solid-gray-420">い</td>
+<td class="p-2 text-label border border-collapse border-solid-gray-420">2</td>
+</tr>
+</tbody></table></div>
+</div></div>"
+`;
+
+exports[`Markdown > plain markdown > should render headings 1`] = `
+"<div class="py-8 flex flex-col gap-8"><div><h1 id="見出し1" class="text-h-lg-m sm:text-h-lg pt-[2rem] sm:pt-[6.5rem]">見出し1</h1>
+<h2 id="見出し-2" class="text-h-med-m sm:text-h-med pt-[4rem] sm:pt-[4.5rem]">見出し 2</h2>
+<h3 id="見出し3" class="text-h-sm-m sm:text-h-sm pt-[4rem] sm:pt-[4.5rem]">見出し・3</h3>
+<h4 id="はじめに概要" class="text-h-xs-m sm:text-h-xs pt-[3.5rem] sm:pt-[4.5rem]">はじめに（概要）</h4>
+</div></div>"
+`;
+
+exports[`Markdown > plain markdown > should render image 1`] = `
+"<div class="py-8 flex flex-col gap-8"><div><p><img src="/images/a.png" alt="代替テキスト"></p>
+</div></div>"
+`;
+
+exports[`Markdown > plain markdown > should render links 1`] = `
+"<div class="py-8 flex flex-col gap-8"><div><p><a href="/foo" class="cursor-pointer text-blue-1000 active:text-orange-700 visited:text-magenta-900 focus-visible:outline-4 focus-visible:outline-black focus-visible:ring-yellow-300 focus-visible:outline-offset-[calc(2/16*1rem)] focus-visible:ring-[calc(2/16*1rem)] focus-visible:bg-yellow-300 focus-visible:rounded-sm underline underline-offset-[calc(3/16*1rem)] hover:decoration-[calc(3/16*1rem)] disabled:border-solid-gray-500 [overflow-wrap:anywhere]">内部</a> と <a href="https://example.com" target="_blank" rel="noopener noreferrer" class="cursor-pointer text-blue-1000 active:text-orange-700 visited:text-magenta-900 focus-visible:outline-4 focus-visible:outline-black focus-visible:ring-yellow-300 focus-visible:outline-offset-[calc(2/16*1rem)] focus-visible:ring-[calc(2/16*1rem)] focus-visible:bg-yellow-300 focus-visible:rounded-sm underline underline-offset-[calc(3/16*1rem)] hover:decoration-[calc(3/16*1rem)] disabled:border-solid-gray-500 [overflow-wrap:anywhere]">外部<span aria-hidden="true" data-sakura-new-tab="true" class="!text-[16px] font-icon font-light inline-block leading-none align-middle whitespace-nowrap ml-0.5">open_in_new</span><span class="sr-only">Opens in new tab</span></a> と <a href="https://example.com/bare" target="_blank" rel="noopener noreferrer" class="cursor-pointer text-blue-1000 active:text-orange-700 visited:text-magenta-900 focus-visible:outline-4 focus-visible:outline-black focus-visible:ring-yellow-300 focus-visible:outline-offset-[calc(2/16*1rem)] focus-visible:ring-[calc(2/16*1rem)] focus-visible:bg-yellow-300 focus-visible:rounded-sm underline underline-offset-[calc(3/16*1rem)] hover:decoration-[calc(3/16*1rem)] disabled:border-solid-gray-500 [overflow-wrap:anywhere]">https://example.com/bare<span aria-hidden="true" data-sakura-new-tab="true" class="!text-[16px] font-icon font-light inline-block leading-none align-middle whitespace-nowrap ml-0.5">open_in_new</span><span class="sr-only">Opens in new tab</span></a></p>
+</div></div>"
+`;
+
+exports[`Markdown > plain markdown > should render list 1`] = `
+"<div class="py-8 flex flex-col gap-8"><div><ul class="list-disc [&amp;_&amp;]:list-circle [&amp;_&amp;_&amp;]:list-square pl-8">
+<li>項目1</li>
+<li>項目2<ul class="list-disc [&amp;_&amp;]:list-circle [&amp;_&amp;_&amp;]:list-square pl-8">
+<li>入れ子<ul class="list-disc [&amp;_&amp;]:list-circle [&amp;_&amp;_&amp;]:list-square pl-8">
+<li>さらに</li>
+</ul>
+</li>
+</ul>
+</li>
+</ul>
+<ol class="list-decimal [&amp;_&amp;]:list-lower-latin pl-8">
+<li>one</li>
+<li>two</li>
+</ol>
+</div></div>"
+`;
+
+exports[`Markdown > plain markdown > should render paragraph 1`] = `
+"<div class="py-8 flex flex-col gap-8"><div><p>段落です。<strong>強調</strong> と <em>斜体</em> と <code class="bg-solid-gray-50 font-mono">コード</code> と <del>取り消し</del>。</p>
+</div></div>"
+`;
+
+exports[`Markdown > plain markdown > should render rule 1`] = `
+"<div class="py-8 flex flex-col gap-8"><div><hr>
+</div></div>"
+`;
+
+exports[`Markdown > raw html > should render details 1`] = `
+"<div class="py-8 flex flex-col gap-8"><div><details>
+<summary>詳細はこちら</summary><ul class="list-disc [&amp;_&amp;]:list-circle [&amp;_&amp;_&amp;]:list-square pl-8">
+<li>リスト項目</li>
+</ul>
+<div class="w-full overflow-x-auto whitespace-nowrap print:overflow-visible print:whitespace-normal" data-sakura-table-container="true"><table class="border border-collapse border-solid-gray-420">
+<thead>
+<tr class="border border-collapse border-solid-gray-420">
+<th class="p-2 bg-[#f8f8fb] text-label text-left border border-collapse border-solid-gray-420">表</th>
+<th class="p-2 bg-[#f8f8fb] text-label text-left border border-collapse border-solid-gray-420">見出し</th>
+</tr>
+</thead>
+<tbody><tr class="border border-collapse border-solid-gray-420">
+<td class="p-2 text-label border border-collapse border-solid-gray-420">a</td>
+<td class="p-2 text-label border border-collapse border-solid-gray-420">b</td>
+</tr>
+</tbody></table></div>
+</details></div></div>"
+`;
+
+exports[`Markdown > raw html > should render externalAnchor 1`] = `
+"<div class="py-8 flex flex-col gap-8"><div><p><a href="https://example.com" target="_blank" rel="noopener noreferrer" class="cursor-pointer text-blue-1000 active:text-orange-700 visited:text-magenta-900 focus-visible:outline-4 focus-visible:outline-black focus-visible:ring-yellow-300 focus-visible:outline-offset-[calc(2/16*1rem)] focus-visible:ring-[calc(2/16*1rem)] focus-visible:bg-yellow-300 focus-visible:rounded-sm underline underline-offset-[calc(3/16*1rem)] hover:decoration-[calc(3/16*1rem)] disabled:border-solid-gray-500 [overflow-wrap:anywhere]">外部リンク<span aria-hidden="true" data-sakura-new-tab="true" class="!text-[16px] font-icon font-light inline-block leading-none align-middle whitespace-nowrap ml-0.5">open_in_new</span><span class="sr-only">Opens in new tab</span></a></p>
+</div></div>"
+`;
+
+exports[`Markdown > raw html > should render inlineTags 1`] = `
+"<div class="py-8 flex flex-col gap-8"><div><p>本文に <strong>太字</strong> と <u>下線</u> と <sup>（※1）</sup> と <small>小</small>。</p>
+</div></div>"
+`;
+
+exports[`Markdown > raw html > should render styledBlock 1`] = `
+"<div class="py-8 flex flex-col gap-8"><div><div style="background-color: #E8F1FE; padding: 12px 16px; border-radius: 8px; margin: 0 24px;">
+注記のボックス
+</div></div></div>"
+`;
+
+exports[`Markdown > raw html > should render styledImg 1`] = `"<div class="py-8 flex flex-col gap-8"><div><img src="/images/a.png" alt="図" style="width: 800px; color-scheme: light;"></div></div>"`;
+
+exports[`Markdown > raw html > should render tableSpan 1`] = `
+"<div class="py-8 flex flex-col gap-8"><div><div class="w-full overflow-x-auto whitespace-nowrap print:overflow-visible print:whitespace-normal" data-sakura-table-container="true"><table class="border border-collapse border-solid-gray-420">
+<caption class="text-left">表:01 キャプション</caption>
+<colgroup><col style="width: 15%;"><col style="width: auto;"></colgroup>
+<thead><tr class="border border-collapse border-solid-gray-420"><th colspan="2" class="p-2 bg-[#f8f8fb] text-label text-left border border-collapse border-solid-gray-420">見出し</th></tr></thead>
+<tbody><tr class="border border-collapse border-solid-gray-420"><td rowspan="2" style="vertical-align: top;" class="p-2 text-label border border-collapse border-solid-gray-420">結合</td><td class="p-2 text-label border border-collapse border-solid-gray-420">値</td></tr><tr class="border border-collapse border-solid-gray-420"><td class="p-2 text-label border border-collapse border-solid-gray-420">値2</td></tr></tbody>
+</table></div></div></div>"
+`;
+
+exports[`Markdown > table of contents > should render the table of contents when asked for it 1`] = `
+"<div class="py-8 flex flex-col gap-8"><nav class="rounded-3xl p-10 bg-yellow-50"><h2 class="mb-4 font-bold text-h-xs-m sm:text-h-xs">目次</h2><ul class="
+  list-disc
+  [&amp;_&amp;]:list-circle
+  [&amp;_&amp;_&amp;]:list-square
+  pl-8
+"><li><a class="
+  cursor-pointer
+  text-blue-1000
+  active:text-orange-700
+  visited:text-magenta-900
+  
+    
+    
+    
+    focus-visible:outline-4
+    focus-visible:outline-black
+    focus-visible:ring-yellow-300
+  
+    focus-visible:outline-offset-[calc(2/16*1rem)]
+    focus-visible:ring-[calc(2/16*1rem)]
+  
+    focus-visible:bg-yellow-300
+  
+    focus-visible:rounded-sm
+  
+  
+    underline
+    underline-offset-[calc(3/16*1rem)]
+    hover:decoration-[calc(3/16*1rem)]
+  
+  disabled:border-solid-gray-500
+  [overflow-wrap:anywhere]
+" href="#章1">章1</a></li><li><a class="
+  cursor-pointer
+  text-blue-1000
+  active:text-orange-700
+  visited:text-magenta-900
+  
+    
+    
+    
+    focus-visible:outline-4
+    focus-visible:outline-black
+    focus-visible:ring-yellow-300
+  
+    focus-visible:outline-offset-[calc(2/16*1rem)]
+    focus-visible:ring-[calc(2/16*1rem)]
+  
+    focus-visible:bg-yellow-300
+  
+    focus-visible:rounded-sm
+  
+  
+    underline
+    underline-offset-[calc(3/16*1rem)]
+    hover:decoration-[calc(3/16*1rem)]
+  
+  disabled:border-solid-gray-500
+  [overflow-wrap:anywhere]
+" href="#節1">節1</a></li><li><a class="
+  cursor-pointer
+  text-blue-1000
+  active:text-orange-700
+  visited:text-magenta-900
+  
+    
+    
+    
+    focus-visible:outline-4
+    focus-visible:outline-black
+    focus-visible:ring-yellow-300
+  
+    focus-visible:outline-offset-[calc(2/16*1rem)]
+    focus-visible:ring-[calc(2/16*1rem)]
+  
+    focus-visible:bg-yellow-300
+  
+    focus-visible:rounded-sm
+  
+  
+    underline
+    underline-offset-[calc(3/16*1rem)]
+    hover:decoration-[calc(3/16*1rem)]
+  
+  disabled:border-solid-gray-500
+  [overflow-wrap:anywhere]
+" href="#節2">節2</a></li><li><a class="
+  cursor-pointer
+  text-blue-1000
+  active:text-orange-700
+  visited:text-magenta-900
+  
+    
+    
+    
+    focus-visible:outline-4
+    focus-visible:outline-black
+    focus-visible:ring-yellow-300
+  
+    focus-visible:outline-offset-[calc(2/16*1rem)]
+    focus-visible:ring-[calc(2/16*1rem)]
+  
+    focus-visible:bg-yellow-300
+  
+    focus-visible:rounded-sm
+  
+  
+    underline
+    underline-offset-[calc(3/16*1rem)]
+    hover:decoration-[calc(3/16*1rem)]
+  
+  disabled:border-solid-gray-500
+  [overflow-wrap:anywhere]
+" href="#章2">章2</a></li></ul></nav><div><h1 id="章1" class="text-h-lg-m sm:text-h-lg pt-[2rem] sm:pt-[6.5rem]">章1</h1>
+<h2 id="節1" class="text-h-med-m sm:text-h-med pt-[4rem] sm:pt-[4.5rem]">節1</h2>
+<h3 id="項1" class="text-h-sm-m sm:text-h-sm pt-[4rem] sm:pt-[4.5rem]">項1</h3>
+<h2 id="節2" class="text-h-med-m sm:text-h-med pt-[4rem] sm:pt-[4.5rem]">節2</h2>
+<h1 id="章2" class="text-h-lg-m sm:text-h-lg pt-[2rem] sm:pt-[6.5rem]">章2</h1>
+</div></div>"
+`;
+
+exports[`Markdown > text that only looks like a directive > should leave chapter alone 1`] = `
+"<div class="py-8 flex flex-col gap-8"><div><p>第1章:はじめに</p>
+</div></div>"
+`;
+
+exports[`Markdown > text that only looks like a directive > should leave colonWord alone 1`] = `
+"<div class="py-8 flex flex-col gap-8"><div><p>参照:example と note:important を見てください。</p>
+</div></div>"
+`;
+
+exports[`Markdown > text that only looks like a directive > should leave emoji alone 1`] = `
+"<div class="py-8 flex flex-col gap-8"><div><p>絵文字 :smile: です。</p>
+</div></div>"
+`;
+
+exports[`Markdown > text that only looks like a directive > should leave functionCall alone 1`] = `
+"<div class="py-8 flex flex-col gap-8"><div><p>関数 foo:bar() を呼びます。</p>
+</div></div>"
+`;
+
+exports[`Markdown > text that only looks like a directive > should leave linkLabel alone 1`] = `
+"<div class="py-8 flex flex-col gap-8"><div><p><a href="https://example.com" target="_blank" rel="noopener noreferrer" class="cursor-pointer text-blue-1000 active:text-orange-700 visited:text-magenta-900 focus-visible:outline-4 focus-visible:outline-black focus-visible:ring-yellow-300 focus-visible:outline-offset-[calc(2/16*1rem)] focus-visible:ring-[calc(2/16*1rem)] focus-visible:bg-yellow-300 focus-visible:rounded-sm underline underline-offset-[calc(3/16*1rem)] hover:decoration-[calc(3/16*1rem)] disabled:border-solid-gray-500 [overflow-wrap:anywhere]">AWSドキュメント:AWS PrivateLink<span aria-hidden="true" data-sakura-new-tab="true" class="!text-[16px] font-icon font-light inline-block leading-none align-middle whitespace-nowrap ml-0.5">open_in_new</span><span class="sr-only">Opens in new tab</span></a></p>
+</div></div>"
+`;
+
+exports[`Markdown > text that only looks like a directive > should leave ratio alone 1`] = `
+"<div class="py-8 flex flex-col gap-8"><div><p>比率は 16:9 です。</p>
+</div></div>"
+`;
+
+exports[`Markdown > text that only looks like a directive > should leave scopeName alone 1`] = `
+"<div class="py-8 flex flex-col gap-8"><div><p>スコープ chat:write を付与する。</p>
+</div></div>"
+`;
+
+exports[`Markdown > text that only looks like a directive > should leave time alone 1`] = `
+"<div class="py-8 flex flex-col gap-8"><div><p>開始は 10:30 です。</p>
+</div></div>"
+`;
+
+exports[`Markdown > text that only looks like a directive > should leave timeFormat alone 1`] = `
+"<div class="py-8 flex flex-col gap-8"><div><p>開始時刻は HH:MM 形式で記載する。</p>
+</div></div>"
+`;
+
+exports[`Markdown > text that only looks like a directive > should leave todo alone 1`] = `
+"<div class="py-8 flex flex-col gap-8"><div><p>TODO: あとで直す</p>
+</div></div>"
+`;
+
+exports[`Markdown > text that only looks like a directive > should leave xmlAttr alone 1`] = `
+"<div class="py-8 flex flex-col gap-8"><div><p>属性は xml:lang です。</p>
+</div></div>"
+`;

package/packages/markdown/tests/anchors.test.ts

@@ -0,0 +1,108 @@
+import { describe, expect, it } from 'vitest'
+import { render } from '../src/render'
+
+const html = (markdown: string) => render(markdown).html
+
+const ids = (markdown: string) =>
+  Array.from(html(markdown).matchAll(/ id="([^"]*)"/g)).map((m) => m[1])
+
+/**
+ * `{#name}` names the element a directive renders, so a link elsewhere on the
+ * site can point at it. The parser has read the sigil since the syntax existed;
+ * nothing passed it on, so writers reached for an empty <div id> instead.
+ */
+describe('anchors', () => {
+  it('should put the name on the element', () => {
+    expect(ids(':::card{#pricing}\n::card-title[料金]\n:::')).toContain(
+      'pricing'
+    )
+  })
+
+  it('should name each kind of directive', () => {
+    const cases: Array<[string, string]> = [
+      ['grid', '::::grid-cols-2{#a}\n:::cell\n本文\n:::\n::::'],
+      ['cell', ':::cell{#a}\n本文\n:::'],
+      ['faq', ':::faq{#a}\n::faq-q[問]\n::faq-a[答]\n:::'],
+      ['card-description', '::card-description[説明]{#a}'],
+      ['card-img', '::card-img{#a src=/a.png alt=図}'],
+      ['link-button', ':link-button[押す]{#a href=/x}']
+    ]
+    for (const [what, markdown] of cases) {
+      expect(ids(markdown), what).toContain('a')
+    }
+  })
+
+  it('should name the heading a card title renders as', () => {
+    // Not the anchor inside it as well, which would be the id twice.
+    expect(ids(':::card{href=/x}\n::card-title[題]{#top}\n:::')).toEqual(['top'])
+  })
+
+  it('should be reachable from a link in the prose', () => {
+    // The point of naming one. decorate.ts marks up links that leave the page,
+    // and a link to a name on this one must not be taken for one of those.
+    const out = html('[料金へ](#pricing)\n\n:::cell{#pricing}\n本文\n:::')
+    expect(out).toContain('href="#pricing"')
+    expect(out).toContain('id="pricing"')
+    expect(out).not.toContain('target="_blank"')
+  })
+
+  it('should not answer to {id=name}', () => {
+    // A sigil says something about the element and means the same everywhere;
+    // an attribute belongs to the directive that reads it. Keeping them apart
+    // is what stopped the video on a youtube embed taking the anchor's place.
+    expect(ids(':::cell{id=pricing}\n本文\n:::')).not.toContain('pricing')
+  })
+
+  it('should leave the video to the video', () => {
+    const out = html('::youtube[題]{#player video=dQw4w9WgXcQ}')
+    expect(out).toContain('id="player"')
+    expect(out).toContain('embed/dQw4w9WgXcQ')
+  })
+
+  it('should keep a name a heading would otherwise have taken', () => {
+    const out = render('## 概要\n\n:::cell{#概要}\n本文\n:::')
+    expect(out.html).toContain('id="概要"')
+    // The heading is generated first and keeps the plain slug; what matters is
+    // that the two do not both answer to it.
+    const all = Array.from(out.html.matchAll(/ id="([^"]*)"/g)).map((m) => m[1])
+    expect(new Set(all).size).toBe(all.length)
+  })
+
+  it('should not let a later heading repeat a name written by hand', () => {
+    const out = render('<h2 id="概要">前書き</h2>\n\n## 概要')
+    const all = Array.from(out.html.matchAll(/ id="([^"]*)"/g)).map((m) => m[1])
+    expect(new Set(all).size).toBe(all.length)
+  })
+})
+
+/**
+ * A writer has the address of the video, not its id, so the address is what
+ * the directive takes.
+ */
+describe('the youtube video', () => {
+  const src = (markdown: string) =>
+    /src="([^"]*)"/.exec(render(markdown).html)?.[1]
+
+  const ID = 'dQw4w9WgXcQ'
+  const embed = `https://www.youtube-nocookie.com/embed/${ID}`
+
+  it.each([
+    ['the id itself', ID],
+    ['the watch page', `https://www.youtube.com/watch?v=${ID}`],
+    ['the watch page with more on it', `https://www.youtube.com/watch?v=${ID}&t=42s`],
+    ['the share link', `https://youtu.be/${ID}`],
+    ['a short', `https://www.youtube.com/shorts/${ID}`],
+    ['an embed already written', `https://www.youtube.com/embed/${ID}`]
+  ])('should take %s', (_what, written) => {
+    expect(src(`::youtube[題]{video=${written}}`)).toBe(embed)
+  })
+
+  it('should not let the document decide what the frame may reach for', () => {
+    const out = render(
+      '::youtube[題]{video=dQw4w9WgXcQ allow=camera referrerpolicy=unsafe-url}'
+    ).html
+    expect(out).not.toContain('camera')
+    expect(out).not.toContain('unsafe-url')
+    expect(out).toContain('referrerpolicy="strict-origin-when-cross-origin"')
+  })
+})