@cbnventures/docusaurus-preset-nova 0.21.0 → 0.22.0

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

@@ -61,6 +61,7 @@
 /* Popover menu - mirrors search-dropdown chrome surface. */
 .nova-locale-dropdown-menu,
 .nova-version-dropdown-menu,
+.nova-dropdown-menu,
 .nova-navbar-more-menu {
   padding: 0.5rem 0;
 
@@ -70,12 +71,14 @@
 }
 
 /* Item link - body voice.
-   `display: block` + `border-radius: 0` defend the More popover items
-   from the variant nav-item cluster rule (`.nova-navbar-canopy-items a`)
-   which would otherwise leak 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-canopy-items a`) which would otherwise leak 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;
@@ -94,6 +97,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);
 }
@@ -102,6 +106,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;
@@ -111,6 +117,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-700);
@@ -121,6 +129,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/signal/theme/Navbar/Bridge/style.css

@@ -77,7 +77,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;
@@ -99,7 +100,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: var(--nova-color-surface-raised);
   text-decoration: none;
@@ -107,7 +111,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);
 }
 
@@ -117,7 +122,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: var(--nova-color-text);
 }
@@ -129,7 +137,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: var(--nova-color-primary-50);
@@ -138,7 +147,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 94%);
 }
@@ -272,7 +282,8 @@
   gap: 0;
 }
 
-.nova-navbar-bridge-menu-item {
+.nova-navbar-bridge-menu-item,
+.nova-navbar-bridge-menu-dropdown-summary {
   gap: 0.625rem;
   padding: 0.625rem 0.75rem;
   font-family: var(--nova-font-code);
@@ -286,27 +297,34 @@
               background-color var(--nova-motion-duration) ease;
 }
 
-.nova-navbar-bridge-menu-item:last-child {
+.nova-navbar-bridge-menu-item:last-child,
+.nova-navbar-bridge-menu-dropdown-summary:last-child {
   border-bottom: none;
 }
 
 .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: color-mix(in srgb, var(--nova-color-primary-500), transparent 96%);
 }
 
-[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-muted);
   border-bottom-color: var(--nova-color-border);
 }
 
-[data-theme="dark"] .nova-navbar-bridge-menu-item:last-child {
+[data-theme="dark"] .nova-navbar-bridge-menu-item:last-child,
+[data-theme="dark"] .nova-navbar-bridge-menu-dropdown-summary:last-child {
   border-bottom: 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-400);
   background-color: color-mix(in srgb, var(--nova-color-primary-500), transparent 94%);
 }
@@ -333,8 +351,13 @@
   animation: signal-snap 150ms ease;
 }
 
-.nova-navbar-bridge-menu-item {
+.nova-navbar-bridge-menu-item,
+.nova-navbar-bridge-menu-dropdown {
   opacity: 0;
 
   animation: signal-snap 150ms ease forwards;
 }
+
+.nova-navbar-bridge-menu-dropdown-children {
+  padding-inline-start: 1.75rem;
+}

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

@@ -62,7 +62,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;
@@ -82,14 +83,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: var(--nova-color-surface-raised);
   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);
 }
 
@@ -97,7 +102,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: var(--nova-color-text);
 }
@@ -109,7 +117,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: var(--nova-color-primary-50);
@@ -118,7 +127,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 94%);
 }
@@ -274,7 +284,8 @@
   border-left-color: var(--nova-color-border);
 }
 
-.nova-navbar-canopy-menu-item {
+.nova-navbar-canopy-menu-item,
+.nova-navbar-canopy-menu-dropdown-summary {
   flex-direction: column;
   justify-content: center;
   padding: 1rem 0.75rem;
@@ -292,19 +303,24 @@
 }
 
 .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 96%);
 }
 
-[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);
   border-right-color: var(--nova-color-border);
   border-bottom-color: var(--nova-color-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 94%);
 }
@@ -334,7 +350,8 @@
   animation: signal-snap 150ms ease;
 }
 
-.nova-navbar-canopy-menu-item {
+.nova-navbar-canopy-menu-item,
+.nova-navbar-canopy-menu-dropdown {
   opacity: 0;
 
   animation: signal-snap 150ms ease forwards;

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

@@ -81,7 +81,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;
@@ -99,14 +100,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: var(--nova-color-surface-raised);
   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);
 }
 
@@ -114,7 +119,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: var(--nova-color-text);
 }
@@ -126,7 +134,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: var(--nova-color-primary-50);
@@ -135,7 +144,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 94%);
 }
@@ -265,13 +275,14 @@
   gap: 0;
 }
 
-.nova-navbar-compass-menu-item {
+.nova-navbar-compass-menu-item,
+.nova-navbar-compass-menu-dropdown-summary {
   gap: 0.625rem;
   padding: 0.625rem 0.75rem;
   font-family: var(--nova-font-code);
   font-size: 0.75rem;
   font-weight: 500;
-  color: var(--nova-signal-text-muted);
+  color: var(--nova-color-primary-700);
   text-transform: uppercase;
   letter-spacing: 0.05em;
   border-bottom: 1px solid var(--nova-color-border);
@@ -284,12 +295,15 @@
 }
 
 .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 96%);
 }
 
-[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);
   border-bottom-color: var(--nova-color-border);
 }
@@ -299,7 +313,9 @@
 }
 
 [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 94%);
 }
@@ -329,8 +345,21 @@
   animation: signal-snap 150ms ease;
 }
 
-.nova-navbar-compass-menu-item {
+.nova-navbar-compass-menu-item,
+.nova-navbar-compass-menu-dropdown {
   opacity: 0;
 
   animation: signal-snap 150ms ease forwards;
 }
+
+/* ============================
+ * 12. Mobile Menu - Dropdown Spacing & Dark Mode Summary
+ * ============================ */
+
+[data-theme="dark"] .nova-navbar-compass-menu-dropdown-summary {
+  color: var(--nova-color-primary-400);
+}
+
+.nova-navbar-compass-menu-dropdown-children {
+  padding-inline-start: 1.75rem;
+}

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

