@solexllc/usx 0.1.0

package/src/components/_character-count.scss

@@ -0,0 +1,12 @@
+@use 'pkg:@solexllc/usx-theme/variables' as *;
+
+/* stylelint-disable selector-class-pattern -- Public USX classes use BEM naming. */
+// Character count mostly inherits styles from the components it's composed of
+// (form-group, input/textarea, hint). The one USWDS style it doesn't inherit
+// is the invalid-count status message, so that's the only override here.
+.usx-character-count {
+  .usa-character-count__status.usa-character-count__status--invalid {
+    color: $usx-color-error;
+    font-weight: $usx-font-weight-bold;
+  }
+}

package/src/components/_checkbox.scss

@@ -0,0 +1,68 @@
+@use 'pkg:@solexllc/usx-theme/variables' as *;
+
+/* stylelint-disable selector-class-pattern -- Public USX classes use BEM naming. */
+.usa-checkbox__label {
+  @if $usx-text-ink {
+    color: $usx-text-ink;
+  }
+}
+
+.usa-checkbox__input--tile + .usa-checkbox__label {
+  @if $usx-surface-1 {
+    background-color: $usx-surface-1;
+  }
+}
+
+.usx-checkbox {
+  @if $usx-checkable-tile-radius {
+    .usa-checkbox__input--tile + .usa-checkbox__label {
+      border-radius: $usx-checkable-tile-radius;
+    }
+  }
+
+  .usa-checkbox__input--tile + .usa-checkbox__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-checkbox__label::before {
+    @if $usx-checkable-radius {
+      border-radius: $usx-checkable-radius;
+    }
+
+    @if $usx-checkable-bg {
+      background-color: $usx-checkable-bg;
+    }
+
+    @if $usx-checkable-border {
+      box-shadow: 0 0 0 2px $usx-checkable-border;
+    }
+  }
+
+  .usa-checkbox__input:checked:not(:disabled) {
+    & + .usa-checkbox__label {
+      @if $usx-color-primary {
+        &::before {
+          background-color: $usx-color-primary;
+          box-shadow: 0 0 0 2px $usx-color-primary;
+        }
+      }
+    }
+
+    &.usa-checkbox__input--tile + .usa-checkbox__label {
+      @if $usx-color-primary {
+        border-color: $usx-color-primary;
+      }
+    }
+  }
+}
+
+.usx-checkbox.usx-checkbox--small .usa-checkbox__label::before {
+  height: 1.125rem;
+  width: 1.125rem;
+}

package/src/components/_clickable.scss

