@cbnventures/docusaurus-preset-nova 0.20.0 → 0.22.0

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

@@ -72,7 +72,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;
@@ -88,14 +89,18 @@
 .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-600);
   background-color: color-mix(in srgb, var(--nova-color-primary-500), transparent 94%);
   text-decoration: none;
 }
 
 [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);
 }
 
@@ -103,7 +108,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 88%);
 }
@@ -115,7 +123,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-600);
   background-color: color-mix(in srgb, var(--nova-color-primary-500), transparent 90%);
@@ -124,7 +133,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 84%);
 }
@@ -331,7 +341,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;
   padding: 1.25rem 1rem;
@@ -350,20 +361,25 @@
 }
 
 .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-600);
   background-color: color-mix(in srgb, var(--nova-color-primary-500), transparent 92%);
   border-color: var(--nova-color-primary-300);
 }
 
-[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-primary-500), transparent 94%);
   border-color: var(--nova-envoy-border);
 }
 
 [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-400);
   background-color: color-mix(in srgb, var(--nova-color-primary-500), transparent 88%);
   border-color: var(--nova-color-primary-600);
@@ -379,6 +395,16 @@
   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-dropdown-summary svg {
+  color: var(--nova-color-primary-400);
+}
+
 /* ============================
  * 12. Mobile Menu - Panel Fade + Item Staggered Reveal
  *
@@ -391,9 +417,22 @@
   animation: envoy-fade-in-up var(--nova-motion-duration) var(--nova-motion-easing);
 }
 
-.nova-navbar-canopy-menu-item {
+.nova-navbar-canopy-menu-item,
+.nova-navbar-canopy-menu-dropdown {
   opacity: 0;
 
   animation: envoy-fade-in-up 400ms var(--nova-motion-easing) 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;
+}

package/build/src/styles/presets/envoy/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;
 
@@ -108,7 +109,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-600);
 
   background-color: color-mix(in srgb, var(--nova-color-primary-500), transparent 94%);
@@ -117,7 +121,8 @@
 }
 
 [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);
 }
 
@@ -125,7 +130,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 88%);
@@ -138,7 +146,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 90%);
@@ -147,7 +156,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 84%);
 }
@@ -360,7 +370,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);
@@ -376,18 +387,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-600);
 
   background-color: color-mix(in srgb, var(--nova-color-primary-500), transparent 94%);
 }
 
-[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-400);
 
   background-color: color-mix(in srgb, var(--nova-color-primary-500), transparent 90%);
@@ -418,9 +434,23 @@
   animation-delay: 0ms;
 }
 
-.nova-navbar-compass-menu-item {
+.nova-navbar-compass-menu-item,
+.nova-navbar-compass-menu-dropdown {
   opacity: 0;
 
   animation: envoy-fade-in-up 400ms var(--nova-motion-easing) forwards;
   animation-delay: calc(var(--nova-item-index, 0) * 50ms + 50ms);
 }
+
+/* ============================
+ * 14. 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/envoy/theme/Navbar/Monolith/style.css

@@ -212,7 +212,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;
@@ -225,17 +226,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: color-mix(in srgb, var(--nova-color-primary-500), transparent 94%);
 }
 
-[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-400);
   background-color: color-mix(in srgb, var(--nova-color-primary-500), transparent 90%);
 }
@@ -257,8 +263,17 @@
  * declares `motion.staggeredReveals: true`.
  * ============================ */
 
-.nova-navbar-monolith-menu-item {
+.nova-navbar-monolith-menu-item,
+.nova-navbar-monolith-menu-dropdown {
   opacity: 0;
   animation: envoy-fade-in-up 400ms 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/envoy/theme/Navbar/More/style.css

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

@@ -63,6 +63,7 @@
    Extra block padding gives items breathing room inside the rounded corners. */
 .nova-locale-dropdown-menu,
 .nova-version-dropdown-menu,
+.nova-dropdown-menu,
 .nova-navbar-more-menu {
   padding: 0.5rem 0;
 
@@ -77,6 +78,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: var(--nova-envoy-surface);
   border-color: var(--nova-envoy-border);
@@ -84,13 +86,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-{variant}-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-{variant}-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;
@@ -109,6 +112,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);
@@ -117,6 +122,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-muted);
 }
@@ -125,6 +131,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/foundry/theme/Navbar/Bridge/style.css

@@ -90,7 +90,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;
@@ -111,7 +112,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-600);
   background-color: color-mix(in srgb, var(--nova-color-primary-500), transparent 95%);
   text-decoration: none;
@@ -119,7 +123,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);
 }
 
@@ -129,7 +134,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 90%);
 }
@@ -145,7 +153,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-600);
   background-color: color-mix(in srgb, var(--nova-color-primary-500), transparent 92%);
@@ -154,7 +163,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 85%);
 }
@@ -350,7 +360,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-body);
@@ -366,18 +377,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-600);
 
   background-color: var(--nova-color-surface-raised);
 }
 
-[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-text);
 }
 
 [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-400);
 
   background-color: rgba(255, 255, 255, 0.06);
@@ -402,9 +418,23 @@
  * align with the system motion scale.
  * ============================ */
 
-.nova-navbar-bridge-menu-item {
+.nova-navbar-bridge-menu-item,
+.nova-navbar-bridge-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);
 }
+
+/* ============================
+ * 13. 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/foundry/theme/Navbar/Canopy/style.css

@@ -77,7 +77,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;
@@ -96,7 +97,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-600);
   background-color: color-mix(in srgb, var(--nova-color-primary-500), transparent 95%);
   text-decoration: none;
@@ -109,14 +113,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-600);
   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);
 }
 
@@ -124,7 +130,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 90%);
 }
@@ -132,7 +141,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 85%);
 }
@@ -346,7 +356,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;
   padding: 1.25rem 1rem;
@@ -364,20 +375,25 @@
 }
 
 .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-600);
   background-color: var(--nova-color-primary-50);
   border-color: var(--nova-color-primary-300);
 }
 
-[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);
   background-color: rgba(255, 255, 255, 0.04);
   border-color: rgba(255, 255, 255, 0.08);
 }
 
 [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-400);
   background-color: color-mix(in srgb, var(--nova-color-primary-500), transparent 90%);
   border-color: var(--nova-color-primary-700);
@@ -406,9 +422,22 @@
   animation: foundry-fade-in var(--nova-motion-duration) var(--nova-motion-easing);
 }
 
-.nova-navbar-canopy-menu-item {
+.nova-navbar-canopy-menu-item,
+.nova-navbar-canopy-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);
 }
+
+/* ============================
+ * 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;
+}