@solexllc/usx 0.1.0

package/src/components/_hero.scss

@@ -0,0 +1,149 @@
+@use 'pkg:@solexllc/usx-theme/variables' as *;
+
+// Hero is a USX-only (custom) component with no USWDS baseline, so its
+// default look is baked in here. Each declaration is overridden when the
+// corresponding token is set (via theme hooks or `with (...)`).
+
+/* stylelint-disable selector-class-pattern -- Public USX classes use BEM naming. */
+.usx-hero {
+  position: relative;
+  display: flex;
+  align-items: center;
+  min-height: 30rem;
+  background-color: #010610;
+  background-size: cover;
+  background-position: center;
+  background-repeat: no-repeat;
+  color: #fff;
+
+  @if $usx-hero-min-height {
+    min-height: $usx-hero-min-height;
+  }
+
+  @if $usx-hero-bg {
+    background-color: $usx-hero-bg;
+  }
+
+  @if $usx-hero-text {
+    color: $usx-hero-text;
+  }
+
+  &--has-overlay::before {
+    content: '';
+    position: absolute;
+    inset: 0;
+    background-color: rgb(0 0 0 / 55%);
+    pointer-events: none;
+
+    @if $usx-hero-overlay-bg {
+      background-color: $usx-hero-overlay-bg;
+    }
+  }
+
+  &__inner {
+    position: relative;
+    z-index: 1;
+    width: 100%;
+    max-width: $max-layout-width;
+    margin-inline: auto;
+    padding-block: 4rem;
+    padding-inline: 1.5rem;
+
+    @if $usx-hero-padding-block {
+      padding-block: $usx-hero-padding-block;
+    }
+
+    @if $usx-hero-padding-inline {
+      padding-inline: $usx-hero-padding-inline;
+    }
+  }
+
+  &__callout {
+    max-width: 40rem;
+    padding: 2rem;
+    background-color: rgb(0 0 0 / 60%);
+
+    // Radius follows the app-wide radius-box group (null/square by default,
+    // like every other radius-box consumer: image, code, summary-box).
+    border-radius: $usx-hero-callout-radius;
+
+    @if $usx-hero-callout-max-width {
+      max-width: $usx-hero-callout-max-width;
+    }
+
+    @if $usx-hero-callout-padding {
+      padding: $usx-hero-callout-padding;
+    }
+
+    @if $usx-hero-callout-bg {
+      background-color: $usx-hero-callout-bg;
+    }
+  }
+
+  &__heading {
+    font-family: $usx-font-family-heading;
+    font-size: $usx-font-size-h1;
+    font-weight: $usx-font-weight-bold;
+    line-height: $usx-line-height-heading;
+    margin-top: 0;
+    margin-bottom: 1rem;
+    color: #fff;
+
+    @if $usx-hero-heading-size {
+      font-size: $usx-hero-heading-size;
+    }
+
+    @if $usx-hero-heading-font-weight {
+      font-weight: $usx-hero-heading-font-weight;
+    }
+
+    @if $usx-spacing-md {
+      margin-bottom: $usx-spacing-md;
+    }
+
+    @if $usx-hero-text {
+      color: $usx-hero-text;
+    }
+
+    &--alt {
+      display: block;
+      font-size: 1.125rem;
+      font-weight: $usx-font-weight-regular;
+      margin-bottom: 0.25rem;
+      color: #66b5ee;
+
+      @if $usx-hero-alt-size {
+        font-size: $usx-hero-alt-size;
+      }
+
+      @if $usx-spacing-xs {
+        margin-bottom: $usx-spacing-xs;
+      }
+
+      @if $usx-hero-alt-text {
+        color: $usx-hero-alt-text;
+      }
+    }
+  }
+
+  &__paragraph {
+    font-size: 1.125rem;
+    line-height: 1.6;
+    margin-top: 0;
+    margin-bottom: 1.5rem;
+    color: #fff;
+
+    @if $usx-hero-paragraph-size {
+      font-size: $usx-hero-paragraph-size;
+    }
+
+    @if $usx-spacing-lg {
+      margin-bottom: $usx-spacing-lg;
+    }
+
+    @if $usx-hero-text {
+      color: $usx-hero-text;
+    }
+  }
+}
+/* stylelint-enable selector-class-pattern */

package/src/components/_icon-list.scss

@@ -0,0 +1,23 @@
+/* stylelint-disable selector-class-pattern -- Public USX classes use BEM naming. */
+
+@use 'pkg:@solexllc/usx-theme/variables' as *;
+
+.usx-icon-list {
+  .usa-icon-list__item {
+    align-items: flex-start;
+  }
+
+  .usa-icon-list__icon {
+    flex: 0 0 auto;
+
+    // Real USWDS only colors the icon via opt-in BEM modifier classes
+    // (.usa-icon-list--primary, etc.) — default it to our theme instead.
+    @if $usx-icon-list-icon-text {
+      color: $usx-icon-list-icon-text;
+    }
+  }
+
+  .usa-icon-list__content {
+    flex: 1 1 auto;
+  }
+}

