@sakura-ui/sakura-ui 0.5.4 → 0.5.6

package/packages/markdown/dist/types/decorate.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"decorate.d.ts","sourceRoot":"","sources":["../../src/decorate.ts"],"names":[],"mappings":"AAIA;;;;;GAKG;AAEH,MAAM,MAAM,WAAW,GAAG;IACxB,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,QAAQ,CAAC,EAAE,WAAW,EAAE,CAAA;CACzB,CAAA;AAsDD,MAAM,MAAM,eAAe,GAAG;IAC5B,YAAY,EAAE,MAAM,CAAA;IACpB,WAAW,EAAE,MAAM,CAAA;CACpB,CAAA;AAED,MAAM,MAAM,cAAc,GAAG;IAC3B,QAAQ,EAAE,WAAW,EAAE,CAAA;CACxB,CAAA;AAID,eAAO,MAAM,QAAQ,GACnB,MAAM,gBAAgB,GAAG,OAAO,EAChC,UAAU,QAAQ,EAClB,SAAS,eAAe,KACvB,cAyEF,CAAA"}
+{"version":3,"file":"decorate.d.ts","sourceRoot":"","sources":["../../src/decorate.ts"],"names":[],"mappings":"AAKA;;;;;GAKG;AAEH,MAAM,MAAM,WAAW,GAAG;IACxB,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,QAAQ,CAAC,EAAE,WAAW,EAAE,CAAA;CACzB,CAAA;AAoED,MAAM,MAAM,eAAe,GAAG;IAC5B,YAAY,EAAE,MAAM,CAAA;IACpB,WAAW,EAAE,MAAM,CAAA;CACpB,CAAA;AAED,MAAM,MAAM,cAAc,GAAG;IAC3B,QAAQ,EAAE,WAAW,EAAE,CAAA;CACxB,CAAA;AAID,eAAO,MAAM,QAAQ,GACnB,MAAM,gBAAgB,GAAG,OAAO,EAChC,UAAU,QAAQ,EAClB,SAAS,eAAe,KACvB,cA0EF,CAAA"}

package/packages/markdown/dist/types/marked/directives/image.d.ts

@@ -0,0 +1,3 @@
+import type { DirectiveRenderer } from './context';
+export declare const imageRenderers: Record<string, DirectiveRenderer>;
+//# sourceMappingURL=image.d.ts.map

package/packages/markdown/dist/types/marked/directives/image.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"image.d.ts","sourceRoot":"","sources":["../../../../src/marked/directives/image.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,WAAW,CAAA;AAmBlD,eAAO,MAAM,cAAc,EAAE,MAAM,CAAC,MAAM,EAAE,iBAAiB,CAQ5D,CAAA"}

package/packages/markdown/dist/types/marked/directives/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/marked/directives/index.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,WAAW,CAAA;AAclD;;;GAGG;AACH,eAAO,MAAM,YAAY,GAAI,MAAM,MAAM,KAAG,iBAAiB,GAAG,SACN,CAAA;AAE1D,YAAY,EACV,gBAAgB,EAChB,iBAAiB,EACjB,MAAM,EACN,eAAe,EAChB,MAAM,WAAW,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/marked/directives/index.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,WAAW,CAAA;AAgBlD;;;GAGG;AACH,eAAO,MAAM,YAAY,GAAI,MAAM,MAAM,KAAG,iBAAiB,GAAG,SACN,CAAA;AAE1D,YAAY,EACV,gBAAgB,EAChB,iBAAiB,EACjB,MAAM,EACN,eAAe,EAChB,MAAM,WAAW,CAAA"}

