@solexllc/usx 0.1.0

package/src/components/_switch.scss

@@ -0,0 +1,108 @@
+@use 'pkg:@solexllc/usx-theme/variables' as *;
+
+// Theme colors/border are single build-time constants (no per-instance
+// overrides), so they're folded directly into the declarations below
+// instead of round-tripping through custom properties that never change.
+$switch-border: $usx-switch-border-width or 2px;
+$switch-off-color: $usx-switch-border-off or black;
+$switch-track-bg: $usx-switch-track-bg or #e2e8f0;
+
+.usx-switch {
+  --size: calc(var(--size-selector, 0.25rem) * 6);
+
+  // Knob math is based on the space inside the border (not the outer
+  // --size), so the knob and its inset stay proportional as the border
+  // changes instead of overflowing/shrinking unevenly. --size varies per
+  // instance (see .usx-toggle-* below), so these stay real custom properties.
+  --inner-size: calc(var(--size) - (#{$switch-border} * 2));
+  --toggle-p: 2px;
+  --knob-size: calc(var(--inner-size) - (var(--toggle-p) * 2));
+
+  position: relative;
+  display: inline-block;
+  box-sizing: border-box;
+  padding: var(--toggle-p);
+  width: calc((var(--size) * 2) - (#{$switch-border} + var(--toggle-p)) * 2);
+  height: var(--size);
+  background: $switch-track-bg;
+  border-radius: calc(var(--size) / 2);
+  border: $switch-border solid $switch-off-color;
+  cursor: pointer;
+  appearance: none;
+  transition: background-color 0.18s ease, opacity 0.18s ease, border-color 0.18s ease;
+
+  &::before {
+    content: "";
+    position: absolute;
+    top: 50%;
+    left: var(--toggle-p);
+    transform: translateY(-50%);
+    width: var(--knob-size);
+    height: var(--knob-size);
+    border-radius: 50%;
+    background: $switch-off-color;
+    box-shadow: 0 -1px rgb(0 0 0 / 2%) inset, 0 8px 0 -4px rgb(0 0 0 / 2%) inset;
+    transition: left 0.18s ease, transform 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
+  }
+
+  &:focus-visible {
+    outline: 2px solid color-mix(in oklab, currentColor 60%, #fff);
+    outline-offset: 3px;
+  }
+
+  &:checked,
+  &[aria-checked="true"] {
+    /* track stays white; border and knob adopt currentColor */
+    border-color: currentcolor;
+  }
+
+  &:indeterminate::before {
+    /* center the knob */
+    left: 50%;
+    transform: translate(-50%, -50%);
+  }
+
+  &:checked::before,
+  &[aria-checked="true"]::before {
+    left: calc(100% - var(--knob-size) - var(--toggle-p));
+    background: currentcolor;
+  }
+
+  &:disabled {
+    opacity: 0.45;
+    cursor: not-allowed;
+
+    &:checked {
+      color: #9c9c9c;
+    }
+  }
+}
+
+.usx-toggle-xs {
+  --size: calc(1rem + (2 * #{$switch-border}) - 4px);
+}
+
+.usx-toggle-sm {
+  --size: calc(1.25rem + (2 * #{$switch-border}) - 4px);
+}
+
+.usx-toggle-md {
+  --size: calc(1.5rem + (2 * #{$switch-border}) - 4px);
+}
+
+.usx-toggle-lg {
+  --size: calc(1.75rem + (2 * #{$switch-border}) - 4px);
+}
+
+.usx-toggle-xl {
+  --size: calc(2rem + (2 * #{$switch-border}) - 4px);
+}
+
+.usx-switch__label {
+  display: flex;
+  margin: 0;
+  align-items: center;
+  gap: .5rem;
+  width: fit-content;
+  cursor: pointer;
+}

package/src/components/_table.scss

@@ -0,0 +1,330 @@
+@use 'pkg:@solexllc/usx-theme/variables' as *;
+
+// ─── USX Table ────────────────────────────────────────────────────────────────
+// Extends USWDS `usa-table` with USX-specific behaviour and enhancements.
+// USWDS classes (usa-table, usa-table--striped, etc.) still apply their own
+// styles; these rules layer custom USX overrides and additions on top.
+
+/* stylelint-disable selector-class-pattern -- Public USX classes use BEM naming. */
+.usx-table-container--scrollable {
+  overflow: auto;
+  -webkit-overflow-scrolling: touch;
+  position: relative;
+}
+
+.usa-table {
+  color: $usx-text-ink;
+
+  td,
+  th {
+    border-color: $usx-table-border;
+  }
+
+  tfoot td,
+  th,
+  thead td {
+    background-color: $usx-table-header-bg;
+    color: $usx-text-ink;
+  }
+
+  td {
+    background-color: $usx-table-bg;
+  }
+
+  thead th[aria-sort] {
+    background-color: $usx-table-sorted-column-bg;
+    color: $usx-table-sorted-column-text;
+  }
+}
+
+.usa-table--striped tbody tr:nth-child(odd) td {
+  background-color: $usx-table-stripe-bg;
+  color: $usx-text-ink;
+}
+
+.usx-table {
+  width: 100%;
+  position: relative;
+
+  // ── Base surfaces/borders/text ───────────────────────────────────────────────
+  // Real USWDS bakes its own `.usa-table` base styling as fixed values at ITS
+  // OWN build time: ink (#1b1b1b) text/borders, white body cells,
+  // "base-lighter" header/footer cells, "base-lightest" striped rows. Since
+  // both `usa-table` and `usx-table` land on the same element, compounding
+  // the selector with `&.usa-table` (rather than a plain descendant
+  // selector) guarantees these overrides win on specificity regardless of
+  // stylesheet load order, so the whole table body tracks the active
+  // surface/border/text theme instead of just the hover/selected extras
+  // further down this file.
+  &.usa-table {
+    color: $usx-text-ink;
+
+    td,
+    th {
+      border-color: $usx-table-border;
+    }
+
+    tfoot td,
+    th,
+    thead td {
+      background-color: $usx-table-header-bg;
+      color: $usx-text-ink;
+    }
+
+    td {
+      background-color: $usx-table-bg;
+    }
+
+    thead th[aria-sort] {
+      background-color: $usx-table-sorted-column-bg;
+      color: $usx-table-sorted-column-text;
+    }
+  }
+
+  &.usa-table--striped tbody tr:nth-child(odd) td {
+    background-color: $usx-table-stripe-bg;
+    color: $usx-text-ink;
+  }
+
+  // ── Caption ─────────────────────────────────────────────────────────────────
+  // Real USWDS's `body { color: #1b1b1b; }` is a static, non-themeable value
+  // the caption would otherwise just inherit — pin it to the theme's text
+  // color so it responds to overrides instead of staying stuck black.
+  .usx-table__caption {
+    text-align: left;
+    font-style: italic;
+    margin-bottom: 0.5rem;
+    caption-side: top;
+
+    @if $usx-text-ink {
+      color: $usx-text-ink;
+    }
+  }
+
+  // ── Cells ────────────────────────────────────────────────────────────────────
+  .usx-table__cell {
+    vertical-align: top;
+    word-break: break-word;
+    height: inherit;
+    background-clip: unset;
+
+    &--align-left   { text-align: left; }
+    &--align-center { text-align: center; }
+    &--align-right  { text-align: right; }
+
+    // Selection checkbox / radio column
+    &--selection {
+      width: 2.5rem;
+      text-align: center;
+      white-space: nowrap;
+    }
+
+    // Detail-toggle column
+    &--detail-toggle {
+      width: 3rem;
+      min-width: 2rem;
+      padding: 0;
+    }
+  }
+
+  // ── Head ─────────────────────────────────────────────────────────────────────
+  .usx-table__head {
+    th {
+      white-space: nowrap;
+    }
+  }
+
+  // ── Sort button ──────────────────────────────────────────────────────────────
+  .usx-table__sort-button {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.25rem;
+    background: none;
+    border: none;
+    padding: 0;
+    font: inherit;
+    font-weight: $usx-font-weight-bold;
+    color: inherit;
+    cursor: pointer;
+    white-space: nowrap;
+
+    &:hover {
+      text-decoration: underline;
+    }
+  }
+
+  // ── Rows ─────────────────────────────────────────────────────────────────────
+  .usx-table__row {
+    // Allows for content stretching to fill dynamic row height
+    height: 100%;
+    min-height: 1px;
+
+    &--selected {
+      background-color: $usx-table-selected-bg !important;
+    }
+
+    &--disabled {
+      opacity: 0.5;
+      pointer-events: none;
+    }
+
+    &--clickable {
+      cursor: pointer;
+
+      &:hover {
+        background-color: $usx-table-bg-hover !important;
+
+        .usx-table__cell {
+          background-color: transparent; // Keep cells from layering on top of hover color
+        }
+      }
+    }
+  }
+
+  // ── Checkboxes and radios ─────────────────────────────────────────────────────
+  // These cells hold a single checkbox/radio with no visible label text (the
+  // accessible name comes from aria-label on the input instead). USWDS's
+  // default `.usa-checkbox__label`/`.usa-radio__label` spacing is built for a
+  // label string following the box — margin-top pushes it down to align with
+  // surrounding form fields, and padding-left reserves room for that text.
+  // With no text at all the label's content box collapses to height: 0 (an
+  // empty inline-block has no line box to size itself against), so its
+  // baseline-anchored position lands near the *bottom* of the wrapper instead
+  // of the middle — which is what actually pushes the box out of alignment.
+  // Giving the label an explicit height (matching the box + its 2px margin)
+  // fixes the anchor point; `text-align: center` on the cell handles the rest.
+  .usx-table__checkbox,
+  .usx-table__radio {
+    display: inline-block;
+
+    .usa-checkbox__label,
+    .usa-radio__label {
+      margin-top: 2px;
+      padding-left: calc(1.25rem + 4px);
+      height: 1.25rem;
+    }
+  }
+
+  // ── Group rows ────────────────────────────────────────────────────────────────
+  .usx-table__group-row {
+    .usx-table__group-cell {
+      padding: 0;
+    }
+  }
+
+  .usx-table__group-toggle {
+    padding-top: 0.5rem;
+    padding-bottom: 0.5rem;
+    background-color: $usx-table-grouped-row-bg;
+    color: $usx-table-grouped-row-text;
+
+    &:focus {
+      outline-offset: -0.25rem;
+    }
+  }
+
+  // ── Expandable row details ────────────────────────────────────────────────────
+  .usx-table__detail-disclosure {
+    display: block;
+    height: 100%;
+
+    summary::-webkit-details-marker {
+      display: none;
+    }
+
+    summary::marker {
+      content: '';
+    }
+  }
+
+  .usx-table__detail-toggle {
+    padding: 0;
+    cursor: pointer;
+    color: inherit;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+    list-style: none;
+
+    &:focus {
+      outline-offset: -0.125rem;
+    }
+  }
+
+  .usx-table__detail-cell {
+    padding: 1rem;
+  }
+
+  // ── Footer ────────────────────────────────────────────────────────────────────
+  .usx-table__foot {
+    font-weight: $usx-font-weight-bold;
+
+    @if $usx-table-border {
+      border-top: 2px solid $usx-table-border;
+    }
+  }
+
+  // ── Placeholder ───────────────────────────────────────────────────────────────
+  .usx-table__placeholder-cell {
+    text-align: center;
+    padding: 2rem 1rem;
+    font-style: italic;
+
+    @if $usx-table-placeholder-text {
+      color: $usx-table-placeholder-text;
+    }
+  }
+
+  // ── Loading row (spinner while fetching next batch) ───────────────────────────
+  .usx-table__loading-cell {
+    text-align: center;
+    padding: 1rem;
+    border: none;
+  }
+
+  // ── Row detail toggle button (Django) ───────────────────────────────────────
+  .usx-table__detail-toggle .usx-table__detail-icon {
+    transition: transform 120ms ease-in-out;
+  }
+
+  .usx-table__detail-disclosure[open] .usx-table__detail-icon {
+    transform: rotate(180deg);
+  }
+
+  // No-JS row details: reveal the adjacent detail row when disclosure is open.
+  .usx-table__detail-row {
+    display: none;
+  }
+
+  .usx-table__row:has(.usx-table__detail-disclosure[open]) + .usx-table__detail-row {
+    display: table-row;
+  }
+
+  // ── Sentinel (IntersectionObserver anchor for onMore) ─────────────────────────
+  .usx-table__sentinel {
+    td {
+      padding: 0;
+      height: 1px;
+      border: none;
+    }
+  }
+
+  // ── Sticky header + sticky first column intersection cell ─────────────────────
+  &.usx-table--sticky-first-col {
+    th:first-child,
+    td:first-child {
+      position: sticky;
+      left: 0;
+      z-index: 1;
+
+      @if $usx-table-border {
+        box-shadow: 1px 0 0 0 $usx-table-border;
+      }
+    }
+
+    thead th:first-child {
+      z-index: 3;
+    }
+  }
+}

package/src/components/_tag-group.scss

@@ -0,0 +1,9 @@
+.usx-tag-group {
+  display: inline-flex;
+  flex-wrap: wrap;
+  gap: .25rem;
+
+  .usa-tag.usx-tag {
+    margin: 0;
+  }
+}

package/src/components/_tag.scss

@@ -0,0 +1,47 @@
+@use 'pkg:@solexllc/usx-theme/variables' as *;
+
+/* stylelint-disable selector-class-pattern -- Public USX classes use BEM naming. */
+.usx-tag {
+  letter-spacing: .07rem;
+  display: inline-flex;
+  align-items: center;
+  line-height: $usx-tag-line-height;
+  gap: .25rem;
+  border-radius: $usx-tag-radius;
+
+  &.usx-tag--outline {
+    background-color: transparent;
+    border: 1px solid currentcolor;
+  }
+
+  > .usa-icon {
+    margin: .25rem .25rem .25rem 0;
+  }
+
+  &:has(.usx-tag__dismiss) {
+    padding-right: .25rem;
+  }
+
+  .usx-tag__dismiss {
+    background: none;
+    border: none;
+    color: inherit;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    .usa-icon {
+      margin-right: 0;
+    }
+
+    &:hover {
+      color: $usx-color-primary-lighter;
+    }
+
+    &:focus {
+      outline-offset: .25rem;
+    }
+  }
+}
+/* stylelint-enable selector-class-pattern */

package/src/components/_task-list.scss

@@ -0,0 +1,75 @@
+@use 'pkg:@solexllc/usx-theme/variables' as *;
+
+/* stylelint-disable selector-class-pattern -- Public USX classes use BEM naming. */
+.usx-task-list {
+  display: block;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  border-top: 2px solid #e2e8f0;
+  border-bottom: 2px solid #e2e8f0;
+
+  @if $usx-task-list-border {
+    border-color: $usx-task-list-border;
+  }
+
+  @if $usx-task-list-outer-border-width {
+    border-width: $usx-task-list-outer-border-width;
+  }
+
+  li {
+    &:not(:first-child) {
+      border-top: 1px solid #e2e8f0;
+
+      @if $usx-task-list-border {
+        border-top-color: $usx-task-list-border;
+      }
+
+      @if $usx-task-list-inner-border-width {
+        border-top-width: $usx-task-list-inner-border-width;
+      }
+    }
+  }
+
+  .usx-task-list__item {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    align-items: flex-start;
+    gap: .5rem;
+    padding: .5rem;
+
+    @media (width >= 40em) {
+      flex-direction: row;
+      align-items: center;
+    }
+
+    &:hover {
+      background-color: #e2e8f0;
+
+      @if $usx-task-list-bg-hover {
+        background-color: $usx-task-list-bg-hover;
+      }
+    }
+  }
+
+  .usx-task-list__link {
+    color: #005ea2;
+    font-size: $usx-task-list-link-font-size !important;
+    line-height: 1;
+
+    @if $usx-task-list-link-text {
+      color: $usx-task-list-link-text;
+    }
+  }
+
+  .usa-tag.usx-tag {
+    margin-right: 0;
+    flex-shrink: 0;
+  }
+
+  .usx-task-list__hint {
+    margin-top: .125rem;
+  }
+}
+/* stylelint-enable selector-class-pattern */

package/src/components/_text-area.scss

@@ -0,0 +1,87 @@
+@use 'pkg:@solexllc/usx-theme/variables' as *;
+
+/* stylelint-disable selector-class-pattern -- Public USX classes use BEM naming. */
+
+/* ---------------------------------- */
+
+/* Base Enhancements                  */
+
+/* ---------------------------------- */
+
+.usa-textarea.usx-textarea {
+  @if $usx-textarea-radius {
+    border-radius: $usx-textarea-radius;
+  }
+
+  @if $usx-textarea-padding {
+    padding: $usx-textarea-padding;
+  }
+}
+
+/* ---------------------------------- */
+
+/* State Enhancements                 */
+
+/* ---------------------------------- */
+
+.usa-textarea.usx-textarea:not(.usa-input--error):not(.usa-input--success) {
+  &:not(:disabled) {
+    @if $usx-textarea-bg {
+      background-color: $usx-textarea-bg;
+    }
+
+    @if $usx-textarea-text {
+      color: $usx-textarea-text;
+    }
+
+    @if $usx-textarea-border {
+      border-color: $usx-textarea-border;
+    }
+  }
+}
+
+.usa-textarea.usx-textarea.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-textarea.usx-textarea.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;
+  }
+}