@conduction/docusaurus-preset 3.44.0 → 3.44.2

package/src/components/Hero/Hero.module.css

@@ -21,7 +21,7 @@
 
 @media (max-width: 900px) {
   .hero {
-    grid-template-columns: 1fr;
+    grid-template-columns: minmax(0, 1fr);
     padding: 0 24px;
     gap: 32px;
   }

package/src/components/HexCard/HexCard.module.css

@@ -17,7 +17,7 @@
 .card {
   position: relative;
   display: grid;
-  grid-template-columns: 1fr;
+  grid-template-columns: minmax(0, 1fr);
   grid-template-areas:
     "head"
     "body";
@@ -43,7 +43,7 @@
 
 @media (max-width: 720px) {
   .hasActions {
-    grid-template-columns: 1fr;
+    grid-template-columns: minmax(0, 1fr);
     grid-template-areas:
       "head"
       "body"

package/src/components/HowSteps/HowSteps.module.css

@@ -6,7 +6,7 @@
 .cols-2 { grid-template-columns: repeat(2, 1fr); }
 .cols-3 { grid-template-columns: repeat(3, 1fr); }
 .cols-4 { grid-template-columns: repeat(4, 1fr); }
-@media (max-width: 900px) { .row { grid-template-columns: 1fr; } }
+@media (max-width: 900px) { .row { grid-template-columns: minmax(0, 1fr); } }
 
 .step {
   background: white;

package/src/components/LeafCard/LeafCard.module.css

@@ -141,13 +141,13 @@ a.card:hover {
   margin: var(--space-5) 0;
 }
 
-.grid-1 { grid-template-columns: 1fr; }
+.grid-1 { grid-template-columns: minmax(0, 1fr); }
 .grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
 .grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
 .grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
 
 @media (max-width: 768px) {
   .grid-2, .grid-3, .grid-4 {
-    grid-template-columns: 1fr;
+    grid-template-columns: minmax(0, 1fr);
   }
 }

package/src/components/McpToolShelf/McpToolShelf.module.css

@@ -39,7 +39,7 @@
   align-items: start;
 }
 @media (max-width: 1024px) {
-  .layout { grid-template-columns: 1fr; }
+  .layout { grid-template-columns: minmax(0, 1fr); }
 }
 
 .grid {
@@ -48,7 +48,7 @@
   gap: var(--space-4);
 }
 @media (max-width: 720px) {
-  .grid { grid-template-columns: 1fr; }
+  .grid { grid-template-columns: minmax(0, 1fr); }
 }
 
 .card {

package/src/components/ModuleCard/ModuleCard.module.css

@@ -26,7 +26,7 @@
 }
 
 @media (max-width: 700px) {
-  .card { grid-template-columns: 1fr; }
+  .card { grid-template-columns: minmax(0, 1fr); }
 }
 
 .leftCol {

package/src/components/NewsletterCta/NewsletterCta.module.css

@@ -14,7 +14,7 @@
   font-family: var(--conduction-typography-font-family-body);
 }
 @media (max-width: 900px) {
-  .cta { grid-template-columns: 1fr; padding: var(--space-8); }
+  .cta { grid-template-columns: minmax(0, 1fr); padding: var(--space-8); }
 }
 
 .copy { min-width: 0; }

package/src/components/NextSteps/NextSteps.module.css

@@ -28,7 +28,7 @@
 .cols-4 { grid-template-columns: repeat(4, 1fr); }
 
 @media (max-width: 800px) {
-  .cols-2, .cols-3, .cols-4 { grid-template-columns: 1fr; }
+  .cols-2, .cols-3, .cols-4 { grid-template-columns: minmax(0, 1fr); }
 }
 
 .card {

package/src/components/PairCard/PairCard.module.css

@@ -5,7 +5,7 @@
 .row { display: grid; gap: 16px; }
 .cols-2 { grid-template-columns: repeat(2, 1fr); }
 .cols-3 { grid-template-columns: repeat(3, 1fr); }
-@media (max-width: 900px) { .row { grid-template-columns: 1fr; } }
+@media (max-width: 900px) { .row { grid-template-columns: minmax(0, 1fr); } }
 
 .card {
   background: white;

package/src/components/PartnerCard/PartnerCard.module.css

@@ -10,7 +10,7 @@
 }
 .cols-2 { grid-template-columns: repeat(2, 1fr); }
 .cols-3 { grid-template-columns: repeat(3, 1fr); }
-@media (max-width: 900px) { .grid { grid-template-columns: 1fr; } }
+@media (max-width: 900px) { .grid { grid-template-columns: minmax(0, 1fr); } }
 
 .card {
   background: white;

package/src/components/PartnerDirectory/PartnerDirectory.module.css

@@ -19,7 +19,7 @@
 
 @media (max-width: 900px) {
   .layout {
-    grid-template-columns: 1fr;
+    grid-template-columns: minmax(0, 1fr);
     gap: 32px;
   }
 }

package/src/components/Pipeline/Pipeline.module.css

@@ -20,7 +20,7 @@
   margin: 0 auto;
 }
 @media (max-width: 1100px) {
-  .pipeline { grid-template-columns: 1fr; }
+  .pipeline { grid-template-columns: minmax(0, 1fr); }
 }
 
 /* Steps row. Position relative so the ::before line can absolute-

package/src/components/PlatformOverview/PlatformOverview.module.css

@@ -31,7 +31,7 @@
   margin-bottom: 64px;
 }
 @media (max-width: 900px) {
-  .head { grid-template-columns: 1fr; gap: 24px; margin-bottom: 48px; }
+  .head { grid-template-columns: minmax(0, 1fr); gap: 24px; margin-bottom: 48px; }
 }
 
 .eyebrow {

package/src/components/Reconcile/Reconcile.module.css

@@ -70,7 +70,7 @@
   max-width: 720px;
 }
 @media (max-width: 700px) {
-  .sheet { grid-template-columns: 1fr; }
+  .sheet { grid-template-columns: minmax(0, 1fr); }
 }
 
 .column {

package/src/components/ReferenceCard/ReferenceCard.module.css

@@ -5,7 +5,7 @@
 .grid { display: grid; gap: 16px; }
 .cols-2 { grid-template-columns: repeat(2, 1fr); }
 .cols-3 { grid-template-columns: repeat(3, 1fr); }
-@media (max-width: 900px) { .grid { grid-template-columns: 1fr; } }
+@media (max-width: 900px) { .grid { grid-template-columns: minmax(0, 1fr); } }
 
 .card {
   background: white;

package/src/components/RotatingCards/RotatingCards.module.css

@@ -65,7 +65,7 @@
 }
 
 @media (max-width: 900px) {
-  .card { grid-template-columns: 1fr; min-height: auto; }
+  .card { grid-template-columns: minmax(0, 1fr); min-height: auto; }
 }
 
 /* ---------- Image side (coloured panel) — full-bleed to all edges

package/src/components/Showcase/Showcase.module.css

@@ -33,8 +33,8 @@
 /* ---------- Body ---------- */
 .body { display: grid; gap: var(--space-8); align-items: stretch; }
 .layout-side  .body { grid-template-columns: 1fr 1.2fr; }
-.layout-stack .body { grid-template-columns: 1fr; gap: var(--space-6); }
-@media (max-width: 900px) { .layout-side .body { grid-template-columns: 1fr; } }
+.layout-stack .body { grid-template-columns: minmax(0, 1fr); gap: var(--space-6); }
+@media (max-width: 900px) { .layout-side .body { grid-template-columns: minmax(0, 1fr); } }
 
 /* ---------- List of items ---------- */
 .list { display: flex; flex-direction: column; gap: var(--space-3); }

package/src/components/SolutionCard/SolutionCard.module.css

@@ -5,7 +5,7 @@
 .grid { display: grid; gap: 20px; }
 .cols-2 { grid-template-columns: repeat(2, 1fr); }
 .cols-3 { grid-template-columns: repeat(3, 1fr); }
-@media (max-width: 900px) { .grid { grid-template-columns: 1fr; } }
+@media (max-width: 900px) { .grid { grid-template-columns: minmax(0, 1fr); } }
 
 .card {
   background: white;

package/src/components/StatsStrip/StatsStrip.module.css

@@ -34,7 +34,7 @@
   }
 }
 @media (max-width: 500px) {
-  .inner { grid-template-columns: 1fr; }
+  .inner { grid-template-columns: minmax(0, 1fr); }
 }
 
 .value {

package/src/components/WidgetShelf/WidgetShelf.module.css

@@ -53,7 +53,7 @@
 }
 .cols-2 { grid-template-columns: repeat(2, 1fr); }
 .cols-3 { grid-template-columns: repeat(3, 1fr); }
-@media (max-width: 900px) { .grid { grid-template-columns: 1fr; } }
+@media (max-width: 900px) { .grid { grid-template-columns: minmax(0, 1fr); } }
 
 /* ---- Carousel (default) ----
  *
@@ -172,7 +172,7 @@
   .carousel .card { width: auto; }
 }
 @media (prefers-reduced-motion: reduce) and (max-width: 900px) {
-  .group { grid-template-columns: 1fr; }
+  .group { grid-template-columns: minmax(0, 1fr); }
 }
 
 .card {

package/src/components/primitives/SectionHead.module.css

@@ -17,7 +17,7 @@
 .align-stack .lede { max-width: 60ch; margin-top: 16px; }
 
 @media (max-width: 900px) {
-  .align-split { grid-template-columns: 1fr; gap: 24px; }
+  .align-split { grid-template-columns: minmax(0, 1fr); gap: 24px; }
 }
 
 .title {

package/src/components/primitives/icons.jsx

@@ -46,6 +46,26 @@ export const ICONS = {
       <polyline points="13 6 19 12 13 18"/>
     </svg>
   ),
+
+  /* Hamburger. Opens the navbar drawer below the desktop breakpoint.
+     Three bars rather than a "more" glyph because the drawer holds the
+     whole primary navigation, not an overflow remainder. */
+  menu: (
+    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" aria-hidden="true">
+      <line x1="4" y1="7" x2="20" y2="7"/>
+      <line x1="4" y1="12" x2="20" y2="12"/>
+      <line x1="4" y1="17" x2="20" y2="17"/>
+    </svg>
+  ),
+
+  /* Close. Dismisses the navbar drawer. Same stroke weight as `menu` so
+     the toggle does not visually jump when the icon swaps. */
+  close: (
+    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" aria-hidden="true">
+      <line x1="6" y1="6" x2="18" y2="18"/>
+      <line x1="18" y1="6" x2="6" y2="18"/>
+    </svg>
+  ),
 };
 
 /**

package/src/theme/Navbar/index.jsx

@@ -191,6 +191,44 @@ export default function Navbar() {
   const items = navbar.items || [];
   const brand = brandFor(location.pathname, navbar.title);
 
+  /* Mobile drawer. Below the desktop breakpoint the whole primary
+     navigation moves into a drawer, rather than being allowed to
+     overflow the bar: at 390px the inline bar needs about 571px, so
+     the trailing items used to land off-screen with no way to reach
+     them (the site clips horizontal overflow, so they were not even
+     scrollable). Everything goes in, links and CTAs both, because the
+     bar has to fit an unknown number of items on an unknown wordmark
+     length. Keeping any of them inline only moves the cliff. */
+  const [menuOpen, setMenuOpen] = React.useState(false);
+  const toggleRef = React.useRef(null);
+
+  /* Close on navigation. Without this the drawer stays open over the
+     page the visitor just asked for. */
+  React.useEffect(() => {
+    setMenuOpen(false);
+  }, [location.pathname]);
+
+  /* While open: Escape closes and returns focus to the toggle, and the
+     page behind the drawer does not scroll. Both effects are torn down
+     together so a route change mid-gesture cannot strand the body with
+     `overflow: hidden`. */
+  React.useEffect(() => {
+    if (!menuOpen) return undefined;
+    const onKeyDown = (event) => {
+      if (event.key === 'Escape') {
+        setMenuOpen(false);
+        toggleRef.current?.focus();
+      }
+    };
+    document.addEventListener('keydown', onKeyDown);
+    const previousOverflow = document.body.style.overflow;
+    document.body.style.overflow = 'hidden';
+    return () => {
+      document.removeEventListener('keydown', onKeyDown);
+      document.body.style.overflow = previousOverflow;
+    };
+  }, [menuOpen]);
+
   /* Wordmark resolution order:
      1. ConNext / Common Ground sub-brand → custom JSX (Con<Next>, …)
      2. Conduction product app (Open*, Docu*, My*, …) → prefix-light
@@ -278,6 +316,41 @@ export default function Navbar() {
           <NavItem key={i} item={item} location={location} appVersion={appVersion} />
         ))}
       </div>
+
+      {/* Drawer toggle. Rendered on every viewport and hidden with CSS
+          above the breakpoint, so the markup does not depend on a
+          client-side width measurement that SSR cannot make. */}
+      <button
+        ref={toggleRef}
+        type="button"
+        className={styles.menuToggle}
+        aria-expanded={menuOpen}
+        aria-controls="navbar-drawer"
+        aria-label={menuOpen
+          ? translate({id: 'preset.navbar.menu.close', message: 'Close menu', description: 'Accessible label for the navbar drawer toggle while the drawer is open'})
+          : translate({id: 'preset.navbar.menu.open', message: 'Open menu', description: 'Accessible label for the navbar drawer toggle while the drawer is closed'})}
+        onClick={() => setMenuOpen((open) => !open)}
+      >
+        <span className={styles.iconGlyph} aria-hidden="true">
+          {menuOpen ? ICONS.close : ICONS.menu}
+        </span>
+      </button>
+
+      {/* Drawer. Kept mounted and hidden so the toggle's aria-controls
+          always resolves to a real element. `hidden` also keeps the
+          links out of the tab order and out of the accessibility tree
+          while closed, which a purely visual `display: none` on the
+          parent would not guarantee across the breakpoint. */}
+      <div id="navbar-drawer" className={styles.drawer} hidden={!menuOpen}>
+        <div className={styles.drawerItems}>
+          {leftItems.map((item, i) => (
+            <NavItem key={`l${i}`} item={item} location={location} appVersion={appVersion} />
+          ))}
+          {rightItems.map((item, i) => (
+            <NavItem key={`r${i}`} item={item} location={location} appVersion={appVersion} />
+          ))}
+        </div>
+      </div>
     </nav>
   );
 }

