@solexllc/usx 0.1.0

package/src/components/_theme-picker.scss

@@ -0,0 +1,60 @@
+@use 'pkg:@solexllc/usx-theme/variables' as *;
+
+.usx-theme-picker {
+    display: inline-flex;
+    max-width: 20rem;
+    color: #fff;
+
+    @if $usx-theme-picker-trigger-text {
+        color: $usx-theme-picker-trigger-text;
+    }
+
+    &__panel {
+        display: none;
+        align-items: center;
+        gap: 0;
+    }
+
+    &--open &__panel {
+        display: flex;
+    }
+
+    &--open &__trigger {
+        display: none;
+    }
+
+    .usa-select.usx-select {
+        margin: 0;
+
+        // Place focus outline above the toggle button
+        z-index: 1;
+    }
+
+    &__toggle,
+    &__trigger {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        height: 100%;
+        min-height: 2.5rem;
+        padding: 0.5rem;
+    }
+
+    &__toggle {
+        border-top-left-radius: 0 !important;
+        border-bottom-left-radius: 0 !important;
+    }
+
+    &__trigger {
+        color: #fff;
+
+        @if $usx-theme-picker-trigger-text {
+            color: $usx-theme-picker-trigger-text;
+        }
+    }
+
+    &__icon {
+        width: 1.25rem;
+        height: 1.25rem;
+    }
+}

package/src/components/_time-picker.scss

@@ -0,0 +1 @@
+// See _combobox.scss for shared styles and error handling for the time picker component.

package/src/components/_toggle.scss

@@ -0,0 +1,34 @@
+@use 'pkg:@solexllc/usx-theme/variables' as *;
+
+/* stylelint-disable selector-class-pattern -- Public USX classes use BEM naming. */
+/* stylelint-disable no-descending-specificity -- Intentional cascade order for toggle states. */
+.usx-toggle {
+  /* Radio input + label pattern for HTML-only example */
+  &__input {
+    position: absolute;
+    opacity: 0;
+    width: 0;
+    height: 0;
+    pointer-events: none;
+  }
+
+  &__input:checked + .usa-button.usx-button {
+    .usx-toggle__label {
+      color: $usx-text-inverse;
+    }
+  }
+
+  &__input:checked + .usa-button.usx-button.usa-button--outline {
+    background: $usx-color-primary-active;
+
+    @if $usx-color-primary-active {
+      outline: 2px solid $usx-color-primary-active inset;
+    }
+  }
+
+  &__input:disabled + .usa-button.usx-button,
+  &__item--disabled .usa-button.usx-button {
+    opacity: 0.5;
+    pointer-events: none;
+  }
+}

package/src/components/_tooltip.scss

