@tenphi/renderer 0.20.3 → 0.20.4

package/dist/client/navigation.js

@@ -93,6 +93,12 @@ var CookbookHeaderLinks = class extends HTMLElement {
 		const close = () => {
 			if (panel?.matches(":popover-open")) panel.hidePopover();
 		};
+		panel?.addEventListener("toggle", () => {
+			if (panel.matches(":popover-open")) {
+				panel.getBoundingClientRect();
+				panel.setAttribute("data-open", "");
+			} else panel.removeAttribute("data-open");
+		}, { signal });
 		desktop.addEventListener("change", () => {
 			if (desktop.matches) close();
 		}, { signal });

package/dist/client/navigation.js.map

@@ -1 +1 @@
-{"version":3,"file":"navigation.js","names":[],"sources":["../../src/client/navigation.ts"],"sourcesContent":["export {};\n\nclass CookbookSidebarPane extends HTMLElement {\n  #listeners?: AbortController;\n  #inert = new Map<HTMLElement, boolean>();\n  #trigger: HTMLButtonElement | undefined;\n\n  connectedCallback() {\n    this.#listeners?.abort();\n    this.#listeners = new AbortController();\n    const { signal } = this.#listeners;\n    this.#trigger =\n      document.querySelector<HTMLButtonElement>(\n        '.td-menu-button[popovertarget=\"cookbook__sidebar\"]',\n      ) ?? undefined;\n    const desktop = matchMedia(\"(min-width: 50rem)\");\n    const syncViewport = () => {\n      if (desktop.matches) {\n        if (this.matches(\":popover-open\")) this.hidePopover();\n        this.#release();\n        this.popover = null;\n        this.removeAttribute(\"role\");\n        this.removeAttribute(\"aria-modal\");\n      } else {\n        this.popover = \"auto\";\n        this.setAttribute(\"role\", \"dialog\");\n        this.setAttribute(\"aria-modal\", \"true\");\n      }\n    };\n    syncViewport();\n    desktop.addEventListener(\"change\", syncViewport, { signal });\n    this.addEventListener(\n      \"toggle\",\n      () => {\n        const open = !desktop.matches && this.matches(\":popover-open\");\n        this.#trigger?.setAttribute(\"aria-expanded\", String(open));\n        if (open) {\n          // Establish the closed position after the popover enters the top\n          // layer so its attribute change transitions from an actual layout.\n          // Tasty's global SSR renderer does not preserve @starting-style.\n          this.getBoundingClientRect();\n          this.setAttribute(\"data-open\", \"\");\n          for (const element of document.querySelectorAll<HTMLElement>(\n            \".header, .main-frame, .cookbook-skip-link\",\n          )) {\n            this.#inert.set(element, element.inert);\n            element.inert = true;\n          }\n          this.querySelector<HTMLElement>(\"[autofocus]\")?.focus({\n            preventScroll: true,\n          });\n        } else {\n          const restoreFocus =\n            this.contains(document.activeElement) ||\n            document.activeElement === document.body;\n          this.#release();\n          if (restoreFocus && !desktop.matches) this.#trigger?.focus();\n        }\n      },\n      { signal },\n    );\n    this.addEventListener(\n      \"keydown\",\n      (event) => {\n        if (desktop.matches || !this.matches(\":popover-open\")) return;\n        const sections = this.querySelector<HTMLDetailsElement>(\n          \".td-mobile-tabs details[open]\",\n        );\n        if (event.key === \"Escape\" && sections) {\n          event.preventDefault();\n          sections.open = false;\n          sections.querySelector(\"summary\")?.focus();\n          return;\n        }\n        if (event.key !== \"Tab\") return;\n        const focusable = Array.from(\n          this.querySelectorAll<HTMLElement>(\n            'a[href], button:not([disabled]), select:not([disabled]), input:not([disabled]), summary, [tabindex=\"0\"]',\n          ),\n        ).filter(\n          (element) =>\n            element.tabIndex >= 0 && element.getClientRects().length > 0,\n        );\n        const first = focusable[0];\n        const last = focusable.at(-1);\n        if (!first || !last) {\n          event.preventDefault();\n          this.focus();\n          return;\n        }\n        if (\n          event.shiftKey &&\n          (document.activeElement === first || document.activeElement === this)\n        ) {\n          event.preventDefault();\n          last.focus();\n        } else if (!event.shiftKey && document.activeElement === last) {\n          event.preventDefault();\n          first.focus();\n        }\n      },\n      { signal },\n    );\n    this.addEventListener(\n      \"click\",\n      (event) => {\n        if (\n          !event.defaultPrevented &&\n          event.target instanceof Element &&\n          event.target.closest(\"a[href]\") &&\n          this.matches(\":popover-open\")\n        )\n          this.hidePopover();\n      },\n      { signal },\n    );\n  }\n\n  #release() {\n    this.removeAttribute(\"data-open\");\n    for (const [element, inert] of this.#inert) element.inert = inert;\n    this.#inert.clear();\n    this.#trigger?.setAttribute(\"aria-expanded\", \"false\");\n  }\n\n  disconnectedCallback() {\n    this.#listeners?.abort();\n    this.#release();\n  }\n}\n\nclass CookbookHeaderLinks extends HTMLElement {\n  #listeners?: AbortController;\n  connectedCallback() {\n    this.#listeners?.abort();\n    this.#listeners = new AbortController();\n    const { signal } = this.#listeners;\n    const panel = this.querySelector<HTMLElement>(\"[popover]\");\n    const desktop = matchMedia(\"(min-width: 50rem)\");\n    const close = () => {\n      if (panel?.matches(\":popover-open\")) panel.hidePopover();\n    };\n    desktop.addEventListener(\n      \"change\",\n      () => {\n        if (desktop.matches) close();\n      },\n      { signal },\n    );\n    panel?.addEventListener(\n      \"click\",\n      (event) => {\n        if (event.target instanceof Element && event.target.closest(\"a[href]\"))\n          close();\n      },\n      { signal },\n    );\n  }\n  disconnectedCallback() {\n    this.#listeners?.abort();\n  }\n}\n\nif (!customElements.get(\"cookbook-sidebar-pane\"))\n  customElements.define(\"cookbook-sidebar-pane\", CookbookSidebarPane);\nif (!customElements.get(\"cookbook-header-links\"))\n  customElements.define(\"cookbook-header-links\", CookbookHeaderLinks);\n"],"mappings":"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"}
+{"version":3,"file":"navigation.js","names":[],"sources":["../../src/client/navigation.ts"],"sourcesContent":["export {};\n\nclass CookbookSidebarPane extends HTMLElement {\n  #listeners?: AbortController;\n  #inert = new Map<HTMLElement, boolean>();\n  #trigger: HTMLButtonElement | undefined;\n\n  connectedCallback() {\n    this.#listeners?.abort();\n    this.#listeners = new AbortController();\n    const { signal } = this.#listeners;\n    this.#trigger =\n      document.querySelector<HTMLButtonElement>(\n        '.td-menu-button[popovertarget=\"cookbook__sidebar\"]',\n      ) ?? undefined;\n    const desktop = matchMedia(\"(min-width: 50rem)\");\n    const syncViewport = () => {\n      if (desktop.matches) {\n        if (this.matches(\":popover-open\")) this.hidePopover();\n        this.#release();\n        this.popover = null;\n        this.removeAttribute(\"role\");\n        this.removeAttribute(\"aria-modal\");\n      } else {\n        this.popover = \"auto\";\n        this.setAttribute(\"role\", \"dialog\");\n        this.setAttribute(\"aria-modal\", \"true\");\n      }\n    };\n    syncViewport();\n    desktop.addEventListener(\"change\", syncViewport, { signal });\n    this.addEventListener(\n      \"toggle\",\n      () => {\n        const open = !desktop.matches && this.matches(\":popover-open\");\n        this.#trigger?.setAttribute(\"aria-expanded\", String(open));\n        if (open) {\n          // Establish the closed position after the popover enters the top\n          // layer so its attribute change transitions from an actual layout.\n          // Tasty's global SSR renderer does not preserve @starting-style.\n          this.getBoundingClientRect();\n          this.setAttribute(\"data-open\", \"\");\n          for (const element of document.querySelectorAll<HTMLElement>(\n            \".header, .main-frame, .cookbook-skip-link\",\n          )) {\n            this.#inert.set(element, element.inert);\n            element.inert = true;\n          }\n          this.querySelector<HTMLElement>(\"[autofocus]\")?.focus({\n            preventScroll: true,\n          });\n        } else {\n          const restoreFocus =\n            this.contains(document.activeElement) ||\n            document.activeElement === document.body;\n          this.#release();\n          if (restoreFocus && !desktop.matches) this.#trigger?.focus();\n        }\n      },\n      { signal },\n    );\n    this.addEventListener(\n      \"keydown\",\n      (event) => {\n        if (desktop.matches || !this.matches(\":popover-open\")) return;\n        const sections = this.querySelector<HTMLDetailsElement>(\n          \".td-mobile-tabs details[open]\",\n        );\n        if (event.key === \"Escape\" && sections) {\n          event.preventDefault();\n          sections.open = false;\n          sections.querySelector(\"summary\")?.focus();\n          return;\n        }\n        if (event.key !== \"Tab\") return;\n        const focusable = Array.from(\n          this.querySelectorAll<HTMLElement>(\n            'a[href], button:not([disabled]), select:not([disabled]), input:not([disabled]), summary, [tabindex=\"0\"]',\n          ),\n        ).filter(\n          (element) =>\n            element.tabIndex >= 0 && element.getClientRects().length > 0,\n        );\n        const first = focusable[0];\n        const last = focusable.at(-1);\n        if (!first || !last) {\n          event.preventDefault();\n          this.focus();\n          return;\n        }\n        if (\n          event.shiftKey &&\n          (document.activeElement === first || document.activeElement === this)\n        ) {\n          event.preventDefault();\n          last.focus();\n        } else if (!event.shiftKey && document.activeElement === last) {\n          event.preventDefault();\n          first.focus();\n        }\n      },\n      { signal },\n    );\n    this.addEventListener(\n      \"click\",\n      (event) => {\n        if (\n          !event.defaultPrevented &&\n          event.target instanceof Element &&\n          event.target.closest(\"a[href]\") &&\n          this.matches(\":popover-open\")\n        )\n          this.hidePopover();\n      },\n      { signal },\n    );\n  }\n\n  #release() {\n    this.removeAttribute(\"data-open\");\n    for (const [element, inert] of this.#inert) element.inert = inert;\n    this.#inert.clear();\n    this.#trigger?.setAttribute(\"aria-expanded\", \"false\");\n  }\n\n  disconnectedCallback() {\n    this.#listeners?.abort();\n    this.#release();\n  }\n}\n\nclass CookbookHeaderLinks extends HTMLElement {\n  #listeners?: AbortController;\n  connectedCallback() {\n    this.#listeners?.abort();\n    this.#listeners = new AbortController();\n    const { signal } = this.#listeners;\n    const panel = this.querySelector<HTMLElement>(\"[popover]\");\n    const desktop = matchMedia(\"(min-width: 50rem)\");\n    const close = () => {\n      if (panel?.matches(\":popover-open\")) panel.hidePopover();\n    };\n    panel?.addEventListener(\n      \"toggle\",\n      () => {\n        if (panel.matches(\":popover-open\")) {\n          panel.getBoundingClientRect();\n          panel.setAttribute(\"data-open\", \"\");\n        } else {\n          panel.removeAttribute(\"data-open\");\n        }\n      },\n      { signal },\n    );\n    desktop.addEventListener(\n      \"change\",\n      () => {\n        if (desktop.matches) close();\n      },\n      { signal },\n    );\n    panel?.addEventListener(\n      \"click\",\n      (event) => {\n        if (event.target instanceof Element && event.target.closest(\"a[href]\"))\n          close();\n      },\n      { signal },\n    );\n  }\n  disconnectedCallback() {\n    this.#listeners?.abort();\n  }\n}\n\nif (!customElements.get(\"cookbook-sidebar-pane\"))\n  customElements.define(\"cookbook-sidebar-pane\", CookbookSidebarPane);\nif (!customElements.get(\"cookbook-header-links\"))\n  customElements.define(\"cookbook-header-links\", CookbookHeaderLinks);\n"],"mappings":"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"}

package/dist/client/search.js

@@ -52,7 +52,10 @@ function initializeSearch(element, options, development, base) {
 	const show = async () => {
 		if (dialog.open) return;
 		returnFocus = document.activeElement instanceof HTMLElement ? document.activeElement : open;
+		dialog.removeAttribute("data-open");
 		dialog.showModal();
+		dialog.getBoundingClientRect();
+		dialog.setAttribute("data-open", "");
 		document.body.setAttribute("data-search-modal-open", "");
 		if (!development && status) status.hidden = true;
 		try {
@@ -70,6 +73,7 @@ function initializeSearch(element, options, development, base) {
 		if (event.target.closest("a[href]") || !frame.contains(event.target)) dialog.close();
 	});
 	dialog.addEventListener("close", () => {
+		dialog.removeAttribute("data-open");
 		document.body.removeAttribute("data-search-modal-open");
 		returnFocus?.focus();
 	});

package/dist/client/search.js.map

@@ -1 +1 @@
-{"version":3,"file":"search.js","names":[],"sources":["../../src/client/search.ts"],"sourcesContent":["type SearchResult = { url: string; sub_results?: SearchResult[] };\ntype PagefindOptions = Record<string, unknown> & {\n  processResult?: (result: SearchResult) => SearchResult | void;\n};\n\n/** Own the dialog lifecycle; Pagefind owns indexing, filtering and result rendering. */\nexport function initializeSearch(\n  element: HTMLElement,\n  options: PagefindOptions,\n  development: boolean,\n  base: string,\n): void {\n  if (element.dataset.initialized) return;\n  element.dataset.initialized = \"true\";\n  const open = element.querySelector<HTMLButtonElement>(\"[data-open-modal]\")!;\n  const close = element.querySelector<HTMLButtonElement>(\"[data-close-modal]\")!;\n  const dialog = element.querySelector(\"dialog\")!;\n  const frame = element.querySelector(\".dialog-frame\")!;\n  const status = element.querySelector<HTMLElement>(\"[data-search-status]\");\n  const shortcut = open.querySelector(\"kbd\")!;\n  if (/(Mac|iPhone|iPod|iPad)/i.test(navigator.platform)) {\n    shortcut.querySelector(\"kbd\")!.textContent = \"⌘\";\n    open.setAttribute(\"aria-keyshortcuts\", \"Meta+K\");\n  }\n  delete shortcut.dataset.pending;\n  let initialized: Promise<void> | undefined;\n  let returnFocus: HTMLElement | null = null;\n  const initialize = () => {\n    if (development) return Promise.resolve();\n    return (initialized ??= (async () => {\n      // @ts-expect-error Pagefind publishes no declarations for its default UI.\n      const { PagefindUI } = await import(\"@pagefind/default-ui\");\n      const translations = JSON.parse(element.dataset.translations ?? \"{}\");\n      const format = (url: string) =>\n        element.hasAttribute(\"data-strip-trailing-slash\")\n          ? url.replace(/(.)\\/(#.*)?$/, \"$1$2\")\n          : url;\n      new PagefindUI({\n        ...options,\n        element: \"#cookbook__search\",\n        baseUrl: base,\n        bundlePath: `${base.replace(/\\/$/, \"\")}/pagefind/`,\n        showImages: false,\n        showSubResults: true,\n        translations,\n        processResult(result: SearchResult) {\n          result = options.processResult?.(result) ?? result;\n          result.url = format(result.url);\n          result.sub_results?.forEach((child) => {\n            child.url = format(child.url);\n          });\n          return result;\n        },\n      });\n    })().catch((error: unknown) => {\n      initialized = undefined;\n      if (status) {\n        status.hidden = false;\n        // Reuse the localized Pagefind error, with a plain fallback.\n        const translations = JSON.parse(element.dataset.translations ?? \"{}\");\n        status.textContent =\n          translations.error ?? \"Search could not load. Close and try again.\";\n      }\n      throw error;\n    }));\n  };\n  const show = async () => {\n    if (dialog.open) return;\n    returnFocus =\n      document.activeElement instanceof HTMLElement\n        ? document.activeElement\n        : open;\n    dialog.showModal();\n    document.body.setAttribute(\"data-search-modal-open\", \"\");\n    if (!development && status) status.hidden = true;\n    try {\n      await initialize();\n      // Pagefind mounts synchronously. Only focus if the user has not closed it.\n      if (dialog.open) element.querySelector(\"input\")?.focus();\n    } catch {\n      /* Keep the close control usable when the search bundle fails. */\n    }\n  };\n  open.addEventListener(\"click\", () => {\n    void show();\n  });\n  open.disabled = false;\n  close.addEventListener(\"click\", () => dialog.close());\n  dialog.addEventListener(\"click\", (event) => {\n    if (!(event.target instanceof Element)) return;\n    if (event.target.closest(\"a[href]\") || !frame.contains(event.target))\n      dialog.close();\n  });\n  dialog.addEventListener(\"close\", () => {\n    document.body.removeAttribute(\"data-search-modal-open\");\n    returnFocus?.focus();\n  });\n  window.addEventListener(\"keydown\", (event) => {\n    if ((event.metaKey || event.ctrlKey) && event.key.toLowerCase() === \"k\") {\n      event.preventDefault();\n      if (dialog.open) dialog.close();\n      else void show();\n    }\n  });\n}\n"],"mappings":";;AAMA,SAAgB,iBACd,SACA,SACA,aACA,MACM;CACN,IAAI,QAAQ,QAAQ,aAAa;CACjC,QAAQ,QAAQ,cAAc;CAC9B,MAAM,OAAO,QAAQ,cAAiC,mBAAmB;CACzE,MAAM,QAAQ,QAAQ,cAAiC,oBAAoB;CAC3E,MAAM,SAAS,QAAQ,cAAc,QAAQ;CAC7C,MAAM,QAAQ,QAAQ,cAAc,eAAe;CACnD,MAAM,SAAS,QAAQ,cAA2B,sBAAsB;CACxE,MAAM,WAAW,KAAK,cAAc,KAAK;CACzC,IAAI,0BAA0B,KAAK,UAAU,QAAQ,GAAG;EACtD,SAAS,cAAc,KAAK,CAAC,CAAE,cAAc;EAC7C,KAAK,aAAa,qBAAqB,QAAQ;CACjD;CACA,OAAO,SAAS,QAAQ;CACxB,IAAI;CACJ,IAAI,cAAkC;CACtC,MAAM,mBAAmB;EACvB,IAAI,aAAa,OAAO,QAAQ,QAAQ;EACxC,OAAQ,iBAAiB,YAAY;GAEnC,MAAM,EAAE,eAAe,MAAM,OAAO;GACpC,MAAM,eAAe,KAAK,MAAM,QAAQ,QAAQ,gBAAgB,IAAI;GACpE,MAAM,UAAU,QACd,QAAQ,aAAa,2BAA2B,IAC5C,IAAI,QAAQ,gBAAgB,MAAM,IAClC;GACN,IAAI,WAAW;IACb,GAAG;IACH,SAAS;IACT,SAAS;IACT,YAAY,GAAG,KAAK,QAAQ,OAAO,EAAE,EAAE;IACvC,YAAY;IACZ,gBAAgB;IAChB;IACA,cAAc,QAAsB;KAClC,SAAS,QAAQ,gBAAgB,MAAM,KAAK;KAC5C,OAAO,MAAM,OAAO,OAAO,GAAG;KAC9B,OAAO,aAAa,SAAS,UAAU;MACrC,MAAM,MAAM,OAAO,MAAM,GAAG;KAC9B,CAAC;KACD,OAAO;IACT;GACF,CAAC;EACH,EAAA,CAAG,CAAC,CAAC,OAAO,UAAmB;GAC7B,cAAc,KAAA;GACd,IAAI,QAAQ;IACV,OAAO,SAAS;IAEhB,MAAM,eAAe,KAAK,MAAM,QAAQ,QAAQ,gBAAgB,IAAI;IACpE,OAAO,cACL,aAAa,SAAS;GAC1B;GACA,MAAM;EACR,CAAC;CACH;CACA,MAAM,OAAO,YAAY;EACvB,IAAI,OAAO,MAAM;EACjB,cACE,SAAS,yBAAyB,cAC9B,SAAS,gBACT;EACN,OAAO,UAAU;EACjB,SAAS,KAAK,aAAa,0BAA0B,EAAE;EACvD,IAAI,CAAC,eAAe,QAAQ,OAAO,SAAS;EAC5C,IAAI;GACF,MAAM,WAAW;GAEjB,IAAI,OAAO,MAAM,QAAQ,cAAc,OAAO,CAAC,EAAE,MAAM;EACzD,QAAQ,CAER;CACF;CACA,KAAK,iBAAiB,eAAe;EACnC,KAAU;CACZ,CAAC;CACD,KAAK,WAAW;CAChB,MAAM,iBAAiB,eAAe,OAAO,MAAM,CAAC;CACpD,OAAO,iBAAiB,UAAU,UAAU;EAC1C,IAAI,EAAE,MAAM,kBAAkB,UAAU;EACxC,IAAI,MAAM,OAAO,QAAQ,SAAS,KAAK,CAAC,MAAM,SAAS,MAAM,MAAM,GACjE,OAAO,MAAM;CACjB,CAAC;CACD,OAAO,iBAAiB,eAAe;EACrC,SAAS,KAAK,gBAAgB,wBAAwB;EACtD,aAAa,MAAM;CACrB,CAAC;CACD,OAAO,iBAAiB,YAAY,UAAU;EAC5C,KAAK,MAAM,WAAW,MAAM,YAAY,MAAM,IAAI,YAAY,MAAM,KAAK;GACvE,MAAM,eAAe;GACrB,IAAI,OAAO,MAAM,OAAO,MAAM;QACzB,KAAU;EACjB;CACF,CAAC;AACH"}
+{"version":3,"file":"search.js","names":[],"sources":["../../src/client/search.ts"],"sourcesContent":["type SearchResult = { url: string; sub_results?: SearchResult[] };\ntype PagefindOptions = Record<string, unknown> & {\n  processResult?: (result: SearchResult) => SearchResult | void;\n};\n\n/** Own the dialog lifecycle; Pagefind owns indexing, filtering and result rendering. */\nexport function initializeSearch(\n  element: HTMLElement,\n  options: PagefindOptions,\n  development: boolean,\n  base: string,\n): void {\n  if (element.dataset.initialized) return;\n  element.dataset.initialized = \"true\";\n  const open = element.querySelector<HTMLButtonElement>(\"[data-open-modal]\")!;\n  const close = element.querySelector<HTMLButtonElement>(\"[data-close-modal]\")!;\n  const dialog = element.querySelector(\"dialog\")!;\n  const frame = element.querySelector(\".dialog-frame\")!;\n  const status = element.querySelector<HTMLElement>(\"[data-search-status]\");\n  const shortcut = open.querySelector(\"kbd\")!;\n  if (/(Mac|iPhone|iPod|iPad)/i.test(navigator.platform)) {\n    shortcut.querySelector(\"kbd\")!.textContent = \"⌘\";\n    open.setAttribute(\"aria-keyshortcuts\", \"Meta+K\");\n  }\n  delete shortcut.dataset.pending;\n  let initialized: Promise<void> | undefined;\n  let returnFocus: HTMLElement | null = null;\n  const initialize = () => {\n    if (development) return Promise.resolve();\n    return (initialized ??= (async () => {\n      // @ts-expect-error Pagefind publishes no declarations for its default UI.\n      const { PagefindUI } = await import(\"@pagefind/default-ui\");\n      const translations = JSON.parse(element.dataset.translations ?? \"{}\");\n      const format = (url: string) =>\n        element.hasAttribute(\"data-strip-trailing-slash\")\n          ? url.replace(/(.)\\/(#.*)?$/, \"$1$2\")\n          : url;\n      new PagefindUI({\n        ...options,\n        element: \"#cookbook__search\",\n        baseUrl: base,\n        bundlePath: `${base.replace(/\\/$/, \"\")}/pagefind/`,\n        showImages: false,\n        showSubResults: true,\n        translations,\n        processResult(result: SearchResult) {\n          result = options.processResult?.(result) ?? result;\n          result.url = format(result.url);\n          result.sub_results?.forEach((child) => {\n            child.url = format(child.url);\n          });\n          return result;\n        },\n      });\n    })().catch((error: unknown) => {\n      initialized = undefined;\n      if (status) {\n        status.hidden = false;\n        // Reuse the localized Pagefind error, with a plain fallback.\n        const translations = JSON.parse(element.dataset.translations ?? \"{}\");\n        status.textContent =\n          translations.error ?? \"Search could not load. Close and try again.\";\n      }\n      throw error;\n    }));\n  };\n  const show = async () => {\n    if (dialog.open) return;\n    returnFocus =\n      document.activeElement instanceof HTMLElement\n        ? document.activeElement\n        : open;\n    dialog.removeAttribute(\"data-open\");\n    dialog.showModal();\n    // Establish the initial state after entering the top layer. The global\n    // style renderer does not preserve @starting-style in server output.\n    dialog.getBoundingClientRect();\n    dialog.setAttribute(\"data-open\", \"\");\n    document.body.setAttribute(\"data-search-modal-open\", \"\");\n    if (!development && status) status.hidden = true;\n    try {\n      await initialize();\n      // Pagefind mounts synchronously. Only focus if the user has not closed it.\n      if (dialog.open) element.querySelector(\"input\")?.focus();\n    } catch {\n      /* Keep the close control usable when the search bundle fails. */\n    }\n  };\n  open.addEventListener(\"click\", () => {\n    void show();\n  });\n  open.disabled = false;\n  close.addEventListener(\"click\", () => dialog.close());\n  dialog.addEventListener(\"click\", (event) => {\n    if (!(event.target instanceof Element)) return;\n    if (event.target.closest(\"a[href]\") || !frame.contains(event.target))\n      dialog.close();\n  });\n  dialog.addEventListener(\"close\", () => {\n    dialog.removeAttribute(\"data-open\");\n    document.body.removeAttribute(\"data-search-modal-open\");\n    returnFocus?.focus();\n  });\n  window.addEventListener(\"keydown\", (event) => {\n    if ((event.metaKey || event.ctrlKey) && event.key.toLowerCase() === \"k\") {\n      event.preventDefault();\n      if (dialog.open) dialog.close();\n      else void show();\n    }\n  });\n}\n"],"mappings":";;AAMA,SAAgB,iBACd,SACA,SACA,aACA,MACM;CACN,IAAI,QAAQ,QAAQ,aAAa;CACjC,QAAQ,QAAQ,cAAc;CAC9B,MAAM,OAAO,QAAQ,cAAiC,mBAAmB;CACzE,MAAM,QAAQ,QAAQ,cAAiC,oBAAoB;CAC3E,MAAM,SAAS,QAAQ,cAAc,QAAQ;CAC7C,MAAM,QAAQ,QAAQ,cAAc,eAAe;CACnD,MAAM,SAAS,QAAQ,cAA2B,sBAAsB;CACxE,MAAM,WAAW,KAAK,cAAc,KAAK;CACzC,IAAI,0BAA0B,KAAK,UAAU,QAAQ,GAAG;EACtD,SAAS,cAAc,KAAK,CAAC,CAAE,cAAc;EAC7C,KAAK,aAAa,qBAAqB,QAAQ;CACjD;CACA,OAAO,SAAS,QAAQ;CACxB,IAAI;CACJ,IAAI,cAAkC;CACtC,MAAM,mBAAmB;EACvB,IAAI,aAAa,OAAO,QAAQ,QAAQ;EACxC,OAAQ,iBAAiB,YAAY;GAEnC,MAAM,EAAE,eAAe,MAAM,OAAO;GACpC,MAAM,eAAe,KAAK,MAAM,QAAQ,QAAQ,gBAAgB,IAAI;GACpE,MAAM,UAAU,QACd,QAAQ,aAAa,2BAA2B,IAC5C,IAAI,QAAQ,gBAAgB,MAAM,IAClC;GACN,IAAI,WAAW;IACb,GAAG;IACH,SAAS;IACT,SAAS;IACT,YAAY,GAAG,KAAK,QAAQ,OAAO,EAAE,EAAE;IACvC,YAAY;IACZ,gBAAgB;IAChB;IACA,cAAc,QAAsB;KAClC,SAAS,QAAQ,gBAAgB,MAAM,KAAK;KAC5C,OAAO,MAAM,OAAO,OAAO,GAAG;KAC9B,OAAO,aAAa,SAAS,UAAU;MACrC,MAAM,MAAM,OAAO,MAAM,GAAG;KAC9B,CAAC;KACD,OAAO;IACT;GACF,CAAC;EACH,EAAA,CAAG,CAAC,CAAC,OAAO,UAAmB;GAC7B,cAAc,KAAA;GACd,IAAI,QAAQ;IACV,OAAO,SAAS;IAEhB,MAAM,eAAe,KAAK,MAAM,QAAQ,QAAQ,gBAAgB,IAAI;IACpE,OAAO,cACL,aAAa,SAAS;GAC1B;GACA,MAAM;EACR,CAAC;CACH;CACA,MAAM,OAAO,YAAY;EACvB,IAAI,OAAO,MAAM;EACjB,cACE,SAAS,yBAAyB,cAC9B,SAAS,gBACT;EACN,OAAO,gBAAgB,WAAW;EAClC,OAAO,UAAU;EAGjB,OAAO,sBAAsB;EAC7B,OAAO,aAAa,aAAa,EAAE;EACnC,SAAS,KAAK,aAAa,0BAA0B,EAAE;EACvD,IAAI,CAAC,eAAe,QAAQ,OAAO,SAAS;EAC5C,IAAI;GACF,MAAM,WAAW;GAEjB,IAAI,OAAO,MAAM,QAAQ,cAAc,OAAO,CAAC,EAAE,MAAM;EACzD,QAAQ,CAER;CACF;CACA,KAAK,iBAAiB,eAAe;EACnC,KAAU;CACZ,CAAC;CACD,KAAK,WAAW;CAChB,MAAM,iBAAiB,eAAe,OAAO,MAAM,CAAC;CACpD,OAAO,iBAAiB,UAAU,UAAU;EAC1C,IAAI,EAAE,MAAM,kBAAkB,UAAU;EACxC,IAAI,MAAM,OAAO,QAAQ,SAAS,KAAK,CAAC,MAAM,SAAS,MAAM,MAAM,GACjE,OAAO,MAAM;CACjB,CAAC;CACD,OAAO,iBAAiB,eAAe;EACrC,OAAO,gBAAgB,WAAW;EAClC,SAAS,KAAK,gBAAgB,wBAAwB;EACtD,aAAa,MAAM;CACrB,CAAC;CACD,OAAO,iBAAiB,YAAY,UAAU;EAC5C,KAAK,MAAM,WAAW,MAAM,YAAY,MAAM,IAAI,YAAY,MAAM,KAAK;GACvE,MAAM,eAAe;GACrB,IAAI,OAAO,MAAM,OAAO,MAAM;QACzB,KAAU;EACjB;CACF,CAAC;AACH"}

package/dist/components/GlobalStyles.js

@@ -40,7 +40,7 @@ export default function GlobalStyles() {
       colorScheme: "dark",
       "$docs-nav-height": {
         "": "4.5rem",
-        ":has(.td-top-tabs)": "7rem",
+        ":has(.td-top-tabs)": "7.25rem",
         "@mobile": "3.5rem",
         "@mobile & [data-has-sidebar]": "6.5rem",
       },
@@ -313,6 +313,7 @@ export default function GlobalStyles() {
     "site-search",
     resolveComponentStyles("Search", {
       display: "contents",
+      "$dialog-transition": "120ms",
       Status: {
         $: "[data-search-status]",
         margin: "auto",
@@ -323,7 +324,7 @@ export default function GlobalStyles() {
       Dialog: {
         $: "dialog",
         radius: { "": "$card-radius", "@mobile": "0" },
-        inlineSize: { "": "90% max 40rem", "@mobile": "100% max 100%" },
+        inlineSize: { "": "0 90% 40rem", "@mobile": "100%" },
         blockSize: { "": "max-content", "@mobile": "100%" },
         maxBlockSize: { "": "(100% - 8rem)", "@mobile": "100%" },
         minBlockSize: { "": "15rem", "@mobile": "100%" },
@@ -333,6 +334,13 @@ export default function GlobalStyles() {
         border: true,
         fill: "#surface",
         shadow: "0 1rem 3rem #shadow",
+        opacity: "0",
+        scale: { "": "0.98", "@mobile": "1" },
+        transition: {
+          "": "none",
+          "!@reduced-motion":
+            "opacity $dialog-transition ease-out, scale $dialog-transition ease-out, display $dialog-transition allow-discrete, overlay $dialog-transition allow-discrete",
+        },
       },
       CloseIcon: {
         $: "button[data-close-modal]::before",
@@ -347,46 +355,58 @@ export default function GlobalStyles() {
         mask: `url("${svgIconUrl(closeIcon)}") center / contain no-repeat`,
       },
       OpenDialog: { $: "dialog[open]", display: "flex" },
+      EnteredDialog: {
+        $: "dialog[open][data-open]",
+        opacity: "1",
+        scale: "1",
+      },
       Backdrop: {
         $: "dialog::backdrop",
         fill: "#overlay",
         backdropFilter: "blur(0.25rem)",
+        opacity: "0",
+        transition: {
+          "": "none",
+          "!@reduced-motion":
+            "opacity $dialog-transition ease-out, display $dialog-transition allow-discrete, overlay $dialog-transition allow-discrete",
+        },
+      },
+      EnteredBackdrop: {
+        $: "dialog[open][data-open]::backdrop",
+        opacity: "1",
       },
       Frame: {
         $: ".dialog-frame",
-        position: "relative",
         display: "flex",
         flow: "column",
         flexGrow: "1",
+        minBlockSize: "0",
         gap: "($gap * 2)",
-        padding: { "": "($gap * 3)", "@mobile": "($gap * 2)" },
-        overflow: "auto",
+        padding: { "": "($gap * 3)", "@mobile": "($gap * 2) ($gap * 2) 0" },
+        overflow: "hidden",
       },
       Container: {
         $: ".search-container",
+        display: "flex",
+        flow: "column",
+        flexGrow: "1",
         inlineSize: "100%",
-        paddingBlockStart: { "": "0", "@mobile": "4rem" },
+        minBlockSize: "0",
       },
       Close: {
         $: "button[data-close-modal]",
-        position: "absolute",
-        zIndex: "1",
-        insetBlockStart: "($gap * 2)",
-        insetInlineEnd: "($gap * 2)",
-        display: { "": "none", "@mobile": "flex" },
-        alignItems: "center",
-        justifyContent: "center",
-        gap: "0.375rem",
-        blockSize: "3rem",
-        minBlockSize: "3rem",
-        paddingInlineStart: "0.625rem",
-        paddingInlineEnd: "0.625rem",
+        display: { "": "none", "@mobile": "grid" },
+        placeItems: "center",
+        alignSelf: "flex-end",
+        flexShrink: "0",
+        inlineSize: "$docs-menu-button-size",
+        blockSize: "$docs-menu-button-size",
+        minBlockSize: "$docs-menu-button-size",
+        padding: "0",
         color: "#text-soft",
-        border: true,
-        borderColor: "#border",
-        radius: "$radius",
-        fill: "#surface-3",
-        preset: "small / strong",
+        border: "0",
+        radius: "$header-control-radius",
+        fill: "#clear",
         boxShadow: "none",
         cursor: "pointer",
         transition: "color $transition, background-color $transition",
@@ -394,12 +414,12 @@ export default function GlobalStyles() {
       HoverClose: {
         $: "button[data-close-modal]:hover",
         color: "#text",
-        fill: "#surface-3-hover",
+        fill: "#surface-2-hover",
       },
       ActiveClose: {
         $: "button[data-close-modal]:active",
         color: "#text",
-        fill: "#surface-3-pressed",
+        fill: "#surface-2-pressed",
       },
     }),
   );
@@ -600,7 +620,7 @@ export default function GlobalStyles() {
         minBlockSize: "100%",
         inlinePadding: "$docs-sidebar-pad-x",
         gap: "($gap * 2)",
-        paddingBlockStart: "($gap * 2)",
+        paddingBlockStart: { "": "($gap * 3)", "@mobile": "($gap * 2)" },
         paddingBlockEnd: "($gap * 6)",
       },
       Tree: { $: "cookbook-sidebar", display: "block" },
@@ -723,7 +743,7 @@ export default function GlobalStyles() {
       },
       TopLevelLink: {
         $: 'a.large:not([aria-current="page"])',
-        color: "#text",
+        color: "#sidebar-text",
         preset: "navigation",
       },
     }),
@@ -734,7 +754,7 @@ export default function GlobalStyles() {
     resolveComponentStyles("TableOfContents", {
       display: "block",
       hide: { "": false, "@narrow-layout": true },
-      paddingBlockStart: "($gap * 3)",
+      paddingBlockStart: "($gap * 4)",
       paddingInlineStart: "$docs-sidebar-pad-x",
       paddingInlineEnd: "$docs-sidebar-pad-x",
       Heading: {
@@ -1367,6 +1387,10 @@ export default function GlobalStyles() {
       gap: "$gap",
       inlineSize: { "": "100%", "@mobile": "$docs-menu-button-size" },
       maxInlineSize: "22rem",
+      marginInlineStart: {
+        "": "0",
+        "@media(w >= 80rem)": "min(5rem, max(0px, calc(100% - 22rem)))",
+      },
       blockSize: { "": "$control-height", "@mobile": "$docs-menu-button-size" },
       minBlockSize: "0",
       padding: { "": "0 $gap 0 ($gap * 1.5)", "@mobile": "0" },
@@ -1454,6 +1478,10 @@ export default function GlobalStyles() {
   useGlobalStyles(
     "#cookbook__search",
     resolveComponentStyles("SearchResults", {
+      display: "flex",
+      flow: "column",
+      flexGrow: "1",
+      minBlockSize: "0",
       "$pagefind-ui-primary": "#accent-text",
       "$pagefind-ui-text": "#text-soft",
       "$pagefind-ui-background": "#surface",
@@ -1461,9 +1489,31 @@ export default function GlobalStyles() {
       "$pagefind-ui-border-width": "$border-width",
       "$pagefind-ui-tag": "#surface-3",
       preset: "body",
-      Form: { $: ".pagefind-ui__form", position: "relative" },
+      UI: {
+        $: ".pagefind-ui",
+        display: "flex",
+        flow: "column",
+        flexGrow: "1",
+        minBlockSize: "0",
+      },
+      Form: {
+        $: ".pagefind-ui__form",
+        position: "relative",
+        display: "flex",
+        flow: "column",
+        flexGrow: "1",
+        minBlockSize: "0",
+      },
+      Drawer: {
+        $: ".pagefind-ui__drawer",
+        display: "flex",
+        flow: "column",
+        flexGrow: "1",
+        minBlockSize: "0",
+      },
       Input: {
         $: ".pagefind-ui__search-input",
+        flexShrink: "0",
         inlineSize: "100%",
         minBlockSize: "3rem",
         paddingInlineStart: "2.75rem",
@@ -1494,7 +1544,15 @@ export default function GlobalStyles() {
       },
       Results: {
         $: ".pagefind-ui__results-area",
-        marginBlockStart: "($gap * 3)",
+        flexGrow: "1",
+        minBlockSize: "0",
+        overflowY: "auto",
+        marginBlockStart: { "": "($gap * 3)", "@mobile": "($gap * 2)" },
+        borderBlockStart: "$border-width solid #border",
+        inlineSize: { "@mobile": "(100% + ($gap * 4))" },
+        inlineMargin: { "@mobile": "(-1 * $gap * 2)" },
+        inlinePadding: { "@mobile": "($gap * 2)" },
+        paddingBlockEnd: { "@mobile": "($gap * 2)" },
       },
       Result: {
         $: ".pagefind-ui__result",
@@ -1544,6 +1602,9 @@ export default function GlobalStyles() {
       },
       More: {
         $: ".pagefind-ui__button",
+        display: { "@mobile": "block" },
+        inlineSize: { "@mobile": "max-content" },
+        marginInlineStart: { "@mobile": "auto" },
         padding: "1x 2x",
         border: true,
         radius: "$radius",

package/dist/components/LayoutComponents.js

@@ -182,7 +182,7 @@ export const TopNavigationRoot = customizeComponent(
       alignItems: "stretch",
       gap: "clamp(1.25rem, 2.5vw, 2.5rem)",
       inlineSize: "100%",
-      blockSize: "min 2.5rem",
+      blockSize: "min 2.75rem",
       blockBorder: "1bw solid #border start",
       overflowX: "auto",
       scrollbar: "none",
@@ -196,7 +196,7 @@ export const TopNavigationRoot = customizeComponent(
         flexGrow: "0",
         flexShrink: "0",
         flexBasis: "auto",
-        blockPadding: "($gap * 0.75) start, $gap end",
+        blockPadding: "($gap * 1.25) start, $gap end",
         color: "#text-soft",
         preset: "navigation",
         textDecoration: "none",
@@ -674,6 +674,7 @@ export const HeaderLinksRoot = customizeComponent(
       display: "flex",
       flexShrink: "0",
       order: { "": "0", "@mobile": "2" },
+      "$popover-transition": "120ms",
       Desktop: {
         $: ".td-header-links__desktop",
         display: "flex",
@@ -742,6 +743,19 @@ export const HeaderLinksRoot = customizeComponent(
         border: true,
         radius: "$card-radius",
         shadow: "0 0.75rem 2rem #shadow",
+        opacity: "0",
+        scale: "1 0.96",
+        transformOrigin: "top right",
+        transition: {
+          "": "none",
+          "!@reduced-motion":
+            "opacity $popover-transition ease-out, scale $popover-transition ease-out, display $popover-transition allow-discrete, overlay $popover-transition allow-discrete",
+        },
+      },
+      OpenPanel: {
+        $: ".td-header-links__panel:popover-open[data-open]",
+        opacity: "1",
+        scale: "1",
       },
       PanelNavigation: {
         $: ".td-header-links__panel nav",

package/dist/index.js

@@ -175,6 +175,17 @@ function assertTastyOutput(html, path) {
 	visit(tree);
 }
 //#endregion
+//#region src/pagefind-adapter.ts
+/** Pagefind's text clear button measures itself and writes inline padding.
+* Cookbook renders an icon and owns the reserved space in SearchResults.Input.
+* Fail on an upstream change so a dependency upgrade cannot silently restore it.
+*/
+function adaptPagefindUI(source) {
+	const assignment = /input_el\.style\.paddingRight = `\$\{width \+ 2\}px`/g;
+	if ([...source.matchAll(assignment)].length !== 1) throw new Error("Pagefind's UI sizing changed. Update Cookbook's Tasty adapter before upgrading @pagefind/default-ui.");
+	return source.replace(assignment, "undefined");
+}
+//#endregion
 //#region src/markdown/rehype-mermaid.ts
 const sourceStyleDirective = /^\s*(?:classDef|style|linkStyle)\s+.*$/gim;
 const accessibilityDirective = /^\s*acc(?:Title|Descr):\s*.*$/gim;
@@ -1263,12 +1274,21 @@ function configuredCookbook(options) {
 						shikiConfig: cookbookShikiConfig(context.config.markdown.shikiConfig)
 					},
 					vite: {
+						optimizeDeps: { exclude: ["@pagefind/default-ui"] },
 						ssr: { external: [
 							"@tenphi/docs",
 							"react",
 							"react-dom"
 						] },
 						plugins: [
+							{
+								name: "cookbook-pagefind-ui",
+								enforce: "pre",
+								transform(source, id) {
+									const modulePath = id.replaceAll("\\", "/").replace(/\?.*$/, "");
+									if (modulePath.includes("/@pagefind/default-ui/npm_dist/") && /\/ui-core\.(?:mjs|cjs)$/.test(modulePath)) return adaptPagefindUI(source);
+								}
+							},
 							{
 								name: "cookbook-server-only-styling",
 								enforce: "pre",