@@ -179,7 +179,8 @@
   gap: 0;
 }
 
-.nova-navbar-monolith-menu-item {
+.nova-navbar-monolith-menu-item,
+.nova-navbar-monolith-menu-dropdown-summary {
   gap: 0.625rem;
 
   padding: 0.625rem 0.75rem;
@@ -202,13 +203,16 @@
 }
 
 .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 96%);
 }
 
-[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);
 
   border-bottom-color: var(--nova-color-border);
@@ -219,7 +223,9 @@
 }
 
 [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 94%);
@@ -250,8 +256,19 @@
   animation: signal-snap 150ms ease;
 }
 
-.nova-navbar-monolith-menu-item {
+.nova-navbar-monolith-menu-item,
+.nova-navbar-monolith-menu-dropdown {
   opacity: 0;
 
   animation: signal-snap 150ms ease forwards;
 }
+
+/* ============================
+ * 10. Mobile Menu - Dropdown Children
+ * ============================ */
+
+/* No open margin needed for this preset */
+
+.nova-navbar-monolith-menu-dropdown-children {
+  padding-inline-start: 1.75rem;
+}

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

@@ -54,6 +54,7 @@
 /* Popover menu - mirrors search-dropdown sharp ledger surface. */
 .nova-locale-dropdown-menu,
 .nova-version-dropdown-menu,
+.nova-dropdown-menu,
 .nova-navbar-more-menu {
   padding: 0;
 
@@ -65,6 +66,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 {
   border-color: var(--nova-color-border);
   box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
@@ -73,37 +75,42 @@
 /* Item link - dense rows separated by hairline borders. */
 .nova-locale-dropdown-item,
 .nova-version-dropdown-item,
+.nova-dropdown-item,
 .nova-navbar-more-item {
   border-bottom: 1px solid var(--nova-color-border);
 }
 
 .nova-locale-dropdown-item:last-child,
 .nova-version-dropdown-item:last-child,
+.nova-dropdown-item:last-child,
 .nova-navbar-more-item:last-child {
   border-bottom: none;
 }
 
 [data-theme="dark"] .nova-locale-dropdown-item,
 [data-theme="dark"] .nova-version-dropdown-item,
+[data-theme="dark"] .nova-dropdown-item,
 [data-theme="dark"] .nova-navbar-more-item {
   border-bottom-color: var(--nova-color-border);
 }
 
 [data-theme="dark"] .nova-locale-dropdown-item:last-child,
 [data-theme="dark"] .nova-version-dropdown-item:last-child,
+[data-theme="dark"] .nova-dropdown-item:last-child,
 [data-theme="dark"] .nova-navbar-more-item:last-child {
   border-bottom: none;
 }
 
 /* Item link - body voice, dense rows.
    Explicit `display: block`, `border-radius: 0`, `text-transform: none`,
-   `letter-spacing: normal`, `font-weight: 500` defend the More popover
-   items from the variant nav-item cluster rule (`.nova-navbar-{v}-items a`)
-   which would otherwise leak inline-flex, uppercase, and 0.05em tracking
-   onto items rendered inside the popover. No-op for locale/version where
-   no variant rule competes. */
+   `letter-spacing: normal`, `font-weight: 500` defend the More and
+   generic dropdown popover items from the variant nav-item cluster rule
+   (`.nova-navbar-{v}-items a`) which would otherwise leak inline-flex,
+   uppercase, and 0.05em 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;
@@ -126,6 +133,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;
@@ -135,6 +144,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);
@@ -143,6 +154,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);
 }
