@solexllc/usx 0.1.0

package/src/components/_required.scss

@@ -0,0 +1,7 @@
+@use 'pkg:@solexllc/usx-theme/variables' as *;
+
+/* stylelint-disable selector-class-pattern -- Public USX classes use BEM naming. */
+.usx-required {
+  color: $usx-color-error;
+  text-decoration: none !important;
+}

package/src/components/_search.scss

@@ -0,0 +1,10 @@
+/* stylelint-disable selector-class-pattern -- Public USX classes use BEM naming. */
+.usa-search .usx-input {
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+}
+
+.usa-search .usa-button.usx-button {
+  border-bottom-left-radius: 0;
+  border-top-left-radius: 0;
+}

package/src/components/_section.scss

@@ -0,0 +1,26 @@
+@use 'pkg:@solexllc/usx-theme/variables' as *;
+
+/* stylelint-disable selector-class-pattern -- Public USX classes use BEM naming. */
+.usx-section {
+  margin: 2rem 0;
+
+  @if $usx-section-bg {
+    background-color: $usx-section-bg;
+  }
+
+  @if $usx-section-text {
+    color: $usx-section-text;
+  }
+}
+
+.usx-section__title {
+  margin-top: 0;
+}
+
+.usx-section__content > :first-child {
+  margin-top: 0;
+}
+
+.usx-section__content > :last-child {
+  margin-bottom: 0;
+}

package/src/components/_select.scss

@@ -0,0 +1,112 @@
+@use 'pkg:@solexllc/usx-theme/variables' as *;
+
+/* stylelint-disable selector-class-pattern -- Public USX classes use BEM naming. */
+/* stylelint-disable no-descending-specificity -- Focus enhancements intentionally follow state rules. */
+
+/* ---------------------------------- */
+
+/* Base Enhancements                  */
+
+/* ---------------------------------- */
+
+.usa-select.usx-select {
+  // USWDS sets a fixed height: 2.5rem (border-box). A thick
+  // $usx-border-width-inputs eats into that fixed box until the content
+  // area is shorter than the text's line-height, and unlike <input> (which
+  // overflows its box visibly), <select> clips the value at the box edge —
+  // so let the box grow past 2.5rem instead of clipping.
+  height: auto;
+  min-height: 2.5rem;
+
+  @if $usx-input-radius {
+    border-radius: $usx-input-radius;
+  }
+
+  @if $usx-input-padding {
+    padding: $usx-input-padding;
+  }
+}
+
+/* ---------------------------------- */
+
+/* State Enhancements                 */
+
+/* ---------------------------------- */
+
+.usa-select.usx-select:not(.usa-input--error):not(.usa-input--success) {
+  &:not(:disabled) {
+    @if $usx-input-bg {
+      background-color: $usx-input-bg;
+    }
+
+    @if $usx-input-text {
+      color: $usx-input-text;
+    }
+
+    @if $usx-input-border {
+      border-color: $usx-input-border;
+    }
+  }
+}
+
+.usa-select.usx-select.usa-input--error {
+  @if $usx-input-error-border-width {
+    border-width: $usx-input-error-border-width;
+  }
+
+  @if $usx-input-error-border {
+    border-color: $usx-input-error-border;
+  }
+
+  @if $usx-input-error-border-style {
+    border-style: $usx-input-error-border-style;
+  }
+
+  @if $usx-input-error-padding-top {
+    padding-top: $usx-input-error-padding-top;
+  }
+
+  @if $usx-input-error-padding-bottom {
+    padding-bottom: $usx-input-error-padding-bottom;
+  }
+}
+
+// Error can be toggled dynamically (e.g. character-count) on top of a
+// statically-applied success class, so error must win when both are present.
+.usa-select.usx-select.usa-input--success:not(.usa-input--error) {
+  @if $usx-input-success-border-width {
+    border-width: $usx-input-success-border-width;
+  }
+
+  @if $usx-input-success-border {
+    border-color: $usx-input-success-border;
+  }
+
+  @if $usx-input-success-border-style {
+    border-style: $usx-input-success-border-style;
+  }
+
+  @if $usx-input-success-padding-top {
+    padding-top: $usx-input-success-padding-top;
+  }
+
+  @if $usx-input-success-padding-bottom {
+    padding-bottom: $usx-input-success-padding-bottom;
+  }
+}
+
+/* ---------------------------------- */
+
+/* Focus Enhancements                 */
+
+/* ---------------------------------- */
+
+.usa-select.usx-select:focus-visible {
+  @if $usx-input-focus-outline {
+    outline: $usx-input-focus-outline;
+  }
+
+  @if $usx-input-focus-outline-offset {
+    outline-offset: $usx-input-focus-outline-offset;
+  }
+}

