@publier/shell 4.3.0 → 4.3.2

package/README.md

@@ -48,11 +48,15 @@ fragments, HTTP(S), mail and telephone links; executable URL schemes are omitted
 `external: true` opens a new tab with `noopener noreferrer`.
 
 Documentation selectors open on click or keyboard activation. Their labels stay
-stationary; the disclosure arrow changes orientation without an entrance animation.
+stationary while the disclosure arrow rotates smoothly. The menu itself opens
+without an entrance animation.
 
 Outside the `docs` variant, desktop groups also open on hover for fine pointers.
-Their wider panels arrange destinations in two columns, with a brief Motion
-entrance. Reduced-motion preferences disable the animation. Touch uses tap;
+Their panels span the header width and arrange destinations in two columns, with
+a brief Motion entrance. Corners and shadow follow the theme’s `--radius-box`,
+`--radius-selector` and `--shadow-lg` tokens; `--publier-page-max-width` aligns
+the inner content with the page. Reduced motion disables panel and arrow
+animation. Touch uses tap;
 keyboard opening, selection and Escape remain owned by details-menu. Pointer
 opening informs that element's mouse-modality listener so hover does not steal
 focus. Moving into the panel keeps it open; leaving dismisses after a short grace

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@publier/shell",
-  "version": "4.3.0",
+  "version": "4.3.2",
   "license": "UNLICENSED",
   "description": "Qwik + Astro docs layout for Publier sites.",
   "type": "module",
@@ -119,7 +119,7 @@
     "@github/details-menu-element": "^1.0.13",
     "@github/relative-time-element": "^5.3.1",
     "@github/tab-container-element": "^4.9.0",
-    "@publier/native": "6.0.0",
+    "@publier/native": "6.0.1",
     "@tailwindcss/typography": "^0.5.20",
     "astro-pagefind": "^2.0.1",
     "daisyui": "^5.7.22",

package/src/routes/docs-slug.astro

@@ -14,7 +14,14 @@ export async function getStaticPaths() {
 const { entry } = Astro.props;
 const { Content, headings } = await render(entry);
 const all = await getCollection('docs');
-const plan = JSON.parse(shellPlanDocsSlug(JSON.stringify({ entry_id: entry.id, title: entry.data.title, description: entry.data.description ?? null, tab_sections: docsConfig.tabSections, all_entry_ids: all.map((e) => e.id) }))) as { breadcrumbs: BreadcrumbItem[]; section_entry_ids: string[]; scope: string; current_path: string; sidebar_persist_key: string };
+const configuredNav = navConfig.variants.docs;
+const tabSections = [...new Set([
+	...docsConfig.tabSections,
+	...(configuredNav?.products ?? []).flatMap((product) => (product.tabs ?? []).flatMap((tab) =>
+		tab.href?.startsWith('/docs/') ? [tab.href.slice('/docs/'.length).replace(/\/$/, '')] : [],
+	)),
+])];
+const plan = JSON.parse(shellPlanDocsSlug(JSON.stringify({ entry_id: entry.id, title: entry.data.title, description: entry.data.description ?? null, tab_sections: tabSections, all_entry_ids: all.map((e) => e.id) }))) as { breadcrumbs: BreadcrumbItem[]; section_entry_ids: string[]; scope: string; current_path: string; sidebar_persist_key: string };
 const pages = all.map((e) => entryToPage({ slug: e.id.replace(/\.(mdx?|md)$/, ''), data: e.data, headings: [] }, { urlPrefix: '/docs' }));
 const sections = [
 	...(pages.some((page) => page.url === '/docs') ? [{ label: 'All documentation', href: '/docs' }] : []),
@@ -25,7 +32,6 @@ const sections = [
 	}),
 ];
 