@@ -151,6 +163,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/theme/Navbar/Bridge/style.css

@@ -218,3 +218,36 @@
 .nova-navbar-bridge-menu-item:hover {
   text-decoration: none;
 }
+
+.nova-navbar-bridge-menu-dropdown {
+  display: flex;
+  flex-direction: column;
+}
+
+.nova-navbar-bridge-menu-dropdown-summary {
+  display: flex;
+  align-items: center;
+
+  padding: 0.75rem;
+
+  cursor: pointer;
+  user-select: none;
+  list-style: none;
+}
+
+.nova-navbar-bridge-menu-dropdown-summary::-webkit-details-marker {
+  display: none;
+}
+
+.nova-navbar-bridge-menu-dropdown-summary svg {
+  transition: transform var(--nova-motion-duration) var(--nova-motion-easing);
+}
+
+.nova-navbar-bridge-menu-dropdown[open] > .nova-navbar-bridge-menu-dropdown-summary svg {
+  transform: rotate(180deg);
+}
+
+.nova-navbar-bridge-menu-dropdown-children {
+  display: flex;
+  flex-direction: column;
+}

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

@@ -239,3 +239,36 @@
 .nova-navbar-canopy-menu-item:hover {
   text-decoration: none;
 }
+
+.nova-navbar-canopy-menu-dropdown {
+  display: flex;
+  flex-direction: column;
+}
+
+.nova-navbar-canopy-menu-dropdown-summary {
+  display: flex;
+  align-items: center;
+
+  padding: 0.75rem;
+
+  cursor: pointer;
+  user-select: none;
+  list-style: none;
+}
+
+.nova-navbar-canopy-menu-dropdown-summary::-webkit-details-marker {
+  display: none;
+}
+
+.nova-navbar-canopy-menu-dropdown-summary svg {
+  transition: transform var(--nova-motion-duration) var(--nova-motion-easing);
+}
+
+.nova-navbar-canopy-menu-dropdown[open] > .nova-navbar-canopy-menu-dropdown-summary svg {
+  transform: rotate(180deg);
+}
+
+.nova-navbar-canopy-menu-dropdown-children {
+  display: flex;
+  flex-direction: column;
+}