package/src/components/_sidenav.scss

@@ -0,0 +1,74 @@
+@use 'pkg:@solexllc/usx-theme/variables' as *;
+
+/* stylelint-disable selector-class-pattern -- Public USX classes use BEM naming. */
+.usx-layout {
+  .usx-sidenav {
+    margin-top: 2rem;
+  }
+}
+
+.usx-sidenav.usa-sidenav {
+  @if $usx-sidenav-border {
+    border-bottom-color: $usx-sidenav-border;
+  }
+
+  @if $usx-sidenav-border-width {
+    border-bottom-width: $usx-sidenav-border-width;
+  }
+
+  &.usx-sidenav--sticky {
+    position: sticky;
+    top: 2rem;
+  }
+
+  .usa-sidenav__item {
+    @if $usx-sidenav-border {
+      border-top-color: $usx-sidenav-border;
+    }
+
+    @if $usx-sidenav-border-width {
+      border-top-width: $usx-sidenav-border-width;
+    }
+  }
+
+  a {
+    &.usa-current {
+      @if $usx-sidenav-current {
+        color: $usx-sidenav-current;
+      }
+
+      &::after {
+        @if $usx-sidenav-current {
+          background-color: $usx-sidenav-current;
+        }
+      }
+    }
+
+    &:not(.usa-button):not(.usa-current) {
+      @if $usx-sidenav-link-text {
+        color: $usx-sidenav-link-text;
+      }
+
+      &:hover {
+        @if $usx-sidenav-link-text-hover {
+          color: $usx-sidenav-link-text-hover;
+        }
+
+        @if $usx-sidenav-bg-hover {
+          background-color: $usx-sidenav-bg-hover;
+        }
+      }
+    }
+
+    &:hover {
+      @if $usx-sidenav-bg-hover {
+        background-color: $usx-sidenav-bg-hover;
+      }
+    }
+  }
+}
+
+// Adjust sticky positioning when nav is present at the same level as layout
+.usx-nav--sticky ~ .usx-layout .usx-sidenav--sticky {
+  top: 5rem;
+}

package/src/components/_site-alert.scss

@@ -0,0 +1,75 @@
+@use 'pkg:@solexllc/usx-theme/variables' as *;
+@use 'alert' as *;
+
+/* stylelint-disable selector-class-pattern -- Public USX classes use BEM naming. */
+.usa-site-alert.usx-site-alert {
+  display: block;
+  position: relative;
+
+  &.usa-site-alert--info {
+    @if $usx-site-alert-default-bg {
+      background-color: $usx-site-alert-default-bg;
+
+      .usa-alert.usx-alert {
+        background-color: transparent;
+      }
+    }
+
+    @if $usx-site-alert-default-border {
+      .usa-alert.usx-alert {
+        border-color: $usx-site-alert-default-border;
+      }
+    }
+  }
+
+  &.usa-site-alert--emergency {
+    @if $usx-site-alert-emergency-bg {
+      background-color: $usx-site-alert-emergency-bg;
+
+      .usa-alert {
+        border-color: $usx-site-alert-emergency-bg;
+        background-color: transparent;
+      }
+    }
+  }
+
+  &.usx-site-alert--maintenance, &.usx-site-alert--maintenance-warning {
+    background-color: #f0f0f0;
+
+    @if $usx-site-alert-maintenance-bg {
+      background-color: $usx-site-alert-maintenance-bg;
+    }
+
+    .usa-alert {
+      border: none;
+    }
+  }
+
+  &.usx-site-alert--maintenance {
+    border-top: 8px solid #b50909;
+
+    @if $usx-color-error {
+      border-color: $usx-color-error;
+    }
+
+		@if $usx-alert-border-width {
+			border-width: $usx-alert-border-width;
+		}
+  }
+
+  &.usx-site-alert--maintenance-warning {
+    border-top: 8px solid #ffbe2e;
+
+    @if $usx-color-warning {
+      border-color: $usx-color-warning;
+    }
+
+    @if $usx-alert-border-width {
+			border-width: $usx-alert-border-width;
+		}
+  }
+
+  .usa-alert.usx-alert .usa-alert__body {
+    background-color: transparent !important;
+  }
+}