@@ -0,0 +1,81 @@
+@use 'pkg:@solexllc/usx-theme/variables' as *;
+
+/* stylelint-disable selector-class-pattern -- Public USX classes use BEM naming. */
+.usx-clickable {
+  text-decoration: none;
+  color: currentcolor;
+  overflow: wrap;
+
+  .usx-clickable__link {
+    position: relative;
+    width: fit-content;
+    height: fit-content;
+    text-wrap: nowrap;
+
+    &::after {
+      content: '';
+      position: absolute;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      height: 1px;
+      background-color: currentcolor;
+      transform: scaleX(0);
+      transform-origin: left center;
+      transition: transform 0.25s ease-in-out;
+      pointer-events: none;
+    }
+  }
+
+  &:hover {
+    .usx-clickable__link::after {
+      transform: scaleX(1);
+    }
+  }
+
+  &:focus {
+    background-color: color-mix(in oklab, #2491ff 20%, transparent);
+
+    @if $usx-clickable-focus {
+      background-color: color-mix(in oklab, $usx-clickable-focus 20%, transparent);
+    }
+
+    .usx-clickable__link {
+      text-decoration: underline;
+      text-decoration-thickness: 1px;
+      text-underline-offset: 2px;
+
+      &::after {
+        transition: none;
+        transform: scaleX(1);
+        height: 2px;
+      }
+    }
+  }
+
+  &:hover, &:focus {
+    .usx-clickable__color-on-hover {
+      color: #005ea2;
+
+      @if $usx-clickable-text-hover {
+        color: $usx-clickable-text-hover;
+      }
+
+      @if $usx-color-primary {
+        color: $usx-color-primary;
+      }
+    }
+
+    .usx-clickable__bg-color-on-hover {
+      background-color: #005ea2;
+
+      @if $usx-clickable-text-hover {
+        background-color: $usx-clickable-text-hover;
+      }
+
+      @if $usx-color-primary {
+        background-color: $usx-color-primary;
+      }
+    }
+  }
+}

package/src/components/_code.scss

@@ -0,0 +1,76 @@
+@use 'pkg:@solexllc/usx-theme/variables' as *;
+
+/* stylelint-disable selector-class-pattern -- Public USX classes use BEM naming. */
+.usx-mockup-code {
+  border-radius: $usx-code-radius;
+  overflow: hidden;
+  padding: 2.5rem 0 0.75rem;
+  position: relative;
+  font-size: $usx-code-font-size;
+  line-height: $usx-line-height-base;
+
+  &:not([class^="bg-"]):not([class*=" bg-"]) {
+    background-color: black;
+  }
+
+  &:not([class^="text-"]):not([class*=" text-"]) {
+    color: white;
+  }
+
+  &::before {
+    position: absolute;
+    top: 1rem;
+    content: '';
+    color: white;
+    margin-bottom: 1rem;
+    display: block;
+    height: .75rem;
+    width: .75rem;
+    border-radius: 100%;
+    opacity: .3;
+    box-shadow: 1.25em 0, 2.75em 0, 4.25em 0;
+  }
+
+  .usx-mockup-code__content {
+    overflow: scroll;
+    padding-bottom: 0.5rem;
+
+    pre {
+      padding: 0;
+      margin: 0;
+      width: 100%;
+
+      &::before {
+        content: '';
+        margin-right: 2ch;
+      }
+
+      &[data-prefix] {
+        &::before {
+          content: attr(data-prefix);
+          display: inline-block;
+          width: 2rem;
+          text-align: right;
+          opacity: .6;
+        }
+      }
+
+      code {
+        padding-right: 1.25rem;
+      }
+    }
+
+  }
+
+  .usx-copy {
+    position: absolute;
+    top: .5rem;
+    right: .5rem;
+    opacity: .6;
+    transition: opacity 0.2s;
+
+    &:hover {
+      opacity: 1;
+    }
+  }
+}

package/src/components/_collection.scss

@@ -0,0 +1,27 @@
+/* stylelint-disable selector-class-pattern -- Public USX classes use BEM naming. */
+
+@use 'pkg:@solexllc/usx-theme/variables' as *;
+
+.usx-collection {
+  .usx-calendar-date {
+    margin-right: 1rem;
+  }
+
+  // Real USWDS never sets a color on meta/description — they just inherit
+  // ambient text, which doesn't reliably flip with a themed surface (the
+  // heading link is already themed separately via .usx-link). Excludes
+  // .usa-tag: tag meta items carry their own opaque bg/text pairing
+  // (self-contained badge, same class applied directly to the <li>) and
+  // must not inherit this muted text color over their own background.
+  .usa-collection__meta-item:not(.usa-tag) {
+    @if $usx-collection-meta-text {
+      color: $usx-collection-meta-text;
+    }
+  }
+
+  .usa-collection__description {
+    @if $usx-collection-description-text {
+      color: $usx-collection-description-text;
+    }
+  }
+}

package/src/components/_combobox.scss

@@ -0,0 +1,59 @@
+@use 'pkg:@solexllc/usx-theme/variables' as *;
+
+/* stylelint-disable selector-class-pattern -- Public USX classes use BEM naming. */
+
+// Real USWDS's compiled CSS only pins a hardcoded ink color on
+// `.usa-combo-box__input` (via the shared %block-input-styles placeholder);
+// the dropdown list/options never get their own `color`, relying on the
+// assumption that inherited/ambient text color is always dark. That holds in
+// real USWDS (no runtime theme switching) but breaks under our dark presets,
+// which flip ambient text to a light color while the list keeps its
+// permanently-white background (same "form controls don't flip surfaces"
+// convention as $usx-input-bg/-text/-border, both always null) — making
+// options illegible. Pin the same ink color the input already gets so list
+// text stays legible under every preset.
+.usa-combo-box__list {
+  color: #1b1b1b;
+}
+
+// Real USWDS's compiled CSS hardcodes the selected-option highlight to a
+// literal `color("primary")`, so it stayed USWDS default blue under every
+// preset even though it's just the ordinary brand primary color (not a fixed
+// system gray) — chain it to the theme instead.
+.usa-combo-box__list-option--selected {
+  @if $usx-combo-box-selected-bg {
+    background-color: $usx-combo-box-selected-bg;
+    border-color: $usx-combo-box-selected-bg;
+  }
+}
+
+.usx-combo-box,
+.usx-time-picker {
+  &.usx-combo-box--error .usa-combo-box__input {
+    border-width: 0.25rem;
+    border-color: #b50909;
+    border-style: solid;
+    padding-top: calc(0.5rem - 0.25rem);
+    padding-bottom: calc(0.5rem - 0.25rem);
+
+    @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;
+    }
+  }
+}

