@solexllc/usx 0.1.0

package/src/components/_link.scss

@@ -0,0 +1,63 @@
+@use 'pkg:@solexllc/usx-theme/variables' as *;
+
+/* stylelint-disable selector-class-pattern, selector-not-notation, no-descending-specificity -- Public USX classes use BEM naming; preserve original :not() specificity and cascade order. */
+.usx-link,
+.usx-prose a {
+  display: inline-flex;
+  align-items: center;
+  width: max-content;
+  gap: 0.25rem;
+
+  &:not([class^="text-"]):not([class*=" text-"]) {
+    @if $usx-link-text {
+      color: $usx-link-text;
+    }
+
+    &:hover {
+      @if $usx-link-text-hover {
+        color: $usx-link-text-hover;
+      }
+    }
+
+    &:active {
+      @if $usx-link-text-active {
+        color: $usx-link-text-active;
+      }
+    }
+  }
+
+  &:not(.usx-no-visited) {
+    &:visited,
+    &.usx-link--visited {
+      @if $usx-link-text-visited {
+        color: $usx-link-text-visited;
+      }
+    }
+  }
+
+  &:focus {
+    @if $usx-input-focus-outline {
+      color: $usx-input-focus-outline;
+    }
+  }
+}
+
+// On a dark background, USWDS swaps link/visited color to a light neutral
+// (matching the surrounding light text) instead of the blue/purple defaults.
+.usa-dark-background .usx-link,
+.usa-dark-background .usx-prose a {
+  &:not([class^="text-"]):not([class*=" text-"]) {
+    @if $usx-link-text-dark {
+      color: $usx-link-text-dark;
+    }
+  }
+
+  &:not(.usx-no-visited) {
+    &:visited,
+    &.usx-link--visited {
+      @if $usx-link-text-visited-dark {
+        color: $usx-link-text-visited-dark;
+      }
+    }
+  }
+}

package/src/components/_list.scss

@@ -0,0 +1,4 @@
+/* stylelint-disable selector-class-pattern -- Public USX classes use BEM naming. */
+.usx-list {
+  display: block;
+}

package/src/components/_misc-banner.scss

@@ -0,0 +1,143 @@
+@use 'pkg:@solexllc/usx-theme/variables' as *;
+
+/* stylelint-disable selector-class-pattern -- Public USX classes use BEM naming. */
+/* stylelint-disable no-descending-specificity -- Dropdown button rules intentionally follow the focus-state override. */
+.usx-misc-banner {
+  display: block;
+  position: relative;
+
+  .usx-misc-banner__content {
+    display: flex;
+    align-items: center;
+    margin-top: 0;
+    margin-bottom: 0;
+    font-size: $usx-misc-banner-font-size;
+    color: #fff;
+    background-color: inherit;
+    padding-top: .75rem;
+    padding-bottom: .75rem;
+    line-height: 1.15;
+
+    .usx-misc-banner__badge {
+      background-color: white;
+      font-size: $usx-misc-banner-font-size;
+      font-weight: $usx-font-weight-bold;
+      text-transform: uppercase;
+      padding: 6px 11px;
+      border-radius: $usx-misc-banner-badge-radius;
+      margin-right: 1.25rem;
+    }
+
+    .usx-misc-banner__text {
+      margin: 0;
+      margin-right: .75rem;
+      max-width: 610px;
+    }
+
+    .usx-misc-banner__link {
+      display: none;
+
+      &:visited {
+        color: #fff;
+      }
+
+      @media (width >= 64em) {
+        display: inline-block;
+        color: #fff;
+      }
+    }
+
+    .usx-misc-banner__return-text {
+      margin: 0;
+      position: relative;
+      padding-left: 2rem;
+      display: none;
+      margin-left: auto;
+
+      @media (width >= 64em) {
+        display: inline-block;
+      }
+    }
+
+    .usx-misc-banner__dropdown {
+      display: inline-block;
+      margin: 0 0 0 auto;
+      background-color: inherit;
+
+      @media (width >= 64em) {
+        display: none;
+      }
+
+      .usx-misc-banner__dropdown-toggle {
+        position: absolute;
+        opacity: 0;
+        pointer-events: none;
+      }
+
+      .usx-misc-banner__dropdown-toggle:focus + .usx-misc-banner__dropdown-button {
+        outline: 0.25rem solid #9bdaf1;
+
+        @if $usx-misc-banner-focus {
+          outline-color: $usx-misc-banner-focus;
+        }
+      }
+
+      .usx-misc-banner__dropdown-button {
+        height: 3em;
+        width: 3em;
+        background: none;
+        border: none;
+        display: flex;
+        padding: 0;
+        margin: -.5rem;
+        margin-right: -1rem;
+        align-items: center;
+        justify-content: center;
+        cursor: pointer;
+        user-select: none;
+
+        svg {
+          transition: transform 0.2s ease;
+        }
+      }
+
+      .usx-misc-banner__dropdown-toggle:checked + .usx-misc-banner__dropdown-button > svg {
+        transform: rotate(180deg);
+      }
+
+      .usx-misc-banner__dropdown-content {
+        display: none;
+        position: absolute;
+        z-index: 400;
+        background-color: inherit;
+        top: 100%;
+        right: 0;
+
+        .usx-misc-banner__link {
+          display: inline-block;
+          color: #fff;
+        }
+
+        ul {
+          line-height: 1.6;
+          margin: 0;
+          padding: .75rem 2rem .75rem 1.25rem;
+          list-style-type: none;
+          width: 20rem;
+
+          li {
+            margin-bottom: 0.75rem;
+
+            &:last-child {
+              margin-bottom: .25rem;
+            }
+          }
+        }
+      }
+
+      .usx-misc-banner__dropdown-toggle:checked ~ .usx-misc-banner__dropdown-content {
+        display: block;
+      }
+    }
+  }
+}