package/packages/markdown/dist/types/marked/html.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"html.d.ts","sourceRoot":"","sources":["../../../src/marked/html.ts"],"names":[],"mappings":"AAQA,eAAO,MAAM,UAAU,GAAI,OAAO,OAAO,KAAG,MACe,CAAA;AAgB3D;;;GAGG;AACH,eAAO,MAAM,QAAQ,GAAI,MAAM,MAAM,GAAG,SAAS,KAAG,MAAM,GAAG,SAS5D,CAAA;AAED,MAAM,MAAM,SAAS,GAAG,MAAM,GAAG,OAAO,GAAG,SAAS,GAAG,IAAI,CAAA;AAE3D,2DAA2D;AAC3D,eAAO,MAAM,WAAW,GAAI,OAAO,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,KAAG,MAIlD,CAAA;AAEb;;;GAGG;AACH,eAAO,MAAM,UAAU,GAAI,GAAG,QAAQ,CAAC,MAAM,GAAG,SAAS,GAAG,KAAK,CAAC,EAAE,KAAG,MACE,CAAA"}
+{"version":3,"file":"html.d.ts","sourceRoot":"","sources":["../../../src/marked/html.ts"],"names":[],"mappings":"AAQA,eAAO,MAAM,UAAU,GAAI,OAAO,OAAO,KAAG,MACe,CAAA;AAgB3D;;;GAGG;AACH,eAAO,MAAM,QAAQ,GAAI,MAAM,MAAM,GAAG,SAAS,KAAG,MAAM,GAAG,SAS5D,CAAA;AAED,MAAM,MAAM,SAAS,GAAG,MAAM,GAAG,OAAO,GAAG,SAAS,GAAG,IAAI,CAAA;AAS3D,2DAA2D;AAC3D,eAAO,MAAM,WAAW,GAAI,OAAO,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,KAAG,MAUlD,CAAA;AAEb;;;GAGG;AACH,eAAO,MAAM,UAAU,GAAI,GAAG,QAAQ,CAAC,MAAM,GAAG,SAAS,GAAG,KAAK,CAAC,EAAE,KAAG,MACE,CAAA"}

package/packages/markdown/dist/types/marked/registry.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"registry.d.ts","sourceRoot":"","sources":["../../../src/marked/registry.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,SAAS,cAAc,CAAA;AACpC,eAAO,MAAM,IAAI,SAAS,CAAA;AAC1B,eAAO,MAAM,IAAI,SAAS,CAAA;AAE1B,MAAM,MAAM,aAAa,GAAG,OAAO,SAAS,GAAG,OAAO,IAAI,GAAG,OAAO,IAAI,CAAA;AAsBxE,+EAA+E;AAC/E,eAAO,MAAM,OAAO,QAAiC,CAAA;AAErD,eAAO,MAAM,OAAO,GAAI,MAAM,MAAM,EAAE,MAAM,aAAa,KAAG,OACmB,CAAA"}
+{"version":3,"file":"registry.d.ts","sourceRoot":"","sources":["../../../src/marked/registry.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,SAAS,cAAc,CAAA;AACpC,eAAO,MAAM,IAAI,SAAS,CAAA;AAC1B,eAAO,MAAM,IAAI,SAAS,CAAA;AAE1B,MAAM,MAAM,aAAa,GAAG,OAAO,SAAS,GAAG,OAAO,IAAI,GAAG,OAAO,IAAI,CAAA;AAuBxE,+EAA+E;AAC/E,eAAO,MAAM,OAAO,QAAiC,CAAA;AAErD,eAAO,MAAM,OAAO,GAAI,MAAM,MAAM,EAAE,MAAM,aAAa,KAAG,OACmB,CAAA"}

package/packages/markdown/dist/types/sanitize.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"sanitize.d.ts","sourceRoot":"","sources":["../../src/sanitize.ts"],"names":[],"mappings":"AAkLA;;;;GAIG;AACH,eAAO,MAAM,QAAQ,GAAI,MAAM,MAAM,KAAG,gBAQvC,CAAA;AAED,eAAO,MAAM,SAAS;yBAlGM,MAAM,KAAG,MAAM;;CAkGqB,CAAA"}
+{"version":3,"file":"sanitize.d.ts","sourceRoot":"","sources":["../../src/sanitize.ts"],"names":[],"mappings":"AAyLA;;;;GAIG;AACH,eAAO,MAAM,QAAQ,GAAI,MAAM,MAAM,KAAG,gBAQvC,CAAA;AAED,eAAO,MAAM,SAAS;yBAzGM,MAAM,KAAG,MAAM;;CAyGqB,CAAA"}

