@cbnventures/docusaurus-preset-nova 0.21.0 → 0.22.0

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;
+}
+

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

@@ -224,7 +224,8 @@
  * 8. Mobile menu items - mono uppercase carved labels
  * ============================ */
 
-.nova-navbar-monolith-menu-item {
+.nova-navbar-monolith-menu-item,
+.nova-navbar-monolith-menu-dropdown-summary {
   gap: 0.75rem;
 
   font-family: var(--nova-font-display);
@@ -232,7 +233,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:
@@ -241,18 +242,26 @@
 }
 
 .nova-navbar-monolith-menu-item:hover,
-.nova-navbar-monolith-menu-item:focus-visible {
+.nova-navbar-monolith-menu-item:focus-visible,
+.nova-navbar-monolith-menu-dropdown-summary:hover,
+.nova-navbar-monolith-menu-dropdown-summary:focus-visible {
   color: var(--nova-color-primary-700);
   background-color: color-mix(in srgb, var(--nova-color-primary-500), transparent 90%);
   text-decoration: none;
 }
 
 [data-theme="dark"] .nova-navbar-monolith-menu-item:hover,
-[data-theme="dark"] .nova-navbar-monolith-menu-item:focus-visible {
+[data-theme="dark"] .nova-navbar-monolith-menu-item:focus-visible,
+[data-theme="dark"] .nova-navbar-monolith-menu-dropdown-summary:hover,
+[data-theme="dark"] .nova-navbar-monolith-menu-dropdown-summary:focus-visible {
   color: var(--nova-color-primary-300);
   background-color: color-mix(in srgb, var(--nova-color-primary-500), transparent 84%);
 }
 
+[data-theme="dark"] .nova-navbar-monolith-menu-dropdown-summary {
+  color: var(--nova-color-primary-400);
+}
+
 .nova-navbar-monolith-menu-item[aria-current="page"] {
   color: var(--nova-color-primary-800);
   background-color: color-mix(in srgb, var(--nova-color-primary-500), transparent 84%);
@@ -278,9 +287,18 @@
  * preset declares `motion.staggeredReveals: true`.
  * ============================ */
 
-.nova-navbar-monolith-menu-item {
+.nova-navbar-monolith-menu-item,
+.nova-navbar-monolith-menu-dropdown {
   opacity: 0;
 
   animation: lantern-fade-in-up var(--nova-lantern-transition) forwards;
   animation-delay: calc(var(--nova-item-index, 0) * 50ms + 50ms);
 }
+
+/* ============================
+ * 9. Mobile menu dropdown spacing
+ * ============================ */
+
+.nova-navbar-monolith-menu-dropdown-children {
+  padding-inline-start: 1.75rem;
+}

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

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

@@ -70,6 +70,7 @@
 /* Popover menu - mirrors search-dropdown paper-card treatment. */
 .nova-locale-dropdown-menu,
 .nova-version-dropdown-menu,
+.nova-dropdown-menu,
 .nova-navbar-more-menu {
   padding: 0.5rem 0;
 
@@ -81,6 +82,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-mix(in srgb, var(--nova-color-primary-500), var(--nova-lantern-bg) 88%);
   border-color: color-mix(in srgb, var(--nova-color-primary-500), var(--nova-lantern-border) 50%);
@@ -89,13 +91,14 @@
 
 /* Item link - italic Fraunces caption.
    Explicit `display: block`, `border-radius: 0`, `text-transform: none`,
-   `letter-spacing: normal` defend the More popover items from the variant
-   nav-item cluster rule (`.nova-navbar-compass-items a`) which would
-   otherwise leak inline-flex, rounded corners, uppercase, and 0.12em
-   tracking onto items rendered inside the popover. No-op for
+   `letter-spacing: normal` defend the More and generic dropdown popover
+   items from the variant nav-item cluster rule (`.nova-navbar-compass-items a`)
+   which would otherwise leak inline-flex, rounded corners, uppercase, and
+   0.12em 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.5rem 0.75rem;
@@ -121,6 +124,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;
@@ -130,6 +135,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);
@@ -141,6 +148,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-300);

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

@@ -71,7 +71,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;
@@ -95,7 +96,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-accent-800);
   background-color: color-mix(in srgb, var(--nova-color-accent-500), transparent 94%);
   text-decoration: none;
@@ -105,7 +109,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-accent-300);
   background-color: color-mix(in srgb, var(--nova-color-accent-500), transparent 86%);
 }
@@ -132,7 +139,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 {
   color: var(--nova-color-accent-800);
   background-color: color-mix(in srgb, var(--nova-color-accent-500), transparent 88%);
 }
@@ -140,7 +148,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-accent-300);
   background-color: color-mix(in srgb, var(--nova-color-accent-500), transparent 80%);
 }
@@ -275,7 +284,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-code);
@@ -283,25 +293,33 @@
   font-weight: 600;
   letter-spacing: 0.08em;
   text-transform: uppercase;
-  color: var(--nova-marshal-ink);
+  color: var(--nova-color-primary-700);
   border-radius: 2px;
 
   transition: color var(--nova-marshal-transition);
 }
 
 .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-800);
   background-color: color-mix(in srgb, var(--nova-color-primary-500), transparent 94%);
   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 88%);
 }
 
+[data-theme="dark"] .nova-navbar-bridge-menu-dropdown-summary {
+  color: var(--nova-color-primary-300);
+}
+
 .nova-navbar-bridge-menu-item[aria-current="page"] {
   color: var(--nova-color-primary-800);
   background-color: color-mix(in srgb, var(--nova-color-primary-500), transparent 88%);
@@ -322,6 +340,14 @@
   color: var(--nova-color-accent-500);
 }
 
+.nova-navbar-bridge-menu-dropdown-summary svg {
+  color: var(--nova-color-accent-700);
+}
+
+[data-theme="dark"] .nova-navbar-bridge-menu-dropdown-summary svg {
+  color: var(--nova-color-accent-500);
+}
+
 /* External-link arrow - green */
 .nova-navbar-bridge-menu-panel .nova-navbar-bridge-menu-items a[target="_blank"] span::after {
   background-color: var(--nova-color-primary-700);
@@ -340,8 +366,22 @@
  * feel argues against a per-item ripple.
  * ============================ */
 
-.nova-navbar-bridge-menu-item {
+.nova-navbar-bridge-menu-item,
+.nova-navbar-bridge-menu-dropdown {
   opacity: 0;
 
   animation: marshal-fade-in var(--nova-marshal-transition) forwards;
 }
+
+/* ============================
+ * 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/marshal/theme/Navbar/Canopy/style.css

@@ -79,7 +79,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;
   padding: 0.375rem 0.75rem;
 
@@ -101,7 +102,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-accent-800);
   background-color: color-mix(in srgb, var(--nova-color-accent-500), transparent 94%);
   text-decoration: none;
@@ -111,7 +115,10 @@
 [data-theme="dark"] .nova-navbar-canopy-items a:not(.navbar__link--active):not([aria-current="page"]):focus-visible,
 [data-theme="dark"] .nova-navbar-canopy-items .nova-navbar-more:not(:has(a.navbar__link--active)):not(:has(a[aria-current="page"])) > .nova-navbar-more-summary:hover,
 [data-theme="dark"] .nova-navbar-canopy-items .nova-navbar-more:not(:has(a.navbar__link--active)):not(:has(a[aria-current="page"])) > .nova-navbar-more-summary:focus-visible,
-[data-theme="dark"] .nova-navbar-canopy-items .nova-navbar-more:not(:has(a.navbar__link--active)):not(:has(a[aria-current="page"]))[open] > .nova-navbar-more-summary {
+[data-theme="dark"] .nova-navbar-canopy-items .nova-navbar-more:not(:has(a.navbar__link--active)):not(:has(a[aria-current="page"]))[open] > .nova-navbar-more-summary,
+[data-theme="dark"] .nova-navbar-canopy-items .nova-dropdown:not(.nova-dropdown--active) > .nova-dropdown-summary:hover,
+[data-theme="dark"] .nova-navbar-canopy-items .nova-dropdown:not(.nova-dropdown--active) > .nova-dropdown-summary:focus-visible,
+[data-theme="dark"] .nova-navbar-canopy-items .nova-dropdown:not(.nova-dropdown--active)[open] > .nova-dropdown-summary {
   color: var(--nova-color-accent-300);
   background-color: color-mix(in srgb, var(--nova-color-accent-500), transparent 86%);
 }
@@ -139,7 +146,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 {
   color: var(--nova-color-accent-800);
   background-color: color-mix(in srgb, var(--nova-color-accent-500), transparent 88%);
 }
@@ -147,7 +155,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-accent-300);
   background-color: color-mix(in srgb, var(--nova-color-accent-500), transparent 80%);
 }
@@ -286,7 +295,8 @@
   gap: 0.5rem;
 }
 
-.nova-navbar-canopy-menu-item {
+.nova-navbar-canopy-menu-item,
+.nova-navbar-canopy-menu-dropdown-summary {
   position: relative;
 
   flex-direction: column;
@@ -301,7 +311,7 @@
   letter-spacing: 0.08em;
   text-align: center;
   text-transform: uppercase;
-  color: var(--nova-marshal-ink);
+  color: var(--nova-color-primary-700);
 
   background-color: transparent;
   border: 1px solid var(--nova-marshal-border);
@@ -312,15 +322,23 @@
     border-color var(--nova-marshal-transition);
 }
 
+[data-theme="dark"] .nova-navbar-canopy-menu-dropdown-summary {
+  color: var(--nova-color-primary-300);
+}
+
 .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-800);
   border-color: var(--nova-color-primary-700);
   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);
   border-color: var(--nova-color-primary-400);
 }
@@ -337,11 +355,13 @@
   box-shadow: inset 2px 0 0 0 var(--nova-color-primary-400);
 }
 
-.nova-navbar-canopy-menu-item svg {
+.nova-navbar-canopy-menu-item svg,
+.nova-navbar-canopy-menu-dropdown-summary svg {
   color: var(--nova-color-accent-700);
 }
 
-[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-accent-500);
 }
 
@@ -360,12 +380,21 @@
  * `motion.staggeredReveals: false` so items reveal together.
  * ============================ */
 
-.nova-navbar-canopy-menu-item {
+.nova-navbar-canopy-menu-item,
+.nova-navbar-canopy-menu-dropdown {
   opacity: 0;
 
   animation: marshal-fade-in var(--nova-marshal-transition) forwards;
 }
 
+.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/marshal/theme/Navbar/Compass/style.css

@@ -87,7 +87,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;
@@ -111,7 +112,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-accent-800);
   background-color: color-mix(in srgb, var(--nova-color-accent-500), transparent 94%);
   text-decoration: none;
@@ -121,7 +125,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-accent-300);
   background-color: color-mix(in srgb, var(--nova-color-accent-500), transparent 86%);
 }
@@ -138,7 +145,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 {
   color: var(--nova-color-accent-800);
   background-color: color-mix(in srgb, var(--nova-color-accent-500), transparent 88%);
 }
@@ -146,7 +154,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-accent-300);
   background-color: color-mix(in srgb, var(--nova-color-accent-500), transparent 80%);
 }
@@ -279,7 +288,8 @@
  * 12. 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-code);
@@ -287,21 +297,29 @@
   font-weight: 600;
   letter-spacing: 0.08em;
   text-transform: uppercase;
-  color: var(--nova-marshal-ink);
+  color: var(--nova-color-primary-700);
   border-radius: 2px;
 
   transition: color var(--nova-marshal-transition);
 }
 
+[data-theme="dark"] .nova-navbar-compass-menu-dropdown-summary {
+  color: var(--nova-color-primary-300);
+}
+
 .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-800);
   background-color: color-mix(in srgb, var(--nova-color-primary-500), transparent 94%);
   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 88%);
 }
@@ -341,8 +359,21 @@
  * `motion.staggeredReveals: false` so items reveal together.
  * ============================ */
 
-.nova-navbar-compass-menu-item {
+.nova-navbar-compass-menu-item,
+.nova-navbar-compass-menu-dropdown {
   opacity: 0;
 
   animation: marshal-fade-in var(--nova-marshal-transition) forwards;
 }
+
+/* ============================
+ * 13. 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 {
+  padding-inline-start: 1.75rem;
+}