@umami/shiso 1.10.0 → 1.11.0

package/dist/chunks/App.js

@@ -1193,7 +1193,7 @@ function CodeBlock({ children, className }) {
 	};
 	return /* @__PURE__ */ jsxs("div", {
 		"data-slot": "code-block",
-		className: "relative my-5 overflow-hidden rounded-lg bg-muted/50",
+		className: "relative my-5 overflow-hidden rounded-lg bg-card",
 		children: [/* @__PURE__ */ jsx(ScrollArea, {
 			scrollbars: "horizontal",
 			className: "w-full",
@@ -8085,10 +8085,10 @@ function DocContent({ page, doc, site }) {
 	});
 }
 const NavigationButton = ({ label, url, eyebrow, isPrev }) => {
-	if (!url || !label) return /* @__PURE__ */ jsx("div", {});
+	if (!url || !label) return /* @__PURE__ */ jsx("div", { className: "flex-1" });
 	return /* @__PURE__ */ jsxs(Link, {
 		to: url,
-		className: cn("group my-3 inline-flex items-end gap-3 text-base text-foreground", { "text-right": !isPrev }),
+		className: cn("group flex flex-1 items-end gap-3 py-3 text-base text-foreground", { "justify-end text-right": !isPrev }),
 		rel: isPrev ? "prev" : "next",
 		children: [
 			isPrev && /* @__PURE__ */ jsx(ArrowLeft, {

package/dist/chunks/docs.js

@@ -9832,7 +9832,8 @@ const styles = {
 	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",
+	expandableTrigger: "items-center py-3 text-sm font-normal text-foreground hover:no-underline",
+	expandableContent: "pl-6",
 	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",
 	calloutBody: "flex min-w-0 flex-1 flex-col gap-[0.35rem] [&>:first-child]:mt-0 [&>:last-child]:mb-0 [&_:where(p,ul,ol)]:my-[0.35rem] [&>:where(p,ul,ol):first-child]:mt-0 [&>:where(p,ul,ol):last-child]:mb-0",
@@ -9844,7 +9845,8 @@ 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-primary",
+	card: "block h-full gap-0 rounded-lg border border-border p-4 text-sm ring-0 hover:border-primary",
+	cardPlain: "bg-card",
 	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",
@@ -9853,7 +9855,7 @@ const styles = {
 	cardMain: "flex min-w-0 flex-col gap-2",
 	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",
+	cardTitle: "text-sm 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",
 	cardArrow: "shrink-0 text-muted-foreground",
@@ -10377,7 +10379,7 @@ function DocsCardContent({ title, icon, color, img, cta, arrow, type, children }
 function Card({ title, href, icon, color, img, cta, horizontal, arrow, type, children }) {
 	const external = typeof href === "string" && /^https?:\/\//i.test(href);
 	const showArrow = arrow ?? external;
-	const className = `${styles.card} ${type ? `${styles.cardTyped} ${styles[type]} ${CARD_TYPE_HOVER[type]}` : ""} ${horizontal ? styles.cardHorizontal : ""} ${img ? styles.cardImageLayout : ""}`;
+	const className = `${styles.card} ${type ? `${styles.cardTyped} ${styles[type]} ${CARD_TYPE_HOVER[type]}` : styles.cardPlain} ${horizontal ? styles.cardHorizontal : ""} ${img ? styles.cardImageLayout : ""}`;
 	const content = /* @__PURE__ */ jsx(Card$1, {
 		className,
 		children: /* @__PURE__ */ jsx(DocsCardContent, {
@@ -11304,7 +11306,7 @@ function CodeGroup({ children }) {
 	return /* @__PURE__ */ jsxs(Tabs$1, {
 		value: selected,
 		onValueChange: setSelectedKey,
-		className: "my-4 gap-0 overflow-hidden rounded-lg bg-muted/50 [&_[data-slot=code-block]]:my-0 [&_[data-slot=code-block]]:rounded-none [&_[data-slot=code-block]]:border-0 [&_[data-slot=code-block]]:bg-transparent",
+		className: "my-4 gap-0 overflow-hidden rounded-lg bg-card [&_[data-slot=code-block]]:my-0 [&_[data-slot=code-block]]:rounded-none [&_[data-slot=code-block]]:border-0 [&_[data-slot=code-block]]:bg-transparent",
 		children: [/* @__PURE__ */ jsx(TabsList, {
 			variant: "line",
 			className: "h-9 w-full justify-start gap-5 overflow-x-auto overflow-y-hidden rounded-none px-3 py-0 shadow-[inset_0_-1px_0_var(--border)] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden",
@@ -11541,7 +11543,7 @@ function Expandable({ title, children, defaultOpen = false }) {
 				className: `${styles.expandableTrigger} group/collapsible-trigger flex w-full justify-start gap-2 text-left outline-none focus-visible:ring-3 focus-visible:ring-ring/50`,
 				children: [/* @__PURE__ */ jsx(ChevronRight, { className: "size-4 shrink-0 text-muted-foreground transition-transform group-aria-expanded/collapsible-trigger:rotate-90" }), title]
 			}), /* @__PURE__ */ jsx(CollapsibleContent, { children: /* @__PURE__ */ jsx("div", {
-				className: styles.accordionContent,
+				className: `${styles.accordionContent} ${styles.expandableContent}`,
 				children
 			}) })]
 		})
@@ -11725,53 +11727,43 @@ function PropertiesTable({ children }) {
 	const rows = toElementArray(children);
 	if (!rows.length) return null;
 	return /* @__PURE__ */ jsx("div", {
-		className: "my-4 overflow-x-auto rounded-lg border border-border px-6 py-2",
+		className: "my-4 overflow-x-auto",
 		children: /* @__PURE__ */ jsxs("table", {
-			className: "m-0 min-w-[40rem] table-fixed border-collapse border-0",
+			className: "m-0 min-w-[40rem] table-fixed",
 			children: [/* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", { children: [
 				/* @__PURE__ */ jsx("th", {
-					className: "w-1/5 border-x-0 border-t-0 border-b border-border bg-transparent px-0 py-2 pr-6 text-left text-sm font-semibold text-foreground",
+					className: "w-1/5",
 					children: "Name"
 				}),
 				/* @__PURE__ */ jsx("th", {
-					className: "w-1/4 border-x-0 border-t-0 border-b border-border bg-transparent px-0 py-2 pr-6 text-left text-sm font-semibold text-foreground",
+					className: "w-1/4",
 					children: "Type"
 				}),
-				/* @__PURE__ */ jsx("th", {
-					className: "border-x-0 border-t-0 border-b border-border bg-transparent px-0 py-2 text-left text-sm font-semibold text-foreground",
-					children: "Description"
-				})
-			] }) }), /* @__PURE__ */ jsx("tbody", { children: rows.map((row, index) => {
+				/* @__PURE__ */ jsx("th", { children: "Description" })
+			] }) }), /* @__PURE__ */ jsx("tbody", { children: rows.map((row) => {
 				const { name, type, required, deprecated, children: description } = row.props;
 				const defaultValue = displayValue(row.props.default);
-				const borderClass = index === rows.length - 1 ? "border-b-0" : "border-b";
 				return /* @__PURE__ */ jsxs("tr", { children: [
-					/* @__PURE__ */ jsx("td", {
-						className: `${borderClass} border-x-0 border-t-0 border-border px-0 py-2 pr-6 align-top text-sm text-foreground`,
-						children: /* @__PURE__ */ jsxs("span", {
-							className: "inline-flex flex-wrap items-center gap-2",
-							children: [
-								name,
-								required ? /* @__PURE__ */ jsx(Badge, {
-									size: "xs",
-									tone: "primary",
-									children: "required"
-								}) : null,
-								deprecated ? /* @__PURE__ */ jsx(Badge, {
-									size: "xs",
-									children: "deprecated"
-								}) : null
-							]
-						})
-					}),
-					/* @__PURE__ */ jsx("td", {
-						className: `${borderClass} border-x-0 border-t-0 border-border px-0 py-2 pr-6 align-top text-sm text-foreground`,
-						children: displayValue(type)
-					}),
+					/* @__PURE__ */ jsx("td", { children: /* @__PURE__ */ jsxs("span", {
+						className: "inline-flex flex-wrap items-center gap-2",
+						children: [
+							name,
+							required ? /* @__PURE__ */ jsx(Badge, {
+								size: "xs",
+								tone: "primary",
+								children: "required"
+							}) : null,
+							deprecated ? /* @__PURE__ */ jsx(Badge, {
+								size: "xs",
+								children: "deprecated"
+							}) : null
+						]
+					}) }),
+					/* @__PURE__ */ jsx("td", { children: displayValue(type) }),
 					/* @__PURE__ */ jsxs("td", {
-						className: `${borderClass} border-x-0 border-t-0 border-border px-0 py-2 align-top text-sm leading-6 text-foreground [&_p]:m-0`,
+						className: "[&_p]:m-0",
 						children: [description, defaultValue ? /* @__PURE__ */ jsxs("span", {
-							className: "mt-1 block text-sm text-muted-foreground",
+							className: "mt-1 block text-muted-foreground",
 							children: ["Default: ", defaultValue]
 						}) : null]
 					})

package/package.json

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

package/src/components/CodeBlock.tsx

@@ -22,7 +22,7 @@ export function CodeBlock({ children, className }: CodeBlockProps) {
   };
 
   return (
-    <div data-slot="code-block" className="relative my-5 overflow-hidden rounded-lg bg-muted/50">
+    <div data-slot="code-block" className="relative my-5 overflow-hidden rounded-lg bg-card">
       <ScrollArea scrollbars="horizontal" className="w-full">
         <pre
           ref={textInput}

package/src/components/DocContent.tsx

@@ -170,14 +170,17 @@ const NavigationButton = ({
   isPrev?: boolean;
 }) => {
   if (!url || !label) {
-    return <div />;
+    return <div className="flex-1" />;
   }
 
   return (
     <Link
       to={url}
-      className={cn('group my-3 inline-flex items-end gap-3 text-base text-foreground', {
-        'text-right': !isPrev,
+      // The link stretches across its half of the row so the whole box is
+      // clickable, not just the text. Vertical margin became padding for the
+      // same reason.
+      className={cn('group flex flex-1 items-end gap-3 py-3 text-base text-foreground', {
+        'justify-end text-right': !isPrev,
       })}
       rel={isPrev ? 'prev' : 'next'}
     >

package/src/components/docs/Card.tsx

@@ -110,7 +110,7 @@ export function Card({
 }: CardProps) {
   const external = typeof href === 'string' && /^https?:\/\//i.test(href);
   const showArrow = arrow ?? external;
-  const className = `${styles.card} ${type ? `${styles.cardTyped} ${styles[type]} ${CARD_TYPE_HOVER[type]}` : ''} ${horizontal ? styles.cardHorizontal : ''} ${img ? styles.cardImageLayout : ''}`;
+  const className = `${styles.card} ${type ? `${styles.cardTyped} ${styles[type]} ${CARD_TYPE_HOVER[type]}` : styles.cardPlain} ${horizontal ? styles.cardHorizontal : ''} ${img ? styles.cardImageLayout : ''}`;
   const content = (
     <CardPrimitive className={className}>
       <DocsCardContent

package/src/components/docs/CodeGroup.tsx

@@ -46,7 +46,7 @@ export function CodeGroup({ children }: CodeGroupProps) {
     <TabsPrimitive
       value={selected}
       onValueChange={setSelectedKey}
-      className="my-4 gap-0 overflow-hidden rounded-lg bg-muted/50 [&_[data-slot=code-block]]:my-0 [&_[data-slot=code-block]]:rounded-none [&_[data-slot=code-block]]:border-0 [&_[data-slot=code-block]]:bg-transparent"
+      className="my-4 gap-0 overflow-hidden rounded-lg bg-card [&_[data-slot=code-block]]:my-0 [&_[data-slot=code-block]]:rounded-none [&_[data-slot=code-block]]:border-0 [&_[data-slot=code-block]]:bg-transparent"
     >
       <TabsList
         variant="line"

package/src/components/docs/Expandable.tsx

@@ -20,7 +20,7 @@ export function Expandable({ title, children, defaultOpen = false }: ExpandableP
           {title}
         </CollapsibleTrigger>
         <CollapsibleContent>
-          <div className={styles.accordionContent}>{children}</div>
+          <div className={`${styles.accordionContent} ${styles.expandableContent}`}>{children}</div>
         </CollapsibleContent>
       </div>
     </Collapsible>

package/src/components/docs/PropertiesTable.tsx

@@ -22,33 +22,26 @@ export function PropertiesTable({ children }: PropertiesTableProps) {
     return null;
   }
 
+  // Rendered as a plain table so the .docs-markdown table rules in global.css
+  // style it exactly like a GFM table; only column widths are set here.
   return (
-    <div className="my-4 overflow-x-auto rounded-lg border border-border px-6 py-2">
-      <table className="m-0 min-w-[40rem] table-fixed border-collapse border-0">
+    <div className="my-4 overflow-x-auto">
+      <table className="m-0 min-w-[40rem] table-fixed">
         <thead>
           <tr>
-            <th className="w-1/5 border-x-0 border-t-0 border-b border-border bg-transparent px-0 py-2 pr-6 text-left text-sm font-semibold text-foreground">
-              Name
-            </th>
-            <th className="w-1/4 border-x-0 border-t-0 border-b border-border bg-transparent px-0 py-2 pr-6 text-left text-sm font-semibold text-foreground">
-              Type
-            </th>
-            <th className="border-x-0 border-t-0 border-b border-border bg-transparent px-0 py-2 text-left text-sm font-semibold text-foreground">
-              Description
-            </th>
+            <th className="w-1/5">Name</th>
+            <th className="w-1/4">Type</th>
+            <th>Description</th>
           </tr>
         </thead>
         <tbody>
-          {rows.map((row, index) => {
+          {rows.map(row => {
             const { name, type, required, deprecated, children: description } = row.props;
             const defaultValue = displayValue(row.props.default);
-            const borderClass = index === rows.length - 1 ? 'border-b-0' : 'border-b';
 
             return (
               <tr key={row.key ?? name}>
-                <td
-                  className={`${borderClass} border-x-0 border-t-0 border-border px-0 py-2 pr-6 align-top text-sm text-foreground`}
-                >
+                <td>
                   <span className="inline-flex flex-wrap items-center gap-2">
                     {name}
                     {required ? (
@@ -59,17 +52,11 @@ export function PropertiesTable({ children }: PropertiesTableProps) {
                     {deprecated ? <Badge size="xs">deprecated</Badge> : null}
                   </span>
                 </td>
-                <td
-                  className={`${borderClass} border-x-0 border-t-0 border-border px-0 py-2 pr-6 align-top text-sm text-foreground`}
-                >
-                  {displayValue(type)}
-                </td>
-                <td
-                  className={`${borderClass} border-x-0 border-t-0 border-border px-0 py-2 align-top text-sm leading-6 text-foreground [&_p]:m-0`}
-                >
+                <td>{displayValue(type)}</td>
+                <td className="[&_p]:m-0">
                   {description}
                   {defaultValue ? (
-                    <span className="mt-1 block text-sm text-muted-foreground">
+                    <span className="mt-1 block text-muted-foreground">
                       Default: {defaultValue}
                     </span>
                   ) : null}

package/src/components/docs/styles.ts

@@ -9,8 +9,9 @@ export const styles = {
   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',
+  expandableTrigger: 'items-center py-3 text-sm font-normal text-foreground hover:no-underline',
+  /* Indent by chevron width + gap so body text lines up with the title. */
+  expandableContent: 'pl-6',
 
   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',
@@ -27,7 +28,9 @@ 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-primary',
+  card: 'block h-full gap-0 rounded-lg border border-border p-4 text-sm ring-0 hover:border-primary',
+  /* Typed cards bring their own tinted background; plain cards get the surface tint. */
+  cardPlain: 'bg-card',
   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:
@@ -38,7 +41,7 @@ export const styles = {
   cardMain: 'flex min-w-0 flex-col gap-2',
   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',
+  cardTitle: 'text-sm 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',

package/src/styles/global.css

@@ -186,8 +186,8 @@
     font-size: 0.875rem;
   }
 
-  /* Styled to match the PropertiesTable component: rounded outer border,
-     horizontal row separators only, and no header fill. */
+  /* Shared by GFM tables and the PropertiesTable component: rounded outer border,
+     horizontal row separators only, and a card-colored header fill. */
   .docs-markdown table:not(:where(.not-prose, .not-prose *)) {
     width: 100%;
     margin: 1rem 0;
@@ -222,10 +222,19 @@
   }
 
   .docs-markdown th:not(:where(.not-prose, .not-prose *)) {
-    background: transparent;
+    background: var(--card);
     font-weight: 600;
   }
 
+  /* The header fill must follow the table's rounded top corners. */
+  .docs-markdown th:first-child:not(:where(.not-prose, .not-prose *)) {
+    border-top-left-radius: calc(var(--radius-lg) - 1px);
+  }
+
+  .docs-markdown th:last-child:not(:where(.not-prose, .not-prose *)) {
+    border-top-right-radius: calc(var(--radius-lg) - 1px);
+  }
+
   .docs-markdown tbody tr:last-child td:not(:where(.not-prose, .not-prose *)) {
     border-bottom: none;
   }