@umami/shiso 1.6.0 → 1.7.0

package/CHANGELOG.md

@@ -3,6 +3,15 @@
 All notable changes to `@umami/shiso` are documented here. This project follows
 [Semantic Versioning](https://semver.org/).
 
+## Unreleased
+
+### Added
+
+- Link tabs: a navigation tab may define `href` instead of `groups`/`pages`/
+  `dropdowns` to link to a standalone page or external URL from the top
+  navigation. Internal hrefs route client-side and highlight when active;
+  external URLs open in a new browser tab.
+
 ## 2.0.0 - 2026-08-21
 
 ### Breaking

package/dist/chunks/App.js

@@ -9532,7 +9532,7 @@ function ScrollArea({ className, children, scrollbars = "vertical", ...props })
 		children: [
 			/* @__PURE__ */ jsx(ScrollAreaViewport, {
 				"data-slot": "scroll-area-viewport",
-				className: "box-border h-full w-full max-w-full rounded-[inherit] overscroll-contain outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1",
+				className: cn("box-border h-full w-full max-w-full rounded-[inherit] outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1", scrollbars === "both" ? "overscroll-contain" : hasHorizontalScrollbar ? "overscroll-x-contain" : "overscroll-y-contain"),
 				children: /* @__PURE__ */ jsx(ScrollAreaContent, {
 					"data-slot": "scroll-area-content",
 					className: cn("box-border min-w-0", hasHorizontalScrollbar ? "w-max min-w-full max-w-none" : "w-full max-w-full"),
@@ -10969,7 +10969,7 @@ function AccordionItem({ className, ...props }) {
 }
 function AccordionTrigger({ className, children, ...props }) {
 	return /* @__PURE__ */ jsx(AccordionHeader, {
-		className: "m-0 flex",
+		className: "flex",
 		children: /* @__PURE__ */ jsxs(AccordionTrigger$1, {
 			"data-slot": "accordion-trigger",
 			className: cn("group/accordion-trigger relative flex flex-1 items-start justify-between rounded-lg border border-transparent py-2.5 text-left text-sm font-medium transition-all outline-none hover:underline focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 focus-visible:after:border-ring aria-disabled:pointer-events-none aria-disabled:opacity-50 **:data-[slot=accordion-trigger-icon]:ml-auto **:data-[slot=accordion-trigger-icon]:size-4 **:data-[slot=accordion-trigger-icon]:text-muted-foreground", className),
@@ -11004,11 +11004,11 @@ function AccordionContent({ className, children, ...props }) {
 //#region src/components/docs/styles.ts
 /** Shared Tailwind utility groups for the built-in MDX components. */
 const styles = {
-	accordion: "my-3",
-	accordionGroup: "my-4 overflow-hidden rounded-lg border border-border [&_[data-slot=accordion-item]]:rounded-none [&_[data-slot=accordion-item]]:border-0 [&_[data-slot=accordion-item]+[data-slot=accordion-item]]:border-t [&_[data-slot=accordion-trigger]]:rounded-none",
-	accordionItem: "rounded-lg border border-border bg-transparent",
-	accordionTrigger: "items-center px-4 py-3 text-base font-semibold text-foreground hover:no-underline",
-	accordionContent: "px-4 pb-4 text-base leading-7",
+	accordion: "my-3 [&_h3:has(>[data-slot=accordion-trigger])]:m-0",
+	accordionGroup: "my-4 [&_h3:has(>[data-slot=accordion-trigger])]:m-0",
+	accordionItem: "",
+	accordionTrigger: "text-foreground",
+	accordionContent: "text-muted-foreground [&_p]:mt-0 [&_p:last-child]:mb-0",
 	expandableTrigger: "items-center px-4 py-3 text-sm font-normal text-foreground hover:no-underline",
 	callout: "my-4 flex items-start gap-3 rounded-lg border px-3 py-2.5 text-sm leading-6",
 	calloutIcon: "flex h-6 w-5 shrink-0 items-center justify-center [&_svg]:block [&_svg]:size-4",
@@ -11021,15 +11021,15 @@ const styles = {
 	tip: "border-green-300 bg-green-50 text-green-900 dark:border-green-400/40 dark:bg-green-400/10 dark:text-green-300",
 	check: "border-emerald-300 bg-emerald-50 text-emerald-900 dark:border-emerald-400/40 dark:bg-emerald-400/10 dark:text-emerald-300",
 	danger: "border-destructive/40 bg-destructive/10 text-destructive",
-	card: "block h-full gap-0 rounded-lg border border-border bg-transparent p-4 text-base ring-0 hover:border-input",
-	cardHorizontal: "[&_[data-slot=card-inner]]:items-center [&_[data-slot=card-main]]:flex-row [&_[data-slot=card-main]]:items-center [&_[data-slot=card-main]]:gap-3 [&_[data-slot=card-body]]:m-0",
+	card: "block h-full gap-0 rounded-lg border border-border bg-transparent p-4 text-base ring-0 hover:border-primary",
+	cardHorizontal: "[&_[data-slot=card-inner]]:items-center [&_[data-slot=card-main]]:flex-row [&_[data-slot=card-main]]:items-center [&_[data-slot=card-main]]:gap-3 [&_[data-slot=card-body]]:m-0 [&_[data-slot=card-header]]:flex-row [&_[data-slot=card-header]]:items-center [&_[data-slot=card-header]]:gap-2",
 	cardTyped: "[&_[data-slot=card-title]]:text-inherit [&_[data-slot=card-body]]:text-inherit [&_[data-slot=card-cta]]:text-inherit [&_[data-slot=card-arrow]]:text-inherit",
 	cardImageLayout: "p-0 [&_[data-slot=card-inner]]:p-6",
 	cardImage: "block aspect-video w-full border-border border-b object-cover",
 	cardInner: "flex items-start justify-between gap-3",
 	cardMain: "flex min-w-0 flex-col gap-2",
-	cardHeader: "flex items-center gap-2",
-	cardIcon: "inline-flex shrink-0 items-center justify-center [&_img]:size-4 [&_svg]:size-4",
+	cardHeader: "flex flex-col items-start gap-3",
+	cardIcon: "inline-flex shrink-0 items-center justify-center [&_img]:size-6 [&_svg]:size-6",
 	cardTitle: "text-base font-semibold text-foreground",
 	cardBody: "text-muted-foreground [&>:first-child]:mt-0 [&>:last-child]:mb-0",
 	cardCta: "flex shrink-0 items-center gap-[0.35rem] text-[0.9rem] font-medium text-muted-foreground",
@@ -11493,12 +11493,12 @@ function CardContent({ className, ...props }) {
 //#endregion
 //#region src/components/docs/Card.tsx
 const CARD_TYPE_ICONS = {
-	note: /* @__PURE__ */ jsx(Info$1, { size: 16 }),
-	info: /* @__PURE__ */ jsx(Info$1, { size: 16 }),
-	warning: /* @__PURE__ */ jsx(TriangleAlert, { size: 16 }),
-	tip: /* @__PURE__ */ jsx(Lightbulb, { size: 16 }),
-	check: /* @__PURE__ */ jsx(Check$1, { size: 16 }),
-	danger: /* @__PURE__ */ jsx(CircleAlert, { size: 16 })
+	note: /* @__PURE__ */ jsx(Info$1, { size: 24 }),
+	info: /* @__PURE__ */ jsx(Info$1, { size: 24 }),
+	warning: /* @__PURE__ */ jsx(TriangleAlert, { size: 24 }),
+	tip: /* @__PURE__ */ jsx(Lightbulb, { size: 24 }),
+	check: /* @__PURE__ */ jsx(Check$1, { size: 24 }),
+	danger: /* @__PURE__ */ jsx(CircleAlert, { size: 24 })
 };
 const CARD_TYPE_HOVER = {
 	note: "hover:border-border",
@@ -11509,7 +11509,7 @@ const CARD_TYPE_HOVER = {
 	danger: "hover:border-destructive/40"
 };
 function DocsCardContent({ title, icon, color, img, cta, arrow, type, children }) {
-	const resolvedIcon = resolveIcon(icon, 16) || (type ? CARD_TYPE_ICONS[type] : null);
+	const resolvedIcon = resolveIcon(icon, 24) || (type ? CARD_TYPE_ICONS[type] : null);
 	return /* @__PURE__ */ jsxs(CardContent, {
 		className: "p-0",
 		children: [img ? /* @__PURE__ */ jsx("img", {
@@ -11524,6 +11524,7 @@ function DocsCardContent({ title, icon, color, img, cta, arrow, type, children }
 				"data-slot": "card-main",
 				children: [/* @__PURE__ */ jsxs("div", {
 					className: styles.cardHeader,
+					"data-slot": "card-header",
 					children: [resolvedIcon ? /* @__PURE__ */ jsx("span", {
 						className: `${styles.cardIcon} ${type ? "text-inherit" : "text-primary"}`,
 						style: color ? { color } : void 0,
@@ -22650,7 +22651,9 @@ function normalizeScope(name, source, anchors, resolveDocFile, docsPrefix) {
 			});
 		});
 		if (Array.isArray(tab.pages) && tab.pages.length) nodes.push(...collectPages(tab.pages, context, state));
-		if (state.pages.length === pagesBefore) throw new Error(`Invalid docs config: tab "${tabLabel}" does not contain any supported page entries.`);
+		const isLinkTab = typeof tab.href === "string" && !!tab.href;
+		if (isLinkTab && state.pages.length !== pagesBefore) throw new Error(`Invalid docs config: tab "${tabLabel}" cannot define both "href" and page entries.`);
+		if (!isLinkTab && state.pages.length === pagesBefore) throw new Error(`Invalid docs config: tab "${tabLabel}" does not contain any supported page entries.`);
 		treeByTab.set(tabId, nodes);
 	});
 	const pending = state.pages;
@@ -22723,13 +22726,15 @@ function normalizeScope(name, source, anchors, resolveDocFile, docsPrefix) {
 		tabs: tabs.map((tab, index) => {
 			const tabId = tabIds[index];
 			const firstPage = firstVisiblePageByTab.get(tabId);
+			const href = typeof tab.href === "string" && tab.href ? tab.href : void 0;
 			return {
 				id: tabId,
 				label: tab.tab?.trim() || "",
-				url: firstPage?.url || pageToUrl("index", docsPrefix),
+				url: href || firstPage?.url || pageToUrl("index", docsPrefix),
 				icon: tab.icon,
 				presentation: tab.presentation || "tab",
-				hidden: tab.hidden || void 0
+				hidden: tab.hidden || void 0,
+				link: href ? true : void 0
 			};
 		}),
 		showTabs,
@@ -23031,7 +23036,8 @@ function resolveSiteModel(config, docs, shiso) {
 		light: config.logo.light || config.logo.dark,
 		dark: config.logo.dark || config.logo.light,
 		href: config.logo.href,
-		target: config.logo.href ? resolveLinkTarget(config.logo.href, config.logo.target) : void 0
+		target: config.logo.href ? resolveLinkTarget(config.logo.href, config.logo.target) : void 0,
+		invert: config.logo.invert === true
 	} : null;
 	return {
 		name: config.name?.trim() || void 0,
@@ -26344,6 +26350,13 @@ function TopNav({ docs, label }) {
 					}, item.href))
 				})] }, tab.id);
 			}
+			if (tab.link && isExternalHref(tab.url)) return /* @__PURE__ */ jsxs("a", {
+				href: tab.url,
+				className: tabClass(tab),
+				target: "_blank",
+				rel: "noreferrer",
+				children: [/* @__PURE__ */ jsx(ConfiguredIcon, { icon: tab.icon }), tab.label]
+			}, tab.id);
 			return /* @__PURE__ */ jsxs(Link, {
 				to: tab.url,
 				className: tabClass(tab),
@@ -26426,19 +26439,19 @@ function Header({ site }) {
 	const brandHref = logo?.href || (hasRootStandalonePage ? "/" : docsHomeUrl);
 	const hasBrand = !!name || !!logo?.light || !!logo?.dark;
 	const brandClassName = "inline-flex items-center gap-2 text-xl font-bold text-foreground tracking-[-0.03em]";
-	const brandContent = /* @__PURE__ */ jsxs(Fragment, { children: [
-		logo?.light ? /* @__PURE__ */ jsx("img", {
-			src: logo.light,
-			alt: "",
-			className: "h-6 w-auto dark:hidden"
-		}) : null,
-		logo?.dark ? /* @__PURE__ */ jsx("img", {
-			src: logo.dark,
-			alt: "",
-			className: "hidden h-6 w-auto dark:block"
-		}) : null,
-		name ? /* @__PURE__ */ jsx("span", { children: name }) : null
-	] });
+	const brandContent = /* @__PURE__ */ jsxs(Fragment, { children: [logo?.invert && logo.light ? /* @__PURE__ */ jsx("img", {
+		src: logo.light,
+		alt: "",
+		className: "h-6 w-auto dark:brightness-0 dark:invert"
+	}) : /* @__PURE__ */ jsxs(Fragment, { children: [logo?.light ? /* @__PURE__ */ jsx("img", {
+		src: logo.light,
+		alt: "",
+		className: "h-6 w-auto dark:hidden"
+	}) : null, logo?.dark ? /* @__PURE__ */ jsx("img", {
+		src: logo.dark,
+		alt: "",
+		className: "hidden h-6 w-auto dark:block"
+	}) : null] }), name ? /* @__PURE__ */ jsx("span", { children: name }) : null] });
 	return /* @__PURE__ */ jsx("header", {
 		className: "sticky top-0 z-50 h-[var(--header-height)] shrink-0 border-border border-b bg-[color-mix(in_srgb,var(--background)_92%,transparent)] backdrop-blur-md",
 		children: /* @__PURE__ */ jsxs("div", {

package/docs.schema.json

@@ -66,6 +66,10 @@
             "target": {
               "allOf": [{ "$ref": "#/definitions/targetValue" }],
               "description": "Browsing context for the logo link. Defaults from href."
+            },
+            "invert": {
+              "allOf": [{ "$ref": "#/definitions/booleanValue" }],
+              "description": "Render one logo and force it to white in dark mode with a CSS filter, instead of swapping to a dark variant. Best for monochrome logos."
             }
           }
         }
@@ -814,7 +818,8 @@
       "type": "object",
       "allOf": [
         { "anyOf": [{ "required": ["$ref"] }, { "required": ["tab"] }] },
-        { "anyOf": [{ "required": ["$ref"] }, { "required": ["groups"] }, { "required": ["pages"] }, { "required": ["dropdowns"] }] }
+        { "anyOf": [{ "required": ["$ref"] }, { "required": ["groups"] }, { "required": ["pages"] }, { "required": ["dropdowns"] }, { "required": ["href"] }] },
+        { "not": { "anyOf": [{ "required": ["href", "groups"] }, { "required": ["href", "pages"] }, { "required": ["href", "dropdowns"] }] } }
       ],
       "additionalProperties": false,
       "properties": {
@@ -823,6 +828,7 @@
         "groups": { "$ref": "#/definitions/groupList" },
         "pages": { "$ref": "#/definitions/pageItemList" },
         "dropdowns": { "$ref": "#/definitions/dropdownList" },
+        "href": { "allOf": [{ "$ref": "#/definitions/nonEmptyStringValue" }], "description": "Link tab: navigates to this URL (a standalone page or external site) instead of owning docs pages. Cannot be combined with groups, pages, or dropdowns." },
         "icon": { "allOf": [{ "$ref": "#/definitions/stringValue" }], "description": "Icon name shown beside the tab label." },
         "hidden": { "allOf": [{ "$ref": "#/definitions/booleanValue" }], "description": "Hide the tab from the top navigation." }
       }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umami/shiso",
-  "version": "1.6.0",
+  "version": "1.7.0",
   "description": "Open-source documentation framework for Markdown and MDX sites.",
   "type": "module",
   "bin": {

package/src/components/Header.tsx

@@ -69,8 +69,18 @@ export function Header({ site }: { site: SiteModel }) {
     'inline-flex items-center gap-2 text-xl font-bold text-foreground tracking-[-0.03em]';
   const brandContent = (
     <>
-      {logo?.light ? <img src={logo.light} alt="" className="h-6 w-auto dark:hidden" /> : null}
-      {logo?.dark ? <img src={logo.dark} alt="" className="hidden h-6 w-auto dark:block" /> : null}
+      {/* With `invert`, one logo serves both modes: a CSS filter forces it to
+          white in dark mode instead of swapping to a dark variant. */}
+      {logo?.invert && logo.light ? (
+        <img src={logo.light} alt="" className="h-6 w-auto dark:brightness-0 dark:invert" />
+      ) : (
+        <>
+          {logo?.light ? <img src={logo.light} alt="" className="h-6 w-auto dark:hidden" /> : null}
+          {logo?.dark ? (
+            <img src={logo.dark} alt="" className="hidden h-6 w-auto dark:block" />
+          ) : null}
+        </>
+      )}
       {name ? <span>{name}</span> : null}
     </>
   );

package/src/components/TopNav.tsx

@@ -7,6 +7,7 @@ import {
   DropdownMenuItem,
   DropdownMenuTrigger,
 } from '@/components/ui/dropdown-menu';
+import { isExternalHref } from '@/lib/paths';
 import { getStandalonePage } from '@/lib/site-config';
 import type { DocsTab, LinkTarget, NavNode, NormalizedDocsConfig } from '@/lib/types';
 import { cn } from '@/lib/utils';
@@ -112,6 +113,23 @@ export function TopNav({ docs, label }: { docs: NormalizedDocsConfig; label: str
           );
         }
 
+        // Link tabs may point outside the app; render external URLs as plain
+        // anchors so the browser handles them.
+        if (tab.link && isExternalHref(tab.url)) {
+          return (
+            <a
+              key={tab.id}
+              href={tab.url}
+              className={tabClass(tab)}
+              target="_blank"
+              rel="noreferrer"
+            >
+              <ConfiguredIcon icon={tab.icon} />
+              {tab.label}
+            </a>
+          );
+        }
+
         return (
           <Link
             key={tab.id}

package/src/components/docs/Card.tsx

@@ -28,12 +28,12 @@ export interface CardProps {
 export type CardType = 'note' | 'info' | 'warning' | 'tip' | 'check' | 'danger';
 
 const CARD_TYPE_ICONS: Record<CardType, ReactNode> = {
-  note: <InfoIcon size={16} />,
-  info: <InfoIcon size={16} />,
-  warning: <TriangleAlert size={16} />,
-  tip: <Lightbulb size={16} />,
-  check: <CheckIcon size={16} />,
-  danger: <CircleAlert size={16} />,
+  note: <InfoIcon size={24} />,
+  info: <InfoIcon size={24} />,
+  warning: <TriangleAlert size={24} />,
+  tip: <Lightbulb size={24} />,
+  check: <CheckIcon size={24} />,
+  danger: <CircleAlert size={24} />,
 };
 
 const CARD_TYPE_HOVER: Record<CardType, string> = {
@@ -55,14 +55,14 @@ function DocsCardContent({
   type,
   children,
 }: Omit<CardProps, 'href'>) {
-  const resolvedIcon = resolveIcon(icon, 16) || (type ? CARD_TYPE_ICONS[type] : null);
+  const resolvedIcon = resolveIcon(icon, 24) || (type ? CARD_TYPE_ICONS[type] : null);
 
   return (
     <CardContent className="p-0">
       {img ? <img src={img} alt="" className={styles.cardImage} /> : null}
       <div className={styles.cardInner} data-slot="card-inner">
         <div className={styles.cardMain} data-slot="card-main">
-          <div className={styles.cardHeader}>
+          <div className={styles.cardHeader} data-slot="card-header">
             {resolvedIcon ? (
               <span
                 className={`${styles.cardIcon} ${type ? 'text-inherit' : 'text-primary'}`}

package/src/components/docs/styles.ts

@@ -1,12 +1,14 @@
 /** Shared Tailwind utility groups for the built-in MDX components. */
 export const styles = {
-  accordion: 'my-3',
-  accordionGroup:
-    'my-4 overflow-hidden rounded-lg border border-border [&_[data-slot=accordion-item]]:rounded-none [&_[data-slot=accordion-item]]:border-0 [&_[data-slot=accordion-item]+[data-slot=accordion-item]]:border-t [&_[data-slot=accordion-trigger]]:rounded-none',
-  accordionItem: 'rounded-lg border border-border bg-transparent',
-  accordionTrigger:
-    'items-center px-4 py-3 text-base font-semibold text-foreground hover:no-underline',
-  accordionContent: 'px-4 pb-4 text-base leading-7',
+  /* Accordions keep the native shadcn look: no outer box, hairline separators,
+     small medium-weight triggers with hover underline. Only margins are added.
+     The trigger header is an <h3> and panel text renders as <p>, so the
+     .docs-markdown typography margins must be cancelled for those elements. */
+  accordion: 'my-3 [&_h3:has(>[data-slot=accordion-trigger])]:m-0',
+  accordionGroup: 'my-4 [&_h3:has(>[data-slot=accordion-trigger])]:m-0',
+  accordionItem: '',
+  accordionTrigger: 'text-foreground',
+  accordionContent: 'text-muted-foreground [&_p]:mt-0 [&_p:last-child]:mb-0',
   expandableTrigger:
     'items-center px-4 py-3 text-sm font-normal text-foreground hover:no-underline',
 
@@ -25,17 +27,17 @@ export const styles = {
     'border-emerald-300 bg-emerald-50 text-emerald-900 dark:border-emerald-400/40 dark:bg-emerald-400/10 dark:text-emerald-300',
   danger: 'border-destructive/40 bg-destructive/10 text-destructive',
 
-  card: 'block h-full gap-0 rounded-lg border border-border bg-transparent p-4 text-base ring-0 hover:border-input',
+  card: 'block h-full gap-0 rounded-lg border border-border bg-transparent p-4 text-base ring-0 hover:border-primary',
   cardHorizontal:
-    '[&_[data-slot=card-inner]]:items-center [&_[data-slot=card-main]]:flex-row [&_[data-slot=card-main]]:items-center [&_[data-slot=card-main]]:gap-3 [&_[data-slot=card-body]]:m-0',
+    '[&_[data-slot=card-inner]]:items-center [&_[data-slot=card-main]]:flex-row [&_[data-slot=card-main]]:items-center [&_[data-slot=card-main]]:gap-3 [&_[data-slot=card-body]]:m-0 [&_[data-slot=card-header]]:flex-row [&_[data-slot=card-header]]:items-center [&_[data-slot=card-header]]:gap-2',
   cardTyped:
     '[&_[data-slot=card-title]]:text-inherit [&_[data-slot=card-body]]:text-inherit [&_[data-slot=card-cta]]:text-inherit [&_[data-slot=card-arrow]]:text-inherit',
   cardImageLayout: 'p-0 [&_[data-slot=card-inner]]:p-6',
   cardImage: 'block aspect-video w-full border-border border-b object-cover',
   cardInner: 'flex items-start justify-between gap-3',
   cardMain: 'flex min-w-0 flex-col gap-2',
-  cardHeader: 'flex items-center gap-2',
-  cardIcon: 'inline-flex shrink-0 items-center justify-center [&_img]:size-4 [&_svg]:size-4',
+  cardHeader: 'flex flex-col items-start gap-3',
+  cardIcon: 'inline-flex shrink-0 items-center justify-center [&_img]:size-6 [&_svg]:size-6',
   cardTitle: 'text-base font-semibold text-foreground',
   cardBody: 'text-muted-foreground [&>:first-child]:mt-0 [&>:last-child]:mb-0',
   cardCta:

package/src/components/ui/accordion.tsx

@@ -24,7 +24,7 @@ function AccordionItem({ className, ...props }: AccordionPrimitive.Item.Props) {
 
 function AccordionTrigger({ className, children, ...props }: AccordionPrimitive.Trigger.Props) {
   return (
-    <AccordionPrimitive.Header className="m-0 flex">
+    <AccordionPrimitive.Header className="flex">
       <AccordionPrimitive.Trigger
         data-slot="accordion-trigger"
         className={cn(

package/src/components/ui/scroll-area.tsx

@@ -22,7 +22,17 @@ function ScrollArea({ className, children, scrollbars = 'vertical', ...props }:
     >
       <ScrollAreaPrimitive.Viewport
         data-slot="scroll-area-viewport"
-        className="box-border h-full w-full max-w-full rounded-[inherit] overscroll-contain outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1"
+        className={cn(
+          'box-border h-full w-full max-w-full rounded-[inherit] outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1',
+          // Contain overscroll only on the managed axis; containing both axes
+          // would swallow vertical wheel events over horizontal-only scroll
+          // areas (e.g. code blocks) and block page scrolling.
+          scrollbars === 'both'
+            ? 'overscroll-contain'
+            : hasHorizontalScrollbar
+              ? 'overscroll-x-contain'
+              : 'overscroll-y-contain',
+        )}
       >
         <ScrollAreaPrimitive.Content
           data-slot="scroll-area-content"

package/src/lib/docs-config.ts

@@ -665,7 +665,15 @@ function normalizeScope(
       nodes.push(...collectPages(tab.pages, context, state));
     }
 
-    if (state.pages.length === pagesBefore) {
+    const isLinkTab = typeof tab.href === 'string' && !!tab.href;
+
+    if (isLinkTab && state.pages.length !== pagesBefore) {
+      throw new Error(
+        `Invalid docs config: tab "${tabLabel}" cannot define both "href" and page entries.`,
+      );
+    }
+
+    if (!isLinkTab && state.pages.length === pagesBefore) {
       throw new Error(
         `Invalid docs config: tab "${tabLabel}" does not contain any supported page entries.`,
       );
@@ -781,14 +789,16 @@ function normalizeScope(
   const normalizedTabs = tabs.map((tab, index) => {
     const tabId = tabIds[index];
     const firstPage = firstVisiblePageByTab.get(tabId);
+    const href = typeof tab.href === 'string' && tab.href ? tab.href : undefined;
 
     return {
       id: tabId,
       label: tab.tab?.trim() || '',
-      url: firstPage?.url || pageToUrl('index', docsPrefix),
+      url: href || firstPage?.url || pageToUrl('index', docsPrefix),
       icon: tab.icon,
       presentation: tab.presentation || 'tab',
       hidden: tab.hidden || undefined,
+      link: href ? true : undefined,
     };
   });
 

package/src/lib/site-model.ts

@@ -107,6 +107,7 @@ export function resolveSiteModel(
           target: config.logo.href
             ? resolveLinkTarget(config.logo.href, config.logo.target)
             : undefined,
+          invert: config.logo.invert === true,
         }
     : null;
 

package/src/lib/types.ts

@@ -46,6 +46,8 @@ export interface TabItem {
   groups?: GroupItem[];
   pages?: PageItem[];
   dropdowns?: DropdownItem[];
+  /** Link tab: navigates to this URL instead of owning docs pages. */
+  href?: string;
   icon?: string;
   hidden?: boolean;
   /** Internal normalized presentation; not a docs.json field. */
@@ -99,7 +101,15 @@ export interface ThemeColors {
 
 export type LogoOption =
   | string
-  | { light?: string; dark?: string; href?: string; target?: LinkTarget };
+  | {
+      light?: string;
+      dark?: string;
+      href?: string;
+      target?: LinkTarget;
+      /** Force the logo to white in dark mode with a CSS filter instead of
+       * swapping to a dark variant. Best for monochrome logos. */
+      invert?: boolean;
+    };
 
 /** Project-level settings supplied by shiso.config.ts. Mirrors the public
  * shape exported from "@umami/shiso/config". */
@@ -337,6 +347,8 @@ export interface DocsTab {
   icon?: string;
   presentation: 'tab' | 'dropdown';
   hidden?: boolean;
+  /** True for link tabs configured with `href` instead of docs pages. */
+  link?: boolean;
 }
 
 export interface NormalizedDocsPage {
@@ -494,7 +506,13 @@ export interface ThemeLabels {
 
 export interface SiteModel {
   name?: string;
-  logo: { light?: string; dark?: string; href?: string; target?: LinkTarget } | null;
+  logo: {
+    light?: string;
+    dark?: string;
+    href?: string;
+    target?: LinkTarget;
+    invert?: boolean;
+  } | null;
   navbar: NormalizedNavbar | null;
   footer: NormalizedFooter | null;
   banner: BannerConfig | null;

package/src/styles/global.css

@@ -5,6 +5,32 @@
 
 @custom-variant dark (&:where([data-theme="dark"], [data-theme="dark"] *));
 
+/* tw-animate-css defines these keyframes against Radix-style height variables
+   (--radix-accordion-content-height etc.). Base UI exposes the panel height as
+   --accordion-panel-height instead, so the originals resolve to `auto` and the
+   open/close animation jumps. Redefining them inside @theme replaces the
+   originals in Tailwind's emitted output (a plain top-level @keyframes rule
+   would lose: Tailwind emits theme keyframes at the end of the stylesheet). */
+@theme inline {
+  @keyframes accordion-down {
+    from {
+      height: 0;
+    }
+    to {
+      height: var(--accordion-panel-height);
+    }
+  }
+
+  @keyframes accordion-up {
+    from {
+      height: var(--accordion-panel-height);
+    }
+    to {
+      height: 0;
+    }
+  }
+}
+
 @layer base {
   *,
   *::before,
@@ -77,7 +103,7 @@
     margin-top: 1rem;
   }
 
-  .docs-markdown :where(h2, h3, h4, h5, h6) {
+  .docs-markdown :where(h1, h2, h3, h4, h5, h6) {
     font-family: var(--font-heading);
     font-weight: var(--font-heading-weight, 600);
     letter-spacing: -0.02em;