@cbnventures/docusaurus-preset-nova 0.21.0 → 0.22.0

package/build/src/styles/presets/marshal/theme/Navbar/Monolith/style.css

@@ -190,19 +190,41 @@
   transition: color var(--nova-marshal-transition);
 }
 
+.nova-navbar-monolith-menu-dropdown-summary {
+  gap: 0.75rem;
+
+  font-family: var(--nova-font-code);
+  font-size: 0.8rem;
+  font-weight: 600;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: var(--nova-color-primary-700);
+  border-radius: 2px;
+
+  transition: color var(--nova-marshal-transition);
+}
+
 .nova-navbar-monolith-menu-item:hover,
-.nova-navbar-monolith-menu-item:focus-visible {
+.nova-navbar-monolith-menu-item:focus-visible,
+.nova-navbar-monolith-menu-dropdown-summary:hover,
+.nova-navbar-monolith-menu-dropdown-summary:focus-visible {
   color: var(--nova-color-primary-800);
   background-color: color-mix(in srgb, var(--nova-color-primary-500), transparent 94%);
   text-decoration: none;
 }
 
 [data-theme="dark"] .nova-navbar-monolith-menu-item:hover,
-[data-theme="dark"] .nova-navbar-monolith-menu-item:focus-visible {
+[data-theme="dark"] .nova-navbar-monolith-menu-item:focus-visible,
+[data-theme="dark"] .nova-navbar-monolith-menu-dropdown-summary:hover,
+[data-theme="dark"] .nova-navbar-monolith-menu-dropdown-summary:focus-visible {
   color: var(--nova-color-primary-300);
   background-color: color-mix(in srgb, var(--nova-color-primary-500), transparent 88%);
 }
 
+[data-theme="dark"] .nova-navbar-monolith-menu-dropdown-summary {
+  color: var(--nova-color-primary-300);
+}
+
 .nova-navbar-monolith-menu-item[aria-current="page"] {
   color: var(--nova-color-primary-800);
   background-color: color-mix(in srgb, var(--nova-color-primary-500), transparent 88%);
@@ -230,8 +252,17 @@
  * `motion.staggeredReveals: false` so items reveal together.
  * ============================ */
 
-.nova-navbar-monolith-menu-item {
+.nova-navbar-monolith-menu-item,
+.nova-navbar-monolith-menu-dropdown {
   opacity: 0;
 
   animation: marshal-fade-in var(--nova-marshal-transition) forwards;
 }
+
+/* ============================
+ * 9. Mobile menu dropdown children - indent
+ * ============================ */
+
+.nova-navbar-monolith-menu-dropdown-children {
+  padding-inline-start: 1.75rem;
+}

package/build/src/styles/presets/marshal/theme/Navbar/More/style.css

@@ -2,9 +2,10 @@
  * Marshal - `Navbar/More` theme overlay.
  *
  * The popover menu, item link, and active-item styling are grouped with
- * `.nova-locale-dropdown-menu` / `.nova-version-dropdown-menu` in this
- * preset's `Navbar/style.css` so all three navbar dropdowns share one
- * surface treatment. No per-component overrides needed here.
+ * `.nova-locale-dropdown-menu` / `.nova-version-dropdown-menu` /
+ * `.nova-dropdown-menu` in this preset's `Navbar/style.css` so all four
+ * navbar dropdowns share one surface treatment. No per-component
+ * overrides needed here.
  *
  * @since 0.18.0
  */

package/build/src/styles/presets/marshal/theme/Navbar/style.css

@@ -57,6 +57,7 @@
 /* Popover menu - mirrors search-dropdown ledger-sheet treatment. */
 .nova-locale-dropdown-menu,
 .nova-version-dropdown-menu,
+.nova-dropdown-menu,
 .nova-navbar-more-menu {
   padding: 0.5rem 0;
 
@@ -67,6 +68,7 @@
 
 [data-theme="dark"] .nova-locale-dropdown-menu,
 [data-theme="dark"] .nova-version-dropdown-menu,
+[data-theme="dark"] .nova-dropdown-menu,
 [data-theme="dark"] .nova-navbar-more-menu {
   background-color: color-mix(in srgb, #ffffff, var(--nova-marshal-bg) 88%);
   border-color: var(--nova-marshal-border);
@@ -74,13 +76,15 @@
 
 /* Item link - Plex Serif body voice, ledger-compact padding.
    Explicit `display: block`, `border-radius: 0`, `text-transform: none`,
-   `letter-spacing: normal` defend the More popover items from the variant
-   nav-item cluster rule (`.nova-navbar-canopy-items a`) which would
-   otherwise leak inline-flex, sharp 2px corners (rendered too tight in
-   menu rows), uppercase, and 0.1em tracking onto items rendered inside
-   the popover. No-op for locale/version where no variant rule competes. */
+   `letter-spacing: normal` defend the More and generic dropdown popover
+   items from the variant nav-item cluster rule (`.nova-navbar-canopy-items a`)
+   which would otherwise leak inline-flex, sharp 2px corners (rendered too
+   tight in menu rows), uppercase, and 0.1em tracking onto items rendered
+   inside the popover. No-op for locale/version where no variant rule
+   competes. */
 .nova-locale-dropdown-item-link,
 .nova-version-dropdown-item-link,
+.nova-dropdown-menu .nova-dropdown-item a,
 .nova-navbar-more-menu .nova-navbar-more-item a {
   display: block;
   padding: 0.375rem 0.75rem;
@@ -105,6 +109,7 @@
    `marshal-ink` token apply in dark mode. */
 [data-theme="dark"] .nova-locale-dropdown-item-link,
 [data-theme="dark"] .nova-version-dropdown-item-link,
+[data-theme="dark"] .nova-dropdown-menu .nova-dropdown-item a,
 [data-theme="dark"] .nova-navbar-more-menu .nova-navbar-more-item a {
   color: var(--nova-marshal-ink);
 }
@@ -113,6 +118,8 @@
 .nova-locale-dropdown-item-link:focus-visible,
 .nova-version-dropdown-item-link:hover,
 .nova-version-dropdown-item-link:focus-visible,
+.nova-dropdown-menu .nova-dropdown-item a:hover,
+.nova-dropdown-menu .nova-dropdown-item a:focus-visible,
 .nova-navbar-more-menu .nova-navbar-more-item a:hover,
 .nova-navbar-more-menu .nova-navbar-more-item a:focus-visible {
   text-decoration: none;
@@ -122,6 +129,8 @@
 .nova-locale-dropdown-item:not(.nova-locale-dropdown-item--active) > .nova-locale-dropdown-item-link:focus-visible,
 .nova-version-dropdown-item:not(.nova-version-dropdown-item--active) > .nova-version-dropdown-item-link:hover,
 .nova-version-dropdown-item:not(.nova-version-dropdown-item--active) > .nova-version-dropdown-item-link:focus-visible,
+.nova-dropdown-menu .nova-dropdown-item a:not(.navbar__link--active):not([aria-current="page"]):hover,
+.nova-dropdown-menu .nova-dropdown-item a:not(.navbar__link--active):not([aria-current="page"]):focus-visible,
 .nova-navbar-more-menu .nova-navbar-more-item a:not(.navbar__link--active):not([aria-current="page"]):hover,
 .nova-navbar-more-menu .nova-navbar-more-item a:not(.navbar__link--active):not([aria-current="page"]):focus-visible {
   color: var(--nova-color-accent-800);
@@ -132,6 +141,8 @@
 [data-theme="dark"] .nova-locale-dropdown-item:not(.nova-locale-dropdown-item--active) > .nova-locale-dropdown-item-link:focus-visible,
 [data-theme="dark"] .nova-version-dropdown-item:not(.nova-version-dropdown-item--active) > .nova-version-dropdown-item-link:hover,
 [data-theme="dark"] .nova-version-dropdown-item:not(.nova-version-dropdown-item--active) > .nova-version-dropdown-item-link:focus-visible,
+[data-theme="dark"] .nova-dropdown-menu .nova-dropdown-item a:not(.navbar__link--active):not([aria-current="page"]):hover,
+[data-theme="dark"] .nova-dropdown-menu .nova-dropdown-item a:not(.navbar__link--active):not([aria-current="page"]):focus-visible,
 [data-theme="dark"] .nova-navbar-more-menu .nova-navbar-more-item a:not(.navbar__link--active):not([aria-current="page"]):hover,
 [data-theme="dark"] .nova-navbar-more-menu .nova-navbar-more-item a:not(.navbar__link--active):not([aria-current="page"]):focus-visible {
   color: var(--nova-color-accent-300);

package/build/src/styles/presets/sample/theme/Navbar/Canopy/style.css

@@ -59,3 +59,19 @@
 /* ============================
  * 12. Mobile menu brand
  * ============================ */
+
+/* ============================
+ * 13. Mobile Menu - Close
+ * ============================ */
+
+/* ============================
+ * 14. Mobile Menu - Items
+ * ============================ */
+
+/* ============================
+ * 15. Mobile Menu - Animation
+ * ============================ */
+
+/* ============================
+ * 16. Mobile Menu - Dropdown Spacing
+ * ============================ */

package/build/src/styles/presets/sentinel/theme/Navbar/Bridge/style.css

@@ -75,7 +75,8 @@
 
 .nova-navbar-bridge-items a,
 .nova-navbar-bridge-items button,
-.nova-navbar-bridge-items .nova-navbar-more-summary {
+.nova-navbar-bridge-items .nova-navbar-more-summary,
+.nova-navbar-bridge-items .nova-dropdown-summary {
   display: inline-flex;
   align-items: center;
   min-height: 2.25rem;
@@ -95,7 +96,10 @@
 .nova-navbar-bridge-items button:focus-visible,
 .nova-navbar-bridge-items .nova-navbar-more:not(:has(a.navbar__link--active)):not(:has(a[aria-current="page"])) > .nova-navbar-more-summary:hover,
 .nova-navbar-bridge-items .nova-navbar-more:not(:has(a.navbar__link--active)):not(:has(a[aria-current="page"])) > .nova-navbar-more-summary:focus-visible,
-.nova-navbar-bridge-items .nova-navbar-more:not(:has(a.navbar__link--active)):not(:has(a[aria-current="page"]))[open] > .nova-navbar-more-summary {
+.nova-navbar-bridge-items .nova-navbar-more:not(:has(a.navbar__link--active)):not(:has(a[aria-current="page"]))[open] > .nova-navbar-more-summary,
+.nova-navbar-bridge-items .nova-dropdown:not(.nova-dropdown--active) > .nova-dropdown-summary:hover,
+.nova-navbar-bridge-items .nova-dropdown:not(.nova-dropdown--active) > .nova-dropdown-summary:focus-visible,
+.nova-navbar-bridge-items .nova-dropdown:not(.nova-dropdown--active)[open] > .nova-dropdown-summary {
   color: var(--nova-color-primary-700);
   background-color: color-mix(in srgb, var(--nova-color-primary-500), transparent 95%);
   text-decoration: none;
@@ -103,7 +107,8 @@
 
 [data-theme="dark"] .nova-navbar-bridge-items a,
 [data-theme="dark"] .nova-navbar-bridge-items button,
-[data-theme="dark"] .nova-navbar-bridge-items .nova-navbar-more-summary {
+[data-theme="dark"] .nova-navbar-bridge-items .nova-navbar-more-summary,
+[data-theme="dark"] .nova-navbar-bridge-items .nova-dropdown-summary {
   color: var(--nova-color-text-muted);
 }
 
@@ -113,7 +118,10 @@
 [data-theme="dark"] .nova-navbar-bridge-items button:focus-visible,
 [data-theme="dark"] .nova-navbar-bridge-items .nova-navbar-more:not(:has(a.navbar__link--active)):not(:has(a[aria-current="page"])) > .nova-navbar-more-summary:hover,
 [data-theme="dark"] .nova-navbar-bridge-items .nova-navbar-more:not(:has(a.navbar__link--active)):not(:has(a[aria-current="page"])) > .nova-navbar-more-summary:focus-visible,
-[data-theme="dark"] .nova-navbar-bridge-items .nova-navbar-more:not(:has(a.navbar__link--active)):not(:has(a[aria-current="page"]))[open] > .nova-navbar-more-summary {
+[data-theme="dark"] .nova-navbar-bridge-items .nova-navbar-more:not(:has(a.navbar__link--active)):not(:has(a[aria-current="page"]))[open] > .nova-navbar-more-summary,
+[data-theme="dark"] .nova-navbar-bridge-items .nova-dropdown:not(.nova-dropdown--active) > .nova-dropdown-summary:hover,
+[data-theme="dark"] .nova-navbar-bridge-items .nova-dropdown:not(.nova-dropdown--active) > .nova-dropdown-summary:focus-visible,
+[data-theme="dark"] .nova-navbar-bridge-items .nova-dropdown:not(.nova-dropdown--active)[open] > .nova-dropdown-summary {
   color: var(--nova-color-primary-400);
   background-color: color-mix(in srgb, var(--nova-color-primary-500), transparent 92%);
 }
@@ -125,7 +133,8 @@
 .nova-navbar-bridge-items a[aria-current="page"],
 .nova-navbar-bridge-items a.navbar__link--active,
 .nova-navbar-bridge-items .nova-navbar-more:has(a[aria-current="page"]) > .nova-navbar-more-summary,
-.nova-navbar-bridge-items .nova-navbar-more:has(a.navbar__link--active) > .nova-navbar-more-summary {
+.nova-navbar-bridge-items .nova-navbar-more:has(a.navbar__link--active) > .nova-navbar-more-summary,
+.nova-navbar-bridge-items .nova-dropdown--active > .nova-dropdown-summary {
   font-weight: 600;
   color: var(--nova-color-primary-700);
   background-color: color-mix(in srgb, var(--nova-color-primary-500), transparent 92%);
@@ -134,7 +143,8 @@
 [data-theme="dark"] .nova-navbar-bridge-items a[aria-current="page"],
 [data-theme="dark"] .nova-navbar-bridge-items a.navbar__link--active,
 [data-theme="dark"] .nova-navbar-bridge-items .nova-navbar-more:has(a[aria-current="page"]) > .nova-navbar-more-summary,
-[data-theme="dark"] .nova-navbar-bridge-items .nova-navbar-more:has(a.navbar__link--active) > .nova-navbar-more-summary {
+[data-theme="dark"] .nova-navbar-bridge-items .nova-navbar-more:has(a.navbar__link--active) > .nova-navbar-more-summary,
+[data-theme="dark"] .nova-navbar-bridge-items .nova-dropdown--active > .nova-dropdown-summary {
   color: var(--nova-color-primary-400);
   background-color: color-mix(in srgb, var(--nova-color-primary-500), transparent 88%);
 }
@@ -297,7 +307,8 @@
   gap: 0.125rem;
 }
 
-.nova-navbar-bridge-menu-item {
+.nova-navbar-bridge-menu-item,
+.nova-navbar-bridge-menu-dropdown-summary {
   gap: 0.75rem;
   font-family: var(--nova-font-display);
   font-size: 0.875rem;
@@ -311,18 +322,23 @@
 }
 
 .nova-navbar-bridge-menu-item:hover,
-.nova-navbar-bridge-menu-item:focus-visible {
+.nova-navbar-bridge-menu-item:focus-visible,
+.nova-navbar-bridge-menu-dropdown-summary:hover,
+.nova-navbar-bridge-menu-dropdown-summary:focus-visible {
   color: var(--nova-color-primary-700);
   background-color: color-mix(in srgb, var(--nova-color-primary-500), transparent 94%);
   box-shadow: inset 0 0 0 1px var(--nova-color-primary-500);
 }
 
-[data-theme="dark"] .nova-navbar-bridge-menu-item {
+[data-theme="dark"] .nova-navbar-bridge-menu-item,
+[data-theme="dark"] .nova-navbar-bridge-menu-dropdown-summary {
   color: var(--nova-color-border);
 }
 
 [data-theme="dark"] .nova-navbar-bridge-menu-item:hover,
-[data-theme="dark"] .nova-navbar-bridge-menu-item:focus-visible {
+[data-theme="dark"] .nova-navbar-bridge-menu-item:focus-visible,
+[data-theme="dark"] .nova-navbar-bridge-menu-dropdown-summary:hover,
+[data-theme="dark"] .nova-navbar-bridge-menu-dropdown-summary:focus-visible {
   color: var(--nova-color-primary-300);
   background-color: color-mix(in srgb, var(--nova-color-primary-500), transparent 92%);
 }
@@ -351,8 +367,22 @@
   animation: sentinel-fade-in var(--nova-motion-duration) ease;
 }
 
-.nova-navbar-bridge-menu-item {
+.nova-navbar-bridge-menu-item,
+.nova-navbar-bridge-menu-dropdown {
   opacity: 0;
 
   animation: sentinel-slide-up 350ms ease forwards;
 }
+
+/* ============================
+ * 12. Mobile Menu - Dropdown Spacing
+ * ============================ */
+
+.nova-navbar-bridge-menu-dropdown[open] > .nova-navbar-bridge-menu-dropdown-summary {
+  margin-bottom: 0.125rem;
+}
+
+.nova-navbar-bridge-menu-dropdown-children {
+  gap: 0.125rem;
+  padding-inline-start: 1.75rem;
+}

package/build/src/styles/presets/sentinel/theme/Navbar/Canopy/style.css

@@ -64,7 +64,8 @@
 }
 
 .nova-navbar-canopy-items a,
-.nova-navbar-canopy-items .nova-navbar-more-summary {
+.nova-navbar-canopy-items .nova-navbar-more-summary,
+.nova-navbar-canopy-items .nova-dropdown-summary {
   min-height: 2.25rem;
   font-size: 0.875rem;
   font-weight: 500;
@@ -81,7 +82,10 @@
 .nova-navbar-canopy-items a:not(.navbar__link--active):not([aria-current="page"]):focus-visible,
 .nova-navbar-canopy-items .nova-navbar-more:not(:has(a.navbar__link--active)):not(:has(a[aria-current="page"])) > .nova-navbar-more-summary:hover,
 .nova-navbar-canopy-items .nova-navbar-more:not(:has(a.navbar__link--active)):not(:has(a[aria-current="page"])) > .nova-navbar-more-summary:focus-visible,
-.nova-navbar-canopy-items .nova-navbar-more:not(:has(a.navbar__link--active)):not(:has(a[aria-current="page"]))[open] > .nova-navbar-more-summary {
+.nova-navbar-canopy-items .nova-navbar-more:not(:has(a.navbar__link--active)):not(:has(a[aria-current="page"]))[open] > .nova-navbar-more-summary,
+.nova-navbar-canopy-items .nova-dropdown:not(.nova-dropdown--active) > .nova-dropdown-summary:hover,
+.nova-navbar-canopy-items .nova-dropdown:not(.nova-dropdown--active) > .nova-dropdown-summary:focus-visible,
+.nova-navbar-canopy-items .nova-dropdown:not(.nova-dropdown--active)[open] > .nova-dropdown-summary {
   color: var(--nova-color-primary-700);
   background-color: color-mix(in srgb, var(--nova-color-primary-500), transparent 95%);
   text-decoration: none;
@@ -94,14 +98,16 @@
 .nova-navbar-canopy-items a[aria-current="page"],
 .nova-navbar-canopy-items a.navbar__link--active,
 .nova-navbar-canopy-items .nova-navbar-more:has(a[aria-current="page"]) > .nova-navbar-more-summary,
-.nova-navbar-canopy-items .nova-navbar-more:has(a.navbar__link--active) > .nova-navbar-more-summary {
+.nova-navbar-canopy-items .nova-navbar-more:has(a.navbar__link--active) > .nova-navbar-more-summary,
+.nova-navbar-canopy-items .nova-dropdown--active > .nova-dropdown-summary {
   font-weight: 600;
   color: var(--nova-color-primary-700);
   background-color: color-mix(in srgb, var(--nova-color-primary-500), transparent 92%);
 }
 
 [data-theme="dark"] .nova-navbar-canopy-items a,
-[data-theme="dark"] .nova-navbar-canopy-items .nova-navbar-more-summary {
+[data-theme="dark"] .nova-navbar-canopy-items .nova-navbar-more-summary,
+[data-theme="dark"] .nova-navbar-canopy-items .nova-dropdown-summary {
   color: var(--nova-color-text-muted);
 }
 
@@ -109,7 +115,10 @@
 [data-theme="dark"] .nova-navbar-canopy-items a:not(.navbar__link--active):not([aria-current="page"]):focus-visible,
 [data-theme="dark"] .nova-navbar-canopy-items .nova-navbar-more:not(:has(a.navbar__link--active)):not(:has(a[aria-current="page"])) > .nova-navbar-more-summary:hover,
 [data-theme="dark"] .nova-navbar-canopy-items .nova-navbar-more:not(:has(a.navbar__link--active)):not(:has(a[aria-current="page"])) > .nova-navbar-more-summary:focus-visible,
-[data-theme="dark"] .nova-navbar-canopy-items .nova-navbar-more:not(:has(a.navbar__link--active)):not(:has(a[aria-current="page"]))[open] > .nova-navbar-more-summary {
+[data-theme="dark"] .nova-navbar-canopy-items .nova-navbar-more:not(:has(a.navbar__link--active)):not(:has(a[aria-current="page"]))[open] > .nova-navbar-more-summary,
+[data-theme="dark"] .nova-navbar-canopy-items .nova-dropdown:not(.nova-dropdown--active) > .nova-dropdown-summary:hover,
+[data-theme="dark"] .nova-navbar-canopy-items .nova-dropdown:not(.nova-dropdown--active) > .nova-dropdown-summary:focus-visible,
+[data-theme="dark"] .nova-navbar-canopy-items .nova-dropdown:not(.nova-dropdown--active)[open] > .nova-dropdown-summary {
   color: var(--nova-color-primary-400);
   background-color: color-mix(in srgb, var(--nova-color-primary-500), transparent 92%);
 }
@@ -117,7 +126,8 @@
 [data-theme="dark"] .nova-navbar-canopy-items a[aria-current="page"],
 [data-theme="dark"] .nova-navbar-canopy-items a.navbar__link--active,
 [data-theme="dark"] .nova-navbar-canopy-items .nova-navbar-more:has(a[aria-current="page"]) > .nova-navbar-more-summary,
-[data-theme="dark"] .nova-navbar-canopy-items .nova-navbar-more:has(a.navbar__link--active) > .nova-navbar-more-summary {
+[data-theme="dark"] .nova-navbar-canopy-items .nova-navbar-more:has(a.navbar__link--active) > .nova-navbar-more-summary,
+[data-theme="dark"] .nova-navbar-canopy-items .nova-dropdown--active > .nova-dropdown-summary {
   color: var(--nova-color-primary-400);
   background-color: color-mix(in srgb, var(--nova-color-primary-500), transparent 88%);
 }
@@ -326,7 +336,8 @@
   gap: 0.5rem;
 }
 
-.nova-navbar-canopy-menu-item {
+.nova-navbar-canopy-menu-item,
+.nova-navbar-canopy-menu-dropdown-summary {
   flex-direction: column;
   justify-content: center;
 
@@ -350,7 +361,9 @@
 }
 
 .nova-navbar-canopy-menu-item:hover,
-.nova-navbar-canopy-menu-item:focus-visible {
+.nova-navbar-canopy-menu-item:focus-visible,
+.nova-navbar-canopy-menu-dropdown-summary:hover,
+.nova-navbar-canopy-menu-dropdown-summary:focus-visible {
   color: var(--nova-color-primary-700);
 
   background-color: color-mix(in srgb, var(--nova-color-primary-500), transparent 94%);
@@ -358,7 +371,8 @@
   box-shadow: inset 0 0 0 1px var(--nova-color-primary-500);
 }
 
-[data-theme="dark"] .nova-navbar-canopy-menu-item {
+[data-theme="dark"] .nova-navbar-canopy-menu-item,
+[data-theme="dark"] .nova-navbar-canopy-menu-dropdown-summary {
   color: var(--nova-color-text-muted);
 
   background-color: color-mix(in srgb, var(--nova-color-text-muted), transparent 94%);
@@ -366,7 +380,9 @@
 }
 
 [data-theme="dark"] .nova-navbar-canopy-menu-item:hover,
-[data-theme="dark"] .nova-navbar-canopy-menu-item:focus-visible {
+[data-theme="dark"] .nova-navbar-canopy-menu-item:focus-visible,
+[data-theme="dark"] .nova-navbar-canopy-menu-dropdown-summary:hover,
+[data-theme="dark"] .nova-navbar-canopy-menu-dropdown-summary:focus-visible {
   color: var(--nova-color-primary-300);
 
   background-color: color-mix(in srgb, var(--nova-color-primary-500), transparent 92%);
@@ -398,8 +414,21 @@
   animation: sentinel-fade-in var(--nova-motion-duration) ease;
 }
 
-.nova-navbar-canopy-menu-item {
+.nova-navbar-canopy-menu-item,
+.nova-navbar-canopy-menu-dropdown {
   opacity: 0;
 
   animation: sentinel-slide-up 350ms ease forwards;
 }
+
+/* ============================
+ * 14. Mobile Menu - Dropdown Spacing
+ * ============================ */
+
+.nova-navbar-canopy-menu-dropdown[open] > .nova-navbar-canopy-menu-dropdown-summary {
+  margin-bottom: 0.5rem;
+}
+
+.nova-navbar-canopy-menu-dropdown-children {
+  gap: 0.5rem;
+}

package/build/src/styles/presets/sentinel/theme/Navbar/Compass/style.css

@@ -69,7 +69,8 @@
 }
 
 .nova-navbar-compass-items a,
-.nova-navbar-compass-items .nova-navbar-more-summary {
+.nova-navbar-compass-items .nova-navbar-more-summary,
+.nova-navbar-compass-items .nova-dropdown-summary {
   display: inline-flex;
   align-items: center;
   min-height: 2.25rem;
@@ -85,14 +86,18 @@
 .nova-navbar-compass-items a:not(.navbar__link--active):not([aria-current="page"]):focus-visible,
 .nova-navbar-compass-items .nova-navbar-more:not(:has(a.navbar__link--active)):not(:has(a[aria-current="page"])) > .nova-navbar-more-summary:hover,
 .nova-navbar-compass-items .nova-navbar-more:not(:has(a.navbar__link--active)):not(:has(a[aria-current="page"])) > .nova-navbar-more-summary:focus-visible,
-.nova-navbar-compass-items .nova-navbar-more:not(:has(a.navbar__link--active)):not(:has(a[aria-current="page"]))[open] > .nova-navbar-more-summary {
+.nova-navbar-compass-items .nova-navbar-more:not(:has(a.navbar__link--active)):not(:has(a[aria-current="page"]))[open] > .nova-navbar-more-summary,
+.nova-navbar-compass-items .nova-dropdown:not(.nova-dropdown--active) > .nova-dropdown-summary:hover,
+.nova-navbar-compass-items .nova-dropdown:not(.nova-dropdown--active) > .nova-dropdown-summary:focus-visible,
+.nova-navbar-compass-items .nova-dropdown:not(.nova-dropdown--active)[open] > .nova-dropdown-summary {
   color: var(--nova-color-primary-700);
   background-color: color-mix(in srgb, var(--nova-color-primary-500), transparent 95%);
   text-decoration: none;
 }
 
 [data-theme="dark"] .nova-navbar-compass-items a,
-[data-theme="dark"] .nova-navbar-compass-items .nova-navbar-more-summary {
+[data-theme="dark"] .nova-navbar-compass-items .nova-navbar-more-summary,
+[data-theme="dark"] .nova-navbar-compass-items .nova-dropdown-summary {
   color: var(--nova-color-text-muted);
 }
 
@@ -100,7 +105,10 @@
 [data-theme="dark"] .nova-navbar-compass-items a:not(.navbar__link--active):not([aria-current="page"]):focus-visible,
 [data-theme="dark"] .nova-navbar-compass-items .nova-navbar-more:not(:has(a.navbar__link--active)):not(:has(a[aria-current="page"])) > .nova-navbar-more-summary:hover,
 [data-theme="dark"] .nova-navbar-compass-items .nova-navbar-more:not(:has(a.navbar__link--active)):not(:has(a[aria-current="page"])) > .nova-navbar-more-summary:focus-visible,
-[data-theme="dark"] .nova-navbar-compass-items .nova-navbar-more:not(:has(a.navbar__link--active)):not(:has(a[aria-current="page"]))[open] > .nova-navbar-more-summary {
+[data-theme="dark"] .nova-navbar-compass-items .nova-navbar-more:not(:has(a.navbar__link--active)):not(:has(a[aria-current="page"]))[open] > .nova-navbar-more-summary,
+[data-theme="dark"] .nova-navbar-compass-items .nova-dropdown:not(.nova-dropdown--active) > .nova-dropdown-summary:hover,
+[data-theme="dark"] .nova-navbar-compass-items .nova-dropdown:not(.nova-dropdown--active) > .nova-dropdown-summary:focus-visible,
+[data-theme="dark"] .nova-navbar-compass-items .nova-dropdown:not(.nova-dropdown--active)[open] > .nova-dropdown-summary {
   color: var(--nova-color-primary-400);
   background-color: color-mix(in srgb, var(--nova-color-primary-500), transparent 92%);
 }
@@ -112,7 +120,8 @@
 .nova-navbar-compass-items a[aria-current="page"],
 .nova-navbar-compass-items a.navbar__link--active,
 .nova-navbar-compass-items .nova-navbar-more:has(a[aria-current="page"]) > .nova-navbar-more-summary,
-.nova-navbar-compass-items .nova-navbar-more:has(a.navbar__link--active) > .nova-navbar-more-summary {
+.nova-navbar-compass-items .nova-navbar-more:has(a.navbar__link--active) > .nova-navbar-more-summary,
+.nova-navbar-compass-items .nova-dropdown--active > .nova-dropdown-summary {
   font-weight: 600;
   color: var(--nova-color-primary-700);
   background-color: color-mix(in srgb, var(--nova-color-primary-500), transparent 92%);
@@ -121,7 +130,8 @@
 [data-theme="dark"] .nova-navbar-compass-items a[aria-current="page"],
 [data-theme="dark"] .nova-navbar-compass-items a.navbar__link--active,
 [data-theme="dark"] .nova-navbar-compass-items .nova-navbar-more:has(a[aria-current="page"]) > .nova-navbar-more-summary,
-[data-theme="dark"] .nova-navbar-compass-items .nova-navbar-more:has(a.navbar__link--active) > .nova-navbar-more-summary {
+[data-theme="dark"] .nova-navbar-compass-items .nova-navbar-more:has(a.navbar__link--active) > .nova-navbar-more-summary,
+[data-theme="dark"] .nova-navbar-compass-items .nova-dropdown--active > .nova-dropdown-summary {
   color: var(--nova-color-primary-400);
   background-color: color-mix(in srgb, var(--nova-color-primary-500), transparent 88%);
 }
@@ -275,7 +285,8 @@
   gap: 0.125rem;
 }
 
-.nova-navbar-compass-menu-item {
+.nova-navbar-compass-menu-item,
+.nova-navbar-compass-menu-dropdown-summary {
   gap: 0.75rem;
   font-family: var(--nova-font-display);
   font-size: 0.875rem;
@@ -289,18 +300,23 @@
 }
 
 .nova-navbar-compass-menu-item:hover,
-.nova-navbar-compass-menu-item:focus-visible {
+.nova-navbar-compass-menu-item:focus-visible,
+.nova-navbar-compass-menu-dropdown-summary:hover,
+.nova-navbar-compass-menu-dropdown-summary:focus-visible {
   color: var(--nova-color-primary-700);
   background-color: color-mix(in srgb, var(--nova-color-primary-500), transparent 94%);
   box-shadow: inset 0 0 0 1px var(--nova-color-primary-500);
 }
 
-[data-theme="dark"] .nova-navbar-compass-menu-item {
+[data-theme="dark"] .nova-navbar-compass-menu-item,
+[data-theme="dark"] .nova-navbar-compass-menu-dropdown-summary {
   color: var(--nova-color-text-muted);
 }
 
 [data-theme="dark"] .nova-navbar-compass-menu-item:hover,
-[data-theme="dark"] .nova-navbar-compass-menu-item:focus-visible {
+[data-theme="dark"] .nova-navbar-compass-menu-item:focus-visible,
+[data-theme="dark"] .nova-navbar-compass-menu-dropdown-summary:hover,
+[data-theme="dark"] .nova-navbar-compass-menu-dropdown-summary:focus-visible {
   color: var(--nova-color-primary-300);
   background-color: color-mix(in srgb, var(--nova-color-primary-500), transparent 92%);
 }
@@ -330,8 +346,22 @@
   animation: sentinel-fade-in var(--nova-motion-duration) ease;
 }
 
-.nova-navbar-compass-menu-item {
+.nova-navbar-compass-menu-item,
+.nova-navbar-compass-menu-dropdown {
   opacity: 0;
 
   animation: sentinel-slide-up 350ms ease forwards;
 }
+
+/* ============================
+ * 12. Mobile Menu - Dropdown Spacing
+ * ============================ */
+
+.nova-navbar-compass-menu-dropdown[open] > .nova-navbar-compass-menu-dropdown-summary {
+  margin-bottom: 0.125rem;
+}
+
+.nova-navbar-compass-menu-dropdown-children {
+  gap: 0.125rem;
+  padding-inline-start: 1.75rem;
+}

package/build/src/styles/presets/sentinel/theme/Navbar/Monolith/style.css

@@ -186,7 +186,8 @@
   gap: 0.125rem;
 }
 
-.nova-navbar-monolith-menu-item {
+.nova-navbar-monolith-menu-item,
+.nova-navbar-monolith-menu-dropdown-summary {
   gap: 0.75rem;
   font-family: var(--nova-font-display);
   font-size: 0.875rem;
@@ -200,18 +201,23 @@
 }
 
 .nova-navbar-monolith-menu-item:hover,
-.nova-navbar-monolith-menu-item:focus-visible {
+.nova-navbar-monolith-menu-item:focus-visible,
+.nova-navbar-monolith-menu-dropdown-summary:hover,
+.nova-navbar-monolith-menu-dropdown-summary:focus-visible {
   color: var(--nova-color-primary-700);
   background-color: color-mix(in srgb, var(--nova-color-primary-500), transparent 94%);
   box-shadow: inset 0 0 0 1px var(--nova-color-primary-500);
 }
 
-[data-theme="dark"] .nova-navbar-monolith-menu-item {
+[data-theme="dark"] .nova-navbar-monolith-menu-item,
+[data-theme="dark"] .nova-navbar-monolith-menu-dropdown-summary {
   color: var(--nova-color-text-muted);
 }
 
 [data-theme="dark"] .nova-navbar-monolith-menu-item:hover,
-[data-theme="dark"] .nova-navbar-monolith-menu-item:focus-visible {
+[data-theme="dark"] .nova-navbar-monolith-menu-item:focus-visible,
+[data-theme="dark"] .nova-navbar-monolith-menu-dropdown-summary:hover,
+[data-theme="dark"] .nova-navbar-monolith-menu-dropdown-summary:focus-visible {
   color: var(--nova-color-primary-300);
   background-color: color-mix(in srgb, var(--nova-color-primary-500), transparent 92%);
 }
@@ -241,8 +247,17 @@
   animation: sentinel-fade-in var(--nova-motion-duration) ease;
 }
 
-.nova-navbar-monolith-menu-item {
+.nova-navbar-monolith-menu-item,
+.nova-navbar-monolith-menu-dropdown {
   opacity: 0;
 
   animation: sentinel-slide-up 350ms ease forwards;
 }
+
+/* ============================
+ * 10. Mobile Menu - Dropdown Children
+ * ============================ */
+
+.nova-navbar-monolith-menu-dropdown-children {
+  padding-inline-start: 1.75rem;
+}

package/build/src/styles/presets/sentinel/theme/Navbar/More/style.css

@@ -2,9 +2,10 @@
  * Sentinel - `Navbar/More` theme overlay.
  *
  * The popover menu, item link, and active-item styling are grouped with
- * `.nova-locale-dropdown-menu` / `.nova-version-dropdown-menu` in this
- * preset's `Navbar/style.css` so all three navbar dropdowns share one
- * surface treatment. No per-component overrides needed here.
+ * `.nova-locale-dropdown-menu` / `.nova-version-dropdown-menu` /
+ * `.nova-dropdown-menu` in this preset's `Navbar/style.css` so all four
+ * navbar dropdowns share one surface treatment. No per-component
+ * overrides needed here.
  *
  * @since 0.18.0
  */