@cbnventures/docusaurus-preset-nova 0.20.0 → 0.22.0

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

@@ -84,7 +84,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;
@@ -100,14 +101,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-600);
   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);
 }
 
@@ -115,7 +120,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 90%);
 }
@@ -127,7 +135,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-600);
   background-color: color-mix(in srgb, var(--nova-color-primary-500), transparent 92%);
@@ -136,7 +145,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 85%);
 }
@@ -310,7 +320,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-body);
   font-size: 1rem;
@@ -323,17 +334,22 @@
 }
 
 .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-600);
   background-color: var(--nova-color-surface-raised);
 }
 
-[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);
 }
 
 [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-400);
   background-color: rgba(255, 255, 255, 0.06);
 }
@@ -363,8 +379,22 @@
   animation-delay: 0ms;
 }
 
-.nova-navbar-compass-menu-item {
+.nova-navbar-compass-menu-item,
+.nova-navbar-compass-menu-dropdown {
   opacity: 0;
   animation: foundry-blur-in var(--nova-motion-duration) var(--nova-motion-easing) forwards;
   animation-delay: calc(var(--nova-item-index, 0) * 50ms + 50ms);
 }
+
+/* ============================
+ * 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/foundry/theme/Navbar/Monolith/style.css

@@ -206,7 +206,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-body);
   font-size: 1rem;
@@ -219,17 +220,22 @@
 }
 
 .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-600);
   background-color: var(--nova-color-surface-raised);
 }
 
-[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);
 }
 
 [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-400);
   background-color: rgba(255, 255, 255, 0.06);
 }
@@ -252,8 +258,17 @@
  * Items stagger 50ms - preset declares `motion.staggeredReveals: true`.
  * ============================ */
 
-.nova-navbar-monolith-menu-item {
+.nova-navbar-monolith-menu-item,
+.nova-navbar-monolith-menu-dropdown {
   opacity: 0;
   animation: foundry-blur-in var(--nova-motion-duration) var(--nova-motion-easing) forwards;
   animation-delay: calc(var(--nova-item-index, 0) * 50ms + 50ms);
 }
+
+/* ============================
+ * 10. Mobile Menu - Dropdown Children
+ * ============================ */
+
+.nova-navbar-monolith-menu-dropdown-children {
+  padding-inline-start: 1.75rem;
+}

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

@@ -2,9 +2,10 @@
  * Foundry - `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/foundry/theme/Navbar/style.css

@@ -64,6 +64,7 @@
 /* Popover menu - mirrors search-dropdown surface treatment. */
 .nova-locale-dropdown-menu,
 .nova-version-dropdown-menu,
+.nova-dropdown-menu,
 .nova-navbar-more-menu {
   padding: 0.5rem 0;
 
@@ -78,6 +79,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: var(--nova-foundry-surface-raised);
   border-color: rgba(255, 255, 255, 0.08);
@@ -85,13 +87,14 @@
 }
 
 /* Item link - padding + hover styling.
-   `display: block` + `border-radius: 0` defend the More popover items
-   from the variant nav-item cluster rule (`.nova-navbar-bridge-items a`)
-   which would otherwise leak inline-flex + rounded corners onto items
-   rendered inside the popover. No-op for locale/version where no variant
-   rule competes. */
+   `display: block` + `border-radius: 0` defend the More and generic
+   dropdown popover items from the variant nav-item cluster rule
+   (`.nova-navbar-bridge-items a`) which would otherwise leak inline-flex
+   + rounded corners 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.5rem 0.75rem;
@@ -110,6 +113,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-primary-600);
@@ -118,6 +123,7 @@
 
 [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-color-text);
 }
@@ -126,6 +132,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-primary-400);

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

@@ -76,7 +76,8 @@
  * ============================ */
 
 .nova-navbar-bridge-items a,
-.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;
@@ -101,7 +102,10 @@
 .nova-navbar-bridge-items a:not(.navbar__link--active):not([aria-current="page"]):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 88%);
   text-decoration: none;
@@ -112,7 +116,10 @@
 [data-theme="dark"] .nova-navbar-bridge-items a:not(.navbar__link--active):not([aria-current="page"]):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-300);
   background-color: color-mix(in srgb, var(--nova-color-primary-500), transparent 80%);
 }
@@ -139,7 +146,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-800);
   background-color: color-mix(in srgb, var(--nova-color-primary-500), transparent 84%);
@@ -148,7 +156,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-200);
   background-color: color-mix(in srgb, var(--nova-color-primary-500), transparent 76%);
 }
@@ -325,7 +334,8 @@
  * 11. Mobile menu items - mono uppercase carved labels
  * ============================ */
 
-.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);
@@ -333,7 +343,7 @@
   font-weight: 500;
   font-variation-settings: "opsz" 36;
   font-size: 1rem;
-  color: var(--nova-lantern-ink);
+  color: var(--nova-color-primary-700);
   border-radius: 6px;
 
   transition:
@@ -341,15 +351,23 @@
     background-color var(--nova-lantern-transition);
 }
 
+[data-theme="dark"] .nova-navbar-bridge-menu-dropdown-summary {
+  color: var(--nova-color-primary-400);
+}
+
 .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 90%);
   text-decoration: none;
 }
 
 [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 84%);
 }
@@ -389,9 +407,18 @@
  * lantern's hover lifts and color transitions use everywhere else.
  * ============================ */
 
-.nova-navbar-bridge-menu-item {
+.nova-navbar-bridge-menu-item,
+.nova-navbar-bridge-menu-dropdown {
   opacity: 0;
 
   animation: lantern-fade-in-up var(--nova-lantern-transition) forwards;
   animation-delay: calc(var(--nova-item-index, 0) * 50ms + 50ms);
 }
+
+/* ============================
+ * 13. Mobile menu dropdown children - indented submenu items
+ * ============================ */
+
+.nova-navbar-bridge-menu-dropdown-children {
+  padding-inline-start: 1.75rem;
+}

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

@@ -84,7 +84,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 {
   display: inline-flex;
   align-items: center;
   min-height: 2.25rem;
@@ -109,7 +110,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 88%);
   text-decoration: none;
@@ -120,7 +124,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-300);
   background-color: color-mix(in srgb, var(--nova-color-primary-500), transparent 80%);
 }
@@ -148,7 +155,8 @@
 .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-800);
   background-color: color-mix(in srgb, var(--nova-color-primary-500), transparent 84%);
@@ -157,7 +165,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-200);
   background-color: color-mix(in srgb, var(--nova-color-primary-500), transparent 76%);
 }
@@ -340,7 +349,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;
   gap: 0.5rem;
@@ -353,7 +363,7 @@
   font-variation-settings: "opsz" 36;
   font-size: 1rem;
   text-align: center;
-  color: var(--nova-lantern-ink);
+  color: var(--nova-color-primary-700);
 
   background-color: color-mix(in srgb, var(--nova-color-primary-500), var(--nova-lantern-bg) 96%);
   border: 1px solid var(--nova-lantern-border);
@@ -368,14 +378,18 @@
 }
 
 .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 90%);
   text-decoration: none;
 }
 
 [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 84%);
 }
@@ -390,11 +404,17 @@
   background-color: color-mix(in srgb, var(--nova-color-primary-500), transparent 76%);
 }
 
-.nova-navbar-canopy-menu-item svg {
+[data-theme="dark"] .nova-navbar-canopy-menu-dropdown-summary {
+  color: var(--nova-color-primary-400);
+}
+
+.nova-navbar-canopy-menu-item svg,
+.nova-navbar-canopy-menu-dropdown-summary svg {
   color: var(--nova-color-primary-600);
 }
 
-[data-theme="dark"] .nova-navbar-canopy-menu-item svg {
+[data-theme="dark"] .nova-navbar-canopy-menu-item svg,
+[data-theme="dark"] .nova-navbar-canopy-menu-dropdown-summary svg {
   color: var(--nova-color-primary-400);
 }
 
@@ -413,13 +433,26 @@
  * preset declares `motion.staggeredReveals: true`.
  * ============================ */
 
-.nova-navbar-canopy-menu-item {
+.nova-navbar-canopy-menu-item,
+.nova-navbar-canopy-menu-dropdown {
   opacity: 0;
 
   animation: lantern-fade-in-up var(--nova-lantern-transition) forwards;
   animation-delay: calc(var(--nova-item-index, 0) * 50ms + 50ms);
 }
 
+/* ============================
+ * 13. 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;
+}
+
 /* Brand sizes scale up on tablet+. */
 @media (min-width: 768px) {
   .nova-navbar-canopy-brand img {

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

@@ -90,7 +90,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 {
   min-height: 2.25rem;
   padding: 0.375rem 0.75rem;
 
@@ -113,7 +114,10 @@
 .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 88%);
   text-decoration: none;
@@ -124,7 +128,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-300);
   background-color: color-mix(in srgb, var(--nova-color-primary-500), transparent 80%);
 }
@@ -141,7 +148,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-800);
   background-color: color-mix(in srgb, var(--nova-color-primary-500), transparent 84%);
@@ -150,7 +158,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-200);
   background-color: color-mix(in srgb, var(--nova-color-primary-500), transparent 76%);
 }
@@ -327,7 +336,8 @@
  * 13. Mobile menu items - mono uppercase carved labels
  * ============================ */
 
-.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);
@@ -335,7 +345,7 @@
   font-weight: 500;
   font-variation-settings: "opsz" 36;
   font-size: 1rem;
-  color: var(--nova-lantern-ink);
+  color: var(--nova-color-primary-700);
   border-radius: 6px;
 
   transition:
@@ -343,6 +353,10 @@
     background-color var(--nova-lantern-transition);
 }
 
+[data-theme="dark"] .nova-navbar-compass-menu-dropdown-summary {
+  color: var(--nova-color-primary-400);
+}
+
 /* External-link arrow - tint amber to match the Lantern voice */
 .nova-navbar-compass-menu-panel .nova-navbar-compass-menu-items a[target="_blank"] span::after {
   background-color: var(--nova-color-primary-600);
@@ -353,14 +367,18 @@
 }
 
 .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 90%);
   text-decoration: none;
 }
 
 [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 84%);
 }
@@ -377,11 +395,13 @@
 }
 
 /* Inline icon glyph - amber tint */
-.nova-navbar-compass-menu-item svg {
+.nova-navbar-compass-menu-item svg,
+.nova-navbar-compass-menu-dropdown-summary svg {
   color: var(--nova-color-primary-600);
 }
 
-[data-theme="dark"] .nova-navbar-compass-menu-item svg {
+[data-theme="dark"] .nova-navbar-compass-menu-item svg,
+[data-theme="dark"] .nova-navbar-compass-menu-dropdown-summary svg {
   color: var(--nova-color-primary-400);
 }
 
@@ -399,3 +419,9 @@
   animation-delay: calc(var(--nova-item-index, 0) * 50ms + 50ms);
 }
 
+/* No open margin needed for this preset */
+
+.nova-navbar-compass-menu-dropdown-children {
+  padding-inline-start: 1.75rem;
+}
+