fumadocs-ui 16.1.0 → 16.2.1

package/dist/style.css

@@ -53,7 +53,7 @@
     --color-fd-accent: hsla(0, 0%, 82%, 50%);
     --color-fd-accent-foreground: hsl(0, 0%, 9%);
     --color-fd-ring: hsl(0, 0%, 63.9%);
-    --color-fd-overlay: transparent;
+    --color-fd-overlay: hsla(0, 0%, 0%, 0.2);
     --color-fd-info: oklch(62.3% 0.214 259.815);
     --color-fd-warning: oklch(76.9% 0.188 70.08);
     --color-fd-error: oklch(63.7% 0.237 25.331);
@@ -63,15 +63,6 @@
     --color-fd-diff-remove-symbol: rgb(230, 10, 100);
     --color-fd-diff-add: rgba(14, 180, 100, 0.1);
     --color-fd-diff-add-symbol: rgb(10, 200, 100);
-    --fd-sidebar-mobile-offset: 100%;
-    --spacing-fd-container: 1400px;
-    --fd-page-width: 1200px;
-    --fd-sidebar-width: 0px;
-    --fd-toc-width: 0px;
-    --fd-layout-width: 1600px;
-    --fd-banner-height: 0px;
-    --fd-nav-height: 0px;
-    --fd-tocnav-height: 0px;
     --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 300ms cubic-bezier(0.16, 1, 0.3, 1);
@@ -317,12 +308,18 @@
   .inset-y-0 {
     inset-block: calc(var(--spacing) * 0);
   }
+  .inset-y-2 {
+    inset-block: calc(var(--spacing) * 2);
+  }
   .start-0 {
     inset-inline-start: calc(var(--spacing) * 0);
   }
   .start-3 {
     inset-inline-start: calc(var(--spacing) * 3);
   }
+  .start-4 {
+    inset-inline-start: calc(var(--spacing) * 4);
+  }
   .end-0 {
     inset-inline-end: calc(var(--spacing) * 0);
   }
@@ -332,15 +329,18 @@
   .-top-1\.5 {
     top: calc(var(--spacing) * -1.5);
   }
-  .top-\(--fd-banner-height\) {
-    top: var(--fd-banner-height);
+  .top-\(--fd-docs-row-1\) {
+    top: var(--fd-docs-row-1);
+  }
+  .top-\(--fd-docs-row-2\) {
+    top: var(--fd-docs-row-2);
+  }
+  .top-\(--fd-docs-row-3\) {
+    top: var(--fd-docs-row-3);
   }
   .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);
   }
@@ -362,27 +362,18 @@
   .top-14 {
     top: calc(var(--spacing) * 14);
   }
-  .top-\[calc\(var\(--fd-nav-height\)\+var\(--fd-tocnav-height\)\)\] {
-    top: calc(var(--fd-nav-height) + var(--fd-tocnav-height));
-  }
-  .right-\(--removed-body-scroll-bar-size\,0\) {
-    right: var(--removed-body-scroll-bar-size,0);
+  .top-\[calc\(--spacing\(4\)\+var\(--fd-toc-popover-height\)\)\] {
+    top: calc(calc(var(--spacing) * 4) + var(--fd-toc-popover-height));
   }
   .right-2 {
     right: calc(var(--spacing) * 2);
   }
-  .bottom-\(--fd-sidebar-margin\) {
-    bottom: var(--fd-sidebar-margin);
-  }
   .bottom-0 {
     bottom: calc(var(--spacing) * 0);
   }
   .bottom-1\.5 {
     bottom: calc(var(--spacing) * 1.5);
   }
-  .left-0 {
-    left: calc(var(--spacing) * 0);
-  }
   .left-1\/2 {
     left: calc(1/2 * 100%);
   }
@@ -428,22 +419,12 @@
       max-width: 96rem;
     }
   }
-  .container {
-    margin-inline: auto;
-    padding-inline: 1rem;
-    @media (width >= 96rem) {
-      max-width: var(--spacing-fd-container);
-    }
-  }
   .-mx-1 {
     margin-inline: calc(var(--spacing) * -1);
   }
   .-mx-px {
     margin-inline: -1px;
   }