package/src/components/_modal.scss

@@ -0,0 +1,47 @@
+@use 'pkg:@solexllc/usx-theme/variables' as *;
+
+/* stylelint-disable selector-class-pattern -- Public USX classes use BEM naming. */
+.usx-modal {
+  @if $usx-modal-bg {
+    background: $usx-modal-bg;
+  }
+
+  @if $usx-modal-text {
+    color: $usx-modal-text;
+  }
+
+  .usa-modal__close {
+    @if $usx-modal-close-text {
+      color: $usx-modal-close-text;
+    }
+
+    &:hover,
+    &:active {
+      @if $usx-modal-close-text-hover {
+        color: $usx-modal-close-text-hover;
+      }
+    }
+  }
+
+  &.usx-modal--lg-collapsed {
+    max-width: 55rem;
+    width: 100%;
+
+    .usa-modal__heading {
+      font-size: $usx-modal-heading-font-size;
+      margin-top: 0;
+      line-height: 1.34em;
+    }
+
+    .usa-modal__main {
+      padding: 2rem;
+      padding-top: 0;
+      width: 100%;
+      max-width: 100%;
+
+      .usa-prose {
+        min-height: 3rem;
+      }
+    }
+  }
+}

package/src/components/_page.scss

@@ -0,0 +1,28 @@
+@use 'pkg:@solexllc/usx-theme/variables' as *;
+
+/* stylelint-disable selector-class-pattern -- Public USX classes use BEM naming. */
+.usx-page {
+  margin-top: 2rem;
+  margin-bottom: 4rem;
+
+  @if $usx-page-bg {
+    background-color: $usx-page-bg;
+  }
+
+  @if $usx-page-text {
+    color: $usx-page-text;
+  }
+
+  .usx-page__title {
+    margin-top: 0;
+    margin-bottom: 1.5rem;
+  }
+
+  .usx-page__content {
+    display: block;
+
+    p {
+      max-width: 64ex;
+    }
+  }
+}

package/src/components/_pagination.scss

