fumadocs-ui 15.2.14 → 15.3.0

package/dist/page-client.js

@@ -6,7 +6,6 @@ import Link from 'fumadocs-core/link';
 import { cn } from './utils/cn.js';
 import { useI18n } from './contexts/i18n.js';
 import { useTreeContext, useTreePath } from './contexts/tree.js';
-import { useSidebar } from './contexts/sidebar.js';
 import { createContext, usePathname } from 'fumadocs-core/framework';
 import { getBreadcrumbItemsFromPath, } from 'fumadocs-core/breadcrumb';
 import { useNav, usePageStyles } from './contexts/layout.js';
@@ -21,8 +20,8 @@ export function TocPopoverTrigger({ items, ...props }) {
     const active = Primitive.useActiveAnchor();
     const selected = useMemo(() => items.findIndex((item) => active === item.url.slice(1)), [items, active]);
     const path = useTreePath().at(-1);
-    const showCurrent = selected !== -1 && !open;
-    return (_jsxs(CollapsibleTrigger, { ...props, className: cn('flex flex-row items-center text-sm text-fd-muted-foreground gap-2.5 px-4 py-2.5 text-start focus-visible:outline-none [&_svg]:shrink-0 [&_svg]:size-4 md:px-6', props.className), children: [_jsx(ProgressCircle, { value: (selected + 1) / items.length, max: 1, className: cn(open && 'text-fd-primary') }), _jsxs("span", { className: cn('grid flex-1 *:row-start-1 *:col-start-1', open && 'text-fd-foreground'), children: [_jsx("span", { className: cn('truncate transition-all', showCurrent && 'opacity-0 -translate-y-full pointer-events-none'), children: path?.name ?? text.toc }), _jsx("span", { className: cn('truncate transition-all', !showCurrent && 'opacity-0 translate-y-full pointer-events-none'), children: items[selected]?.title })] }), _jsx(ChevronDown, { className: cn('transition-transform', open && 'rotate-180') })] }));
+    const showItem = selected !== -1 && !open;
+    return (_jsxs(CollapsibleTrigger, { ...props, className: cn('flex flex-row items-center text-sm text-fd-muted-foreground gap-2.5 px-4 py-2.5 text-start focus-visible:outline-none [&_svg]:shrink-0 [&_svg]:size-4 md:px-6', props.className), children: [_jsx(ProgressCircle, { value: (selected + 1) / items.length, max: 1, className: cn(open && 'text-fd-primary') }), _jsxs("span", { className: "grid flex-1 *:row-start-1 *:col-start-1", children: [_jsx("span", { className: cn('truncate transition-all', open && 'text-fd-foreground', showItem && 'opacity-0 -translate-y-full pointer-events-none'), children: path?.name ?? text.toc }), _jsx("span", { className: cn('truncate transition-all', !showItem && 'opacity-0 translate-y-full pointer-events-none'), children: items[selected]?.title })] }), _jsx(ChevronDown, { className: cn('opacity-50 transition-transform', open && 'rotate-180') })] }));
 }
 function clamp(input, min, max) {
     if (input < min)
@@ -51,7 +50,6 @@ export function TocPopoverContent(props) {
 export function TocPopover(props) {
     const ref = useRef(null);
     const [open, setOpen] = useState(false);
-    const sidebar = useSidebar();
     const { tocNav } = usePageStyles();
     const { isTransparent } = useNav();
     const onClick = useEffectEvent((e) => {
@@ -72,7 +70,7 @@ export function TocPopover(props) {
         }, children: _jsx(TocPopoverContext.Provider, { value: useMemo(() => ({
                 open,
                 setOpen,
-            }), [setOpen, open]), children: _jsx(Collapsible, { open: open, onOpenChange: setOpen, asChild: true, children: _jsx("header", { ref: ref, id: "nd-tocnav", ...props, className: cn('border-b border-fd-foreground/10 backdrop-blur-sm transition-colors', (!isTransparent || open) && 'bg-fd-background/80', open && 'shadow-lg', sidebar.open && 'max-md:hidden'), children: props.children }) }) }) }));
+            }), [setOpen, open]), children: _jsx(Collapsible, { open: open, onOpenChange: setOpen, asChild: true, children: _jsx("header", { ref: ref, id: "nd-tocnav", ...props, className: cn('border-b backdrop-blur-sm transition-colors', (!isTransparent || open) && 'bg-fd-background/80', open && 'shadow-lg'), children: props.children }) }) }) }));
 }
 export function PageBody(props) {
     const { page } = usePageStyles();

package/dist/page.d.ts

@@ -1,5 +1,5 @@
 import type { TableOfContents } from 'fumadocs-core/server';
-import { type AnchorHTMLAttributes, type ComponentProps, type HTMLAttributes, type ReactNode } from 'react';
+import { type ComponentProps, type HTMLAttributes, type ReactNode } from 'react';
 import { type AnchorProviderProps } from 'fumadocs-core/toc';
 import { type BreadcrumbProps, type FooterProps } from './page-client.js';
 import { type TOCProps } from './components/layout/toc.js';
@@ -12,7 +12,7 @@ type TableOfContentOptions = Omit<TOCProps, 'items' | 'children'> & Pick<AnchorP
     style?: 'normal' | 'clerk';
 };
 type TableOfContentPopoverOptions = Omit<TableOfContentOptions, 'single'>;
