@solexllc/usx 0.1.1 → 0.1.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@solexllc/usx",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "description": "Compiled USWDS-based component styles for USX.",
   "license": "MIT",
   "repository": {

package/src/components/_header.scss

@@ -1,6 +1,16 @@
 @use 'pkg:@solexllc/usx-theme/variables' as *;
 
 /* stylelint-disable selector-class-pattern, no-descending-specificity -- Public USX classes use BEM naming; intentional cascade order. */
+
+// Keeps utilityContent and the search box on one row regardless of the
+// parent's own flex-direction (USWDS's .usa-nav__secondary stacks its
+// children in a column at desktop).
+.usx-nav__utility {
+  align-items: center;
+  display: flex;
+  gap: 0.5rem;
+}
+
 .usx-header {
   @if $usx-header-bg {
     background-color: $usx-header-bg;
@@ -91,6 +101,19 @@
           padding-left: 2rem;
           padding-right: 2rem;
           position: relative;
+
+          // .usa-nav__close (mobile-only) is hidden at this width, and
+          // .usa-nav__secondary is taken out of flow via its own absolute
+          // positioning — so .usa-nav__primary and .usx-nav__end-slot are the
+          // only two participants in this row, letting margin-left: auto push
+          // the slot flush right, vertically centered with the nav links.
+          display: flex;
+          align-items: center;
+      }
+
+      .usx-nav__end-slot {
+        flex-shrink: 0;
+        margin-left: auto;
       }
 
       // USWDS's own .usa-header--extended .usa-nav__primary-item > .usa-nav__link:hover::after

package/src/components/_in-page-nav.scss

@@ -10,12 +10,27 @@
 // instead of leaving the compiled defaults frozen.
 
 .usa-in-page-nav-container {
+  // Lets the sticky <aside> inside stick across its ancestor's full height
+  // (e.g. Layout's right sidebar, which stretches via CSS grid) instead of
+  // being bounded by this container's own (much shorter) content height.
+  height: 100%;
+
   main,
   .usx-in-page-nav__content {
     max-width: 100%;
   }
 }
 
+.usx-layout__sidebar--right {
+
+  .usa-in-page-nav-container {
+
+    .usa-in-page-nav.usx-in-page-nav {
+      margin: 0;
+    }
+  }
+}
+
 .usa-in-page-nav__nav {
   @if $usx-in-page-nav-bg {
     background-color: $usx-in-page-nav-bg;

package/src/components/_layout.scss

@@ -13,17 +13,9 @@
   // | gutter | content (max-width 960px) | gutter |
 
   &__single-column {
-    max-width: $max-layout-width;
+    max-width: calc($max-layout-width + units(4));
     margin: 0 auto;
-    padding: 0 units(2.5);
-
-    @include at-media('tablet') {
-      padding: 0 units(4);
-    }
-
-    @include at-media('desktop') {
-      padding: 0;
-    }
+    padding: 0 units(2);
   }
 
   // ── Multi-column grid layout ──────────────────────────────────────────────
@@ -52,6 +44,7 @@
   &__content {
     grid-column: content-start / span content-end;
     grid-row: 1;
+    max-width: calc($max-layout-width + units(4));
 
 
     // Content that leaves space for a left sidebar
@@ -62,8 +55,7 @@
 
       @include at-media('desktop') {
         grid-column: content-start / span right-sidebar-end;
-        width: $dynamic-content-width;
-        margin: 0 units(4) 0 0;
+        padding-right: units(4);
       }
     }
 
@@ -75,9 +67,8 @@
 
       @include at-media('desktop') {
         grid-column: left-sidebar-start / span content-end;
-        width: $dynamic-content-width;
-        margin: 0 0 0 units(4);
         justify-self: flex-end;
+        padding-left: units(4);
       }
     }
   }
@@ -87,11 +78,13 @@
   &__sidebar--left {
     grid-column: left-sidebar-start / span content-start;
     grid-row: 1;
+    height: 100%;
   }
 
   &__sidebar--right {
     grid-column: content-end / span right-sidebar-end;
     grid-row: 1;
+    height: 100%;
   }
 
   // Hide sidebars on mobile/tablet, show on desktop