package/src/components/_copy-to-clipboard.scss

@@ -0,0 +1,46 @@
+@use 'pkg:@solexllc/usx-theme/variables' as *;
+
+/* stylelint-disable selector-class-pattern -- Public USX classes use BEM naming. */
+.usx-copy {
+  padding: .5rem;
+  gap: 0;
+  width: auto;
+
+  &.usx-copy--dark {
+    color: white !important;
+  }
+
+  &:hover {
+    background-color: color-mix(in oklab, currentColor 30%, #0000);
+  }
+
+  .usx-copy__check {
+    display: none;
+  }
+
+  &:focus:not(:focus-visible) {
+    .usx-copy__copy {
+      display: none;
+    }
+
+    .usx-copy__check {
+      display: inline-flex;
+    }
+  }
+}
+
+.usx-tooltip {
+  .usx-copy__tooltip--copied {
+    display: none !important;
+  }
+
+  &:has(.usx-copy:focus:not(:focus-visible)) {
+    .usx-copy__tooltip--copy {
+      display: none !important;
+    }
+
+    .usx-copy__tooltip--copied {
+      display: block !important;
+    }
+  }
+}

package/src/components/_date-picker.scss

@@ -0,0 +1,58 @@
+@use 'pkg:@solexllc/usx-theme/variables' as *;
+
+.usx-date-picker {
+    &:has(
+        .usa-date-picker__button:hover,
+        .usa-date-picker__button:active,
+        .usa-date-picker__button:focus,
+        .usa-date-picker__button:focus-visible
+    ) {
+        .usa-date-picker__external-input {
+            border-top-right-radius: 0;
+            border-bottom-right-radius: 0;
+        }
+    }
+
+    &.usa-date-picker--active {
+        .usa-date-picker__external-input {
+            border-top-right-radius: 0;
+            border-bottom-right-radius: 0;
+            border-bottom-left-radius: 0;
+        }
+    }
+
+    // Calendar icon as an inline data URI (copied from USWDS's own
+    // usa-icons/calendar_today.svg). USWDS bakes this in as a fixed-color
+    // background-image at build time, so it can't track a runtime text-color
+    // override. Painting it on a pseudo-element via mask-image + background-color
+    // instead keeps it independent of the button's own background-color, which
+    // is used for the hover/active surface states below.
+    $usx-date-picker-button-icon: 'data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' width=\'24\' height=\'24\' viewBox=\'0 0 24 24\'%3E%3Cpath d=\'M20 3h-1V1h-2v2H7V1H5v2H4c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 18H4V8h16v13z\'/%3E%3C/svg%3E';
+
+    /* stylelint-disable selector-class-pattern -- Real USWDS classes, not USX BEM. */
+    .usa-date-picker__button {
+        @if $usx-date-picker-button-icon-color {
+            position: relative;
+            background-image: none !important;
+
+            &::before {
+                content: '';
+                position: absolute;
+                inset: 0;
+                margin: auto;
+                height: 1.5rem;
+                width: 1.5rem;
+                background-color: $usx-date-picker-button-icon-color;
+                mask: url("#{$usx-date-picker-button-icon}") center / 1.5rem no-repeat;
+                -webkit-mask: url("#{$usx-date-picker-button-icon}") center / 1.5rem no-repeat;
+            }
+        }
+
+        @if $usx-date-picker-button-hover-active-bg {
+            &:not([disabled]):hover,
+            &:not([disabled]):active {
+                background-color: $usx-date-picker-button-hover-active-bg;
+            }
+        }
+    }
+}

package/src/components/_eyebrow.scss

@@ -0,0 +1,10 @@
+@use 'pkg:@solexllc/usx-theme/variables' as *;
+
+.usx-eyebrow {
+  display: block;
+  font-size: $usx-font-size-base;
+  font-style: normal;
+  font-weight: $usx-font-weight-regular;
+  color: $usx-text-subtle;
+  text-transform: uppercase;
+}

package/src/components/_file-input.scss

@@ -0,0 +1,254 @@
+@use 'pkg:@solexllc/usx-theme/variables' as *;
+
+/* stylelint-disable selector-class-pattern -- Real USWDS classes, not USX BEM. */
+
+/* ---------------------------------- */
+
+/* Base Enhancements                  */
+
+/* ---------------------------------- */
+
+.usa-file-input__target {
+  @if $usx-input-radius {
+    border-radius: $usx-input-radius;
+  }
+
+  @if $usx-input-border {
+    border-color: $usx-input-border;
+  }
+}
+
+/* ---------------------------------- */
+
+/* State Enhancements                 */
+
+/* ---------------------------------- */
+
+.usa-form-group--error .usa-file-input__target {
+    @if $usx-input-error-border {
+        border-color: $usx-input-error-border;
+    }
+
+    @if $usx-file-input-border-width {
+        border-width: $usx-file-input-border-width;
+    }
+}
+
+.usa-file-input__target.has-invalid-file {
+  // For some reason, they use accent warm here. Very odd.
+  @if $usx-color-accent-warm {
+    border-color: $usx-color-accent-warm;
+  }
+}
+
+// USWDS bakes this message to a fixed "secondary-dark" red (#b50909)
+// regardless of theme — reuse the same error color as .usa-error-message.
+.has-invalid-file .usa-file-input__accepted-files-message {
+  @if $usx-color-error {
+    color: $usx-color-error;
+  }
+}
+
+/* ---------------------------------- */
+
+/* Theme Corrections                     */
+
+/* ---------------------------------- */
+
+@if $usx-file-input-border {
+  .usa-file-input__target {
+    border-color: $usx-file-input-border;
+  }
+}
+
+@if $usx-file-input-border-width {
+  .usa-file-input__target {
+    border-width: $usx-file-input-border-width;
+  }
+}
+
+// USWDS bakes the dropzone's idle background and instructions text to fixed
+// light-mode colors (#fff / #454545), so a white box otherwise shows through
+// on dark themes regardless of surrounding surface/text tokens.
+@if $usx-surface-2 {
+  .usa-file-input__box {
+    background-color: $usx-surface-2;
+  }
+}
+
+@if $usx-text-ink {
+  .usa-file-input__instructions {
+    color: $usx-text-ink;
+  }
+}
+
+// USWDS bakes the "N files selected" heading and each preview row to a
+// fixed "primary-lighter" background with default body text, regardless of
+// theme — same callout role as the accordion button/banner backgrounds.
+@if $usx-file-input-preview-bg {
+  .usa-file-input__preview-heading,
+  .usa-file-input__preview {
+    background-color: $usx-file-input-preview-bg;
+  }
+}
+
+@if $usx-file-input-preview-text {
+  .usa-file-input__preview-heading,
+  .usa-file-input__preview {
+    color: $usx-file-input-preview-text;
+  }
+}
+
+// USWDS bakes the "choose from folder" text to a fixed link-blue (#005ea2),
+// so it doesn't track a themed link color otherwise — reuse the same
+// usx-link variables/states rather than introducing a separate token.
+.usa-file-input__choose {
+  @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;
+    }
+  }
+
+  &:visited {
+    @if $usx-link-text-visited {
+      color: $usx-link-text-visited;
+    }
+  }
+}
+
+/* ---------------------------------- */
+
+/* Managed-multiple file list         */
+
+/* (VA.gov-style per-file delete rows, see FileInput.jsx) */
+
+/* ---------------------------------- */
+
+.usx-file-input__file-list {
+  list-style: none;
+  margin: 0.5rem 0 1rem;
+  padding: 0;
+  max-width: 30rem;
+
+  .usx-file-input__file-name.usx-link {
+    display: inline-block;
+  }
+}
+
+.usx-file-input__file-item {
+  align-items: center;
+  border-style: solid;
+  display: flex;
+  gap: 0.5rem;
+  justify-content: space-between;
+  margin-bottom: 0.5rem;
+  padding: 0.5rem 1rem;
+
+  @if $usx-input-radius {
+    border-radius: $usx-input-radius;
+  }
+
+  @if $usx-file-input-item-border {
+    border-color: $usx-file-input-item-border;
+  }
+
+  @if $usx-file-input-item-border-width {
+    border-width: $usx-file-input-item-border-width;
+  }
+}
+
+// Info stays on the left and shrinks (long names wrap) so the Delete button
+// on the right is never pushed out of view, even on small screens.
+.usx-file-input__file-info {
+  display: flex;
+  flex: 1 1 auto;
+  flex-direction: column;
+  gap: 0.25rem;
+  min-width: 0;
+  overflow-wrap: anywhere;
+}
+
+.usx-file-input__file-name {
+  // A downloadable file's name renders as a Link (.usx-link), which sets
+  // `width: max-content` so it never stretches to fill a container — but
+  // that also stops it from ever wrapping, so a long name just overflows
+  // this row instead. `fit-content` still shrinks to wrap when needed,
+  // without stretching the link's clickable area for short names the way
+  // `auto` does.
+  width: fit-content;
+}
+
+.usx-file-input__file-size {
+  @if $usx-color-base {
+    color: $usx-color-base;
+  }
+}
+
+.usx-file-input__delete-button {
+  align-items: center;
+  display: inline-flex;
+  flex-shrink: 0;
+  gap: 0.5rem;
+  margin-right: 0;
+
+  // USWDS's base .usa-button is width:100% below its own tablet breakpoint
+  // (only reset to auto at tablet+) — override so this button always sizes
+  // to its content and never crowds out the file info next to it.
+  width: auto;
+}
+
+.usx-file-input__delete-icon {
+  display: none;
+}
+
+// Below tablet width the Delete button becomes icon-only (label is still
+// present for assistive tech, just visually hidden) so it never crowds out
+// the file name/size on narrow screens.
+@include at-media('mobile') {
+  .usx-file-input__delete-button {
+    padding: 0.5rem;
+  }
+
+  .usx-file-input__delete-icon {
+    display: block;
+  }
+
+  .usx-file-input__delete-label {
+    border: 0;
+    clip: rect(0, 0, 0, 0);
+    height: 1px;
+    margin: -1px;
+    overflow: hidden;
+    padding: 0;
+    position: absolute;
+    white-space: nowrap;
+    width: 1px;
+  }
+}
+
+// The managed-multiple input is reset after every selection so it always
+// looks empty/ready — but USWDS still builds its own preview UI (filename,
+// thumbnail, "N files selected" heading) asynchronously, so it's suppressed
+// here rather than relying on a reliably-timed reset.
+.usx-file-input__add-only {
+  .usa-file-input__preview,
+  .usa-file-input__preview-heading,
+  .usa-file-input__accepted-files-message {
+    display: none !important;
+  }
+
+  .usa-file-input__instructions {
+    display: block !important;
+  }
+}
+