package/packages/markdown/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sakura-ui/markdown",
-  "version": "0.4.2",
+  "version": "0.4.4",
   "description": "",
   "keywords": [
     "markdown"

package/packages/markdown/src/decorate.ts

@@ -1,4 +1,5 @@
 import { styles } from '@sakura-ui/core'
+import { treefy } from '@sakura-ui/helper'
 import Slugger from 'github-slugger'
 import { classNames } from './marked/html'
 
@@ -38,7 +39,21 @@ const CLASS_BY_TAG: Record<string, string> = {
 
 /** Elements a directive rendered are already dressed; leave them be. */
 const isDirectiveOutput = (element: Element) =>
-  element.hasAttribute('data-sakura')
+  element.hasAttribute('data-styled')
+
+/**
+ * A link that opens elsewhere must not hand the opener to the page it opens.
+ * Merged with what the document asked for rather than replacing it, so a
+ * `rel="nofollow"` does not take `noopener` away with it.
+ */
+const externalRel = (rel: string | null): string =>
+  Array.from(
+    new Set([
+      'noopener',
+      'noreferrer',
+      ...(rel ?? '').split(/\s+/).filter(Boolean)
+    ])
+  ).join(' ')
 
 const addClass = (element: Element, value: string) => {
   const merged = classNames(element.getAttribute('class') ?? '', value)
@@ -53,10 +68,10 @@ const HEADINGS = new Set(['h1', 'h2', 'h3', 'h4', 'h5', 'h6'])
  * the Icon component does.
  */
 const appendNewTabIcon = (anchor: Element, document: Document) => {
-  if (anchor.querySelector('[data-sakura-new-tab]')) return
+  if (anchor.querySelector('[data-new-tab]')) return
   const glyph = document.createElement('span')
   glyph.setAttribute('aria-hidden', 'true')
-  glyph.setAttribute('data-sakura-new-tab', 'true')
+  glyph.setAttribute('data-new-tab', 'true')
   glyph.setAttribute(
     'class',
     classNames(styles.iconSizeStyle[16], styles.iconStyle, 'ml-0.5')
@@ -131,9 +146,7 @@ export const decorate = (
         element.getAttribute('target') === '_blank'
       ) {
         element.setAttribute('target', '_blank')
-        // The content writes target="_blank" 41 times and rel not once, which
-        // leaves the opened page holding a handle on this one.
-        element.setAttribute('rel', 'noopener noreferrer')
+        element.setAttribute('rel', externalRel(element.getAttribute('rel')))
         appendNewTabIcon(element, document)
       }
     }
@@ -145,15 +158,18 @@ export const decorate = (
   // A wide table scrolls inside its own box rather than pushing the page.
   for (const table of Array.from(root.querySelectorAll('table'))) {
     const parent = table.parentElement
-    if (parent?.dataset?.sakuraTableContainer === 'true') continue
+    if (parent?.dataset?.tableContainer === 'true') continue
     const container = document.createElement('div')
     container.setAttribute('class', classNames(styles.overflowContainerStyle))
-    container.dataset.sakuraTableContainer = 'true'
+    container.dataset.tableContainer = 'true'
     table.replaceWith(container)
     container.appendChild(table)
   }
 
+  // Nested, so that the table of contents can show a heading under the one it
+  // belongs to. Cut to depth before nesting: filtering the tree afterwards
+  // would only reach the headings sitting at its root.
   return {
-    headings: flat.filter((h) => h.depth <= tocMaxDepth) as HeadingItem[]
+    headings: treefy(flat.filter((h) => h.depth <= tocMaxDepth))
   }
 }

package/packages/markdown/src/marked/directives/image.ts

@@ -0,0 +1,29 @@
+import { classNames, cleanUrl } from '../html'
+import type { DirectiveRenderer } from './context'
+
+/**
+ * `width` and `height` are pixels. `max-width` goes with a width so that the
+ * image shrinks inside its column on a narrow screen rather than overflowing
+ * it; with a height alone there is nothing to overflow, since the width
+ * follows the proportions.
+ */
+const sizeStyle = (
+  width: string | undefined,
+  height: string | undefined
+): string | undefined => {
+  const rules: string[] = []
+  if (width) rules.push(`width:${width}px`)
+  if (height) rules.push(`height:${height}px`)
+  if (width) rules.push('max-width:100%')
+  return rules.length > 0 ? rules.join(';') : undefined
+}
+
+export const imageRenderers: Record<string, DirectiveRenderer> = {
+  img: ({ attrs, root, nl }) =>
+    `<img${root({
+      class: classNames(attrs.class),
+      src: cleanUrl(attrs.src),
+      alt: attrs.alt ?? '',
+      style: sizeStyle(attrs.width, attrs.height)
+    })}>${nl}`
+}

package/packages/markdown/src/marked/directives/index.ts

@@ -2,6 +2,7 @@ import { GRID_RE } from '../registry'
 import { cardRenderers } from './card'
 import type { DirectiveRenderer } from './context'
 import { faqRenderers } from './faq'
+import { imageRenderers } from './image'
 import { cellRenderers, grid } from './grid'
 import { linkButtonRenderers } from './linkButton'
 import { youtubeRenderers } from './youtube'
@@ -10,6 +11,7 @@ const BY_NAME: Record<string, DirectiveRenderer> = {
   ...cardRenderers,
   ...cellRenderers,
   ...faqRenderers,
+  ...imageRenderers,
   ...youtubeRenderers,
   ...linkButtonRenderers
 }

package/packages/markdown/src/marked/html.ts

@@ -40,10 +40,23 @@ export const cleanUrl = (href: string | undefined): string | undefined => {
 
 export type AttrValue = string | boolean | undefined | null
 
+/**
+ * Attributes where an empty value says something, and so is written out. On an
+ * image an empty alt marks it as decoration; leaving the attribute off instead
+ * makes a screen reader read the file name.
+ */
+const KEEP_WHEN_EMPTY = new Set(['alt'])
+
 /** `{a: 'x', b: true, c: undefined}` becomes ` a="x" b` */
 export const attrsToHtml = (attrs: Record<string, AttrValue>): string =>
   Object.entries(attrs)
-    .filter(([, v]) => v !== undefined && v !== null && v !== false && v !== '')
+    .filter(
+      ([k, v]) =>
+        v !== undefined &&
+        v !== null &&
+        v !== false &&
+        (v !== '' || KEEP_WHEN_EMPTY.has(k))
+    )
     .map(([k, v]) => (v === true ? ` ${k}` : ` ${k}="${escapeHtml(v)}"`))
     .join('')
 

package/packages/markdown/src/marked/registry.ts

@@ -20,6 +20,7 @@ const STATIC: Record<string, DirectiveKind[]> = {
   'faq-a': [LEAF, CONTAINER],
   cell: [CONTAINER],
   'cell-img': [LEAF],
+  img: [LEAF],
   youtube: [LEAF, CONTAINER],
   'link-button': [TEXT]
 }

package/packages/markdown/src/marked/renderer.ts

@@ -24,10 +24,10 @@ export function directiveRenderer(
   const { name, kind, attrs, tokens } = token
   const nl = kind === TEXT ? '' : '\n'
 
-  // Marks what the directive dressed itself, so that the pass which styles the
-  // rest of the document leaves it alone.
+  // Marks the element as dressed, so that the pass which styles the rest of
+  // the document leaves it alone. The value names the directive it came from.
   const own: DirectiveContext['own'] = (values) =>
-    attrsToHtml({ ...values, 'data-sakura': name })
+    attrsToHtml({ ...values, 'data-styled': name })
 
   const context: DirectiveContext = {
     token,

package/packages/markdown/src/sanitize.ts

@@ -168,9 +168,16 @@ const purifier = (): DOMPurify => {
         element.removeAttribute('style')
       }
     }
-    // A link that opens elsewhere must not hand the opener over with it.
+    // A link that opens elsewhere must not hand the opener over with it. What
+    // the document asked for is kept alongside rather than replaced.
     if (element.getAttribute('target') === '_blank') {
-      element.setAttribute('rel', 'noopener noreferrer')
+      const asked = (element.getAttribute('rel') ?? '').split(/\s+/)
+      element.setAttribute(
+        'rel',
+        Array.from(
+          new Set(['noopener', 'noreferrer', ...asked.filter(Boolean)])
+        ).join(' ')
+      )
     }
   })
   return instance

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

@@ -101,6 +101,23 @@ describe('Markdown', () => {
       expect(html).toMatchSnapshot()
     })
 
+    // The nesting is read from the DOM rather than left to the snapshot, so a
+    // return to one flat list says which shape was lost.
+    it('should put a heading under the one it belongs to', async () => {
+      render(<Markdown showToc>{'# 章1\n\n## 節1\n\n## 節2\n\n# 章2'}</Markdown>)
+      const toc = await screen.findByRole('navigation')
+
+      const chapters = toc.querySelectorAll(':scope > ul > li')
+      expect(
+        Array.from(chapters, (li) => li.querySelector('a')?.textContent)
+      ).toEqual(['章1', '章2'])
+
+      const sections = chapters[0].querySelectorAll(':scope > ul > li')
+      expect(
+        Array.from(sections, (li) => li.querySelector('a')?.textContent)
+      ).toEqual(['節1', '節2'])
+    })
+
     it('should use the given title', async () => {
       render(
         <Markdown showToc tocTitle="もくじ">

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

@@ -1,78 +1,78 @@
 // 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 class="flex flex-col gap-8"><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 class="py-8 flex flex-col gap-8"><div class="flex flex-col gap-8"><div class="border border-solid border-solid-gray-500 rounded-2xl sm:rounded-3xl text-solid-gray-900 overflow-hidden" data-styled="card"><img class="object-cover mb-2 w-full aspect-[352/226]" src="/a.png" alt="図" data-styled="card-img">
+<h3 class="m-0 text-base leading-[2rem] font-medium first:pt-4 pt-2 last:pb-4 px-6" data-styled="card-title" id="タイトル">タイトル</h3>
+<div class="text-base-sm leading-[1.85rem] first:pt-4 pt-2 last:pb-4 px-6" data-styled="card-description">説明</div>
 </div>
 </div></div>"
 `;
 
 exports[`Markdown > directives > should render cell 1`] = `
-"<div class="py-8 flex flex-col gap-8"><div class="flex flex-col gap-8"><div data-sakura="cell"><img class="mb-4" src="/a.png" alt="図" data-sakura="cell-img">
+"<div class="py-8 flex flex-col gap-8"><div class="flex flex-col gap-8"><div data-styled="cell"><img class="mb-4" src="/a.png" alt="図" data-styled="cell-img">
 <p>本文</p>
 </div>
 </div></div>"
 `;
 
 exports[`Markdown > directives > should render faq 1`] = `
-"<div class="py-8 flex flex-col gap-8"><div class="flex flex-col gap-8"><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>
+"<div class="py-8 flex flex-col gap-8"><div class="flex flex-col gap-8"><dl class="flex flex-col gap-8" data-styled="faq"><dt class="flex flex-row gap-8 mt-8 text-h-med-m sm:text-h-med" data-styled="faq-q"><span aria-hidden="true">Q</span><span>質問は？</span></dt>
+<dd class="flex flex-row items-start gap-8" data-styled="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-styled="faq-q"><span aria-hidden="true">Q</span><span>二つ目の質問は？</span></dt>
+<dd class="flex flex-row items-start gap-8" data-styled="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 class="flex flex-col gap-8"><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 class="py-8 flex flex-col gap-8"><div class="flex flex-col gap-8"><ul class="flex flex-col md:grid md:grid-cols-3 gap-8" data-styled="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-styled="card"><h3 class="m-0 text-base leading-[2rem] font-medium first:pt-4 pt-2 last:pb-4 px-6" data-styled="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>
+<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-styled="card"><h3 class="m-0 text-base leading-[2rem] font-medium first:pt-4 pt-2 last:pb-4 px-6" data-styled="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 class="flex flex-col gap-8"><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 class="py-8 flex flex-col gap-8"><div class="flex flex-col gap-8"><div class="flex flex-col md:grid md:grid-cols-2 gap-8" data-styled="grid-cols-2"><div class="border border-solid border-solid-gray-500 rounded-2xl sm:rounded-3xl text-solid-gray-900 overflow-hidden" data-styled="card"><h3 class="m-0 text-base leading-[2rem] font-medium first:pt-4 pt-2 last:pb-4 px-6" data-styled="card-title" id="1つ目">1つ目</h3>
 </div>
-<div data-sakura="cell"><p>本文</p>
+<div data-styled="cell"><p>本文</p>
 </div>
 </div>
 </div></div>"
 `;
 
 exports[`Markdown > directives > should render gridOfCells 1`] = `
-"<div class="py-8 flex flex-col gap-8"><div class="flex flex-col gap-8"><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 class="py-8 flex flex-col gap-8"><div class="flex flex-col gap-8"><div class="flex flex-col md:grid md:grid-cols-2 gap-8" data-styled="grid-cols-2"><div data-styled="cell"><p><img src="/a.png" alt="alt"><br>本文1</p>
 </div>
-<div data-sakura="cell"><p>本文2</p>
+<div data-styled="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 class="flex flex-col gap-8"><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 class="py-8 flex flex-col gap-8"><div class="flex flex-col gap-8"><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-styled="link-button">サービス一覧</a> をどうぞ。</p>
 </div></div>"
 `;
 
 exports[`Markdown > directives > should render linkCard 1`] = `
-"<div class="py-8 flex flex-col gap-8"><div class="flex flex-col gap-8"><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 class="py-8 flex flex-col gap-8"><div class="flex flex-col gap-8"><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-styled="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-styled="card-title" id="タイトル"><a class="after:content-[''] after:absolute after:inset-0 after:z-10 focus-visible:outline-none" href="/x" data-styled="card-title">タイトル</a></h3>
+<div class="text-base-sm leading-[1.85rem] first:pt-4 pt-2 last:pb-4 px-6" data-styled="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-styled="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 class="flex flex-col gap-8"><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 class="py-8 flex flex-col gap-8"><div class="flex flex-col gap-8"><div class="border border-solid border-solid-gray-500 rounded-2xl sm:rounded-3xl text-solid-gray-900 overflow-hidden" data-styled="card"><div class="text-base-sm leading-[1.85rem] first:pt-4 pt-2 last:pb-4 px-6" data-styled="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-styled="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 class="flex flex-col gap-8"><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 class="py-8 flex flex-col gap-8"><div class="flex flex-col gap-8"><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-styled="youtube"></iframe>
 </div></div>"
 `;
 
@@ -126,9 +126,9 @@ exports[`Markdown > malformed html > should recover from crossedNesting 1`] = `
 </ul></div></div>"
 `;
 
-exports[`Markdown > malformed html > should recover from mistypedClose 1`] = `"<div class="py-8 flex flex-col gap-8"><div class="flex flex-col gap-8"><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 mistypedClose 1`] = `"<div class="py-8 flex flex-col gap-8"><div class="flex flex-col gap-8"><div class="w-full overflow-x-auto whitespace-nowrap print:overflow-visible print:whitespace-normal" data-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 class="flex flex-col gap-8"><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 > malformed html > should recover from unclosedCell 1`] = `"<div class="py-8 flex flex-col gap-8"><div class="flex flex-col gap-8"><div class="w-full overflow-x-auto whitespace-nowrap print:overflow-visible print:whitespace-normal" data-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 class="flex flex-col gap-8"><blockquote>
@@ -156,7 +156,7 @@ exports[`Markdown > plain markdown > should render footnote 1`] = `
 `;
 
 exports[`Markdown > plain markdown > should render gfmTable 1`] = `
-"<div class="py-8 flex flex-col gap-8"><div class="flex flex-col gap-8"><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">
+"<div class="py-8 flex flex-col gap-8"><div class="flex flex-col gap-8"><div class="w-full overflow-x-auto whitespace-nowrap print:overflow-visible print:whitespace-normal" data-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>
@@ -189,7 +189,7 @@ exports[`Markdown > plain markdown > should render image 1`] = `
 `;
 
 exports[`Markdown > plain markdown > should render links 1`] = `
-"<div class="py-8 flex flex-col gap-8"><div class="flex flex-col gap-8"><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 class="py-8 flex flex-col gap-8"><div class="flex flex-col gap-8"><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-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-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>"
 `;
 
@@ -226,7 +226,7 @@ exports[`Markdown > raw html > should render details 1`] = `
 <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">
+<div class="w-full overflow-x-auto whitespace-nowrap print:overflow-visible print:whitespace-normal" data-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>
@@ -242,7 +242,7 @@ exports[`Markdown > raw html > should render details 1`] = `
 `;
 
 exports[`Markdown > raw html > should render externalAnchor 1`] = `
-"<div class="py-8 flex flex-col gap-8"><div class="flex flex-col gap-8"><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 class="py-8 flex flex-col gap-8"><div class="flex flex-col gap-8"><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-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>"
 `;
 
@@ -260,7 +260,7 @@ exports[`Markdown > raw html > should render styledBlock 1`] = `
 exports[`Markdown > raw html > should render styledImg 1`] = `"<div class="py-8 flex flex-col gap-8"><div class="flex flex-col gap-8"><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 class="flex flex-col gap-8"><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">
+"<div class="py-8 flex flex-col gap-8"><div class="flex flex-col gap-8"><div class="w-full overflow-x-auto whitespace-nowrap print:overflow-visible print:whitespace-normal" data-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>
@@ -301,7 +301,12 @@ exports[`Markdown > table of contents > should render the table of contents when
   
   disabled:border-solid-gray-500
   [overflow-wrap:anywhere]
-" href="#章1">章1</a></li><li><a class="
+" href="#章1">章1</a><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
@@ -355,7 +360,7 @@ exports[`Markdown > table of contents > should render the table of contents when
   
   disabled:border-solid-gray-500
   [overflow-wrap:anywhere]
-" href="#節2">節2</a></li><li><a class="
+" href="#節2">節2</a></li></ul></li><li><a class="
   cursor-pointer
   text-blue-1000
   active:text-orange-700
@@ -411,7 +416,7 @@ exports[`Markdown > text that only looks like a directive > should leave functio
 `;
 
 exports[`Markdown > text that only looks like a directive > should leave linkLabel alone 1`] = `
-"<div class="py-8 flex flex-col gap-8"><div class="flex flex-col gap-8"><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 class="py-8 flex flex-col gap-8"><div class="flex flex-col gap-8"><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-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>"
 `;
 

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

@@ -0,0 +1,64 @@
+import { describe, expect, it } from 'vitest'
+import { render } from '../src/render'
+
+const html = (markdown: string) => render(markdown).html
+const style = (markdown: string) => /style="([^"]*)"/.exec(html(markdown))?.[1]
+
+/**
+ * `::img` is the Markdown image plus a size. A document that needs one reaches
+ * for raw HTML and an inline style otherwise.
+ */
+describe('img', () => {
+  it('should render the source and the alternative text', () => {
+    const out = html('::img{src=/a.png alt="A field at dawn"}')
+    expect(out).toContain('src="/a.png"')
+    expect(out).toContain('alt="A field at dawn"')
+  })
+
+  it('should take no size', () => {
+    expect(style('::img{src=/a.png alt=図}')).toBeUndefined()
+  })
+
+  it('should draw at the width asked for', () => {
+    expect(style('::img{src=/a.png alt=図 width=520}')).toBe(
+      'width:520px; max-width:100%;'
+    )
+  })
+
+  it('should keep the image inside a narrow column', () => {
+    // Without max-width a fixed width overflows on a phone.
+    expect(style('::img{src=/a.png alt=図 width=1200}')).toContain(
+      'max-width:100%'
+    )
+  })
+
+  it('should draw at the height asked for', () => {
+    expect(style('::img{src=/a.png alt=図 height=300}')).toBe('height:300px;')
+  })
+
+  it('should take both', () => {
+    expect(style('::img{src=/a.png alt=図 width=520 height=300}')).toBe(
+      'width:520px; height:300px; max-width:100%;'
+    )
+  })
+
+  it('should survive the sanitiser', () => {
+    // width and max-width are on the CSS allowlist; a property that is not
+    // would be dropped here rather than in the renderer.
+    expect(html('::img{src=/a.png alt=図 width=520}')).toContain('520px')
+  })
+
+  it('should refuse a javascript URL', () => {
+    expect(html('::img{src=javascript:alert(1) alt=図}')).not.toContain(
+      'javascript:'
+    )
+  })
+
+  it('should answer to {#name}', () => {
+    expect(html('::img{#figure-1 src=/a.png alt=図}')).toContain('id="figure-1"')
+  })
+
+  it('should be empty alt when none is given', () => {
+    expect(html('::img{src=/a.png}')).toContain('alt=""')
+  })
+})

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

@@ -135,6 +135,23 @@ describe('sanitize', () => {
       expect(out).toContain('rel="noopener noreferrer"')
     })
 
+    it('should keep a rel the document asked for as well', () => {
+      const out = html(
+        '<a href="https://example.com" target="_blank" rel="nofollow">外部</a>'
+      )
+      const rel = /rel="([^"]*)"/.exec(out)?.[1].split(' ')
+      expect(rel).toContain('noopener')
+      expect(rel).toContain('noreferrer')
+      expect(rel).toContain('nofollow')
+    })
+
+    it('should not repeat a rel the document already asked for', () => {
+      const out = html(
+        '<a href="https://example.com" target="_blank" rel="noopener">外部</a>'
+      )
+      expect(out).toContain('rel="noopener noreferrer"')
+    })
+
     it('should say that the link opens elsewhere', () => {
       const out = html('[外部](https://example.com)')
       expect(out).toContain('Opens in new tab')

package/packages/tailwind-theme-plugin/.turbo/turbo-build.log

@@ -9,4 +9,4 @@ rendering chunks...
 computing gzip size...
 dist/index.es.js  160.05 kB │ gzip: 10.15 kB
 dist/index.cjs.js  88.17 kB │ gzip: 8.80 kB
-✓ built in 621ms
+✓ built in 631ms