@@ -0,0 +1,73 @@
+/* stylelint-disable selector-class-pattern -- Public USX classes use BEM naming. */
+
+@use 'pkg:@solexllc/usx-theme/variables' as *;
+
+$usx-triangle-size: 5px;
+
+.usx-tooltip {
+  position: relative;
+  display: inline-block;
+
+  // Override USWDS default of display:none — we control visibility via CSS hover
+  .usa-tooltip__body {
+    display: block;
+    visibility: hidden;
+    opacity: 0;
+    margin: 0;
+
+    // Real USWDS bakes the background/font color as fixed values at build
+    // time (see _variables.scss's Tooltip section) — override them here so
+    // the tooltip follows the theme instead of staying a flat frozen black.
+    @if $usx-tooltip-bg {
+      background-color: $usx-tooltip-bg;
+
+      &::after {
+        border-right-color: $usx-tooltip-bg;
+      }
+    }
+
+    @if $usx-tooltip-text {
+      color: $usx-tooltip-text;
+    }
+
+    // Replace JS-injected inline positioning with CSS transforms
+    &--top {
+      bottom: calc(100% + #{$usx-triangle-size});
+      left: 50%;
+      transform: translateX(-50%);
+      top: auto;
+    }
+
+    &--bottom {
+      top: calc(100% + #{$usx-triangle-size});
+      left: 50%;
+      transform: translateX(-50%);
+      bottom: auto;
+    }
+
+    &--right {
+      left: calc(100% + #{$usx-triangle-size});
+      top: 50%;
+      transform: translateY(-50%);
+    }
+
+    &--left {
+      right: calc(100% + #{$usx-triangle-size});
+      left: auto;
+      top: 50%;
+      transform: translateY(-50%);
+    }
+  }
+
+  &:hover .usa-tooltip__body,
+  &:focus-within .usa-tooltip__body {
+    visibility: visible;
+    opacity: 1;
+  }
+
+  &:has(.usa-button) {
+    .usa-button {
+      margin-right: 0;
+    }
+  }
+}

package/src/components/_typography.scss

@@ -0,0 +1,145 @@
+@use 'pkg:@solexllc/usx-theme/variables' as *;
+
+// Typography is a "component" like any other in this package: consumers
+// assembling a custom entry file can leave this @forward out entirely to
+// skip base/heading typography styling and rely on their own rules instead.
+//
+// Themeable via the `font-family-*`, `font-size-*`, `font-weight-*` and
+// `line-height-*` tokens in @solexllc/usx-theme.
+//
+// Defaults reproduce today's rendered output exactly (16px/400/1.5, matching
+// the implicit browser defaults already in effect) — this is additive
+// theming capability, not a visual change.
+body {
+  font-family: $usx-font-family;
+  font-size: $usx-font-size-base;
+  font-weight: $usx-font-weight-regular;
+  line-height: $usx-line-height-base;
+}
+
+.usa-prose {
+  h1, h2, h3, h4, h5, h6 {
+    font-family: $usx-font-family-heading;
+    font-weight: $usx-font-weight-bold;
+    line-height: $usx-line-height-heading;
+  }
+
+  h1 { font-size: $usx-font-size-h1; }
+  h2 { font-size: $usx-font-size-h2; }
+  h3 { font-size: $usx-font-size-h3; }
+  h4 { font-size: $usx-font-size-h4; }
+  h5 { font-size: $usx-font-size-h5; }
+  h6 { font-size: $usx-font-size-h6; }
+}
+
+// Native form controls (and USWDS's own wrapper classes around them) don't
+// inherit font-family from `body` by default — browsers give them their own
+// UA stylesheet font, and USWDS's compiled CSS explicitly resets them back
+// to its own hardcoded stack at equal specificity. Matching that same set
+// of selectors here (loaded after USWDS's CSS) is what lets these track
+// `font-family` instead of staying stuck on the untheemable default.
+button,
+input,
+optgroup,
+select,
+textarea,
+.usa-button,
+.usa-sidenav,
+.usa-label,
+.usa-checkbox__label,
+.usa-combo-box__input,
+.usa-combo-box__list,
+.usa-fieldset,
+.usa-hint,
+.usa-input,
+.usa-input-group,
+.usa-radio__label,
+.usa-range,
+.usa-range__value,
+.usa-select,
+.usa-textarea,
+.usa-prose,
+.usa-table caption {
+  font-family: $usx-font-family;
+}
+
+// ── Component-specific overrides ──────────────────────────────────────────
+// USWDS's compiled CSS also hardcodes font-family directly on several
+// component selectors below (rather than relying on inheritance from
+// `body`), each at its own specificity. Keeping every one of these
+// overrides centralized here — instead of scattered across each
+// component's own partial — means a custom entry file that omits this
+// `typography` component disables ALL font-family theming in one place,
+// leaving every component at USWDS's own default font stack.
+.usx-header {
+  font-family: $usx-font-family;
+}
+
+.usa-nav.usx-nav {
+  font-family: $usx-font-family;
+
+  .usa-accordion {
+    font-family: $usx-font-family;
+  }
+}
+
+.usx-footer {
+  font-family: $usx-font-family;
+}
+
+.usx-footer__contact .usa-footer__contact-heading {
+  font-family: $usx-font-family-heading;
+}
+
+.usx-alert .usa-alert__body {
+  font-family: $usx-font-family;
+}
+
+.usx-alert .usa-alert__heading {
+  font-family: $usx-font-family-heading;
+}
+
+// USWDS hardcodes font-family on `.usa-site-alert .usa-alert .usa-alert__body`/
+// `__heading` (0-3-0), which beats the plain `.usx-alert .usa-alert__body`/
+// `__heading` rule above (0-2-0) regardless of load order.
+.usa-site-alert.usx-site-alert .usa-alert.usx-alert {
+  .usa-alert__body {
+    font-family: $usx-font-family;
+  }
+
+  .usa-alert__heading {
+    font-family: $usx-font-family-heading;
+  }
+}
+
+.usx-table.usa-table {
+  font-family: $usx-font-family;
+}
+
+.usx-step-indicator {
+  font-family: $usx-font-family;
+
+  .usa-step-indicator__heading {
+    font-family: $usx-font-family-heading;
+  }
+}
+
+.usa-summary-box.usx-summary-box {
+  font-family: $usx-font-family;
+
+  .usa-summary-box__heading {
+    font-family: $usx-font-family-heading;
+  }
+}
+
+.usx-icon-list {
+  font-family: $usx-font-family;
+
+  .usa-icon-list__title {
+    font-family: $usx-font-family;
+  }
+}
+
+.usx-accordion {
+  font-family: $usx-font-family;
+}

package/src/icons/spinner.svg

@@ -0,0 +1,14 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
+  <!-- Track: full circle at low opacity -->
+  <circle cx="12" cy="12" r="10" fill="none" stroke="currentColor" stroke-width="2.5" opacity="0.2" />
+  <!-- Head: 90° arc at full opacity -->
+  <circle
+    cx="12" cy="12" r="10"
+    fill="none"
+    stroke="currentColor"
+    stroke-width="2.5"
+    stroke-dasharray="15.71 47.12"
+    stroke-linecap="round"
+    transform="rotate(-90 12 12)"
+  />
+</svg>

package/src/img/usx-icons.json

@@ -0,0 +1,5 @@
+{
+  "items": [
+    { "name": "spinner", "meta": "loading spin progress busy wait" }
+  ]
+}

package/src/img/usx-sprite.svg

@@ -0,0 +1,24 @@
+<svg xmlns="http://www.w3.org/2000/svg">
+  <!--
+    GENERATED by scripts/build-sprite.mjs from src/icons/*.svg — do not edit.
+    Add a new icon by creating src/icons/<name>.svg (a standalone <svg> with
+    a viewBox), then run `pnpm -F @solexllc/usx build`. Also add a matching
+    { name, meta } entry to usx-icons.json for the Documentation/Icons page's
+    search.
+    Reference icons with: <use href="./img/usx-sprite.svg#icon-name" />
+  -->
+  <symbol id="spinner" viewBox="0 0 24 24">
+    <!-- Track: full circle at low opacity -->
+    <circle cx="12" cy="12" r="10" fill="none" stroke="currentColor" stroke-width="2.5" opacity="0.2" />
+    <!-- Head: 90° arc at full opacity -->
+    <circle
+    cx="12" cy="12" r="10"
+    fill="none"
+    stroke="currentColor"
+    stroke-width="2.5"
+    stroke-dasharray="15.71 47.12"
+    stroke-linecap="round"
+    transform="rotate(-90 12 12)"
+    />
+  </symbol>
+</svg>

package/src/index.scss

@@ -0,0 +1,67 @@
+@forward './utilities';
+@forward './components/typography';
+@forward './components/accordion';
+@forward './components/alert';
+@forward './components/site-alert';
+@forward './components/footer';
+@forward './components/header';
+@forward './components/branding';
+@forward './components/link';
+@forward './components/tag-group';
+@forward './components/tag';
+@forward './components/task-list';
+@forward './components/hero';
+@forward './components/icon';
+@forward './components/spinner';
+@forward './components/swap';
+@forward './components/image';
+@forward './components/eyebrow';
+@forward './components/attribution';
+@forward './components/block';
+@forward './components/clickable';
+@forward './components/section';
+@forward './components/status';
+@forward './components/code';
+@forward './components/layout';
+@forward './components/misc-banner';
+@forward './components/switch';
+@forward './components/copy-to-clipboard';
+@forward './components/carousel';
+@forward './components/collection';
+@forward './components/avatar';
+@forward './components/calendar-date';
+@forward './components/indicator';
+@forward './components/list';
+@forward './components/required';
+@forward './components/page';
+@forward './components/pagination';
+@forward './components/modal';
+@forward './components/summary-box';
+@forward './components/sidenav';
+@forward './components/icon-list';
+@forward './components/step-indicator';
+@forward './components/form-group';
+@forward './components/banner';
+@forward './components/toggle';
+@forward './components/avatar-group';
+@forward './components/table';
+@forward './components/button';
+@forward './components/button-group';
+@forward './components/checkbox';
+@forward './components/radio-buttons';
+@forward './components/input';
+@forward './components/select';
+@forward './components/file-input';
+@forward './components/date-picker';
+@forward './components/theme-picker';
+@forward './components/text-area';
+@forward './components/tooltip';
+@forward './components/combobox';
+@forward './components/search';
+@forward './components/focus';
+@forward './components/range-slider';
+@forward './components/in-page-nav';
+@forward './components/breadcrumb';
+@forward './components/process-list';
+@forward './components/language-selector';
+@forward './components/character-count';

package/src/themed.scss

@@ -0,0 +1,11 @@
+// themed.scss — runtime-themeable build of USX.
+//
+// Loads the generated hooks partial FIRST, which configures the shared
+// variables module with every --usx-* CSS variable hook enabled. The
+// component styles loaded afterwards then compile to
+// var(--usx-*, <static default>) instead of plain static values.
+//
+// Pair the output with @solexllc/usx-theme's theme.css (:root defaults) or
+// set --usx-* custom properties anywhere in the cascade.
+@use 'pkg:@solexllc/usx-theme/hooks';
+@use 'index';