package/src/components/_icon.scss

@@ -0,0 +1,18 @@
+/* stylelint-disable selector-class-pattern -- Public USX classes use BEM naming. */
+.usx-icon--size-1 {
+  width: .75em;
+  height: .75em;
+}
+
+.usx-icon--mirror {
+  transform: scaleX(-1);
+}
+
+.usx-icon--flip {
+  transform: scaleY(-1);
+
+  &.usx-icon--mirror {
+    transform: rotate(180deg);
+  }
+}
+/* stylelint-enable selector-class-pattern */

package/src/components/_image.scss

@@ -0,0 +1,80 @@
+@use 'pkg:@solexllc/usx-theme/variables' as *;
+
+/* stylelint-disable selector-class-pattern -- Public USX classes use BEM naming. */
+.usx-image {
+  display: inline-block;
+  margin: 0;
+  padding: 0;
+  align-items: center;
+
+  &--rounded img {
+    border-radius: $usx-image-radius;
+  }
+
+  &--circular img {
+    border-radius: 50%;
+    aspect-ratio: 1;
+    object-fit: cover;
+  }
+
+  .usx-image--caption {
+    margin-top: .5rem;
+    font-style: italic;
+    contain: inline-size;
+  }
+}
+/* stylelint-enable selector-class-pattern */
+
+.usx-object-fit-cover,
+.usx-object-fit-contain,
+.usx-object-fit-fill {
+  width: 100%;
+  height: 100%;
+  max-width: 100%;
+  max-height: 100%;
+}
+
+.usx-object-fit-none,
+.usx-object-fit-scale-down {
+  width: auto;
+  height: auto;
+  max-width: 100%;
+  max-height: 100%;
+}
+
+.usx-object-fit-cover :is(img, object, video),
+.usx-object-fit-contain :is(img, object, video),
+.usx-object-fit-fill :is(img, object, video) {
+  width: 100%;
+  height: 100%;
+  max-width: 100%;
+  max-height: 100%;
+}
+
+.usx-object-fit-none :is(img, object, video),
+.usx-object-fit-scale-down :is(img, object, video) {
+  width: auto;
+  height: auto;
+  max-width: 100%;
+  max-height: 100%;
+}
+
+.usx-object-fit-cover :is(img, object, video) {
+  object-fit: cover;
+}
+
+.usx-object-fit-contain :is(img, object, video) {
+  object-fit: contain;
+}
+
+.usx-object-fit-fill :is(img, object, video) {
+  object-fit: fill;
+}
+
+.usx-object-fit-none :is(img, object, video) {
+  object-fit: none;
+}
+
+.usx-object-fit-scale-down :is(img, object, video) {
+  object-fit: scale-down;
+}

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

@@ -0,0 +1,74 @@
+@use 'pkg:@solexllc/usx-theme/variables' as *;
+
+/* stylelint-disable selector-class-pattern -- Real USWDS classes, not USX BEM. */
+
+// Real USWDS resolves the in-page-nav card's background/text/link/current/
+// bar colors from compile-time $theme-in-page-nav-* Sass settings (all
+// "default", i.e. computed against the page background at build time), so
+// none of them follow a runtime theme override on their own. Chain each
+// role below to the shared $usx-in-page-nav-* tokens (see _variables.scss)
+// instead of leaving the compiled defaults frozen.
+
+.usa-in-page-nav-container {
+  main,
+  .usx-in-page-nav__content {
+    max-width: 100%;
+  }
+}
+
+.usa-in-page-nav__nav {
+  @if $usx-in-page-nav-bg {
+    background-color: $usx-in-page-nav-bg;
+  }
+
+  @if $usx-in-page-nav-text {
+    color: $usx-in-page-nav-text;
+  }
+}
+
+.usa-in-page-nav__heading {
+  @if $usx-in-page-nav-text {
+    color: $usx-in-page-nav-text;
+  }
+}
+
+.usa-in-page-nav__list {
+  @if $usx-in-page-nav-border {
+    border-left-color: $usx-in-page-nav-border;
+  }
+
+  a:not(.usa-button) {
+    &:not(.usa-current) {
+      @if $usx-in-page-nav-link-text {
+        color: $usx-in-page-nav-link-text;
+      }
+
+      &:hover {
+        @if $usx-in-page-nav-link-text-hover {
+          color: $usx-in-page-nav-link-text-hover;
+        }
+      }
+
+      // Matches real USWDS's own compiled selector
+      // (a:not(.usa-button):not(.usa-current):visited) class-for-class so
+      // this wins the cascade instead of losing to it on specificity.
+      &:visited {
+        @if $usx-in-page-nav-link-text {
+          color: $usx-in-page-nav-link-text;
+        }
+      }
+    }
+
+    &.usa-current {
+      @if $usx-in-page-nav-current-text {
+        color: $usx-in-page-nav-current-text;
+      }
+
+      &::after {
+        @if $usx-in-page-nav-bar {
+          background-color: $usx-in-page-nav-bar;
+        }
+      }
+    }
+  }
+}

