} */\n const headings = document.querySelectorAll(\n `section:not(.head,#abstract,#sotd) h2, h3, h4, h5, h6`\n );\n for (const h of headings) {\n // prefer for ID: heading.id > parentElement.id > newly generated heading.id\n let id = h.id;\n if (!id) {\n addId(h);\n id = h.parentElement.id || h.id;\n }\n if (!conf.addSectionLinks) continue;\n const label = l10n.permalinkLabel(\n h.closest(\".appendix\") ? \"Appendix\" : \"Section\",\n h.querySelector(\":scope > bdi.secno\")\n );\n const wrapper = html``;\n h.replaceWith(wrapper);\n const selfLink = html``;\n wrapper.append(h, selfLink);\n }\n}\n","// @ts-check\n// Module ui/save-html\n// Saves content to HTML when asked to\nimport { concatDate, getIntlData, showWarning } from \"../core/utils.js\";\nimport { html } from \"../core/import-maps.js\";\nimport { rsDocToDataURL } from \"../core/exporter.js\";\nimport { ui } from \"../core/ui.js\";\n\nexport const name = \"ui/save-html\";\n\nconst localizationStrings = {\n en: {\n save_snapshot: \"Export\",\n },\n nl: {\n save_snapshot: \"Bewaar Snapshot\",\n },\n ja: {\n save_snapshot: \"保存する\",\n },\n de: {\n save_snapshot: \"Exportieren\",\n },\n zh: {\n save_snapshot: \"导出\",\n },\n};\nconst l10n = getIntlData(localizationStrings);\n\nconst downloadLinks = [\n {\n id: \"respec-save-as-html\",\n ext: \"html\",\n title: \"HTML\",\n type: \"text/html\",\n get href() {\n return rsDocToDataURL(this.type);\n },\n },\n {\n id: \"respec-save-as-xml\",\n ext: \"xhtml\",\n title: \"XML\",\n type: \"application/xml\",\n get href() {\n return rsDocToDataURL(this.type);\n },\n },\n {\n id: \"respec-save-as-epub\",\n ext: \"epub\",\n title: \"EPUB 3\",\n type: \"application/epub+zip\",\n get href() {\n // Create and download an EPUB 3.2 version of the content\n // Using the EPUB 3.2 conversion service set up at labs.w3.org/r2epub\n // For more details on that service, see https://github.com/iherman/respec2epub\n const epubURL = new URL(\"https://labs.w3.org/r2epub/\");\n epubURL.searchParams.append(\"respec\", \"true\");\n epubURL.searchParams.append(\"url\", document.location.href);\n return epubURL.href;\n },\n },\n];\n\n/**\n * @param {typeof downloadLinks[0]} details\n */\nfunction toDownloadLink(details, conf) {\n const { id, href, ext, title, type } = details;\n const date = concatDate(conf.publishDate || new Date());\n const filename = [conf.specStatus, conf.shortName || \"spec\", date].join(\"-\");\n return html` ui.closeModal()}\n >${title}`;\n}\n\nexport function run(conf) {\n const saveDialog = {\n async show(button) {\n await document.respec.ready;\n const div = html`\n ${downloadLinks.map(details => toDownloadLink(details, conf))}\n
`;\n ui.freshModal(l10n.save_snapshot, div, button);\n },\n };\n\n const supportsDownload = \"download\" in HTMLAnchorElement.prototype;\n let button;\n if (supportsDownload) {\n button = ui.addCommand(l10n.save_snapshot, show, \"Ctrl+Shift+Alt+S\", \"💾\");\n }\n\n function show() {\n if (!supportsDownload) return;\n saveDialog.show(button);\n }\n}\n\n/**\n * @param {*} _\n * @param {string} mimeType\n */\nexport function exportDocument(_, mimeType) {\n const msg =\n \"Exporting via ui/save-html module's `exportDocument()` is deprecated and will be removed.\";\n const hint = \"Use core/exporter `rsDocToDataURL()` instead.\";\n showWarning(msg, name, { hint });\n return rsDocToDataURL(mimeType);\n}\n","// @ts-check\n// Module ui/about-respec\n// A simple about dialog with pointer to the help\nimport { getIntlData } from \"../core/utils.js\";\nimport { html } from \"../core/import-maps.js\";\nimport { ui } from \"../core/ui.js\";\n\nconst localizationStrings = {\n en: {\n about_respec: \"About\",\n },\n zh: {\n about_respec: \"关于\",\n },\n nl: {\n about_respec: \"Over\",\n },\n ja: {\n about_respec: \"これについて\",\n },\n de: {\n about_respec: \"Über\",\n },\n};\nconst l10n = getIntlData(localizationStrings);\n\n// window.respecVersion is added at build time (see tools/builder.js)\nwindow.respecVersion = window.respecVersion || \"Developer Edition\";\nconst div = document.createElement(\"div\");\nconst render = html.bind(div);\nconst button = ui.addCommand(\n `${l10n.about_respec} ${window.respecVersion}`,\n show,\n \"Ctrl+Shift+Alt+A\",\n \"ℹ️\"\n);\n\nfunction show() {\n const entries = [];\n if (\"getEntriesByType\" in performance) {\n performance\n .getEntriesByType(\"measure\")\n .sort((a, b) => b.duration - a.duration)\n .map(({ name, duration }) => {\n const humanDuration =\n duration > 1000\n ? `${Math.round(duration / 1000.0)} second(s)`\n : `${duration.toFixed(2)} milliseconds`;\n return { name, duration: humanDuration };\n })\n .map(perfEntryToTR)\n .forEach(entry => {\n entries.push(entry);\n });\n }\n render`\n \n ReSpec is a document production toolchain, with a notable focus on W3C specifications.\n
\n \n Documentation,\n Bugs.\n
\n \n \n Loaded plugins\n \n \n \n \n Plugin Name\n | \n \n Processing time\n | \n
\n \n ${entries}\n
\n`;\n ui.freshModal(`${l10n.about_respec} - ${window.respecVersion}`, div, button);\n}\n\nfunction perfEntryToTR({ name, duration }) {\n const moduleURL = `https://github.com/speced/respec/blob/develop/src/${name}.js`;\n return html`\n \n ${name} | \n ${duration} | \n
\n `;\n}\n","// @ts-check\n/**\n * This Module adds a metatag description to the document, based on the\n * first paragraph of the abstract.\n */\nimport { html } from \"../core/import-maps.js\";\n\nexport const name = \"core/seo\";\n\nexport function run(conf) {\n if (conf.gitRevision) {\n // This allows to set a git revision of the source used to produce the\n // generated content. Typically, this would be set when generating the\n // static HTML via a build process.\n // 'revision' is the name recommended in https://wiki.whatwg.org/wiki/MetaExtensions\n const metaElem = html``;\n document.head.appendChild(metaElem);\n }\n\n const firstParagraph = document.querySelector(\"#abstract p:first-of-type\");\n if (!firstParagraph) {\n return; // no abstract, so nothing to do\n }\n // Normalize whitespace: trim, remove new lines, tabs, etc.\n const content = firstParagraph.textContent.replace(/\\s+/, \" \").trim();\n const metaElem = document.createElement(\"meta\");\n metaElem.name = \"description\";\n metaElem.content = content;\n document.head.appendChild(metaElem);\n}\n","/*\nOne Light for ReSpec, with better color contrast\nAdapted from Atom One Light by Daniel Gamage (https://github.com/highlightjs/highlight.js/blob/c0b6ddbaaf7/src/styles/atom-one-light.css>\nOriginal One Light Syntax theme from https://github.com/atom/one-light-syntax\n*/\n\nconst css = String.raw;\n\n// Prettier ignore only to keep code indented from level 0.\n// prettier-ignore\nexport default css`\n.hljs {\n --base: #fafafa;\n --mono-1: #383a42;\n --mono-2: #686b77;\n --mono-3: #717277;\n --hue-1: #0b76c5;\n --hue-2: #336ae3;\n --hue-3: #a626a4;\n --hue-4: #42803c;\n --hue-5: #ca4706;\n --hue-5-2: #c91243;\n --hue-6: #986801;\n --hue-6-2: #9a6a01;\n}\n\n/* There's no way to adapt this to \"manual\" theme toggle yet. */\n@media (prefers-color-scheme: dark) {\n .hljs {\n --base: #282c34;\n --mono-1: #abb2bf;\n --mono-2: #818896;\n --mono-3: #5c6370;\n --hue-1: #56b6c2;\n --hue-2: #61aeee;\n --hue-3: #c678dd;\n --hue-4: #98c379;\n --hue-5: #e06c75;\n --hue-5-2: #be5046;\n --hue-6: #d19a66;\n --hue-6-2: #e6c07b;\n }\n}\n\n.hljs {\n display: block;\n overflow-x: auto;\n padding: 0.5em;\n color: #383a42;\n color: var(--mono-1, #383a42);\n background: #fafafa;\n background: var(--base, #fafafa);\n}\n\n.hljs-comment,\n.hljs-quote {\n color: #717277;\n color: var(--mono-3, #717277);\n font-style: italic;\n}\n\n.hljs-doctag,\n.hljs-keyword,\n.hljs-formula {\n color: #a626a4;\n color: var(--hue-3, #a626a4);\n}\n\n.hljs-section,\n.hljs-name,\n.hljs-selector-tag,\n.hljs-deletion,\n.hljs-subst {\n color: #ca4706;\n color: var(--hue-5, #ca4706);\n font-weight: bold;\n}\n\n.hljs-literal {\n color: #0b76c5;\n color: var(--hue-1, #0b76c5);\n}\n\n.hljs-string,\n.hljs-regexp,\n.hljs-addition,\n.hljs-attribute,\n.hljs-meta-string {\n color: #42803c;\n color: var(--hue-4, #42803c);\n}\n\n.hljs-built_in,\n.hljs-class .hljs-title {\n color: #9a6a01;\n color: var(--hue-6-2, #9a6a01);\n}\n\n.hljs-attr,\n.hljs-variable,\n.hljs-template-variable,\n.hljs-type,\n.hljs-selector-class,\n.hljs-selector-attr,\n.hljs-selector-pseudo,\n.hljs-number {\n color: #986801;\n color: var(--hue-6, #986801);\n}\n\n.hljs-symbol,\n.hljs-bullet,\n.hljs-link,\n.hljs-meta,\n.hljs-selector-id,\n.hljs-title {\n color: #336ae3;\n color: var(--hue-2, #336ae3);\n}\n\n.hljs-emphasis {\n font-style: italic;\n}\n\n.hljs-strong {\n font-weight: bold;\n}\n\n.hljs-link {\n text-decoration: underline;\n}\n`;\n","/**\n * @param {string} path\n */\nexport async function fetchBase(path) {\n const response = await fetch(new URL(`../../${path}`, import.meta.url));\n return await response.text();\n}\n","// @ts-check\n/**\n * Module core/worker\n *\n * Exports a Web Worker for ReSpec, allowing for\n * multi-threaded processing of things.\n */\nexport const name = \"core/worker\";\n\n// Opportunistically preload syntax highlighter, which is used by the worker\nimport { createResourceHint } from \"./utils.js\";\nimport { expose } from \"./expose-modules.js\";\nimport { fetchBase } from \"./text-loader.js\";\n// Opportunistically preload syntax highlighter\n/** @type ResourceHintOption */\nconst hint = {\n hint: \"preload\",\n href: \"https://www.w3.org/Tools/respec/respec-highlight\",\n as: \"script\",\n};\nconst link = createResourceHint(hint);\ndocument.head.appendChild(link);\n\nasync function loadWorkerScript() {\n try {\n return (await import(\"text!../../worker/respec-worker.js\")).default;\n } catch {\n return fetchBase(\"worker/respec-worker.js\");\n }\n}\n\nasync function createWorker() {\n const workerScript = await loadWorkerScript();\n const workerURL = URL.createObjectURL(\n new Blob([workerScript], { type: \"application/javascript\" })\n );\n return new Worker(workerURL);\n}\n\nexport const workerPromise = createWorker();\n\nexpose(\n name,\n workerPromise.then(worker => ({ worker }))\n);\n","// @ts-check\n/**\n * Module core/highlight\n *\n * Performs syntax highlighting to all pre and code elements.\n */\nimport css from \"../styles/highlight.css.js\";\nimport { html } from \"./import-maps.js\";\nimport { msgIdGenerator } from \"./utils.js\";\nimport { workerPromise } from \"./worker.js\";\nexport const name = \"core/highlight\";\n\nconst nextMsgId = msgIdGenerator(\"highlight\");\n\nfunction getLanguageHint(classList) {\n return Array.from(classList)\n .filter(item => item !== \"highlight\" && item !== \"nolinks\")\n .map(item => item.toLowerCase());\n}\n\nasync function highlightElement(elem) {\n elem.setAttribute(\"aria-busy\", \"true\");\n const languages = getLanguageHint(elem.classList);\n let response;\n try {\n response = await sendHighlightRequest(elem.innerText, languages);\n } catch (err) {\n console.error(err);\n return;\n }\n const { language, value } = response;\n switch (elem.localName) {\n case \"pre\":\n elem.classList.remove(language);\n elem.innerHTML = `${value}
`;\n if (!elem.classList.length) elem.removeAttribute(\"class\");\n break;\n case \"code\":\n elem.innerHTML = value;\n elem.classList.add(\"hljs\");\n if (language) elem.classList.add(language);\n break;\n }\n elem.setAttribute(\"aria-busy\", \"false\");\n}\n\nasync function sendHighlightRequest(code, languages) {\n const msg = {\n action: \"highlight\",\n code,\n id: nextMsgId(),\n languages,\n };\n const worker = await workerPromise;\n worker.postMessage(msg);\n return new Promise((resolve, reject) => {\n const timeoutId = setTimeout(() => {\n reject(new Error(\"Timed out waiting for highlight.\"));\n }, 4000);\n worker.addEventListener(\"message\", function listener(ev) {\n const {\n data: { id, language, value },\n } = ev;\n if (id !== msg.id) return; // not for us!\n worker.removeEventListener(\"message\", listener);\n clearTimeout(timeoutId);\n resolve({ language, value });\n });\n });\n}\n\nexport async function run(conf) {\n // Nothing to highlight\n if (conf.noHighlightCSS) return;\n const highlightables = [\n ...document.querySelectorAll(`\n pre:not(.idl):not(.nohighlight) > code:not(.nohighlight),\n pre:not(.idl):not(.nohighlight),\n code.highlight\n `),\n ].filter(\n // Filter pre's that contain code\n elem => elem.localName !== \"pre\" || !elem.querySelector(\"code\")\n );\n // Nothing to highlight\n if (!highlightables.length) {\n return;\n }\n const promisesToHighlight = highlightables\n .filter(elem => elem.textContent.trim())\n .map(highlightElement);\n document.head.appendChild(\n html``\n );\n await Promise.all(promisesToHighlight);\n}\n","// @ts-check\nimport { showWarning } from \"./utils.js\";\nexport const name = \"core/list-sorter\";\n\nfunction makeSorter(direction) {\n const order = direction === \"ascending\" ? 1 : -1;\n return ({ textContent: a }, { textContent: b }) => {\n return order * a.trim().localeCompare(b.trim());\n };\n}\n/**\n * Shallow sort list items in OL, and UL elements.\n *\n * @param {HTMLUListElement} elem\n * @returns {DocumentFragment}\n */\nexport function sortListItems(elem, dir) {\n const elements = [...elem.querySelectorAll(\":scope > li\")];\n const sortedElements = elements.sort(makeSorter(dir)).reduce((frag, elem) => {\n frag.appendChild(elem);\n return frag;\n }, document.createDocumentFragment());\n return sortedElements;\n}\n\n/**\n * Shallow sort a definition list based on its definition terms (dt) elements.\n *\n * @param {HTMLDListElement} dl\n * @returns {DocumentFragment}\n */\nexport function sortDefinitionTerms(dl, dir) {\n const elements = [...dl.querySelectorAll(\":scope > dt\")];\n const sortedElements = elements.sort(makeSorter(dir)).reduce((frag, elem) => {\n const { nodeType, nodeName } = elem;\n const children = document.createDocumentFragment();\n let { nextSibling: next } = elem;\n while (next) {\n if (!next.nextSibling) {\n break;\n }\n children.appendChild(next.cloneNode(true));\n const { nodeType: nextType, nodeName: nextName } = next.nextSibling;\n const isSameType = nextType === nodeType && nextName === nodeName;\n if (isSameType) {\n break;\n }\n next = next.nextSibling;\n }\n children.prepend(elem.cloneNode(true));\n frag.appendChild(children);\n return frag;\n }, document.createDocumentFragment());\n return sortedElements;\n}\n\nexport function run() {\n /** @type {NodeListOf} */\n const sortables = document.querySelectorAll(\"[data-sort]\");\n for (const elem of sortables) {\n let sortedElems;\n const dir = elem.dataset.sort || \"ascending\";\n switch (elem.localName) {\n case \"dl\": {\n const definition = /** @type {HTMLDListElement} */ (elem);\n sortedElems = sortDefinitionTerms(definition, dir);\n break;\n }\n case \"ol\":\n case \"ul\": {\n const list = /** @type {HTMLUListElement} */ (elem);\n sortedElems = sortListItems(list, dir);\n break;\n }\n default: {\n const msg = `ReSpec can't sort ${elem.localName} elements.`;\n showWarning(msg, name, { elements: [elem] });\n }\n }\n if (sortedElems) {\n const range = document.createRange();\n range.selectNodeContents(elem);\n range.deleteContents();\n elem.appendChild(sortedElems);\n }\n }\n}\n","const css = String.raw;\n\n// Prettier ignore only to keep code indented from level 0.\n// prettier-ignore\nexport default css`\nvar:hover {\n text-decoration: underline;\n cursor: pointer;\n}\n\nvar.respec-hl {\n color: var(--color, #000);\n background-color: var(--bg-color);\n box-shadow: 0 0 0px 2px var(--bg-color);\n}\n\n@media (prefers-color-scheme: dark) {\n var.respec-hl {\n filter: saturate(0.9) brightness(0.9)\n }\n}\n\n/* highlight colors\n https://github.com/w3c/tr-design/issues/152\n*/\nvar.respec-hl-c1 {\n --bg-color: #f4d200;\n}\n\nvar.respec-hl-c2 {\n --bg-color: #ff87a2;\n}\n\nvar.respec-hl-c3 {\n --bg-color: #96e885;\n}\n\nvar.respec-hl-c4 {\n --bg-color: #3eeed2;\n}\n\nvar.respec-hl-c5 {\n --bg-color: #eacfb6;\n}\n\nvar.respec-hl-c6 {\n --bg-color: #82ddff;\n}\n\nvar.respec-hl-c7 {\n --bg-color: #ffbcf2;\n}\n\n@media print {\n var.respec-hl {\n background: none;\n color: #000;\n box-shadow: unset;\n }\n}\n`;\n","// @ts-check\n/**\n * Module core/highlight-vars\n * Highlights occurrences of a within the algorithm or the encompassing section on click.\n * Set `conf.highlightVars = true` to enable.\n * Removes highlights from if clicked anywhere else.\n * All is done while keeping in mind that exported html stays clean\n * on export.\n */\nimport css from \"../styles/var.css.js\";\nimport { norm } from \"./utils.js\";\nimport { sub } from \"./pubsubhub.js\";\n\nexport const name = \"core/highlight-vars\";\n\nexport function run(conf) {\n if (!conf.highlightVars) {\n return;\n }\n const styleElement = document.createElement(\"style\");\n styleElement.textContent = css;\n styleElement.classList.add(\"removeOnSave\");\n document.head.appendChild(styleElement);\n\n document\n .querySelectorAll(\"var\")\n .forEach(varElem => varElem.addEventListener(\"click\", highlightListener));\n\n // remove highlights, cleanup empty class/style attributes\n sub(\"beforesave\", outputDoc => {\n outputDoc.querySelectorAll(\"var.respec-hl\").forEach(removeHighlight);\n });\n}\n\nfunction highlightListener(ev) {\n ev.stopPropagation();\n const { target: varElem } = ev;\n const hightligtedElems = highlightVars(varElem);\n const resetListener = () => {\n const hlColor = getHighlightColor(varElem);\n hightligtedElems.forEach(el => removeHighlight(el, hlColor));\n [...HL_COLORS.keys()].forEach(key => HL_COLORS.set(key, true));\n };\n if (hightligtedElems.length) {\n document.body.addEventListener(\"click\", resetListener, { once: true });\n }\n}\n\n// availability of highlight colors. colors from var.css\nconst HL_COLORS = new Map([\n [\"respec-hl-c1\", true],\n [\"respec-hl-c2\", true],\n [\"respec-hl-c3\", true],\n [\"respec-hl-c4\", true],\n [\"respec-hl-c5\", true],\n [\"respec-hl-c6\", true],\n [\"respec-hl-c7\", true],\n]);\n\nfunction getHighlightColor(target) {\n // return current colors if applicable\n const { value } = target.classList;\n const re = /respec-hl-\\w+/;\n const activeClass = re.test(value) && value.match(re);\n if (activeClass) return activeClass[0];\n\n // first color preference\n if (HL_COLORS.get(\"respec-hl-c1\") === true) return \"respec-hl-c1\";\n\n // otherwise get some other available color\n return [...HL_COLORS.keys()].find(c => HL_COLORS.get(c)) || \"respec-hl-c1\";\n}\n\nfunction highlightVars(varElem) {\n const textContent = norm(varElem.textContent);\n const parent = varElem.closest(\".algorithm, section\");\n const highlightColor = getHighlightColor(varElem);\n\n const varsToHighlight = [...parent.querySelectorAll(\"var\")].filter(\n el =>\n norm(el.textContent) === textContent &&\n el.closest(\".algorithm, section\") === parent\n );\n\n // update availability of highlight color\n const colorStatus = varsToHighlight[0].classList.contains(\"respec-hl\");\n HL_COLORS.set(highlightColor, colorStatus);\n\n // highlight vars\n if (colorStatus) {\n varsToHighlight.forEach(el => removeHighlight(el, highlightColor));\n return [];\n } else {\n varsToHighlight.forEach(el => addHighlight(el, highlightColor));\n }\n return varsToHighlight;\n}\n\nfunction removeHighlight(el, highlightColor) {\n el.classList.remove(\"respec-hl\", highlightColor);\n // clean up empty class attributes so they don't come in export\n if (!el.classList.length) el.removeAttribute(\"class\");\n}\n\nfunction addHighlight(elem, highlightColor) {\n elem.classList.add(\"respec-hl\", highlightColor);\n}\n","const css = String.raw;\n\n// Prettier ignore only to keep code indented from level 0.\n// prettier-ignore\nexport default css`\nvar {\n position: relative;\n cursor: pointer;\n}\n\nvar[data-type]::before,\nvar[data-type]::after {\n position: absolute;\n left: 50%;\n top: -6px;\n opacity: 0;\n transition: opacity 0.4s;\n pointer-events: none;\n}\n\n/* the triangle or arrow or caret or whatever */\nvar[data-type]::before {\n content: \"\";\n transform: translateX(-50%);\n border-width: 4px 6px 0 6px;\n border-style: solid;\n border-color: transparent;\n border-top-color: #222;\n}\n\n/* actual text */\nvar[data-type]::after {\n content: attr(data-type);\n transform: translateX(-50%) translateY(-100%);\n background: #222;\n text-align: center;\n /* additional styling */\n font-family: \"Dank Mono\", \"Fira Code\", monospace;\n font-style: normal;\n padding: 6px;\n border-radius: 3px;\n color: #daca88;\n text-indent: 0;\n font-weight: normal;\n}\n\nvar[data-type]:hover::after,\nvar[data-type]:hover::before {\n opacity: 1;\n}\n`;\n","// @ts-check\n/**\n * Module core/data-type\n * Propagates data type of a to subsequent instances within a section.\n * Also adds the CSS for the data type tooltip.\n * Set `conf.highlightVars = true` to enable.\n */\nimport css from \"../styles/datatype.css.js\";\n\nexport const name = \"core/data-type\";\n\nexport function run(conf) {\n if (!conf.highlightVars) {\n return;\n }\n\n const style = document.createElement(\"style\");\n style.textContent = css;\n document.head.appendChild(style);\n\n let section = null;\n const varMap = new Map();\n /** @type {NodeListOf} */\n const variables = document.querySelectorAll(\"section var\");\n for (const varElem of variables) {\n const currentSection = varElem.closest(\"section\");\n if (section !== currentSection) {\n section = currentSection;\n varMap.clear();\n }\n if (varElem.dataset.type) {\n varMap.set(varElem.textContent.trim(), varElem.dataset.type);\n continue;\n }\n const type = varMap.get(varElem.textContent.trim());\n if (type) varElem.dataset.type = type;\n }\n}\n","/* For assertions in lists containing algorithms */\nconst css = String.raw;\n\n// Prettier ignore only to keep code indented from level 0.\n// prettier-ignore\nexport default css`\n:root {\n --assertion-border: #aaa;\n --assertion-bg: #eee;\n --assertion-text: black;\n}\n\n.assert {\n border-left: 0.5em solid #aaa;\n padding: 0.3em;\n border-color: #aaa;\n border-color: var(--assertion-border);\n background: #eee;\n background: var(--assertion-bg);\n color: black;\n color: var(--assertion-text);\n}\n\n/* There's no way to adapt this to \"manual\" theme toggle yet. */\n@media (prefers-color-scheme: dark) {\n :root {\n --assertion-border: #444;\n --assertion-bg: var(--borderedblock-bg);\n --assertion-text: var(--text);\n }\n}\n`;\n","// @ts-check\n/**\nCurrently used only for adding 'assert' class to algorithm lists\n*/\nimport css from \"../styles/algorithms.css.js\";\nimport { html } from \"./import-maps.js\";\n\nexport const name = \"core/algorithms\";\n\nexport function run() {\n const elements = Array.from(\n /** @type {NodeListOf} */ (\n document.querySelectorAll(\"ol.algorithm li\")\n )\n ).filter(li => li.textContent.trim().startsWith(\"Assert: \"));\n if (!elements.length) {\n return;\n }\n\n for (const li of elements) {\n li.classList.add(\"assert\");\n\n // Link \"Assert\" to https://infra.spec.whatwg.org/#assert\n const textNode = li.firstChild;\n if (\n textNode instanceof Text &&\n textNode.textContent.startsWith(\"Assert: \")\n ) {\n textNode.textContent = textNode.textContent.replace(\"Assert: \", \"\");\n li.prepend(\n html`Assert`,\n \": \"\n );\n }\n }\n\n const style = document.createElement(\"style\");\n style.textContent = css;\n document.head.appendChild(style);\n}\n","// @ts-check\n// expands empty anchors based on their context\nimport { makeSafeCopy, norm, renameElement, showError } from \"./utils.js\";\n\nexport const name = \"core/anchor-expander\";\n\nexport function run() {\n /** @type {NodeListOf} */\n const anchorElements = document.querySelectorAll(\n \"a[href^='#']:not(.self-link):not([href$='the-empty-string'])\"\n );\n const anchors = [...anchorElements].filter(a => a.textContent.trim() === \"\");\n for (const a of anchors) {\n const id = a.getAttribute(\"href\").slice(1);\n const matchingElement = document.getElementById(id);\n if (!matchingElement) {\n a.textContent = a.getAttribute(\"href\");\n const msg = `Couldn't expand inline reference. The id \"${id}\" is not in the document.`;\n const title = `No matching id in document: ${id}.`;\n showError(msg, name, { title, elements: [a] });\n continue;\n }\n switch (matchingElement.localName) {\n case \"h6\":\n case \"h5\":\n case \"h4\":\n case \"h3\":\n case \"h2\": {\n processHeading(matchingElement, a);\n break;\n }\n case \"section\": {\n // find first heading in the section\n processSection(matchingElement, id, a);\n break;\n }\n case \"figure\": {\n processFigure(matchingElement, id, a);\n break;\n }\n case \"table\": {\n processTable(matchingElement, id, a);\n break;\n }\n case \"aside\":\n case \"div\": {\n processBox(matchingElement, id, a);\n break;\n }\n default: {\n a.textContent = a.getAttribute(\"href\");\n const msg = \"ReSpec doesn't support expanding this kind of reference.\";\n const title = `Can't expand \"#${id}\".`;\n showError(msg, name, { title, elements: [a] });\n }\n }\n localize(matchingElement, a);\n a.normalize();\n }\n}\n\nfunction processBox(matchingElement, id, a) {\n const selfLink = matchingElement.querySelector(\".marker .self-link\");\n if (!selfLink) {\n a.textContent = a.getAttribute(\"href\");\n const msg = `Found matching element \"${id}\", but it has no title or marker.`;\n const title = \"Missing title.\";\n showError(msg, name, { title, elements: [a] });\n return;\n }\n const copy = makeSafeCopy(selfLink);\n a.append(...copy.childNodes);\n a.classList.add(\"box-ref\");\n}\n\nfunction processFigure(matchingElement, id, a) {\n const figcaption = matchingElement.querySelector(\"figcaption\");\n if (!figcaption) {\n a.textContent = a.getAttribute(\"href\");\n const msg = `Found matching figure \"${id}\", but figure is lacking a \\`\\`.`;\n const title = \"Missing figcaption in referenced figure.\";\n showError(msg, name, { title, elements: [a] });\n return;\n }\n // get figure label and remove the fig-number class\n const children = [\n ...makeSafeCopy(figcaption.querySelector(\".self-link\")).childNodes,\n ].map(node => {\n // @ts-ignore\n node.classList?.remove(\"figno\");\n return node;\n });\n a.append(...children);\n a.classList.add(\"fig-ref\");\n const figTitle = figcaption.querySelector(\".fig-title\");\n if (!a.hasAttribute(\"title\") && figTitle) {\n a.title = norm(figTitle.textContent);\n }\n}\n\nfunction processTable(matchingTable, id, a) {\n if (!matchingTable.classList.contains(\"numbered\")) {\n return;\n }\n const caption = matchingTable.querySelector(\"caption\");\n if (!caption) {\n a.textContent = a.getAttribute(\"href\");\n const msg = `Found matching table \"${id}\", but table is lacking a \\`\\`.`;\n const title = \"Missing caption in referenced table.\";\n showError(msg, name, { title, elements: [a] });\n return;\n }\n\n // get table label and remove the fig-number class\n const children = [\n ...makeSafeCopy(caption.querySelector(\".self-link\")).childNodes,\n ].map(node => {\n // @ts-ignore\n // @ts-ignore\n node.classList?.remove(\"tableno\");\n return node;\n });\n a.append(...children);\n a.classList.add(\"table-ref\");\n const tableTitle = caption.querySelector(\".table-title\");\n if (!a.hasAttribute(\"title\") && tableTitle) {\n a.title = norm(tableTitle.textContent);\n }\n}\n\nfunction processSection(matchingElement, id, a) {\n const heading = matchingElement.querySelector(\"h6, h5, h4, h3, h2\");\n if (!heading) {\n a.textContent = a.getAttribute(\"href\");\n const msg =\n \"Found matching section, but the section was lacking a heading element.\";\n const title = `No matching id in document: \"${id}\".`;\n showError(msg, name, { title, elements: [a] });\n return;\n }\n processHeading(heading, a);\n localize(heading, a);\n}\n\nfunction processHeading(heading, a) {\n const hadSelfLink = heading.querySelector(\".self-link\");\n const children = [...makeSafeCopy(heading).childNodes].filter(\n // @ts-ignore\n node => !node.classList || !node.classList.contains(\"self-link\")\n );\n a.append(...children);\n if (hadSelfLink) a.prepend(\"§\\u00A0\");\n a.classList.add(\"sec-ref\");\n // Trim stray whitespace of the last text node (see bug #3265).\n if (a.lastChild.nodeType === Node.TEXT_NODE) {\n a.lastChild.textContent = a.lastChild.textContent.trimEnd();\n }\n // Replace all inner anchors for span elements (see bug #3136)\n a.querySelectorAll(\"a\").forEach(a => {\n const span = renameElement(a, \"span\");\n // Remove the old attributes\n for (const attr of [...span.attributes]) {\n span.removeAttributeNode(attr);\n }\n });\n}\n\nfunction localize(matchingElement, newElement) {\n for (const attrName of [\"dir\", \"lang\"]) {\n // Already set on element, don't override.\n if (newElement.hasAttribute(attrName)) continue;\n\n // Closest in tree setting the attribute\n const matchingClosest = matchingElement.closest(`[${attrName}]`);\n if (!matchingClosest) continue;\n\n // Closest to reference setting the attribute\n const newClosest = newElement.closest(`[${attrName}]`);\n\n // It's the same, so already inherited from closest (probably HTML element or body).\n if (\n newClosest &&\n newClosest.getAttribute(attrName) ===\n matchingClosest.getAttribute(attrName)\n )\n continue;\n // Otherwise, set it.\n newElement.setAttribute(attrName, matchingClosest.getAttribute(attrName));\n }\n}\n","/* dfn popup panel that list all local references to a dfn */\n/**\n * TODO: Revert changes due to https://github.com/speced/respec/pull/2888 when\n * https://github.com/w3c/css-validator/pull/111 is fixed.\n */\nconst css = String.raw;\n\n// Prettier ignore only to keep code indented from level 0.\n// prettier-ignore\nexport default css`\ndfn {\n cursor: pointer;\n}\n\n.dfn-panel {\n position: absolute;\n z-index: 35;\n min-width: 300px;\n max-width: 500px;\n padding: 0.5em 0.75em;\n margin-top: 0.6em;\n font-family: \"Helvetica Neue\", sans-serif;\n font-size: small;\n background: #fff;\n background: var(--indextable-hover-bg, #fff);\n color: black;\n color: var(--text, black);\n box-shadow: 0 1em 3em -0.4em rgba(0, 0, 0, 0.3),\n 0 0 1px 1px rgba(0, 0, 0, 0.05);\n box-shadow: 0 1em 3em -0.4em var(--tocsidebar-shadow, rgba(0, 0, 0, 0.3)),\n 0 0 1px 1px var(--tocsidebar-shadow, rgba(0, 0, 0, 0.05));\n border-radius: 2px;\n}\n/* Triangle/caret */\n.dfn-panel:not(.docked) > .caret {\n position: absolute;\n top: -9px;\n}\n.dfn-panel:not(.docked) > .caret::before,\n.dfn-panel:not(.docked) > .caret::after {\n content: \"\";\n position: absolute;\n border: 10px solid transparent;\n border-top: 0;\n border-bottom: 10px solid #fff;\n border-bottom-color: var(--indextable-hover-bg, #fff);\n top: 0;\n}\n.dfn-panel:not(.docked) > .caret::before {\n border-bottom: 9px solid #a2a9b1;\n /* TODO: need slightly darker shade */\n border-bottom-color: var(--indextable-hover-bg, #a2a9b1);\n}\n\n.dfn-panel * {\n margin: 0;\n}\n\n.dfn-panel b {\n display: block;\n color: #000;\n color: var(--text, #000);\n margin-top: 0.25em;\n}\n\n.dfn-panel ul a[href] {\n color: #333;\n color: var(--text, #333);\n}\n\n.dfn-panel > div {\n display: flex;\n}\n\n.dfn-panel a.self-link {\n font-weight: bold;\n margin-right: auto;\n}\n\n.dfn-panel .marker {\n padding: 0.1em;\n margin-left: 0.5em;\n border-radius: 0.2em;\n text-align: center;\n white-space: nowrap;\n font-size: 90%;\n color: #040b1c;\n}\n\n.dfn-panel .marker.dfn-exported {\n background: #d1edfd;\n box-shadow: 0 0 0 0.125em #1ca5f940;\n}\n.dfn-panel .marker.idl-block {\n background: #8ccbf2;\n box-shadow: 0 0 0 0.125em #0670b161;\n}\n\n.dfn-panel a:not(:hover) {\n text-decoration: none !important;\n border-bottom: none !important;\n}\n\n.dfn-panel a[href]:hover {\n border-bottom-width: 1px;\n}\n\n.dfn-panel ul {\n padding: 0;\n}\n\n.dfn-panel li {\n margin-left: 1em;\n}\n\n.dfn-panel.docked {\n position: fixed;\n left: 0.5em;\n top: unset;\n bottom: 2em;\n margin: 0 auto;\n /* 0.75em from padding (x2), 0.5em from left position, 0.2em border (x2) */\n max-width: calc(100vw - 0.75em * 2 - 0.5em - 0.2em * 2);\n max-height: 30vh;\n overflow: auto;\n}\n`;\n","// @ts-check\n// Constructs \"dfn panels\" which show all the local references to a dfn and a\n// self link to the selected dfn. Based on Bikeshed's dfn panels at\n// https://github.com/tabatkins/bikeshed/blob/ef44162c2e/bikeshed/dfnpanels.py\nimport css from \"../styles/dfn-panel.css.js\";\nimport { fetchBase } from \"./text-loader.js\";\nimport { html } from \"./import-maps.js\";\nimport { norm } from \"./utils.js\";\n\nexport const name = \"core/dfn-panel\";\n\nexport async function run() {\n document.head.insertBefore(\n html``,\n document.querySelector(\"link\")\n );\n\n /** @type {NodeListOf} */\n const elems = document.querySelectorAll(\n \"dfn[id]:not([data-cite]), #index-defined-elsewhere .index-term\"\n );\n const panels = document.createDocumentFragment();\n for (const el of elems) {\n panels.append(createPanel(el));\n // Make it possible to reach el by tabbing,\n // allowing keyboard action as needed.\n el.tabIndex = 0;\n el.setAttribute(\"aria-haspopup\", \"dialog\");\n }\n document.body.append(panels);\n\n const script = document.createElement(\"script\");\n script.id = \"respec-dfn-panel\";\n script.textContent = await loadScript();\n document.body.append(script);\n}\n\n/** @param {HTMLElement} dfn */\nfunction createPanel(dfn) {\n const { id } = dfn;\n const href = dfn.dataset.href || `#${id}`;\n /** @type {NodeListOf} */\n const links = document.querySelectorAll(`a[href=\"${href}\"]:not(.index-term)`);\n\n const panelId = `dfn-panel-for-${dfn.id}`;\n const definition = dfn.getAttribute(\"aria-label\") || norm(dfn.textContent);\n /** @type {HTMLElement} */\n const panel = html`\n