@umami/shiso 1.1.10 → 1.1.12

package/CHANGELOG.md

@@ -3,6 +3,14 @@
 All notable changes to `@umami/shiso` are documented here. This project follows
 [Semantic Versioning](https://semver.org/).
 
+## 1.1.11 - 2026-08-19
+
+### Changed
+
+- Remove rounded corners from full-screen images and anchor the close button to
+  the viewport's top-right corner.
+- Render the active sidebar page label in bold.
+
 ## 1.1.10 - 2026-08-19
 
 ### Added

package/dist/chunks/App.js

@@ -20514,40 +20514,40 @@ function ZoomableImage({ noZoom = false, className, alt, src, ...props }) {
 	});
 	if (noZoom || !src) return image;
 	const label = alt ? `View “${alt}” full size` : "View image full size";
-	return /* @__PURE__ */ jsxs(Dialog$1, { children: [/* @__PURE__ */ jsx(DialogTrigger, {
-		render: /* @__PURE__ */ jsx("button", {
-			type: "button",
-			"data-slot": "zoomable-image",
-			className: "my-6 block w-fit max-w-full cursor-zoom-in rounded-lg text-left outline-none focus-visible:ring-3 focus-visible:ring-ring/50",
-			"aria-label": label
+	return /* @__PURE__ */ jsxs(Dialog$1, { children: [
+		/* @__PURE__ */ jsx(DialogTrigger, {
+			render: /* @__PURE__ */ jsx("button", {
+				type: "button",
+				"data-slot": "zoomable-image",
+				className: "my-6 block w-fit max-w-full cursor-zoom-in rounded-lg text-left outline-none focus-visible:ring-3 focus-visible:ring-ring/50",
+				"aria-label": label
+			}),
+			children: image
 		}),
-		children: image
-	}), /* @__PURE__ */ jsxs(DialogContent$1, {
-		showCloseButton: false,
-		overlayClassName: "bg-black/80 supports-backdrop-filter:backdrop-blur-sm",
-		className: "flex max-h-[calc(100vh-2rem)] w-auto max-w-[calc(100vw-2rem)] items-center justify-center bg-transparent p-0 ring-0 shadow-none sm:max-w-[calc(100vw-2rem)]",
-		children: [
-			/* @__PURE__ */ jsx(DialogTitle, {
+		/* @__PURE__ */ jsxs(DialogContent$1, {
+			showCloseButton: false,
+			overlayClassName: "bg-black/80 supports-backdrop-filter:backdrop-blur-sm",
+			className: "flex max-h-[calc(100vh-2rem)] w-auto max-w-[calc(100vw-2rem)] items-center justify-center bg-transparent p-0 ring-0 shadow-none sm:max-w-[calc(100vw-2rem)]",
+			children: [/* @__PURE__ */ jsx(DialogTitle, {
 				className: "sr-only",
 				children: alt || "Full-size image"
-			}),
-			/* @__PURE__ */ jsx("img", {
+			}), /* @__PURE__ */ jsx("img", {
 				src,
 				srcSet: props.srcSet,
 				sizes: props.sizes,
 				alt: alt || "",
-				className: "max-h-[calc(100vh-2rem)] max-w-[calc(100vw-2rem)] rounded-lg object-contain"
+				className: "max-h-[calc(100vh-2rem)] max-w-[calc(100vw-2rem)] object-contain"
+			})]
+		}),
+		/* @__PURE__ */ jsx(DialogPortal$1, { children: /* @__PURE__ */ jsx(DialogClose, {
+			render: /* @__PURE__ */ jsx("button", {
+				type: "button",
+				className: "fixed top-4 right-4 z-[60] inline-flex size-9 items-center justify-center rounded-full bg-black/60 text-white outline-none backdrop-blur-sm hover:bg-black/80 focus-visible:ring-3 focus-visible:ring-white/60",
+				"aria-label": "Close full-size image"
 			}),
-			/* @__PURE__ */ jsx(DialogClose, {
-				render: /* @__PURE__ */ jsx("button", {
-					type: "button",
-					className: "fixed top-4 right-4 inline-flex size-9 items-center justify-center rounded-full bg-black/60 text-white outline-none backdrop-blur-sm hover:bg-black/80 focus-visible:ring-3 focus-visible:ring-white/60",
-					"aria-label": "Close full-size image"
-				}),
-				children: /* @__PURE__ */ jsx(X$1, { className: "size-5" })
-			})
-		]
-	})] });
+			children: /* @__PURE__ */ jsx(X$1, { className: "size-5" })
+		}) })
+	] });
 }
 
 //#endregion
@@ -26793,9 +26793,9 @@ function PageLinks({ items = [], title, navigationLabel }) {
 
 //#endregion
 //#region src/components/SideNav.tsx
-const sectionLabelClass = "flex min-w-0 flex-1 items-center gap-[0.4rem] pb-2 pr-1 font-bold text-inherit";
-const groupLabelClass = "flex min-w-0 flex-1 items-center gap-[0.4rem] px-3 py-2 font-medium text-inherit";
-const selectedClass = "border-l-sidebar-primary font-medium text-sidebar-primary hover:text-sidebar-primary";
+const sectionLabelClass = "flex min-w-0 items-center gap-[0.4rem] pb-2 pr-1 font-bold text-inherit";
+const groupLabelClass = "flex min-w-0 items-center gap-[0.4rem] py-2 pl-3 pr-1 font-medium text-inherit";
+const selectedClass = "border-l-sidebar-primary font-bold text-sidebar-primary hover:text-sidebar-primary";
 /** True when the group's root or any descendant page is the current page. */
 function containsPage(node, pathname) {
 	if (node.root?.page.url === pathname) return true;
@@ -26828,7 +26828,7 @@ function CollapsibleGroup({ node, pathname, depth, drilldown, expandLabel, colla
 	const chevron = /* @__PURE__ */ jsx(ChevronRight, { className: "size-3.5 shrink-0 origin-center text-muted-foreground transition-[color,transform] duration-150 group-hover/section:text-sidebar-accent-foreground group-aria-expanded/collapsible-trigger:rotate-90" });
 	const isTopLevel = depth === 0;
 	const rootSelected = node.root?.page.url === pathname;
-	const headerClass = isTopLevel ? "flex min-w-0 items-center text-sidebar-foreground" : clsx("flex items-center border-sidebar-border border-l text-muted-foreground hover:text-sidebar-accent-foreground", { "pl-6": depth > 1 });
+	const headerClass = isTopLevel ? "flex min-w-0 items-center text-sidebar-foreground" : clsx("flex items-center border-l border-l-sidebar-border text-muted-foreground hover:text-sidebar-accent-foreground", { "pl-6": depth > 1 });
 	const fixedHeader = /* @__PURE__ */ jsx("div", {
 		className: clsx(headerClass, {
 			[selectedClass]: rootSelected && !isTopLevel,
@@ -26836,10 +26836,10 @@ function CollapsibleGroup({ node, pathname, depth, drilldown, expandLabel, colla
 		}),
 		children: node.root ? /* @__PURE__ */ jsxs(Link, {
 			to: node.root.page.url,
-			className: isTopLevel ? sectionLabelClass : groupLabelClass,
+			className: clsx(isTopLevel ? sectionLabelClass : groupLabelClass, "flex-1"),
 			children: [resolveIcon(node.icon), node.label]
 		}) : /* @__PURE__ */ jsxs("span", {
-			className: isTopLevel ? sectionLabelClass : groupLabelClass,
+			className: clsx(isTopLevel ? sectionLabelClass : groupLabelClass, "flex-1"),
 			children: [resolveIcon(node.icon), node.label]
 		})
 	});
@@ -26857,7 +26857,7 @@ function CollapsibleGroup({ node, pathname, depth, drilldown, expandLabel, colla
 				type: "button",
 				variant: "ghost",
 				size: "icon-xs",
-				className: clsx("group/collapsible-trigger inline-flex size-6 items-center justify-center rounded-sm text-muted-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground", { "mr-[0.35rem]": !isTopLevel }),
+				className: "group/collapsible-trigger inline-flex size-6 items-center justify-center rounded-sm text-muted-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground",
 				"aria-label": `${isExpanded ? collapseLabel : expandLabel} ${node.label}`
 			}),
 			children: chevron
@@ -26866,9 +26866,9 @@ function CollapsibleGroup({ node, pathname, depth, drilldown, expandLabel, colla
 		render: /* @__PURE__ */ jsx(Button, {
 			type: "button",
 			variant: "ghost",
-			className: clsx(headerClass, "group/section group/collapsible-trigger flex h-auto w-full items-center justify-start gap-[0.4rem] whitespace-normal rounded-none px-0 py-0 text-left hover:bg-transparent aria-expanded:bg-transparent dark:hover:bg-transparent [&>svg:last-child]:ml-auto", {
+			className: clsx(headerClass, "group/section group/collapsible-trigger flex h-auto w-full items-center justify-start gap-[0.4rem] whitespace-normal rounded-none px-0 py-0 text-left hover:bg-transparent aria-expanded:bg-transparent dark:hover:bg-transparent", {
 				"pb-2 font-bold text-sidebar-foreground": isTopLevel,
-				"border-sidebar-border border-l px-3 py-2 font-medium text-muted-foreground hover:text-sidebar-accent-foreground": !isTopLevel
+				"border-l border-l-sidebar-border px-3 py-2 font-medium text-muted-foreground hover:text-sidebar-accent-foreground": !isTopLevel
 			})
 		}),
 		children: [
@@ -26917,7 +26917,7 @@ function NavNodes({ nodes, pathname, depth, drilldown, expandLabel, collapseLabe
 				href: node.href,
 				target: node.target,
 				rel: node.target === "_blank" ? "noreferrer" : void 0,
-				className: clsx("flex min-w-0 items-center gap-[0.4rem] border-sidebar-border border-l px-3 py-[0.55rem] text-muted-foreground hover:text-sidebar-accent-foreground [overflow-wrap:anywhere]", { "pl-6": depth > 1 }),
+				className: clsx("flex min-w-0 items-center gap-[0.4rem] border-l border-l-sidebar-border px-3 py-[0.55rem] text-muted-foreground hover:text-sidebar-accent-foreground [overflow-wrap:anywhere]", { "pl-6": depth > 1 }),
 				children: [
 					resolveIcon(node.icon),
 					node.label,
@@ -26934,7 +26934,7 @@ function NavNodes({ nodes, pathname, depth, drilldown, expandLabel, collapseLabe
 			const isSelected = url === pathname;
 			rendered.push(/* @__PURE__ */ jsxs(Link, {
 				to: url,
-				className: clsx("flex min-w-0 items-center gap-[0.4rem] border-sidebar-border border-l px-3 py-[0.55rem] [overflow-wrap:anywhere]", {
+				className: clsx("flex min-w-0 items-center gap-[0.4rem] border-l border-l-sidebar-border px-3 py-[0.55rem] [overflow-wrap:anywhere]", {
 					"pl-6": depth > 1,
 					[selectedClass]: isSelected,
 					"text-muted-foreground hover:text-sidebar-accent-foreground": !isSelected

package/package.json

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

package/src/components/SideNav.tsx

@@ -11,11 +11,11 @@ import { flattenNav, isNodeHidden } from '@/lib/docs-config';
 import type { DocsTab, NavGroupNode, NavNode } from '@/lib/types';
 
 const sectionLabelClass =
-  'flex min-w-0 flex-1 items-center gap-[0.4rem] pb-2 pr-1 font-bold text-inherit';
+  'flex min-w-0 items-center gap-[0.4rem] pb-2 pr-1 font-bold text-inherit';
 const groupLabelClass =
-  'flex min-w-0 flex-1 items-center gap-[0.4rem] px-3 py-2 font-medium text-inherit';
+  'flex min-w-0 items-center gap-[0.4rem] py-2 pl-3 pr-1 font-medium text-inherit';
 const selectedClass =
-  'border-l-sidebar-primary font-medium text-sidebar-primary hover:text-sidebar-primary';
+  'border-l-sidebar-primary font-bold text-sidebar-primary hover:text-sidebar-primary';
 
 export interface SideNavProps {
   tabs: DocsTab[];
@@ -97,7 +97,7 @@ function CollapsibleGroup({
   const headerClass = isTopLevel
     ? 'flex min-w-0 items-center text-sidebar-foreground'
     : classNames(
-        'flex items-center border-sidebar-border border-l text-muted-foreground hover:text-sidebar-accent-foreground',
+        'flex items-center border-l border-l-sidebar-border text-muted-foreground hover:text-sidebar-accent-foreground',
         { 'pl-6': depth > 1 },
       );
 
@@ -109,12 +109,15 @@ function CollapsibleGroup({
       })}
     >
       {node.root ? (
-        <Link to={node.root.page.url} className={isTopLevel ? sectionLabelClass : groupLabelClass}>
+        <Link
+          to={node.root.page.url}
+          className={classNames(isTopLevel ? sectionLabelClass : groupLabelClass, 'flex-1')}
+        >
           {resolveIcon(node.icon)}
           {node.label}
         </Link>
       ) : (
-        <span className={isTopLevel ? sectionLabelClass : groupLabelClass}>
+        <span className={classNames(isTopLevel ? sectionLabelClass : groupLabelClass, 'flex-1')}>
           {resolveIcon(node.icon)}
           {node.label}
         </span>
@@ -142,10 +145,7 @@ function CollapsibleGroup({
             type="button"
             variant="ghost"
             size="icon-xs"
-            className={classNames(
-              'group/collapsible-trigger inline-flex size-6 items-center justify-center rounded-sm text-muted-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground',
-              { 'mr-[0.35rem]': !isTopLevel },
-            )}
+            className="group/collapsible-trigger inline-flex size-6 items-center justify-center rounded-sm text-muted-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground"
             aria-label={`${isExpanded ? collapseLabel : expandLabel} ${node.label}`}
           />
         }
@@ -161,10 +161,10 @@ function CollapsibleGroup({
           variant="ghost"
           className={classNames(
             headerClass,
-            'group/section group/collapsible-trigger flex h-auto w-full items-center justify-start gap-[0.4rem] whitespace-normal rounded-none px-0 py-0 text-left hover:bg-transparent aria-expanded:bg-transparent dark:hover:bg-transparent [&>svg:last-child]:ml-auto',
+            'group/section group/collapsible-trigger flex h-auto w-full items-center justify-start gap-[0.4rem] whitespace-normal rounded-none px-0 py-0 text-left hover:bg-transparent aria-expanded:bg-transparent dark:hover:bg-transparent',
             {
               'pb-2 font-bold text-sidebar-foreground': isTopLevel,
-              'border-sidebar-border border-l px-3 py-2 font-medium text-muted-foreground hover:text-sidebar-accent-foreground':
+              'border-l border-l-sidebar-border px-3 py-2 font-medium text-muted-foreground hover:text-sidebar-accent-foreground':
                 !isTopLevel,
             },
           )}
@@ -244,7 +244,7 @@ function NavNodes({
           target={node.target}
           rel={node.target === '_blank' ? 'noreferrer' : undefined}
           className={classNames(
-            'flex min-w-0 items-center gap-[0.4rem] border-sidebar-border border-l px-3 py-[0.55rem] text-muted-foreground hover:text-sidebar-accent-foreground [overflow-wrap:anywhere]',
+            'flex min-w-0 items-center gap-[0.4rem] border-l border-l-sidebar-border px-3 py-[0.55rem] text-muted-foreground hover:text-sidebar-accent-foreground [overflow-wrap:anywhere]',
             { 'pl-6': depth > 1 },
           )}
         >
@@ -265,7 +265,7 @@ function NavNodes({
           key={url}
           to={url}
           className={classNames(
-            'flex min-w-0 items-center gap-[0.4rem] border-sidebar-border border-l px-3 py-[0.55rem] [overflow-wrap:anywhere]',
+            'flex min-w-0 items-center gap-[0.4rem] border-l border-l-sidebar-border px-3 py-[0.55rem] [overflow-wrap:anywhere]',
             {
               'pl-6': depth > 1,
               [selectedClass]: isSelected,

package/src/components/docs/ZoomableImage.tsx

@@ -4,6 +4,7 @@ import {
   Dialog,
   DialogClose,
   DialogContent,
+  DialogPortal,
   DialogTitle,
   DialogTrigger,
 } from '@/components/ui/dialog';
@@ -60,20 +61,22 @@ export function ZoomableImage({
           srcSet={props.srcSet}
           sizes={props.sizes}
           alt={alt || ''}
-          className="max-h-[calc(100vh-2rem)] max-w-[calc(100vw-2rem)] rounded-lg object-contain"
+          className="max-h-[calc(100vh-2rem)] max-w-[calc(100vw-2rem)] object-contain"
         />
+      </DialogContent>
+      <DialogPortal>
         <DialogClose
           render={
             <button
               type="button"
-              className="fixed top-4 right-4 inline-flex size-9 items-center justify-center rounded-full bg-black/60 text-white outline-none backdrop-blur-sm hover:bg-black/80 focus-visible:ring-3 focus-visible:ring-white/60"
+              className="fixed top-4 right-4 z-[60] inline-flex size-9 items-center justify-center rounded-full bg-black/60 text-white outline-none backdrop-blur-sm hover:bg-black/80 focus-visible:ring-3 focus-visible:ring-white/60"
               aria-label="Close full-size image"
             />
           }
         >
           <XIcon className="size-5" />
         </DialogClose>
-      </DialogContent>
+      </DialogPortal>
     </Dialog>
   );
 }