package/src/components/_indicator.scss

@@ -0,0 +1,73 @@
+/* stylelint-disable selector-class-pattern -- Public USX classes use BEM naming. */
+.usx-indicator {
+  position: relative;
+  display: inline-flex;
+  width: max-content;
+
+  :where(.usx-indicator-item) {
+    z-index: 1;
+    position: absolute;
+    white-space: nowrap;
+    inset: var(--indicator-t, 0) var(--indicator-e, 0) var(--indicator-b, 0) var(--indicator-s, auto);
+    translate: var(--indicator-x, 50%) var(--indicator-y, -50%);
+  }
+
+  .usx-indicator-item {
+    position: absolute !important;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+}
+
+.usx-indicator-start {
+  --indicator-s: 0;
+  --indicator-x: -50%;
+  --indicator-e: auto;
+
+  [dir='rtl'] & {
+    --indicator-s: auto;
+    --indicator-e: 0;
+    --indicator-x: 50%;
+  }
+}
+
+.usx-indicator-center {
+  --indicator-s: 50%;
+  --indicator-e: 50%;
+  --indicator-x: -50%;
+
+  [dir='rtl'] & {
+    --indicator-x: 50%;
+  }
+}
+
+.usx-indicator-end {
+  --indicator-s: auto;
+  --indicator-e: 0;
+  --indicator-x: 50%;
+
+  [dir='rtl'] & {
+    --indicator-s: 0;
+    --indicator-e: auto;
+    --indicator-x: -50%;
+  }
+}
+
+.usx-indicator-bottom {
+  --indicator-t: auto;
+  --indicator-b: 0;
+  --indicator-y: 50%;
+}
+
+.usx-indicator-middle {
+  --indicator-t: 50%;
+  --indicator-b: 50%;
+  --indicator-y: -50%;
+}
+
+.usx-indicator-top {
+  --indicator-t: 0;
+  --indicator-b: auto;
+  --indicator-y: -50%;
+}

package/src/components/_input.scss

@@ -0,0 +1,135 @@
+@use 'pkg:@solexllc/usx-theme/variables' as *;
+
+/* stylelint-disable selector-class-pattern -- Public USX classes use BEM naming. */
+/* stylelint-disable no-duplicate-selectors -- Base/state/error/success/focus split into intentional blocks. */
+/* stylelint-disable no-descending-specificity -- Focus enhancements intentionally follow state rules. */
+
+/* ---------------------------------- */
+
+/* Base Enhancements                  */
+
+/* ---------------------------------- */
+
+.usa-input.usx-input, .usa-select.usx-select, .usa-combo-box__input {
+  @if $usx-input-radius {
+    border-radius: $usx-input-radius;
+  }
+
+  @if $usx-input-padding {
+    padding: $usx-input-padding;
+  }
+}
+
+/* ---------------------------------- */
+
+/* State Enhancements                 */
+
+/* ---------------------------------- */
+
+.usa-input.usx-input, .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-input.usx-input, .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;
+    }
+  }
+}
+
+.usa-input.usx-input, .usa-select.usx-select {
+  // 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-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-input.usx-input, .usa-select.usx-select, .usa-combo-box__input {
+  &:not([disabled]):focus {
+    @if $usx-input-focus-outline {
+      outline: $usx-input-focus-outline;
+    }
+
+    @if $usx-input-focus-outline-offset {
+      outline-offset: $usx-input-focus-outline-offset;
+    }
+  }
+}
+
+/* ---------------------------------- */
+
+/* Theme Corrections                     */
+
+/* ---------------------------------- */
+
+@if $usx-color-border {
+  .usa-combo-box__input, .usa-input, .usa-input-group, .usa-select, .usa-textarea, .usx-switch {
+    border-color: $usx-color-border;
+  }
+}
+
+@if $usx-border-width-inputs {
+  // .usx-switch is excluded here: it manages its own border-width via
+  // $usx-switch-border-width (chained to this same token by default) so it
+  // can fold the resolved value into its knob/spacing math too, instead of
+  // only the border property.
+  .usa-combo-box__input, .usa-input, .usa-input-group, .usa-select, .usa-textarea {
+    border-width: $usx-border-width-inputs;
+  }
+}