-const configuredNav = navConfig.variants.docs;
 const docsNav: NavVariant = { ...(configuredNav ?? { brand: site.name, logo: site.logo, tabs: sections, links: [], cta: null }) };
 
 if (!docsNav.products?.length && docsConfig.versions.length > 0) {

package/src/styles/base.css

@@ -172,6 +172,7 @@ h6 {
 	border-right: 1.5px solid currentColor;
 	border-bottom: 1.5px solid currentColor;
 	transform: translateY(-0.1rem) rotate(45deg);
+	transition: transform 150ms ease;
 }
 
 [data-publier-top-nav] details[data-publier-nav-group].dropdown[open] > summary::after {
@@ -730,6 +731,7 @@ body:has([data-publier-docs-header]) :is(h2, h3, h4)[id] {
 	border-right: 1.5px solid currentColor;
 	border-bottom: 1.5px solid currentColor;
 	transform: rotate(45deg);
+	transition: transform 150ms ease;
 }
 [data-publier-docs-selector][open] > summary > span[aria-hidden="true"] {
 	transform: rotate(225deg);
@@ -740,9 +742,12 @@ body:has([data-publier-docs-header]) :is(h2, h3, h4)[id] {
 	scale: 1;
 }
 
-/* Marketing uses the existing menu surface, expanded into an airy link grid.
+/* Marketing uses the existing menu surface, expanded across the header into an airy link grid.
  * Native disclosure still works without JavaScript; Motion enhances entrance. */
 @media (width >= 64rem) {
+	[data-publier-top-nav]:not([data-publier-docs-header]) > .navbar {
+		position: static;
+	}
 	[data-publier-top-nav]:not([data-publier-docs-header])
 		details.dropdown[data-publier-nav-group]:not([data-publier-docs-selector]) {
 		position: static;
@@ -755,24 +760,20 @@ body:has([data-publier-docs-header]) :is(h2, h3, h4)[id] {
 		box-shadow: none;
 		transition: color 150ms ease;
 	}
-	[data-publier-top-nav]:not([data-publier-docs-header])
-		details.dropdown[data-publier-nav-group]
-		> summary::after {
-		transition: transform 150ms ease;
-	}
 	[data-publier-top-nav]:not([data-publier-docs-header])
 		details.dropdown[data-publier-nav-group]:not([data-publier-docs-selector])
 		> [data-publier-nav-menu] {
 		inset-inline: 0;
 		top: 100%;
-		width: min(56rem, calc(100vw - 3rem));
+		width: 100%;
 		max-width: none;
 		max-height: calc(100dvh - 6rem);
 		margin-inline: auto;
-		padding: 1.5rem;
+		padding-block: 2.5rem;
+		padding-inline: max(2rem, calc((100% - var(--publier-page-max-width, 80rem)) / 2));
 		overflow-y: auto;
-		border-radius: 0 0 0.75rem 0.75rem;
-		box-shadow: 0 18px 32px -16px rgb(0 0 0 / 0.2);
+		border-radius: 0 0 var(--radius-box) var(--radius-box);
+		box-shadow: var(--shadow-lg);
 		scale: 1;
 		animation: none;
 		transition: none;
@@ -781,13 +782,13 @@ body:has([data-publier-docs-header]) :is(h2, h3, h4)[id] {
 	[data-publier-top-nav]:not([data-publier-docs-header]) [data-publier-nav-menu] > ul {
 		display: grid;
 		grid-template-columns: repeat(2, minmax(0, 1fr));
-		gap: 0.5rem 1.5rem;
+		gap: 1rem 3rem;
 	}
 	[data-publier-top-nav]:not([data-publier-docs-header]) [data-publier-nav-menu] > ul > li > a {
 		height: 100%;
 		padding: 1rem;
-		border-radius: 0.375rem;
-		font-size: 1.0625rem;
+		border-radius: var(--radius-selector);
+		font-size: 1.25rem;
 		line-height: 1.4;
 	}
 	[data-publier-top-nav]:not([data-publier-docs-header]) [data-publier-nav-description] {
@@ -797,7 +798,8 @@ body:has([data-publier-docs-header]) :is(h2, h3, h4)[id] {
 	}
 }
 @media (prefers-reduced-motion: reduce) {
-	[data-publier-top-nav] details[data-publier-nav-group] > summary::after {
+	[data-publier-top-nav] details[data-publier-nav-group] > summary::after,
+	[data-publier-docs-selector] > summary > span[aria-hidden="true"] {
 		transition: none;
 	}
 }

package/src/virtual-modules.d.ts

@@ -176,9 +176,9 @@ declare module 'virtual:publier-docs-config' {
 		/** Sidebar levels expanded by default, from sidebar.defaultOpenLevel. */
 		defaultOpenLevel?: number;
 		/**
-		 * Top-level folders under `src/content/docs/` that render as their own
-		 * tab-scoped sidebars. Empty array → single flat sidebar for every
-		 * docs page.
+		 * Paths under `src/content/docs/` that render as tab-scoped sidebars.
+		 * Nested paths use the longest match. Product tab destinations also
+		 * supply scopes; an empty array without product tabs uses one sidebar.
 		 */
 		tabSections: string[];
 		/** Display + ordering overrides keyed by group path. */