@@ -0,0 +1,202 @@
+@use 'pkg:@solexllc/usx-theme/variables' as *;
+
+// ── Container layout ────────────────────────────────────────────────────
+.usx-pagination__container {
+  padding-top: .75rem;
+  display: flex;
+  flex-direction: column;
+  align-items: start;
+  gap: 1rem;
+
+  @if $usx-color-base {
+    border-top: 1px solid $usx-color-base;
+  }
+
+  @media (width >=#{$breakpoint-desktop}) {
+    flex-flow: row wrap;
+    justify-content: space-between;
+    align-items: center;
+  }
+}
+
+.usx-pagination__container-start {
+  place-content: center center;
+  align-items: center;
+
+  @media (width >=#{$breakpoint-desktop}) {
+    flex: 1 1 auto;
+  }
+}
+
+.usx-pagination__container-end {
+  display: flex;
+  flex-direction: column;
+  place-content: start start;
+  align-items: start;
+  gap: 1rem;
+
+  @media (width >=#{$breakpoint-tablet}) {
+    width: 100%;
+    flex-flow: row wrap;
+    align-items: center;
+    justify-content: space-between;
+  }
+
+  @media (width >=#{$breakpoint-desktop}) {
+    width: auto;
+    flex: 0 1 auto;
+    flex-flow: row wrap;
+    align-items: center;
+    justify-content: end;
+  }
+}
+
+// ── Navigation ──────────────────────────────────────────────────────────
+.usx-pagination__nav {
+  margin: 0;
+
+  // Real USWDS hardcodes the `.usa-pagination` nav to a static white bg /
+  // #1b1b1b text — floats as an opaque box over a themed page background.
+  @if $usx-pagination-bg {
+    background-color: $usx-pagination-bg;
+  }
+
+  @if $usx-pagination-text {
+    color: $usx-pagination-text;
+  }
+
+  .usa-pagination__list {
+    gap: 0.5rem;
+
+    .usa-pagination__item {
+      margin: 0;
+    }
+  }
+
+  // Real USWDS's compiled CSS hardcodes pagination link/button text and
+  // the current-page underline to literal `color("primary")`/`primary-
+  // vivid` — nav/wayfinding element, should track the theme. Scoped to
+  // `.usx-pagination` so it doesn't affect unrelated `.usa-current` usages
+  // elsewhere (header nav, in-page-nav, sidenav).
+  .usa-pagination__link {
+    @if $usx-pagination-link-text {
+      color: $usx-pagination-link-text;
+    }
+
+    &:visited {
+      @if $usx-pagination-link-text {
+        color: $usx-pagination-link-text;
+      }
+    }
+
+    &:hover {
+      @if $usx-pagination-link-text-hover {
+        color: $usx-pagination-link-text-hover;
+      }
+    }
+  }
+
+  .usa-pagination__button {
+    @if $usx-pagination-link-text {
+      color: $usx-pagination-link-text;
+    }
+
+    &:not(.usa-current) {
+      @if $usx-pagination-button-border {
+        border-color: $usx-pagination-button-border;
+      }
+    }
+
+    &:hover {
+      @if $usx-pagination-link-text-hover {
+        color: $usx-pagination-link-text-hover;
+        border-color: $usx-pagination-link-text-hover;
+      }
+    }
+
+    // Real USWDS hardcodes the filled current-page button to a static
+    // #1b1b1b bg / #fff text (`.usa-pagination .usa-current`) — higher
+    // specificity than the plain-link rule above so it wins instead of
+    // inheriting the link color over its own filled background.
+    &.usa-current {
+      @if $usx-pagination-current-bg {
+        background-color: $usx-pagination-current-bg;
+      }
+
+      @if $usx-pagination-current-text {
+        color: $usx-pagination-current-text;
+      }
+
+      &:hover,
+      &:focus,
+      &:active {
+        @if $usx-pagination-current-bg {
+          background-color: $usx-pagination-current-bg;
+        }
+
+        @if $usx-pagination-current-text {
+          color: $usx-pagination-current-text;
+        }
+      }
+    }
+  }
+
+  .usa-pagination__link--disabled {
+    color: $usx-color-base;
+    cursor: not-allowed;
+    pointer-events: none;
+    opacity: 0.4;
+    text-decoration: none;
+  }
+}
+
+// ── Summary ─────────────────────────────────────────────────────────────
+.usx-pagination__summary {
+  font-size: $usx-font-size-base;
+  color: $usx-text-ink;
+  margin: 0;
+}
+
+// ── Step Options ────────────────────────────────────────────────────────
+.usx-pagination__step-options {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+
+  .usx-label {
+    font-size: $usx-font-size-base;
+    white-space: nowrap;
+    color: $usx-text-ink;
+    margin: 0;
+  }
+
+  .usx-select {
+    // Override USWDS default full-width with compact inline sizing
+    width: auto !important;
+    max-width: 5rem;
+    padding-top: 0.25rem;
+    padding-bottom: 0.25rem;
+    margin: 0;
+    height: auto;
+  }
+}
+
+.usx-pagination__container-end:has(.usx-pagination__arrows-only) {
+  flex-direction: row;
+  justify-content: end;
+  align-items: center;
+
+  .usa-pagination__arrow {
+    display: flex;
+
+    .usa-pagination__link {
+      padding: .5rem;
+      margin: 0;
+
+      .usa-icon {
+        height: 2rem;
+        width: 2rem;
+      }
+    }
+  }
+}