-  .mx-\(--fd-layout-offset\) {
-    margin-inline: var(--fd-layout-offset);
-  }
   .mx-0\.5 {
     margin-inline: calc(var(--spacing) * 0.5);
   }
@@ -975,14 +956,14 @@
   .h-\(--fd-animated-height\) {
     height: var(--fd-animated-height);
   }
+  .h-\(--fd-header-height\) {
+    height: var(--fd-header-height);
+  }
   .h-\(--fd-height\) {
     height: var(--fd-height);
   }
-  .h-\(--fd-nav-height\) {
-    height: var(--fd-nav-height);
-  }
-  .h-\(--fd-tocnav-height\) {
-    height: var(--fd-tocnav-height);
+  .h-\(--fd-toc-popover-height\) {
+    height: var(--fd-toc-popover-height);
   }
   .h-\(--radix-navigation-menu-viewport-height\) {
     height: var(--radix-navigation-menu-viewport-height);
@@ -1005,6 +986,15 @@
   .h-\[calc\(100dvh-var\(--fd-nav-height\)\)\] {
     height: calc(100dvh - var(--fd-nav-height));
   }
+  .h-\[calc\(var\(--fd-docs-height\)-var\(--fd-docs-row-1\)\)\] {
+    height: calc(var(--fd-docs-height) - var(--fd-docs-row-1));
+  }
+  .h-\[calc\(var\(--fd-docs-height\)-var\(--fd-docs-row-2\)\)\] {
+    height: calc(var(--fd-docs-height) - var(--fd-docs-row-2));
+  }
+  .h-\[calc\(var\(--fd-docs-height\)-var\(--fd-docs-row-3\)\)\] {
+    height: calc(var(--fd-docs-height) - var(--fd-docs-row-3));
+  }
   .h-full {
     height: 100%;
   }
@@ -1026,9 +1016,15 @@
   .max-h-\[600px\] {
     max-height: 600px;
   }
+  .min-h-\(--fd-docs-height\) {
+    min-height: var(--fd-docs-height);
+  }
   .min-h-0 {
     min-height: calc(var(--spacing) * 0);
   }
+  .w-\(--fd-sidebar-width\) {
+    width: var(--fd-sidebar-width);
+  }
   .w-\(--fd-toc-width\) {
     width: var(--fd-toc-width);
   }
@@ -1044,6 +1040,9 @@
   .w-1\.5 {
     width: calc(var(--spacing) * 1.5);
   }
+  .w-4 {
+    width: calc(var(--spacing) * 4);
+  }
   .w-\[25\%\] {
     width: 25%;
   }
@@ -1068,9 +1067,6 @@
   .w-px {
     width: 1px;
   }
-  .max-w-\(--fd-page-width\) {
-    max-width: var(--fd-page-width);
-  }
   .max-w-\[98vw\] {
     max-width: 98vw;
   }
@@ -1083,8 +1079,14 @@
   .max-w-\[860px\] {
     max-width: 860px;
   }
-  .max-w-full {
-    max-width: 100%;
+  .max-w-\[900px\] {
+    max-width: 900px;
+  }
+  .max-w-\[1200px\] {
+    max-width: 1200px;
+  }
+  .max-w-\[1400px\] {
+    max-width: 1400px;
   }
   .max-w-screen-sm {
     max-width: var(--breakpoint-sm);
@@ -1119,12 +1121,16 @@
   .origin-\[top_center\] {
     transform-origin: top center;
   }
+  .-translate-x-\(--fd-sidebar-width\) {
+    --tw-translate-x: calc(var(--fd-sidebar-width) * -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-\(--fd-sidebar-offset\) {
-    --tw-translate-x: var(--fd-sidebar-offset);
+  .translate-x-2 {
+    --tw-translate-x: calc(var(--spacing) * 2);
     translate: var(--tw-translate-x) var(--tw-translate-y);
   }
   .-translate-y-1\/2 {
@@ -1160,6 +1166,12 @@
   .list-none {
     list-style-type: none;
   }
+  .auto-cols-auto {
+    grid-auto-columns: auto;
+  }
+  .auto-rows-auto {
+    grid-auto-rows: auto;
+  }
   .grid-cols-1 {
     grid-template-columns: repeat(1, minmax(0, 1fr));
   }
@@ -1254,6 +1266,9 @@
   .overflow-x-auto {
     overflow-x: auto;
   }
+  .overflow-x-clip {
+    overflow-x: clip;
+  }
   .overflow-x-hidden {
     overflow-x: hidden;
   }
@@ -1296,10 +1311,6 @@
     border-inline-end-style: var(--tw-border-style);
     border-inline-end-width: 1px;
   }
-  .border-e-0 {
-    border-inline-end-style: var(--tw-border-style);
-    border-inline-end-width: 0px;
-  }
   .border-t {
     border-top-style: var(--tw-border-style);
     border-top-width: 1px;
@@ -1397,7 +1408,7 @@
   .bg-transparent {
     background-color: transparent;
   }
-  .\[mask-image\:linear-gradient\(to_bottom\,transparent\,white_16px\,white_calc\(100\%-16px\)\,transparent\)\] {
+  .mask-\[linear-gradient\(to_bottom\,transparent\,white_16px\,white_calc\(100\%-16px\)\,transparent\)\] {
     mask-image: linear-gradient(to bottom,transparent,white 16px,white calc(100% - 16px),transparent);
   }
   .fill-\(--callout-color\) {
@@ -1436,9 +1447,6 @@
   .p-4 {
     padding: calc(var(--spacing) * 4);
   }
-  .px-\(--fd-layout-offset\) {
-    padding-inline: var(--fd-layout-offset);
-  }
   .px-1\.5 {
     padding-inline: calc(var(--spacing) * 1.5);
   }
@@ -1478,15 +1486,15 @@
   .py-3\.5 {
     padding-block: calc(var(--spacing) * 3.5);
   }
+  .py-6 {
+    padding-block: calc(var(--spacing) * 6);
+  }
   .py-8 {
     padding-block: calc(var(--spacing) * 8);
   }
   .py-12 {
     padding-block: calc(var(--spacing) * 12);
   }
-  .ps-\(--sidebar-item-offset\) {
-    padding-inline-start: var(--sidebar-item-offset);
-  }
   .ps-1 {
     padding-inline-start: calc(var(--spacing) * 1);
   }
@@ -1505,18 +1513,9 @@
   .ps-6 {
     padding-inline-start: calc(var(--spacing) * 6);
   }
-  .ps-7 {
-    padding-inline-start: calc(var(--spacing) * 7);
-  }
   .ps-8 {
     padding-inline-start: calc(var(--spacing) * 8);
   }
-  .ps-\[calc\(var\(--fd-layout-offset\)\+var\(--fd-sidebar-width\)\)\] {
-    padding-inline-start: calc(var(--fd-layout-offset) + var(--fd-sidebar-width));
-  }
-  .pe-\(--fd-toc-width\) {
-    padding-inline-end: var(--fd-toc-width);
-  }
   .pe-2 {
     padding-inline-end: calc(var(--spacing) * 2);
   }
@@ -1526,12 +1525,6 @@
   .pe-4 {
     padding-inline-end: calc(var(--spacing) * 4);
   }
-  .pt-\(--fd-nav-height\) {
-    padding-top: var(--fd-nav-height);
-  }
-  .pt-\(--fd-tocnav-height\) {
-    padding-top: var(--fd-tocnav-height);
-  }
   .pt-0 {
     padding-top: calc(var(--spacing) * 0);
   }
@@ -1541,27 +1534,15 @@
   .pt-3 {
     padding-top: calc(var(--spacing) * 3);
   }
-  .pt-8 {
-    padding-top: calc(var(--spacing) * 8);
-  }
   .pt-12 {
     padding-top: calc(var(--spacing) * 12);
   }
-  .pt-14 {
-    padding-top: calc(var(--spacing) * 14);
-  }
-  .pr-\(--removed-body-scroll-bar-size\,0\) {
-    padding-right: var(--removed-body-scroll-bar-size,0);
-  }
   .pb-1\.5 {
     padding-bottom: calc(var(--spacing) * 1.5);
   }
   .pb-2 {
     padding-bottom: calc(var(--spacing) * 2);
   }
-  .pb-6 {
-    padding-bottom: calc(var(--spacing) * 6);
-  }
   .pl-4 {
     padding-left: calc(var(--spacing) * 4);
   }
@@ -1617,7 +1598,7 @@
   .text-nowrap {
     text-wrap: nowrap;
   }
-  .\[overflow-wrap\:anywhere\] {
+  .wrap-anywhere {
     overflow-wrap: anywhere;
   }
   .whitespace-nowrap {
@@ -1735,23 +1716,23 @@
     transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
     transition-duration: var(--tw-duration, var(--default-transition-duration));
   }
-  .transition-\[height\] {
-    transition-property: height;
+  .transition-\[grid-template-columns\] {
+    transition-property: grid-template-columns;
     transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
     transition-duration: var(--tw-duration, var(--default-transition-duration));
   }
-  .transition-\[padding\] {
-    transition-property: padding;
+  .transition-\[height\] {
+    transition-property: height;
     transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
     transition-duration: var(--tw-duration, var(--default-transition-duration));
   }
-  .transition-\[top\,opacity\,translate\,width\] {
-    transition-property: top,opacity,translate,width;
+  .transition-\[width\,height\] {
+    transition-property: width,height;
     transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
     transition-duration: var(--tw-duration, var(--default-transition-duration));
   }
-  .transition-\[width\,height\] {
-    transition-property: width,height;
+  .transition-\[width\,inset-block\,translate\,background-color\] {
+    transition-property: width,inset-block,translate,background-color;
     transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
     transition-duration: var(--tw-duration, var(--default-transition-duration));
   }
@@ -1783,6 +1764,10 @@
     --tw-duration: 200ms;
     transition-duration: 200ms;
   }
+  .duration-250 {
+    --tw-duration: 250ms;
+    transition-duration: 250ms;
+  }
   .duration-300 {
     --tw-duration: 300ms;
     transition-duration: 300ms;
@@ -1799,15 +1784,50 @@
     -webkit-user-select: none;
     user-select: none;
   }
-  .\[--fd-nav-height\:0px\] {
-    --fd-nav-height: 0px;
+  .\[--fd-docs-height\:100dvh\] {
+    --fd-docs-height: 100dvh;
+  }
+  .\[--fd-header-height\:0px\] {
+    --fd-header-height: 0px;
+  }
+  .\[--fd-layout-width\:1400px\] {
+    --fd-layout-width: 1400px;
   }
   .\[--fd-nav-height\:56px\] {
     --fd-nav-height: 56px;
   }
+  .\[--fd-sidebar-width\:0px\] {
+    --fd-sidebar-width: 0px;
+  }
+  .\[--fd-toc-popover-height\:0px\] {
+    --fd-toc-popover-height: 0px;
+  }
+  .\[--fd-toc-width\:0px\] {
+    --fd-toc-width: 0px;
+  }
+  .\[grid-area\:header\] {
+    grid-area: header;
+  }
+  .\[grid-area\:main\] {
+    grid-area: main;
+  }
+  .\[grid-area\:sidebar\] {
+    grid-area: sidebar;
+  }
+  .\[grid-area\:toc-popover\] {
+    grid-area: toc-popover;
+  }
+  .\[grid-area\:toc\] {
+    grid-area: toc;
+  }
   .\[scrollbar-width\:none\] {
     scrollbar-width: none;
   }
+  .\*\:pointer-events-auto {
+    :is(& > *) {
+      pointer-events: auto;
+    }
+  }
   .\*\:col-start-1 {
     :is(& > *) {
       grid-column-start: 1;
@@ -1838,9 +1858,19 @@
       width: var(--fd-sidebar-width);
     }
   }
-  .\*\:max-w-fd-container {
+  .\*\:max-w-\(--fd-layout-width\) {
     :is(& > *) {
-      max-width: var(--spacing-fd-container);
+      max-width: var(--fd-layout-width);
+    }
+  }
+  .\*\:max-w-\[900px\] {
+    :is(& > *) {
+      max-width: 900px;
+    }
+  }
+  .\*\:max-w-\[1285px\] {
+    :is(& > *) {
+      max-width: 1285px;
     }
   }
   .\*\:flex-col {
@@ -2104,6 +2134,14 @@
       color: var(--color-fd-accent-foreground);
     }
   }
+  .data-\[active\=true\]\:bg-fd-primary\/10 {
+    &[data-active="true"] {
+      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);
+      }
+    }
+  }
   .data-\[active\=true\]\:font-medium {
     &[data-active="true"] {
       --tw-font-weight: var(--font-weight-medium);
@@ -2115,62 +2153,61 @@
       color: var(--color-fd-primary);
     }
   }
-  .\*\*\:data-\[active\=true\]\:before\:absolute {
-    :is(& *) {
-      &[data-active="true"] {
-        &::before {
-          content: var(--tw-content);
-          position: absolute;
-        }
+  .data-\[active\=true\]\:before\:absolute {
+    &[data-active="true"] {
+      &::before {
+        content: var(--tw-content);
+        position: absolute;
       }
     }
   }
-  .\*\*\:data-\[active\=true\]\:before\:inset-y-2\.5 {
-    :is(& *) {
-      &[data-active="true"] {
-        &::before {
-          content: var(--tw-content);
-          inset-block: calc(var(--spacing) * 2.5);
-        }
+  .data-\[active\=true\]\:before\:inset-y-2\.5 {
+    &[data-active="true"] {
+      &::before {
+        content: var(--tw-content);
+        inset-block: calc(var(--spacing) * 2.5);
       }
     }
   }
-  .\*\*\:data-\[active\=true\]\:before\:start-2\.5 {
-    :is(& *) {
-      &[data-active="true"] {
-        &::before {
-          content: var(--tw-content);
-          inset-inline-start: calc(var(--spacing) * 2.5);
-        }
+  .data-\[active\=true\]\:before\:start-2\.5 {
+    &[data-active="true"] {
+      &::before {
+        content: var(--tw-content);
+        inset-inline-start: calc(var(--spacing) * 2.5);
       }
     }
   }
-  .\*\*\:data-\[active\=true\]\:before\:w-px {
-    :is(& *) {
-      &[data-active="true"] {
-        &::before {
-          content: var(--tw-content);
-          width: 1px;
-        }
+  .data-\[active\=true\]\:before\:w-px {
+    &[data-active="true"] {
+      &::before {
+        content: var(--tw-content);
+        width: 1px;
       }
     }
   }
-  .\*\*\:data-\[active\=true\]\:before\:bg-fd-primary {
-    :is(& *) {
-      &[data-active="true"] {
-        &::before {
-          content: var(--tw-content);
-          background-color: var(--color-fd-primary);
-        }
+  .data-\[active\=true\]\:before\:bg-fd-primary {
+    &[data-active="true"] {
+      &::before {
+        content: var(--tw-content);
+        background-color: var(--color-fd-primary);
       }
     }
   }
-  .\*\*\:data-\[active\=true\]\:before\:content-\[\'\'\] {
-    :is(& *) {
-      &[data-active="true"] {
-        &::before {
-          --tw-content: '';
-          content: var(--tw-content);
+  .data-\[active\=true\]\:before\:content-\[\'\'\] {
+    &[data-active="true"] {
+      &::before {
+        --tw-content: '';
+        content: var(--tw-content);
+      }
+    }
+  }
+  .data-\[active\=true\]\:hover\:transition-colors {
+    &[data-active="true"] {
+      &:hover {
+        @media (hover: hover) {
+          transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
+          transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+          transition-duration: var(--tw-duration, var(--default-transition-duration));
         }
       }
     }
@@ -2316,9 +2353,12 @@
       color: var(--color-fd-accent-foreground);
     }
   }
-  .max-xl\:end-4 {
-    @media (width < 80rem) {
-      inset-inline-end: calc(var(--spacing) * 4);
+  .data-\[transparent\=false\]\:bg-fd-background\/80 {
+    &[data-transparent="false"] {
+      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);
+      }
     }
   }
   .max-xl\:hidden {
@@ -2490,14 +2530,9 @@
       padding-inline: calc(var(--spacing) * 6);
     }
   }
-  .md\:\[--fd-sidebar-width\:268px\] {
+  .md\:pt-8 {
     @media (width >= 48rem) {
-      --fd-sidebar-width: 268px;
-    }
-  }
-  .md\:\[--fd-sidebar-width\:286px\] {
-    @media (width >= 48rem) {
-      --fd-sidebar-width: 286px;
+      padding-top: calc(var(--spacing) * 8);
     }
   }
   .has-data-\[collapsed\=true\]\:md\:flex {
@@ -2527,16 +2562,6 @@
       align-items: center;
     }
   }
-  .lg\:\[--fd-sidebar-width\:286px\] {
-    @media (width >= 64rem) {
-      --fd-sidebar-width: 286px;
-    }
-  }
-  .xl\:start-4 {
-    @media (width >= 80rem) {
-      inset-inline-start: calc(var(--spacing) * 4);
-    }
-  }
   .xl\:hidden {
     @media (width >= 80rem) {
       display: none;
@@ -2547,6 +2572,11 @@
       padding-inline: calc(var(--spacing) * 8);
     }
   }
+  .xl\:pt-14 {
+    @media (width >= 80rem) {
+      padding-top: calc(var(--spacing) * 14);
+    }
+  }
   .\@max-xl\:hidden {
     @container (width < 36rem) {
       display: none;
@@ -2557,19 +2587,15 @@
       grid-column: 1 / -1;
     }
   }
-  .rtl\:right-\(--removed-body-scroll-bar-size\,0\) {
-    &:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) {
-      right: var(--removed-body-scroll-bar-size,0);
-    }
-  }
-  .rtl\:left-auto {
+  .rtl\:-translate-x-2 {
     &:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) {
-      left: auto;
+      --tw-translate-x: calc(var(--spacing) * -2);
+      translate: var(--tw-translate-x) var(--tw-translate-y);
     }
   }
-  .rtl\:-translate-x-\(--fd-sidebar-offset\) {
+  .rtl\:translate-x-full {
     &:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) {
-      --tw-translate-x: calc(var(--fd-sidebar-offset) * -1);
+      --tw-translate-x: 100%;
       translate: var(--tw-translate-x) var(--tw-translate-y);
     }
   }
@@ -2589,57 +2615,43 @@
       background-color: var(--shiki-dark-bg);
     }
   }
-  .on-root\:\[--fd-nav-height\:56px\] {
-    :root:has(&) {
-      --fd-nav-height: 56px;
+  .layout\:\[--fd-header-height\:--spacing\(14\)\] {
+    #nd-docs-layout:has(&), #nd-notebook-layout:has(&), #nd-home-layout:has(&) {
+      --fd-header-height: calc(var(--spacing) * 14);
     }
   }
-  .max-xl\:on-root\:\[--fd-tocnav-height\:40px\] {
+  .max-xl\:layout\:\[--fd-toc-popover-height\:--spacing\(10\)\] {
     @media (width < 80rem) {
-      :root:has(&) {
-        --fd-tocnav-height: 40px;
+      #nd-docs-layout:has(&), #nd-notebook-layout:has(&), #nd-home-layout:has(&) {
+        --fd-toc-popover-height: calc(var(--spacing) * 10);
       }
     }
   }
-  .md\:on-root\:\[--fd-nav-height\:0px\] {
-    @media (width >= 48rem) {
-      :root:has(&) {
-        --fd-nav-height: 0px;
+  .max-md\:layout\:\[--fd-header-height\:--spacing\(14\)\] {
+    @media (width < 48rem) {
+      #nd-docs-layout:has(&), #nd-notebook-layout:has(&), #nd-home-layout:has(&) {
+        --fd-header-height: calc(var(--spacing) * 14);
       }
     }
   }
-  .md\:on-root\:\[--fd-nav-height\:64px\] {
+  .md\:layout\:\[--fd-sidebar-width\:268px\] {
     @media (width >= 48rem) {
-      :root:has(&) {
-        --fd-nav-height: 64px;
+      #nd-docs-layout:has(&), #nd-notebook-layout:has(&), #nd-home-layout:has(&) {
+        --fd-sidebar-width: 268px;
       }
     }
   }
-  .lg\:on-root\:\[--fd-nav-height\:104px\] {
+  .lg\:layout\:\[--fd-header-height\:--spacing\(24\)\] {
     @media (width >= 64rem) {
-      :root:has(&) {
-        --fd-nav-height: 104px;
-      }
-    }
-  }
-  .xl\:on-root\:\[--fd-toc-width\:286px\] {
-    @media (width >= 80rem) {
-      :root:has(&) {
-        --fd-toc-width: 286px;
-      }
-    }
-  }
-  .md\:\[\&_\#nd-page_article\]\:pt-12 {
-    @media (width >= 48rem) {
-      & #nd-page article {
-        padding-top: calc(var(--spacing) * 12);
+      #nd-docs-layout:has(&), #nd-notebook-layout:has(&), #nd-home-layout:has(&) {
+        --fd-header-height: calc(var(--spacing) * 24);
       }
     }
   }
-  .xl\:\[\&_\#nd-page_article\]\:px-8 {
+  .xl\:layout\:\[--fd-toc-width\:268px\] {
     @media (width >= 80rem) {
-      & #nd-page article {
-        padding-inline: calc(var(--spacing) * 8);
+      #nd-docs-layout:has(&), #nd-notebook-layout:has(&), #nd-home-layout:has(&) {
+        --fd-toc-width: 268px;
       }
     }
   }
@@ -2720,11 +2732,9 @@
   --color-fd-secondary: hsl(0, 0%, 18%);
   --color-fd-muted-foreground: hsl(0, 0%, 72%);
 }
-:root {
+.shiki:not(.not-fumadocs-codeblock *) {
   --padding-left: calc(var(--spacing) * 4);
   --padding-right: calc(var(--spacing) * 4);
-}
-.shiki:not(.not-fumadocs-codeblock *) {
   code span {
     color: var(--shiki-light);
   }
@@ -2818,8 +2828,11 @@
     font-weight: var(--font-weight-medium);
   }
 }
+:root {
+  --fd-sidebar-drawer-offset: 100%;
+}
 [dir='rtl'] {
-  --fd-sidebar-mobile-offset: -100%;
+  --fd-sidebar-drawer-offset: -100%;
 }
 @layer base {
   *, ::after, ::before, ::backdrop, ::file-selector-button {
@@ -2829,9 +2842,6 @@
     background-color: var(--color-fd-background);
     color: var(--color-fd-foreground);
   }
-  :root, #nd-docs-layout {
-    --fd-layout-offset: max(calc(50vw - var(--fd-layout-width) / 2), 0px);
-  }
 }
 @property --radix-collapsible-content-height {
   syntax: '<length>';
@@ -3084,12 +3094,12 @@
 }
 @keyframes fd-sidebar-in {
   from {
-    transform: translateX(var(--fd-sidebar-mobile-offset));
+    transform: translateX(var(--fd-sidebar-drawer-offset));
   }
 }
 @keyframes fd-sidebar-out {
   to {
-    transform: translateX(var(--fd-sidebar-mobile-offset));
+    transform: translateX(var(--fd-sidebar-drawer-offset));
   }
 }
 @keyframes fd-collapsible-down {