diff --git a/scripts/docs-site/assets.mjs b/scripts/docs-site/assets.mjs index 15b367a57c..ecf7d96c64 100644 --- a/scripts/docs-site/assets.mjs +++ b/scripts/docs-site/assets.mjs @@ -65,6 +65,34 @@ ${designSystemCss} .language-option{grid-template-columns:24px minmax(0,1fr) 18px;gap:var(--oc-space-2);padding:var(--oc-space-2) 10px;border-radius:var(--oc-radius-control);font-size:var(--oc-font-size-md);line-height:1.15} .language-check{font-size:16px} @media(max-width:820px){.language-menu{width:min(300px,calc(100vw - 28px));max-height:min(62vh,430px)}.language-native{display:block;position:absolute;inset:0;width:100%;height:100%;margin:0;padding:0;border:0;opacity:0;font-size:16px;z-index:2;cursor:pointer;-webkit-appearance:none;appearance:none}} +.sidebar-head,.mobile-section-switcher,.sidebar-section-label{display:none} +@media(max-width:820px){ + .header-row{position:relative;grid-template-columns:auto minmax(0,1fr) auto} + .header-left{position:absolute;grid-area:auto;top:30px;left:50%;width:max-content;transform:translate(-50%,-50%)} + .brand-tag,.header-links .top-icon-link{display:none} + .theme-toggle{border:0!important;background:transparent!important} + .sidebar{height:100vh;height:100dvh;max-height:100vh;max-height:100dvh;padding:0 18px 28px} + .sidebar-head{position:sticky;top:0;z-index:2;display:flex;align-items:center;justify-content:space-between;min-height:64px;margin:0 -2px 14px;padding:10px 2px;border-bottom:1px solid var(--line);background:color-mix(in srgb,var(--bg) 94%,transparent);backdrop-filter:blur(16px)} + .sidebar-head>strong{color:var(--ink);font:720 var(--oc-font-size-base)/1.2 var(--oc-font-body)} + .sidebar-close{display:inline-grid;place-items:center;width:40px;height:40px;margin:0;padding:0;border:1px solid var(--line-strong);border-radius:var(--oc-radius-control);background:var(--paper);color:var(--muted);cursor:pointer;transition:color var(--oc-duration-fast) var(--oc-ease-out),border-color var(--oc-duration-fast) var(--oc-ease-out),background var(--oc-duration-fast) var(--oc-ease-out)} + .sidebar-close:hover,.sidebar-close:focus-visible{border-color:color-mix(in srgb,var(--brand) 44%,var(--line-strong));background:var(--paper-2);color:var(--ink);outline:0} + .sidebar-close .icon{width:18px;height:18px} + .mobile-section-switcher{display:block;margin:0 0 24px} + .mobile-section-switcher summary{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:12px;min-height:56px;padding:9px 12px;border:1px solid var(--line-strong);border-radius:var(--oc-radius-control);background:color-mix(in srgb,var(--paper) 72%,transparent);cursor:pointer;list-style:none;transition:background var(--oc-duration-fast) var(--oc-ease-out),border-color var(--oc-duration-fast) var(--oc-ease-out)} + .mobile-section-switcher summary::-webkit-details-marker{display:none} + .mobile-section-switcher summary:hover,.mobile-section-switcher summary:focus-visible{border-color:color-mix(in srgb,var(--brand) 44%,var(--line-strong));background:var(--paper-2);outline:0} + .mobile-section-copy{display:grid;gap:2px;min-width:0} + .mobile-section-label{color:var(--muted);font:750 10px/1.2 var(--oc-font-mono);letter-spacing:.08em;text-transform:uppercase} + .mobile-section-copy>strong{overflow:hidden;color:var(--ink);font:700 var(--oc-font-size-base)/1.25 var(--oc-font-body);text-overflow:ellipsis;white-space:nowrap} + .mobile-section-chevron{display:grid;place-items:center;color:var(--muted);transition:transform var(--oc-duration-fast) var(--oc-ease-out),color var(--oc-duration-fast) var(--oc-ease-out)} + .mobile-section-switcher[open] .mobile-section-chevron{transform:rotate(180deg);color:var(--brand)} + .mobile-tabs{display:none} + .mobile-section-switcher[open] .mobile-tabs{display:grid;gap:2px;max-height:min(56vh,500px);margin:8px 0 0;padding:6px;overflow:auto;overscroll-behavior:contain;border:1px solid var(--line-strong);border-radius:var(--oc-radius-control);background:color-mix(in srgb,var(--paper) 88%,var(--bg) 12%);box-shadow:var(--oc-shadow-md)} + .mobile-tab-link{display:flex;align-items:center;min-width:0;min-height:40px;padding:9px 10px;border-radius:var(--oc-radius-control);color:var(--text);font:650 var(--oc-font-size-sm)/1.3 var(--oc-font-body);overflow-wrap:anywhere;transition:background var(--oc-duration-fast) var(--oc-ease-out),color var(--oc-duration-fast) var(--oc-ease-out)} + .mobile-tab-link:hover,.mobile-tab-link:focus-visible{background:var(--paper-2);color:var(--ink);outline:0} + .mobile-tab-link.active{background:var(--soft);color:var(--brand)} + .sidebar-section-label{display:block;margin:0 0 14px;color:var(--muted);font:750 var(--oc-font-size-xs)/1.2 var(--oc-font-mono);letter-spacing:.08em;text-transform:uppercase} +} @media(max-width:640px){.sidebar{width:100vw;border-right:0}} .site-footer{border-top:1px solid var(--line);margin-top:var(--oc-space-5)} .site-footer-inner{max-width:1780px;margin:0 auto;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--oc-space-3) var(--oc-space-5);padding:26px 200px 26px 56px;color:var(--muted);font:500 var(--oc-font-size-xs)/1.6 var(--oc-font-mono)} @@ -97,7 +125,7 @@ function updateSidebarFade(){const sidebar=document.querySelector(".sidebar");if function scrollActiveNavLink(){const sidebar=document.querySelector(".sidebar");const active=sidebar?.querySelector(".nav-link.active");if(!sidebar||!active){updateSidebarFade();return}const target=active.offsetTop-sidebar.clientHeight/2+active.offsetHeight/2;const max=sidebar.scrollHeight-sidebar.clientHeight;sidebar.scrollTop=Math.max(0,Math.min(max,target));updateSidebarFade()} function syncSidebar(nextDoc){const current=document.querySelector(".sidebar");const incoming=nextDoc.querySelector(".sidebar");if(!current||!incoming)return;const scroll=current.scrollTop;if(sameSidebarLinks(current,incoming)){const nextLinks=[...incoming.querySelectorAll("a")];current.querySelectorAll("a").forEach((link,i)=>link.className=nextLinks[i]?.className||link.className);current.scrollTop=scroll}else{current.replaceWith(incoming)}scrollActiveNavLink()} const compactTocQuery=matchMedia("(max-width:1120px)");function syncStickyHeaderOffset(){const header=document.querySelector(".site-header");const height=Math.ceil(header?.getBoundingClientRect().height||0);if(height)root.style.setProperty("--sticky-header-h",height+"px")}function syncTocDisclosure(){const visible=Math.max(scrollY,document.scrollingElement?.scrollTop||0)>8;document.querySelectorAll(".toc").forEach(toc=>{if(compactTocQuery.matches){if(!toc.dataset.compactTocReady){toc.open=false;toc.dataset.compactTocReady="true"}toc.classList.toggle("is-visible",visible)}else{toc.open=true;toc.classList.remove("is-visible");delete toc.dataset.compactTocReady}})} -function setNavOpen(open){document.body.classList.toggle("nav-open",open);const sidebar=document.querySelector(".sidebar");const toggle=document.querySelector("[data-nav-toggle]");sidebar?.classList.toggle("open",open);toggle?.setAttribute("aria-expanded",String(open))} +function setNavOpen(open){document.body.classList.toggle("nav-open",open);const sidebar=document.querySelector(".sidebar");const toggle=document.querySelector("[data-nav-toggle]");sidebar?.classList.toggle("open",open);toggle?.setAttribute("aria-expanded",String(open));if(open){sidebar?.scrollTo({top:0});requestAnimationFrame(()=>sidebar?.querySelector("[data-nav-close]")?.focus())}else if(sidebar?.contains(document.activeElement)){toggle?.focus()}} function swap(selector,nextDoc){const current=document.querySelector(selector);const incoming=nextDoc.querySelector(selector);if(current&&incoming)current.replaceWith(incoming)} function placeTabUnderline(animate){const tabs=document.querySelector(".tabs");if(!tabs)return;const underline=tabs.querySelector(".tab-underline");const active=tabs.querySelector(".tab-link.active");if(!underline)return;if(!active){tabs.classList.remove("is-ready");underline.style.setProperty("--tu-w","0px");return}if(!animate)underline.classList.add("no-transition");underline.style.setProperty("--tu-x",active.offsetLeft+"px");underline.style.setProperty("--tu-w",active.offsetWidth+"px");tabs.classList.add("is-ready");if(!animate)requestAnimationFrame(()=>requestAnimationFrame(()=>underline.classList.remove("no-transition")))} function swapTabs(nextDoc){const current=document.querySelector(".tabs");const incoming=nextDoc.querySelector(".tabs");if(!current||!incoming)return;const oldUnderline=current.querySelector(".tab-underline");const oldX=oldUnderline?.style.getPropertyValue("--tu-x");const oldW=oldUnderline?.style.getPropertyValue("--tu-w");const wasReady=current.classList.contains("is-ready");current.replaceWith(incoming);const newUnderline=incoming.querySelector(".tab-underline");if(newUnderline&&oldX&&oldW&&wasReady){newUnderline.classList.add("no-transition");newUnderline.style.setProperty("--tu-x",oldX);newUnderline.style.setProperty("--tu-w",oldW);incoming.classList.add("is-ready");requestAnimationFrame(()=>{newUnderline.classList.remove("no-transition");placeTabUnderline(true)})}else{placeTabUnderline(false)}} diff --git a/scripts/docs-site/build.mjs b/scripts/docs-site/build.mjs index e6e25126fa..4c9b5f2021 100644 --- a/scripts/docs-site/build.mjs +++ b/scripts/docs-site/build.mjs @@ -341,7 +341,8 @@ function siteHeader(page, nav, activeTab) { const tabs = nav.map((tab) => { const href = pageUrl(firstPage(tab)); const active = tab.title === activeTab ? " active" : ""; - return `${escapeHtml(tab.title)}`; + const current = tab.title === activeTab ? ' aria-current="location"' : ""; + return `${escapeHtml(tab.title)}`; }).join(""); return `
@@ -370,10 +371,17 @@ function siteFooter() { } function sidebar(page, nav, activeTab) { - const groups = (nav.find((tab) => tab.title === activeTab) ?? nav[0])?.groups ?? []; + const currentTab = nav.find((tab) => tab.title === activeTab) ?? nav[0]; + const groups = currentTab?.groups ?? []; + const mobileTabs = nav.map((tab) => { + const active = tab.title === currentTab?.title; + return `${escapeHtml(tab.title)}`; + }).join(""); return ``; } diff --git a/scripts/docs-site/smoke.mjs b/scripts/docs-site/smoke.mjs index 87e743f152..a028f8aec1 100644 --- a/scripts/docs-site/smoke.mjs +++ b/scripts/docs-site/smoke.mjs @@ -428,6 +428,13 @@ if (!/let tocObserver=null/.test(siteJs) if (!/function setNavOpen/.test(siteJs) || !/body\.nav-open:before/.test(siteCss) || !/data-nav-close/.test(index)) { throw new Error("assets: mobile navigation drawer state is missing"); } +if (!/class="mobile-tabs" aria-label="Docs sections"/.test(index) + || !/class="mobile-tab-link active"[^>]*aria-current="location"/.test(index) + || !/class="mobile-section-switcher">/.test(index) + || !/\.mobile-section-switcher\[open\] \.mobile-tabs\{display:grid;gap:2px/.test(siteCss) + || !/\.mobile-tab-link\.active\{background:var\(--soft\);color:var\(--brand\)/.test(siteCss)) { + throw new Error("assets: mobile global docs navigation is missing"); +} if (/data-locale/.test(siteJs)) { throw new Error("assets: stale native language select handler is still present"); } diff --git a/scripts/docs-site/visual-smoke.mjs b/scripts/docs-site/visual-smoke.mjs index 311ff7ded3..267fb8e65f 100644 --- a/scripts/docs-site/visual-smoke.mjs +++ b/scripts/docs-site/visual-smoke.mjs @@ -508,19 +508,35 @@ async function checkMobile() { const header = document.querySelector(".site-header")?.getBoundingClientRect(); const menu = document.querySelector("[data-nav-toggle]")?.getBoundingClientRect(); const theme = document.querySelector("[data-theme-toggle]")?.getBoundingClientRect(); + const themeStyle = getComputedStyle(document.querySelector("[data-theme-toggle]")); const search = document.querySelector("[data-search-open]")?.getBoundingClientRect(); + const brand = document.querySelector(".brand")?.getBoundingClientRect(); + const github = document.querySelector('.top-icon-link[aria-label="GitHub"]')?.getBoundingClientRect(); + const discord = document.querySelector('.top-icon-link[aria-label="Discord"]')?.getBoundingClientRect(); const code = document.querySelector(".oc-code")?.getBoundingClientRect(); const step = document.querySelector(".oc-step")?.getBoundingClientRect(); const overlap = (a, b) => Boolean(a && b && a.left < b.right && a.right > b.left && a.top < b.bottom && a.bottom > b.top); return { headerWidth: header?.width, menuThemeOverlap: overlap(menu, theme), + themeHasChrome: parseFloat(themeStyle.borderTopWidth) > 0 || themeStyle.backgroundColor !== "rgba(0, 0, 0, 0)", + brandCenterDelta: brand ? Math.abs((brand.left + brand.right) / 2 - innerWidth / 2) : null, + githubVisible: Boolean(github && github.width > 0 && github.height > 0), + discordVisible: Boolean(discord && discord.width > 0 && discord.height > 0), searchInViewport: search ? search.left >= 0 && search.right <= innerWidth : false, codeInViewport: code ? code.left >= 0 && code.right <= innerWidth + 1 : false, stepInset: step?.left, }; }); - if (geometry.menuThemeOverlap || !geometry.searchInViewport || !geometry.codeInViewport || geometry.stepInset < 0) { + if (geometry.menuThemeOverlap + || geometry.themeHasChrome + || geometry.brandCenterDelta === null + || geometry.brandCenterDelta > 2 + || geometry.githubVisible + || geometry.discordVisible + || !geometry.searchInViewport + || !geometry.codeInViewport + || geometry.stepInset < 0) { throw new Error(`mobile visual geometry failed: ${JSON.stringify(geometry)}`); } const mobileCardColumns = await page.evaluate(() => { @@ -538,20 +554,29 @@ async function checkMobile() { await page.click("[data-nav-toggle]"); await page.locator(".sidebar.open").waitFor({ state: "visible" }); await page.waitForFunction(() => Math.abs(document.querySelector(".sidebar")?.getBoundingClientRect().left ?? -999) < 1); - await page.screenshot({ path: path.join(artifacts, "elements-mobile-menu.png"), fullPage: false }); const menu = await page.evaluate(() => { const sidebar = document.querySelector(".sidebar")?.getBoundingClientRect(); const close = document.querySelector("[data-nav-close]")?.getBoundingClientRect(); const toggle = document.querySelector("[data-nav-toggle]"); const closeStyle = getComputedStyle(document.querySelector("[data-nav-close]")); + const sectionSwitcher = document.querySelector(".mobile-section-switcher"); + const sectionSwitcherRect = sectionSwitcher?.getBoundingClientRect(); return { bodyOpen: document.body.classList.contains("nav-open"), ariaExpanded: toggle?.getAttribute("aria-expanded"), sidebarLeft: sidebar?.left, sidebarRight: sidebar?.right, sidebarWidth: sidebar?.width, + sidebarTop: sidebar?.top, + sidebarBottom: sidebar?.bottom, closeVisible: closeStyle.display !== "none" && close && close.height >= 36, + sectionSwitcherVisible: Boolean(sectionSwitcherRect && sectionSwitcherRect.width > 0 && sectionSwitcherRect.height > 0), + sectionSwitcherOpen: sectionSwitcher?.hasAttribute("open"), + sectionSwitcherCurrent: sectionSwitcher?.querySelector(".mobile-section-copy > strong")?.textContent?.trim(), + drawerAtTop: (document.querySelector(".sidebar")?.scrollTop ?? -1) <= 1, + closeFocused: document.activeElement === document.querySelector("[data-nav-close]"), viewport: innerWidth, + viewportHeight: innerHeight, }; }); if (!menu.bodyOpen @@ -559,9 +584,41 @@ async function checkMobile() { || Math.abs(menu.sidebarLeft) >= 1 || Math.abs(menu.sidebarRight - menu.viewport) >= 1 || Math.abs(menu.sidebarWidth - menu.viewport) >= 1 - || !menu.closeVisible) { + || Math.abs(menu.sidebarTop) >= 1 + || Math.abs(menu.sidebarBottom - menu.viewportHeight) >= 1 + || !menu.closeVisible + || !menu.sectionSwitcherVisible + || menu.sectionSwitcherOpen + || !menu.sectionSwitcherCurrent + || !menu.drawerAtTop + || !menu.closeFocused) { throw new Error(`mobile menu drawer failed (expected full-bleed on phones): ${JSON.stringify(menu)}`); } + await page.click(".mobile-section-switcher > summary"); + await page.locator(".mobile-tabs").waitFor({ state: "visible" }); + await page.screenshot({ path: path.join(artifacts, "elements-mobile-menu.png"), fullPage: false }); + const sections = await page.evaluate(() => { + const container = document.querySelector(".mobile-tabs")?.getBoundingClientRect(); + const links = [...document.querySelectorAll(".mobile-tab-link")]; + const rects = links.map((link) => link.getBoundingClientRect()); + return { + open: document.querySelector(".mobile-section-switcher")?.hasAttribute("open"), + mobileTabCount: links.length, + desktopTabCount: document.querySelectorAll(".tab-link").length, + activeCount: document.querySelectorAll('.mobile-tab-link[aria-current="location"]').length, + linksVisible: rects.every((rect) => rect.width > 0 && rect.height > 0), + linksInViewport: rects.every((rect) => rect.left >= 0 && rect.right <= innerWidth), + lastLinkVisible: Boolean(container && rects.at(-1)?.bottom <= container.bottom + 1), + }; + }); + if (!sections.open + || sections.mobileTabCount !== sections.desktopTabCount + || sections.activeCount !== 1 + || !sections.linksVisible + || !sections.linksInViewport + || !sections.lastLinkVisible) { + throw new Error(`mobile docs section switcher failed: ${JSON.stringify(sections)}`); + } await page.keyboard.press("Escape"); const closed = await page.evaluate(() => ({ bodyOpen: document.body.classList.contains("nav-open"),