package/src/components/_process-list.scss

@@ -0,0 +1,35 @@
+/* stylelint-disable selector-class-pattern -- Public USX classes use BEM naming. */
+
+@use 'pkg:@solexllc/usx-theme/variables' as *;
+
+// Real USWDS hardcodes heading/counter text to #1b1b1b and the connecting
+// line + circle border to fixed light-blue/gray-cool literals — give them
+// themeable defaults instead.
+.usx-process-list {
+  .usa-process-list__heading {
+    @if $usx-process-list-heading-text {
+      color: $usx-process-list-heading-text;
+    }
+  }
+
+  .usa-process-list__item {
+    @if $usx-process-list-border {
+      border-left-color: $usx-process-list-border;
+    }
+
+    &::before {
+      @if $usx-process-list-counter-text {
+        color: $usx-process-list-counter-text;
+      }
+
+      @if $usx-process-list-counter-border {
+        border-color: $usx-process-list-counter-border;
+      }
+
+      @if $usx-process-list-counter-ring {
+        background-color: $usx-process-list-counter-ring;
+        box-shadow: 0 0 0 4px $usx-process-list-counter-ring;
+      }
+    }
+  }
+}

package/src/components/_prose.scss

@@ -0,0 +1 @@
+// See typography and link styles for USX prose content.

package/src/components/_radio-buttons.scss

@@ -0,0 +1,66 @@
+@use 'pkg:@solexllc/usx-theme/variables' as *;
+
+/* stylelint-disable selector-class-pattern -- Public USX classes use BEM naming. */
+.usa-radio__label {
+  @if $usx-text-ink {
+    color: $usx-text-ink;
+  }
+}
+
+.usa-radio__input--tile + .usa-radio__label {
+  @if $usx-surface-1 {
+    background-color: $usx-surface-1;
+  }
+}
+
+.usa-radio.usx-radio {
+  &.usx-radio--small {
+    .usa-radio__input + .usa-radio__label::before {
+      height: 1.125rem;
+      width: 1.125rem;
+    }
+  }
+
+  @if $usx-checkable-tile-radius {
+    .usa-radio__input--tile + .usa-radio__label {
+      border-radius: $usx-checkable-tile-radius;
+    }
+  }
+
+  .usa-radio__input--tile + .usa-radio__label {
+    @if $usx-checkable-tile-border {
+      border-color: $usx-checkable-tile-border;
+    }
+
+    @if $usx-checkable-tile-border-width {
+      border-width: $usx-checkable-tile-border-width;
+    }
+  }
+
+  .usa-radio__label::before {
+    @if $usx-checkable-bg {
+      background-color: $usx-checkable-bg;
+    }
+
+    @if $usx-checkable-border {
+      box-shadow: 0 0 0 2px $usx-checkable-border;
+    }
+  }
+
+  .usa-radio__input:checked:not(:disabled) {
+    & + .usa-radio__label {
+      @if $usx-color-primary {
+        &::before {
+          background-color: $usx-color-primary;
+          box-shadow: 0 0 0 2px $usx-color-primary, inset 0 0 0 2px #fff;
+        }
+      }
+    }
+
+    &.usa-radio__input--tile + .usa-radio__label {
+      @if $usx-color-primary {
+        border-color: $usx-color-primary;
+      }
+    }
+  }
+}

package/src/components/_range-slider.scss