-interface EditOnGitHubOptions extends Omit<AnchorHTMLAttributes<HTMLAnchorElement>, 'href' | 'children'> {
+interface EditOnGitHubOptions extends Omit<ComponentProps<'a'>, 'href' | 'children'> {
     owner: string;
     repo: string;
     /**

package/dist/page.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"page.d.ts","sourceRoot":"","sources":["../src/page.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"page.d.ts","sourceRoot":"","sources":["../src/page.tsx"],"names":[],"mappings":"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"}

package/dist/style.css

@@ -47,13 +47,24 @@
     --color-fd-popover-foreground: hsl(0, 0%, 15.1%);
     --color-fd-card: hsl(0, 0%, 94.7%);
     --color-fd-card-foreground: hsl(0, 0%, 3.9%);
-    --color-fd-border: hsl(0, 0%, 89.8%);
+    --color-fd-border: hsla(0, 0%, 62%, 20%);
     --color-fd-primary: hsl(0, 0%, 9%);
     --color-fd-primary-foreground: hsl(0, 0%, 98%);
     --color-fd-secondary: hsl(0, 0%, 93.1%);
     --color-fd-secondary-foreground: hsl(0, 0%, 9%);
     --color-fd-accent: hsl(0, 0%, 90.1%);
     --color-fd-accent-foreground: hsl(0, 0%, 9%);
+    --spacing-fd-container: 1400px;
+    --fd-sidebar-width: 0px;
+    --fd-toc-width: 0px;
+    --fd-layout-width: 100vw;
+    --fd-banner-height: 0px;
+    --fd-nav-height: 0px;
+    --fd-tocnav-height: 0px;
+    --color-fd-diff-remove: rgba(200, 10, 100, 0.12);
+    --color-fd-diff-remove-symbol: rgb(230, 10, 100);
+    --color-fd-diff-add: rgba(14, 180, 100, 0.12);
+    --color-fd-diff-add-symbol: rgb(10, 200, 100);
     --animate-fd-fade-in: fd-fade-in 300ms ease;
     --animate-fd-fade-out: fd-fade-out 300ms ease;
     --animate-fd-dialog-in: fd-dialog-in 200ms cubic-bezier(0.32, 0.72, 0, 1);
@@ -70,17 +81,6 @@
     --animate-fd-enterFromRight: fd-enterFromRight 250ms ease;
     --animate-fd-exitToLeft: fd-exitToLeft 250ms ease;
     --animate-fd-exitToRight: fd-exitToRight 250ms ease;
-    --spacing-fd-container: 1400px;
-    --fd-sidebar-width: 0px;
-    --fd-toc-width: 0px;
-    --fd-layout-width: 100vw;
-    --fd-banner-height: 0px;
-    --fd-nav-height: 0px;
-    --fd-tocnav-height: 0px;
-    --fd-diff-remove-color: rgba(200, 10, 100, 0.12);
-    --fd-diff-remove-symbol-color: rgb(230, 10, 100);
-    --fd-diff-add-color: rgba(14, 180, 100, 0.12);
-    --fd-diff-add-symbol-color: rgb(10, 200, 100);
   }
 }
 @layer base {
@@ -238,6 +238,9 @@
   .collapse {
     visibility: collapse;
   }
+  .invisible {
+    visibility: hidden;
+  }
   .visible {
     visibility: visible;
   }
@@ -297,8 +300,8 @@
   .inset-y-0 {
     inset-block: calc(var(--spacing) * 0);
   }
-  .inset-y-2 {
-    inset-block: calc(var(--spacing) * 2);
+  .inset-y-3 {
+    inset-block: calc(var(--spacing) * 3);
   }
   .start-0 {
     inset-inline-start: calc(var(--spacing) * 0);
@@ -318,6 +321,9 @@
   .top-\(--fd-nav-height\) {
     top: var(--fd-nav-height);
   }
+  .top-\(--fd-sidebar-top\) {
+    top: var(--fd-sidebar-top);
+  }
   .top-\(--fd-top\) {
     top: var(--fd-top);
   }
@@ -348,6 +354,9 @@
   .bottom-1\.5 {
     bottom: calc(var(--spacing) * 1.5);
   }
+  .left-\(--fd-nav-left\) {
+    left: var(--fd-nav-left);
+  }
   .left-1\/2 {
     left: calc(1/2 * 100%);
   }
@@ -421,9 +430,6 @@
   .my-auto {
     margin-block: auto;
   }
-  .-ms-1 {
-    margin-inline-start: calc(var(--spacing) * -1);
-  }
   .-ms-1\.5 {
     margin-inline-start: calc(var(--spacing) * -1.5);
   }
@@ -436,6 +442,9 @@
   .ms-auto {
     margin-inline-start: auto;
   }
+  .-me-\(--fd-sidebar-width\) {
+    margin-inline-end: calc(var(--fd-sidebar-width) * -1);
+  }
   .-me-1\.5 {
     margin-inline-end: calc(var(--spacing) * -1.5);
   }
@@ -911,6 +920,9 @@
   .h-\(--fd-height\) {
     height: var(--fd-height);
   }
+  .h-\(--fd-sidebar-height\) {
+    height: var(--fd-sidebar-height);
+  }
   .h-\(--fd-toc-height\) {
     height: var(--fd-toc-height);
   }
@@ -950,6 +962,9 @@
   .min-h-10 {
     min-height: calc(var(--spacing) * 10);
   }
+  .w-\(--fd-sidebar-width\) {
+    width: var(--fd-sidebar-width);
+  }
   .w-\(--fd-toc-width\) {
     width: var(--fd-toc-width);
   }
@@ -971,6 +986,9 @@
   .w-\[45\%\] {
     width: 45%;
   }
+  .w-\[85\%\] {
+    width: 85%;
+  }
   .w-\[98vw\] {
     width: 98vw;
   }
@@ -992,6 +1010,9 @@
   .max-w-\[240px\] {
     max-width: 240px;
   }
+  .max-w-\[380px\] {
+    max-width: 380px;
+  }
   .max-w-\[400px\] {
     max-width: 400px;
   }
@@ -1031,10 +1052,18 @@
   .origin-\[top_center\] {
     transform-origin: top center;
   }
+  .-translate-x-\(--fd-sidebar-offset\) {
+    --tw-translate-x: calc(var(--fd-sidebar-offset) * -1);
+    translate: var(--tw-translate-x) var(--tw-translate-y);
+  }
   .-translate-x-1\/2 {
     --tw-translate-x: calc(calc(1/2 * 100%) * -1);
     translate: var(--tw-translate-x) var(--tw-translate-y);
   }
+  .translate-x-0 {
+    --tw-translate-x: calc(var(--spacing) * 0);
+    translate: var(--tw-translate-x) var(--tw-translate-y);
+  }
   .-translate-y-1\/2 {
     --tw-translate-y: calc(calc(1/2 * 100%) * -1);
     translate: var(--tw-translate-x) var(--tw-translate-y);
@@ -1128,6 +1157,9 @@
   .gap-3 {
     gap: calc(var(--spacing) * 3);
   }
+  .gap-3\.5 {
+    gap: calc(var(--spacing) * 3.5);
+  }
   .gap-4 {
     gap: calc(var(--spacing) * 4);
   }
@@ -1183,6 +1215,10 @@
   .rounded-xl {
     border-radius: var(--radius-xl);
   }
+  .rounded-e-xl {
+    border-start-end-radius: var(--radius-xl);
+    border-end-end-radius: var(--radius-xl);
+  }
   .border {
     border-style: var(--tw-border-style);
     border-width: 1px;
@@ -1195,6 +1231,10 @@
     border-inline-start-style: var(--tw-border-style);
     border-inline-start-width: 2px;
   }
+  .border-e {
+    border-inline-end-style: var(--tw-border-style);
+    border-inline-end-width: 1px;
+  }
   .border-t {
     border-top-style: var(--tw-border-style);
     border-top-width: 1px;
@@ -1417,8 +1457,8 @@
   .pt-0 {
     padding-top: calc(var(--spacing) * 0);
   }
-  .pt-2 {
-    padding-top: calc(var(--spacing) * 2);
+  .pt-4 {
+    padding-top: calc(var(--spacing) * 4);
   }
   .pt-8 {
     padding-top: calc(var(--spacing) * 8);
@@ -1432,9 +1472,6 @@
   .pb-2 {
     padding-bottom: calc(var(--spacing) * 2);
   }
-  .pb-4 {
-    padding-bottom: calc(var(--spacing) * 4);
-  }
   .pb-6 {
     padding-bottom: calc(var(--spacing) * 6);
   }
@@ -1550,6 +1587,9 @@
   .opacity-0 {
     opacity: 0%;
   }
+  .opacity-50 {
+    opacity: 50%;
+  }
   .shadow-lg {
     --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
@@ -1626,6 +1666,10 @@
     --tw-duration: 300ms;
     transition-duration: 300ms;
   }
+  .outline-none {
+    --tw-outline-style: none;
+    outline-style: none;
+  }
   .select-none {
     -webkit-user-select: none;
     user-select: none;
@@ -1649,6 +1693,16 @@
       grid-row-start: 1;
     }
   }
+  .\*\:block {
+    :is(& > *) {
+      display: block;
+    }
+  }
+  .\*\:w-full {
+    :is(& > *) {
+      width: 100%;
+    }
+  }
   .group-hover\:opacity-100 {
     &:is(:where(.group):hover *) {
       @media (hover: hover) {
@@ -1863,6 +1917,11 @@
       animation: var(--animate-fd-dialog-out);
     }
   }
+  .data-\[state\=closed\]\:animate-fd-exitToLeft {
+    &[data-state="closed"] {
+      animation: var(--animate-fd-exitToLeft);
+    }
+  }
   .data-\[state\=closed\]\:animate-fd-fade-out {
     &[data-state="closed"] {
       animation: var(--animate-fd-fade-out);
@@ -1898,6 +1957,11 @@
       animation: var(--animate-fd-dialog-in);
     }
   }
+  .data-\[state\=open\]\:animate-fd-enterFromLeft {
+    &[data-state="open"] {
+      animation: var(--animate-fd-enterFromLeft);
+    }
+  }
   .data-\[state\=open\]\:animate-fd-fade-in {
     &[data-state="open"] {
       animation: var(--animate-fd-fade-in);
@@ -1961,31 +2025,19 @@
       background-color: var(--color-fd-background);
     }
   }
-  .max-md\:bg-fd-background\/80 {
+  .max-md\:pt-6 {
     @media (width < 48rem) {
-      background-color: color-mix(in srgb, hsl(0, 0%, 96%) 80%, transparent);
-      @supports (color: color-mix(in lab, red, red)) {
-        background-color: color-mix(in oklab, var(--color-fd-background) 80%, transparent);
-      }
+      padding-top: calc(var(--spacing) * 6);
     }
   }
-  .max-md\:text-\[15px\] {
+  .max-md\:pb-4 {
     @media (width < 48rem) {
-      font-size: 15px;
+      padding-bottom: calc(var(--spacing) * 4);
     }
   }
-  .max-md\:backdrop-blur-lg {
+  .max-md\:pb-6 {
     @media (width < 48rem) {
-      --tw-backdrop-blur: blur(var(--blur-lg));
-      -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
-      backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
-    }
-  }
-  .max-md\:data-\[open\=false\]\:invisible {
-    @media (width < 48rem) {
-      &[data-open="false"] {
-        visibility: hidden;
-      }
+      padding-bottom: calc(var(--spacing) * 6);
     }
   }
   .max-sm\:mt-2 {
@@ -2023,19 +2075,14 @@
       position: sticky;
     }
   }
-  .md\:mx-auto {
+  .md\:inset-y-2 {
     @media (width >= 48rem) {
-      margin-inline: auto;
-    }
-  }
-  .md\:ms-auto {
-    @media (width >= 48rem) {
-      margin-inline-start: auto;
+      inset-block: calc(var(--spacing) * 2);
     }
   }
-  .md\:-me-\(--fd-sidebar-width\) {
+  .md\:mx-auto {
     @media (width >= 48rem) {
-      margin-inline-end: calc(var(--fd-sidebar-width) * -1);
+      margin-inline: auto;
     }
   }
   .md\:hidden {
@@ -2043,47 +2090,24 @@
       display: none;
     }
   }
-  .md\:h-\(--fd-sidebar-height\) {
-    @media (width >= 48rem) {
-      height: var(--fd-sidebar-height);
-    }
-  }
   .md\:h-\[calc\(100dvh-56px\)\] {
     @media (width >= 48rem) {
       height: calc(100dvh - 56px);
     }
   }
-  .md\:w-\(--fd-sidebar-width\) {
-    @media (width >= 48rem) {
-      width: var(--fd-sidebar-width);
-    }
-  }
   .md\:w-\[300px\] {
     @media (width >= 48rem) {
       width: 300px;
     }
   }
-  .md\:-translate-x-\(--fd-sidebar-offset\) {
-    @media (width >= 48rem) {
-      --tw-translate-x: calc(var(--fd-sidebar-offset) * -1);
-      translate: var(--tw-translate-x) var(--tw-translate-y);
-    }
-  }
-  .md\:translate-x-0 {
-    @media (width >= 48rem) {
-      --tw-translate-x: calc(var(--spacing) * 0);
-      translate: var(--tw-translate-x) var(--tw-translate-y);
-    }
-  }
   .md\:grid-cols-2 {
     @media (width >= 48rem) {
       grid-template-columns: repeat(2, minmax(0, 1fr));
     }
   }
-  .md\:border-e {
+  .md\:bg-transparent {
     @media (width >= 48rem) {
-      border-inline-end-style: var(--tw-border-style);
-      border-inline-end-width: 1px;
+      background-color: transparent;
     }
   }
   .md\:px-6 {
@@ -2101,36 +2125,21 @@
       padding-inline-start: var(--fd-layout-offset);
     }
   }
-  .md\:pt-2\.5 {
-    @media (width >= 48rem) {
-      padding-top: calc(var(--spacing) * 2.5);
-    }
-  }
-  .md\:pt-3\.5 {
-    @media (width >= 48rem) {
-      padding-top: calc(var(--spacing) * 3.5);
-    }
-  }
-  .md\:pt-4 {
-    @media (width >= 48rem) {
-      padding-top: calc(var(--spacing) * 4);
-    }
-  }
   .md\:pt-12 {
     @media (width >= 48rem) {
       padding-top: calc(var(--spacing) * 12);
     }
   }
-  .md\:opacity-0 {
+  .md\:text-sm {
     @media (width >= 48rem) {
-      opacity: 0%;
+      font-size: var(--text-sm);
+      line-height: var(--tw-leading, var(--text-sm--line-height));
     }
   }
-  .md\:transition-all {
+  .md\:text-xs {
     @media (width >= 48rem) {
-      transition-property: all;
-      transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
-      transition-duration: var(--tw-duration, var(--default-transition-duration));
+      font-size: var(--text-xs);
+      line-height: var(--tw-leading, var(--text-xs--line-height));
     }
   }
   .md\:\[--fd-nav-height\:0px\] {
@@ -2239,6 +2248,12 @@
       grid-column: 1 / -1;
     }
   }
+  .rtl\:translate-x-\(--fd-sidebar-offset\) {
+    &:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) {
+      --tw-translate-x: var(--fd-sidebar-offset);
+      translate: var(--tw-translate-x) var(--tw-translate-y);
+    }
+  }
   .rtl\:-scale-x-100 {
     &:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) {
       --tw-scale-x: calc(100% * -1);
@@ -2250,14 +2265,6 @@
       rotate: 180deg;
     }
   }
-  .rtl\:md\:translate-x-\(--fd-sidebar-offset\) {
-    &:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) {
-      @media (width >= 48rem) {
-        --tw-translate-x: var(--fd-sidebar-offset);
-        translate: var(--tw-translate-x) var(--tw-translate-y);
-      }
-    }
-  }
   .dark\:bg-\(--shiki-dark-bg\) {
     &:where(.dark, .dark *) {
       background-color: var(--shiki-dark-bg);
@@ -2311,11 +2318,6 @@
       margin: calc(var(--spacing) * -4);
     }
   }
-  .\[\&\>figure\:only-child\]\:rounded-none {
-    &>figure:only-child {
-      border-radius: 0;
-    }
-  }
   .\[\&\>figure\:only-child\]\:border-none {
     &>figure:only-child {
       --tw-border-style: none;
@@ -2337,7 +2339,7 @@
   --color-fd-popover-foreground: hsl(0, 0%, 88%);
   --color-fd-card: hsl(0, 0%, 9.8%);
   --color-fd-card-foreground: hsl(0, 0%, 98%);
-  --color-fd-border: hsl(0, 0%, 14%);
+  --color-fd-border: hsla(0, 0%, 40%, 20%);
   --color-fd-primary: hsl(0, 0%, 98%);
   --color-fd-primary-foreground: hsl(0, 0%, 9%);
   --color-fd-secondary: hsl(0, 0%, 12.9%);
@@ -2351,45 +2353,45 @@
   --color-fd-secondary: hsl(0, 0%, 18%);
   --color-fd-muted-foreground: hsl(0, 0%, 72%);
 }
-.fd-codeblock pre > * {
-  display: grid;
-  font-size: 13px;
-}
 .shiki:not(.not-fumadocs-codeblock *) {
   code span {
     color: var(--shiki-light);
   }
-  code .diff.remove {
-    background-color: var(--fd-diff-remove-color);
-    opacity: 0.7;
-  }
   code .diff::before {
     position: absolute;
     left: 6px;
   }
+  code .diff.remove {
+    opacity: 0.7;
+    background-color: var(--color-fd-diff-remove);
+  }
   code .diff.remove::before {
     content: '-';
-    color: var(--fd-diff-remove-symbol-color);
+    color: var(--color-fd-diff-remove-symbol);
   }
   code .diff.add {
-    background-color: var(--fd-diff-add-color);
+    background-color: var(--color-fd-diff-add);
   }
   code .diff.add::before {
     content: '+';
-    color: var(--fd-diff-add-symbol-color);
+    color: var(--color-fd-diff-add-symbol);
   }
   code .diff {
-    margin: 0 -16px;
-    padding: 0 16px;
+    width: calc(100% + 8 * var(--spacing));
     position: relative;
+    margin-inline: calc(var(--spacing) * -4);
+    display: inline-block;
+    padding-inline: calc(var(--spacing) * 4);
   }
   .highlighted {
-    margin: 0 -16px;
-    padding: 0 16px;
-    background-color: color-mix( in oklab, hsl(0, 0%, 9%) 10%, transparent );
+    width: calc(100% + 8 * var(--spacing));
+    margin-inline: calc(var(--spacing) * -4);
+    display: inline-block;
+    background-color: color-mix(in srgb, hsl(0, 0%, 9%) 10%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
-      background-color: color-mix( in oklab, var(--color-fd-primary) 10%, transparent );
+      background-color: color-mix(in oklab, var(--color-fd-primary) 10%, transparent);
     }
+    padding-inline: calc(var(--spacing) * 4);
   }
   .highlighted-word {
     padding: 1px 2px;
@@ -2704,7 +2706,7 @@
 }
 @keyframes fd-dialog-in {
   from {
-    transform: scale(0.95);
+    transform: scale(1.06);
     opacity: 0;
   }
   to {
@@ -2716,18 +2718,18 @@
     transform: scale(1);
   }
   to {
-    transform: scale(0.95);
+    transform: scale(1.06);
     opacity: 0;
   }
 }
 @keyframes fd-popover-in {
   from {
     opacity: 0;
-    transform: scale(0.98) translateY(-4px);
+    transform: translateY(-12px);
   }
   to {
     opacity: 1;
-    transform: scale(1) translateY(0);
+    transform: translateY(0);
   }
 }
 @keyframes fd-popover-out {
@@ -2737,7 +2739,7 @@
   }
   to {
     opacity: 0;
-    transform: translateY(-4px);
+    transform: translateY(-12px);
   }
 }
 @keyframes fd-fade-in {