package/src/components/_spinner.scss

@@ -0,0 +1,25 @@
+@keyframes usx-spin {
+  from {
+    transform: rotate(0deg);
+  }
+
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+/* stylelint-disable selector-class-pattern -- Public USX classes use BEM naming. */
+.usx-spinner {
+  animation: usx-spin 800ms infinite linear;
+  will-change: transform;
+
+  @media (forced-colors: active) {
+    forced-color-adjust: auto;
+  }
+}
+
+.usx-spinner--size-1 {
+  height: .75em;
+  width: .75em;
+}
+/* stylelint-enable selector-class-pattern */

package/src/components/_status.scss

@@ -0,0 +1,46 @@
+@use 'pkg:@solexllc/usx-theme/variables' as *;
+
+/* stylelint-disable selector-class-pattern -- Public USX classes use BEM naming. */
+.usx-status {
+  display: inline-block;
+  border-radius: 100%;
+  aspect-ratio: 1 / 1;
+  width: .5rem;
+  height: .5rem;
+  alignment-baseline: middle;
+  align-items: center;
+  margin: 0;
+  padding: 0;
+  border: 0 solid;
+  background-repeat: no-repeat;
+  background-position: 50%;
+  grid-area: 1 / 1;
+  background-color: currentcolor;
+  background-image: radial-gradient(circle at 35% 30%, oklch(100% 0 0deg / 50%), rgb(0 0 0 / 0%));
+  box-shadow: 0 2px 3px -1px color-mix(in oklab, currentColor 100%, #0000);
+
+  &.usx-status--xs {
+    width: .25rem;
+    height: .25rem;
+  }
+
+  &.usx-status--sm {
+    width: .375rem;
+    height: .375rem;
+  }
+
+  &.usx-status--md {
+    width: .5rem;
+    height: .5rem;
+  }
+
+  &.usx-status--lg {
+    width: .75rem;
+    height: .75rem;
+  }
+
+  &.usx-status--xl {
+    width: 1rem;
+    height: 1rem;
+  }
+}

package/src/components/_step-indicator.scss

@@ -0,0 +1,130 @@
+@use 'pkg:@solexllc/usx-theme/variables' as *;
+
+/* stylelint-disable selector-class-pattern -- Public USX classes use BEM naming. */
+.usx-step-indicator {
+  @if $usx-step-indicator-bg {
+    background-color: $usx-step-indicator-bg;
+  }
+
+  .usa-step-indicator__heading {
+    @if $usx-step-indicator-heading-text {
+      color: $usx-step-indicator-heading-text;
+    }
+  }
+
+  .usa-step-indicator__segment--complete {
+    &::before, &::after {
+      @if $usx-step-indicator-segment-complete {
+        background-color: $usx-step-indicator-segment-complete;
+      }
+    }
+
+    .usa-step-indicator__segment-label {
+      @if $usx-step-indicator-segment-complete {
+        color: $usx-step-indicator-segment-complete;
+      }
+    }
+  }
+
+  .usa-step-indicator__segment--current {
+    &::before, &::after {
+      @if $usx-step-indicator-segment-current {
+        background-color: $usx-step-indicator-segment-current;
+      }
+    }
+
+    .usa-step-indicator__segment-label {
+      @if $usx-step-indicator-segment-current {
+        color: $usx-step-indicator-segment-current;
+      }
+    }
+  }
+
+  .usa-step-indicator__current-step {
+    @if $usx-step-indicator-segment-current {
+      background-color: $usx-step-indicator-segment-current;
+    }
+
+    @if $usx-step-indicator-counter-text {
+      color: $usx-step-indicator-counter-text;
+    }
+  }
+
+  .usa-step-indicator__total-steps {
+    @if $usx-step-indicator-segment-current {
+      color: $usx-step-indicator-segment-current;
+    }
+  }
+
+  .usa-step-indicator__segment-label {
+    @if $usx-step-indicator-segment-label-text {
+      color: $usx-step-indicator-segment-label-text;
+    }
+  }
+
+  .usa-step-indicator__segment::after {
+    @if $usx-step-indicator-segment-bar-width {
+      height: $usx-step-indicator-segment-bar-width;
+
+      // Normal height is 0.5rem and top is normally 0
+      // Center by offsetting by half the difference between the normal height and the new height
+      // Note: the bare "0" must be a length (0rem), not a unitless number —
+      // once $usx-step-indicator-segment-bar-width is a var(), Sass can't
+      // fold this at build time, and calc(0 - <length>) is invalid CSS,
+      // which silently falls back to `top: auto` (bar drops to the bottom).
+      top: calc(0rem - ($usx-step-indicator-segment-bar-width - 0.5rem) / 2);
+    }
+  }
+
+  // ── Counters / counters-sm variants ───────────────────────────────────────
+  // The counter circles (`::before`) are separate pseudo-elements from the
+  // segment bar (`::after`) the overrides above already cover, so USWDS's
+  // baked-in white/gray-40/base-dark ring and fill colors need their own
+  // overrides here too. Ring/gap thickness (.25rem) matches USWDS's own
+  // compiled default exactly — only the colors are themed.
+  &.usa-step-indicator--counters, &.usa-step-indicator--counters-sm {
+    .usa-step-indicator__segment::before {
+      @if $usx-step-indicator-bg {
+        background-color: $usx-step-indicator-bg;
+      }
+
+      @if $usx-step-indicator-segment-pending-border and $usx-step-indicator-bg {
+        box-shadow:
+          inset 0 0 0 .25rem $usx-step-indicator-segment-pending-border,
+          0 0 0 .25rem $usx-step-indicator-bg;
+      }
+
+      @if $usx-step-indicator-segment-label-text {
+        color: $usx-step-indicator-segment-label-text;
+      }
+    }
+
+    .usa-step-indicator__segment--complete::before {
+      @if $usx-step-indicator-segment-complete {
+        background-color: $usx-step-indicator-segment-complete;
+      }
+
+      @if $usx-step-indicator-bg {
+        box-shadow: 0 0 0 .25rem $usx-step-indicator-bg;
+      }
+
+      @if $usx-step-indicator-counter-text {
+        color: $usx-step-indicator-counter-text;
+      }
+    }
+
+    .usa-step-indicator__segment--current::before {
+      @if $usx-step-indicator-segment-current {
+        background-color: $usx-step-indicator-segment-current;
+      }
+
+      @if $usx-step-indicator-bg {
+        box-shadow: 0 0 0 .25rem $usx-step-indicator-bg;
+      }
+
+      @if $usx-step-indicator-counter-text {
+        color: $usx-step-indicator-counter-text;
+      }
+    }
+  }
+}

package/src/components/_summary-box.scss

@@ -0,0 +1,42 @@
+@use 'pkg:@solexllc/usx-theme/variables' as *;
+
+/* stylelint-disable selector-class-pattern -- Public USX classes use BEM naming. */
+.usa-summary-box.usx-summary-box {
+  @if $usx-summary-box-border {
+    border: $usx-summary-box-border;
+  }
+
+  @if $usx-summary-box-radius {
+    border-radius: $usx-summary-box-radius;
+  }
+
+  @if $usx-summary-box-padding {
+    padding: $usx-summary-box-padding;
+  }
+
+  @if $usx-summary-box-bg {
+    background-color: $usx-summary-box-bg;
+  }
+
+  @if $usx-summary-box-text {
+    color: $usx-summary-box-text;
+  }
+
+  @if $usx-summary-box-link-text {
+    .usa-summary-box__link:not(:visited):not(:hover) {
+      color: $usx-summary-box-link-text;
+    }
+  }
+
+  @if $usx-summary-box-link-text-hover {
+    .usa-summary-box__link:hover {
+      color: $usx-summary-box-link-text-hover;
+    }
+  }
+
+  @if $usx-summary-box-link-text-visited {
+    .usa-summary-box__link:visited {
+      color: $usx-summary-box-link-text-visited;
+    }
+  }
+}

package/src/components/_swap.scss

@@ -0,0 +1,151 @@
+// Define variable to set time for swap transition
+$usx-swap-transition-time: 0.25s !default;
+
+/* stylelint-disable selector-class-pattern, no-descending-specificity -- Public BEM classes and state overrides are ordered by interaction state. */
+.usx-swap {
+  cursor: pointer;
+  vertical-align: middle;
+  place-content: center;
+  user-select: none;
+  display: inline-grid;
+  position: relative;
+
+  > * {
+    grid-row-start: 1;
+    grid-column-start: 1;
+  }
+
+  // A transition animates using whichever rule newly matches (the
+  // destination state), so each side needs its OWN declaration per
+  // direction: the element becoming hidden holds its size until the end
+  // (step-end) while the element becoming shown snaps to size immediately
+  // (step-start) — swapped compared to the other direction.
+  &.usx-swap--ease,
+  &.usx-swap--rotate,
+  &.usx-swap--flip {
+    // Unchecked (off shown, on hidden): off is *becoming* shown here.
+    .usx-swap-off {
+      transition: opacity $usx-swap-transition-time cubic-bezier(0, 0, .25, 1),
+                  transform $usx-swap-transition-time cubic-bezier(0, 0, .25, 1),
+                  max-height $usx-swap-transition-time step-start,
+                  max-width $usx-swap-transition-time step-start;
+    }
+
+    .usx-swap-on,
+    .usx-swap-indeterminate,
+    input:indeterminate ~ .usx-swap-on {
+      transition: opacity $usx-swap-transition-time cubic-bezier(0, 0, .25, 1),
+                  transform $usx-swap-transition-time cubic-bezier(0, 0, .25, 1),
+                  max-height $usx-swap-transition-time step-end,
+                  max-width $usx-swap-transition-time step-start;
+    }
+
+    // Checked (on shown, off hidden): higher specificity than the rules
+    // above, so these win once the checkbox is checked.
+    input:is(:checked, :indeterminate) ~ .usx-swap-off {
+      transition: opacity $usx-swap-transition-time cubic-bezier(0, 0, .25, 1),
+                  transform $usx-swap-transition-time cubic-bezier(0, 0, .25, 1),
+                  max-height $usx-swap-transition-time step-end,
+                  max-width $usx-swap-transition-time step-start;
+    }
+
+    input:checked ~ .usx-swap-on,
+    input:indeterminate ~ .usx-swap-indeterminate {
+      transition: opacity $usx-swap-transition-time cubic-bezier(0, 0, .25, 1),
+                  transform $usx-swap-transition-time cubic-bezier(0, 0, .25, 1),
+                  max-height $usx-swap-transition-time step-start,
+                  max-width $usx-swap-transition-time step-start;
+    }
+  }
+
+  input {
+    appearance: none;
+    border: none;
+
+    &:focus {
+      outline: none;
+      border: none;
+    }
+  }
+
+  .usx-swap-on,
+  .usx-swap-indeterminate,
+  input:indeterminate ~ .usx-swap-on {
+    opacity: 0;
+    max-height: 0;
+  }
+
+  // Explicit shown-state size (rather than the initial "none") so hiding
+  // transitions between two real values and step-end can hold it until the end.
+  .usx-swap-off {
+    max-height: 100%;
+    max-width: 100%;
+  }
+
+  input:is(:checked, :indeterminate) ~ .usx-swap-off {
+    opacity: 0;
+    max-height: 0;
+    max-width: 0;
+    overflow: hidden;
+  }
+
+  input:checked ~ .usx-swap-on,
+  input:indeterminate ~ .usx-swap-indeterminate {
+    opacity: 1;
+    max-height: 100%;
+    backface-visibility: visible;
+  }
+}
+
+.usx-swap-active {
+  .usx-swap-off {
+    opacity: 0;
+    max-height: 0;
+  }
+
+  .usx-swap-on {
+    opacity: 1;
+  }
+}
+
+.usx-swap--rotate {
+  .usx-swap-on,
+  input:indeterminate ~ .usx-swap-on {
+    transform: rotate(-45deg);
+  }
+
+  input:is(:checked, :indeterminate) ~ .usx-swap-on,
+  &.usx-swap-active .usx-swap-on {
+    transform: rotate(0deg);
+  }
+
+  input:is(:checked, :indeterminate) ~ .usx-swap-off,
+  &.usx-swap-active .usx-swap-off {
+    transform: rotate(45deg);
+  }
+}
+
+.usx-swap--flip {
+  transform-style: preserve-3d;
+  perspective: 20rem;
+
+  .usx-swap-on,
+  .usx-swap-indeterminate,
+  input:indeterminate ~ .usx-swap-on {
+    transform: rotateY(180deg);
+    backface-visibility: hidden;
+  }
+
+  input:is(:checked, :indeterminate) ~ .usx-swap-on,
+  &.usx-swap-active .usx-swap-on {
+    transform: rotateY(0deg);
+  }
+
+  input:is(:checked, :indeterminate) ~ .usx-swap-off,
+  &.usx-swap-active .usx-swap-off {
+    transform: rotateY(-180deg);
+    backface-visibility: hidden;
+    opacity: 1;
+  }
+}
+/* stylelint-enable selector-class-pattern, no-descending-specificity */