@@ -0,0 +1,117 @@
+@use 'pkg:@solexllc/usx-theme/variables' as *;
+
+/* stylelint-disable selector-class-pattern -- Real USWDS classes, not USX BEM. */
+
+/* ---------------------------------- */
+
+/* Theme Corrections                  */
+
+/* ---------------------------------- */
+
+// The shared text-input placeholder (%block-input-general/%block-input-styles)
+// bakes a white background onto every <input>, including this one — but only
+// the track/thumb pseudo-elements below are meant to be visible. Left alone,
+// that white fill shows through as a solid box around the track on any
+// non-white surface (the input's own padding-box is taller than the track).
+.usa-range {
+  background-color: transparent;
+}
+
+// USWDS bakes the track to a fixed "base-lightest" bg / "base-darker" border
+// regardless of theme.
+//
+// IMPORTANT: each vendor-prefixed pseudo-element below must stay in its own
+// rule (never comma-combined, unlike normal classes elsewhere in this file).
+// A selector list containing a pseudo-element a browser doesn't recognize
+// (e.g. Chrome sees ::-moz-range-track) invalidates the ENTIRE rule, so
+// combining them silently drops the whole override. USWDS's own source
+// (_usa-range.scss) writes them the same way for this exact reason.
+@if $usx-range-slider-track-bg {
+  .usa-range::-webkit-slider-runnable-track {
+    background-color: $usx-range-slider-track-bg;
+  }
+
+  .usa-range::-moz-range-track {
+    background-color: $usx-range-slider-track-bg;
+  }
+
+  .usa-range::-ms-track {
+    background-color: $usx-range-slider-track-bg;
+  }
+}
+
+@if $usx-range-slider-track-border {
+  .usa-range::-webkit-slider-runnable-track {
+    border-color: $usx-range-slider-track-border;
+  }
+
+  .usa-range::-moz-range-track {
+    border-color: $usx-range-slider-track-border;
+  }
+
+  .usa-range::-ms-track {
+    border-color: $usx-range-slider-track-border;
+  }
+}
+
+@if $usx-range-slider-border-width {
+  .usa-range::-webkit-slider-runnable-track {
+    border-width: $usx-range-slider-border-width;
+  }
+
+  .usa-range::-moz-range-track {
+    border-width: $usx-range-slider-border-width;
+  }
+
+  .usa-range::-ms-track {
+    border-width: $usx-range-slider-border-width;
+  }
+}
+
+// USWDS bakes the thumb to the same fixed "base-lightest" bg / "base-darker"
+// outline (drawn as a box-shadow so the thumb stays circular) regardless of
+// theme.
+@if $usx-range-slider-thumb-bg {
+  .usa-range::-webkit-slider-thumb {
+    background-color: $usx-range-slider-thumb-bg;
+  }
+
+  .usa-range::-moz-range-thumb {
+    background-color: $usx-range-slider-thumb-bg;
+  }
+
+  .usa-range::-ms-thumb {
+    background-color: $usx-range-slider-thumb-bg;
+  }
+}
+
+@if $usx-range-slider-thumb-border and $usx-range-slider-border-width {
+  .usa-range::-webkit-slider-thumb {
+    box-shadow: 0 0 0 $usx-range-slider-border-width $usx-range-slider-thumb-border;
+  }
+
+  .usa-range::-moz-range-thumb {
+    box-shadow: 0 0 0 $usx-range-slider-border-width $usx-range-slider-thumb-border;
+  }
+
+  .usa-range::-ms-thumb {
+    box-shadow: 0 0 0 $usx-range-slider-border-width $usx-range-slider-thumb-border;
+  }
+}
+
+// USWDS's own focus mixin bakes the thumb's focus ring to a compile-time
+// Sass setting ($theme-focus-color), not a runtime CSS var — reuse the same
+// focus token the rest of the library themes with instead.
+@if $usx-range-slider-focus and $usx-range-slider-border-width {
+  .usa-range:focus::-webkit-slider-thumb {
+    box-shadow: 0 0 0 $usx-range-slider-border-width $usx-range-slider-focus;
+  }
+
+  .usa-range:focus::-moz-range-thumb {
+    box-shadow: 0 0 0 $usx-range-slider-border-width $usx-range-slider-focus;
+  }
+
+  .usa-range:focus::-ms-thumb {
+    box-shadow: 0 0 0 $usx-range-slider-border-width $usx-range-slider-focus;
+  }
+}