package/src/theme/Navbar/styles.module.css

@@ -193,15 +193,212 @@
   white-space: nowrap;
 }
 
-/* Responsive collapse, simplified for v1.
-   TODO: hamburger menu like the design-system mock. */
-@media (max-width: 900px) {
+/**
+ * Drawer toggle (hamburger).
+ *
+ * Hidden above the breakpoint. Always rendered in the markup so the
+ * button's `aria-controls` resolves during server rendering, when
+ * there is no viewport width to branch on.
+ *
+ * 44px square. WCAG 2.2 SC 2.5.8 (AA) only requires 24x24, which this
+ * clears comfortably; 44 is the size a thumb actually wants, and it is
+ * the primary control on every phone-width page.
+ */
+.menuToggle {
+  display: none;
+  align-items: center;
+  justify-content: center;
+  width: 44px;
+  height: 44px;
+  padding: 0;
+  border: 1px solid var(--c-cobalt-100);
+  border-radius: var(--radius-sm);
+  background: white;
+  color: var(--c-cobalt-700);
+  font-size: 22px;
+  cursor: pointer;
+  transition: color 160ms ease, background 160ms ease;
+}
+.menuToggle:hover {
+  color: var(--c-blue-cobalt);
+  background: var(--c-cobalt-50);
+}
+
+/**
+ * Drawer panel.
+ *
+ * `display: none` by default rather than relying on the `hidden`
+ * attribute alone, because the rules below set a display value and any
+ * such declaration overrides the UA default for `[hidden]`. Opening is
+ * therefore scoped to the breakpoint AND to `:not([hidden])`, so the
+ * panel can never appear on desktop even if the state says open.
+ *
+ * Positioned against .nav, which is `position: sticky` and so already
+ * a containing block for absolutely positioned descendants.
+ */
+.drawer {
+  display: none;
+  position: absolute;
+  top: 100%;
+  left: 0;
+  right: 0;
+  background: white;
+  border-bottom: 1px solid var(--c-cobalt-100);
+  box-shadow: 0 12px 24px rgba(16, 42, 86, 0.10);
+  max-height: 75vh;
+  overflow-y: auto;
+  -webkit-overflow-scrolling: touch;
+}
+
+.drawerItems {
+  display: flex;
+  flex-direction: column;
+  padding: 8px 24px 20px;
+}
+
+/* Every interactive row in the drawer gets a full-width 44px target.
+   Styling by context rather than by passing a variant down through
+   NavItem keeps the item types (link, cta, github, apiDocs, locale)
+   rendering exactly as they do in the bar. */
+.drawerItems > a {
+  display: flex;
+  align-items: center;
+  min-height: 44px;
+  width: 100%;
+  border-bottom: 1px solid var(--c-cobalt-50);
+  font-size: 16px;
+}
+.drawerItems > a:last-child { border-bottom: none; }
+
+/* The locale item is a list, not a single row, so it sizes to its
+   contents and lets the language links below own the 44px rhythm. */
+.drawerItems > .localeWrapper {
+  display: block;
+  width: 100%;
+}
+
+/* The install CTA keeps its filled treatment but becomes a full-width
+   block, so it reads as the primary action of the drawer. */
+.drawerItems > .cta {
+  justify-content: center;
+  margin-top: 16px;
+  border-bottom: none;
+  padding: 12px 16px;
+}
+
+/* Icon-only items (GitHub) need a visible hit area in a vertical list,
+   where there is no neighbouring label to borrow width from. */
+.drawerItems > .iconLink {
+  width: 100%;
+  justify-content: flex-start;
+  height: auto;
+}
+
+/* The version pill is a static chip, not a control: keep it inline and
+   out of the 44px rhythm. */
+.drawerItems > .versionPill {
+  align-self: flex-start;
+  margin-top: 12px;
+}
+
+/**
+ * Locale switcher inside the drawer.
+ *
+ * Two Infima behaviours have to be undone here.
+ *
+ * First, Infima hides `.navbar__item` outright below 996px, because it
+ * expects its own mobile sidebar to take over. Inside this drawer that
+ * rule collapses the locale item to a zero-height blank row, so the
+ * display value is restored explicitly.
+ *
+ * Second, the menu is a hover dropdown positioned absolutely. A hover
+ * dropdown is the wrong control on touch, and in a vertical panel the
+ * absolute menu lands off the side of the screen. Pinning it into the
+ * flow and dropping the trigger turns it into what it should be on a
+ * phone: a plain list of the available languages.
+ */
+.drawer .localeWrapper :global(.navbar__item) {
+  display: block;
+  width: 100%;
+  padding: 0;
+}
+
+/* The trigger just repeats the current locale, which the list already
+   marks as active. Dropping it avoids an "English / English /
+   Nederlands" stutter. */
+.drawer .localeWrapper :global(.navbar__link) {
+  display: none;
+}
+
+.drawer .localeWrapper :global(.dropdown__menu) {
+  position: static;
+  display: block;
+  transform: none;
+  opacity: 1;
+  visibility: visible;
+  box-shadow: none;
+  background: transparent;
+  padding: 0;
+  margin: 0;
+  min-width: 0;
+  max-height: none;
+}
+
+.drawer .localeWrapper :global(.dropdown__link) {
+  display: flex;
+  align-items: center;
+  min-height: 44px;
+  margin: 0;
+  border-radius: 0;
+  border-bottom: 1px solid var(--c-cobalt-50);
+  font-size: 16px;
+}
+
+/**
+ * Breakpoint.
+ *
+ * 996px matches Docusaurus's own navbar collapse, so the drawer and
+ * the framework's mobile sidebar agree about where "mobile" starts.
+ * Measured on conduction.nl: the inline bar needs 571px at its
+ * narrowest and 775px with a full item set, so collapsing at 996px
+ * clears both with room for sites that add items.
+ */
+@media (max-width: 996px) {
   .nav {
-    padding: 16px 24px;
-    flex-wrap: wrap;
-    gap: 16px;
+    padding: 12px 16px;
+    gap: 12px;
   }
   .left { gap: 16px; }
-  .links { gap: 16px; }
-  .ctas { gap: 8px; }
+
+  /* The bar keeps only the wordmark and the toggle. */
+  .links,
+  .ctas {
+    display: none;
+  }
+
+  .menuToggle {
+    display: inline-flex;
+  }
+
+  .drawer:not([hidden]) {
+    display: block;
+  }
+
+  /* Long product wordmarks must not push the toggle off the bar. The
+     wordmark is also the home link, so it gets the same 44px height as
+     the toggle it sits opposite. */
+  .wordmark {
+    font-size: 19px;
+    min-width: 0;
+    min-height: 44px;
+  }
+  .wordmarkText {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  .left {
+    min-width: 0;
+    flex: 1;
+  }
 }