package/src/components/_language-selector.scss

@@ -0,0 +1,26 @@
+/* stylelint-disable selector-class-pattern -- Public USX classes use BEM naming. */
+
+@use 'pkg:@solexllc/usx-theme/variables' as *;
+
+// Real USWDS hardcodes the language menu's dropdown to color("primary-darker")
+// bg / white text (a fixed dark treatment, like a nav dropdown) — chain it to
+// the theme's primary-darker shade instead of a static hex.
+.usx-language-selector {
+  .usa-language__submenu {
+    @if $usx-language-selector-menu-bg {
+      background-color: $usx-language-selector-menu-bg;
+    }
+
+    .usa-language__submenu-item a {
+      @if $usx-language-selector-menu-text {
+        color: $usx-language-selector-menu-text;
+      }
+
+      &:hover {
+        @if $usx-language-selector-menu-text {
+          color: $usx-language-selector-menu-text;
+        }
+      }
+    }
+  }
+}

package/src/components/_layout.scss

@@ -0,0 +1,115 @@
+@use 'pkg:@solexllc/usx-theme/variables' as *;
+
+/* stylelint-disable selector-class-pattern -- Public USX classes use BEM naming. */
+.usx-layout {
+  min-height: 100vh;
+
+  @if $usx-surface-1 {
+    background-color: $usx-surface-1;
+  }
+
+  // ── Single column layout ──────────────────────────────────────────────────
+  // Centers content with max-width and responsive gutters
+  // | gutter | content (max-width 960px) | gutter |
+
+  &__single-column {
+    max-width: $max-layout-width;
+    margin: 0 auto;
+    padding: 0 units(2.5);
+
+    @include at-media('tablet') {
+      padding: 0 units(4);
+    }
+
+    @include at-media('desktop') {
+      padding: 0;
+    }
+  }
+
+  // ── Multi-column grid layout ──────────────────────────────────────────────
+  // Supports left/right sidebars that appear on desktop
+  // | gutter | left sidebar | content | right sidebar | gutter |
+
+  &__grid-container {
+    display: grid;
+    grid-template-rows: auto;
+    grid-template-columns:
+      [page-start] units(2) [left-sidebar-start] 0 [content-start] minmax(0, $max-layout-width) [content-end] 0 [right-sidebar-end] units(2) [page-end];
+
+    @include at-media('tablet') {
+      grid-template-columns:
+        [page-start] units(4) [left-sidebar-start] 0 [content-start] minmax(0, $max-layout-width) [content-end] 0 [right-sidebar-end] units(4) [page-end];
+    }
+
+    @include at-media('desktop') {
+      grid-template-columns:
+        [page-start] 1fr [left-sidebar-start] $max-sidebar-width [content-start] minmax(0, $max-layout-width) [content-end] $max-sidebar-width [right-sidebar-end] 1fr [page-end];
+    }
+  }
+
+  // ── Content areas ─────────────────────────────────────────────────────────
+
+  &__content {
+    grid-column: content-start / span content-end;
+    grid-row: 1;
+
+
+    // Content that leaves space for a left sidebar
+    // | gutter | left sidebar | content (width dynamic) | gutter |
+    &--right {
+      grid-column: content-start / span content-end;
+      grid-row: 1;
+
+      @include at-media('desktop') {
+        grid-column: content-start / span right-sidebar-end;
+        width: $dynamic-content-width;
+        margin: 0 units(4) 0 0;
+      }
+    }
+
+    // Content that leaves space for the right sidebar
+    // | gutter | content (width dynamic) | right sidebar | gutter |
+    &--left {
+      grid-column: content-start / span content-end;
+      grid-row: 1;
+
+      @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;
+      }
+    }
+  }
+
+  // ── Sidebar areas ─────────────────────────────────────────────────────────
+
+  &__sidebar--left {
+    grid-column: left-sidebar-start / span content-start;
+    grid-row: 1;
+  }
+
+  &__sidebar--right {
+    grid-column: content-end / span right-sidebar-end;
+    grid-row: 1;
+  }
+
+  // Hide sidebars on mobile/tablet, show on desktop
+  &__sidebar--right,
+  &__sidebar--left {
+    display: none;
+    padding: 0 units(4);
+
+    @include at-media('desktop') {
+      display: block;
+    }
+  }
+
+  &__sidebar--right.usx-layout__sidebar--expanded {
+    padding-right: 0;
+  }
+
+  &__sidebar--left.usx-layout__sidebar--expanded {
+    padding-left: 0;
+  }
+}