@solexllc/usx 0.1.0

package/src/components/_block.scss

@@ -0,0 +1,105 @@
+@use 'pkg:@solexllc/usx-theme/variables' as *;
+
+/* stylelint-disable selector-class-pattern -- Public USX classes use BEM naming. */
+/* stylelint-disable no-descending-specificity -- Callout modifier intentionally follows base quote-icon rules. */
+.usx-block {
+  display: flex;
+  flex-direction: column;
+
+  .usx-block__quote-attribution {
+    margin-top: 0.5rem;
+    margin-bottom: 0.5rem;
+  }
+
+  .usx-block__content {
+    margin: 0;
+    padding-left: 1rem;
+    padding-right: 1rem;
+    border-width: 0 0 0 4px;
+    border-style: solid;
+    display: flex;
+    flex-direction: column;
+
+    @if $usx-block-border-width {
+      border-width: 0 0 0 $usx-block-border-width;
+    }
+  }
+
+  &.usx-block--callout {
+    border-width: 4px 0 0;
+    border-style: solid;
+    background-color: #e2e8f0;
+    padding: 1rem 1.25rem;
+
+    @if $usx-block-callout-bg {
+      background-color: $usx-block-callout-bg;
+    }
+    
+    @if $usx-block-border-width {
+      border-width: $usx-block-border-width 0 0;
+    }
+
+    .usx-block__content {
+      border-left: none;
+      padding: 0;
+    }
+
+    .usx-block__open-quote-icon {
+      margin-top: -0.3125rem;
+    }
+
+    .usx-block__close-quote-icon {
+      margin-top: -0.3125rem;
+    }
+
+    .usx-block__quote-attribution {
+      margin-top: 0.5rem;
+    }
+  }
+
+  .usx-block__open-quote-icon {
+    margin-left: -0.4375rem;
+    transform: rotate(180deg);
+  }
+
+  &.usx-block--dedent {
+    margin-left: -1.25rem;
+    z-index: 1;
+  }
+
+  &.usx-block--indent {
+    &-sm {
+      margin-left: 1.25rem;
+    }
+
+    &-md {
+      margin-left: 2.5rem;
+    }
+
+    &-lg {
+      margin-left: 3.75rem;
+    }
+
+    &-xl {
+      margin-left: 5rem;
+    }
+  }
+
+  &.usx-block--big {
+    .usx-block__content {
+      @if $usx-block-border-width {
+        border-left-width: calc(1.5 * $usx-block-border-width);
+      }
+
+      padding-left: 1.375rem;
+    }
+  }
+
+  &.usx-block--spill-left.usx-block--big {
+    margin-left: -1.375rem;
+  }
+
+  .usx-block__attribution {
+    margin-top: 1rem;
+  }
+}

package/src/components/_branding.scss

@@ -0,0 +1,89 @@
+@use 'pkg:@solexllc/usx-theme/variables' as *;
+
+/* stylelint-disable selector-class-pattern, no-descending-specificity -- Public USX classes use BEM naming; intentional cascade order. */
+
+// Logo-image mode: .usx-image wrapper (<a> or <div>) produced by Image component.
+.usx-logo {
+  margin-left: 0;
+}
+
+@media (width <= 64em) {
+  .usa-navbar .usx-logo {
+    margin-left: 1rem;
+    margin-right: 1rem;
+  }
+}
+
+.usx-logo__image {
+  display: block;
+
+  img {
+    display: block;
+    height: auto;
+    max-height: 1.75rem;
+    width: auto;
+
+    @media (width >= 64em) {
+      max-height: 3rem;
+    }
+  }
+}
+
+// Symbol + title mode: flex row when a symbol is present alongside the title.
+.usa-logo__text:has(.usx-logo__symbol) {
+  display: flex;
+  align-items: center;
+
+  .usx-logo__symbol {
+    display: block;
+    flex-shrink: 0;
+    height: 1.5rem;
+    margin-right: 0.5rem;
+    width: auto;
+  }
+}
+
+.usa-header {
+  .usx-logo__title {
+    @if $usx-header-text {
+      color: $usx-header-text;
+    }
+  }
+}
+
+.usa-footer {
+  .usx-logo__title {
+    @if $usx-footer-text {
+      color: $usx-footer-text;
+    }
+  }
+}
+
+// Theme-responsive artwork: both variants are in the DOM and the active theme
+// picks one. Only applied when an inverse variant was actually supplied, so
+// single-logo branding never disappears under a dark theme.
+.usx-logo__image .usx-logo__variant {
+  display: block;
+}
+
+// :has() detects the inverse variant directly, so no marker class is needed
+// to gate the swap only when branding actually supplied one.
+.usx-logo__image:has(.usx-logo__variant--inverse) {
+  .usx-logo__variant {
+    display: $usx-logo-display;
+  }
+
+  .usx-logo__variant--inverse {
+    display: $usx-logo-inverse-display;
+  }
+}
+
+.usa-logo__text:has(.usx-logo__symbol.usx-logo__variant--inverse) {
+  .usx-logo__symbol {
+    display: $usx-logo-display;
+  }
+
+  .usx-logo__symbol.usx-logo__variant--inverse {
+    display: $usx-logo-inverse-display;
+  }
+}

package/src/components/_breadcrumb.scss

@@ -0,0 +1,35 @@
+/* stylelint-disable selector-class-pattern -- Public USX classes use BEM naming. */
+
+@use 'pkg:@solexllc/usx-theme/variables' as *;
+
+// Real USWDS hardcodes breadcrumb background/text to fixed #fff/#1b1b1b —
+// give it a themeable default instead (nav/wayfinding element).
+.usx-breadcrumb {
+  @if $usx-breadcrumb-bg {
+    background-color: $usx-breadcrumb-bg;
+  }
+
+  @if $usx-breadcrumb-text {
+    color: $usx-breadcrumb-text;
+  }
+
+  .usa-breadcrumb__link {
+    @if $usx-breadcrumb-link-text {
+      color: $usx-breadcrumb-link-text;
+    }
+
+    &:hover {
+      @if $usx-breadcrumb-link-text-hover {
+        color: $usx-breadcrumb-link-text-hover;
+      }
+    }
+  }
+
+  .usa-breadcrumb__list-item {
+    &.usa-current {
+      @if $usx-breadcrumb-current-text {
+        color: $usx-breadcrumb-current-text;
+      }
+    }
+  }
+}

package/src/components/_button-group.scss

@@ -0,0 +1,50 @@
+@use 'pkg:@solexllc/usx-theme/variables' as *;
+
+/* stylelint-disable selector-class-pattern -- Public USX classes use BEM naming. */
+
+@mixin -usx-button-variant($selector, $divider) {
+  .usa-button-group.usx-button-group {
+    &.usa-button-group--segmented {
+      .usa-button-group__item {
+        &:where(:not(:last-child)) #{$selector}::before {
+          @if $divider {
+            border-right: $divider;
+          }
+        }
+
+        &:where(:not(:first-child):not(:last-child)) {
+          .usa-button {
+            border-radius: 0;
+          }
+        }
+      }
+    }
+  }
+}
+
+
+/* ---------------------------------- */
+
+/* Enhance USWDS Variants             */
+
+/* ---------------------------------- */
+
+/* Primary */
+@include -usx-button-variant(".usa-button--primary",
+  $usx-button-group-segmented-divider-primary);
+
+/* Secondary */
+@include -usx-button-variant(".usa-button--secondary",
+  $usx-button-group-segmented-divider-secondary);
+
+/* Accent Cool */
+@include -usx-button-variant(".usa-button--accent-cool",
+  $usx-button-group-segmented-divider-accent-cool);
+
+/* Accent Warm */
+@include -usx-button-variant(".usa-button--accent-warm",
+  $usx-button-group-segmented-divider-accent-warm);
+
+/* Outline */
+@include -usx-button-variant(".usa-button--outline",
+  $usx-button-group-segmented-divider-base);

package/src/components/_button.scss

@@ -0,0 +1,250 @@
+@use 'pkg:@solexllc/usx-theme/variables' as *;
+
+/* stylelint-disable selector-class-pattern -- Public USX classes use BEM naming. */
+
+/* ---------------------------------- */
+
+/* Base Enhancements (SAFE ONLY)      */
+
+/* ---------------------------------- */
+.usa-button.usx-button:not(.usa-button--unstyled) {
+  @if $usx-radius-button {
+    border-radius: $usx-radius-button;
+  }
+
+  &:not(.usa-button--outline) {
+    @if $usx-button-box-shadow {
+      box-shadow: $usx-button-box-shadow;
+    }
+  }
+}
+
+/* ---------------------------------- */
+
+/* Helper Mixin for Inverse Buttons   */
+
+/* ---------------------------------- */
+@mixin usx-button-inverse($hover-mix: 20%, $active-mix: 40%) {
+  $inverse-color: white;
+
+  @if $usx-text-inverse {
+    $inverse-color: $usx-text-inverse;
+  }
+
+  color: $inverse-color;
+
+  &.usa-button--hover,
+  &:hover {
+    color: color-mix(in srgb, $inverse-color, black $hover-mix);
+  }
+
+  &.usa-button--active,
+  &:active {
+    color: color-mix(in srgb, $inverse-color, black $active-mix);
+  }
+}
+
+/* ---------------------------------- */
+
+/* Variant Enhancer Mixin             */
+
+/* ---------------------------------- */
+@mixin usx-button-variant(
+  $selector,
+  $bg,
+  $bg-hover: null,
+  $bg-active: null,
+  $color: null,
+  $color-hover: null,
+  $color-active: null,
+  $box-shadow: null,
+  $is-outline: false
+) {
+  /* Non-disabled buttons only */
+  .usa-button.usx-button#{$selector}:not(:disabled):not([aria-disabled="true"]):not(.usx-button--ghost) {
+    @if $bg {
+      background-color: $bg;
+    }
+
+    @if $color {
+      color: $color;
+    }
+
+    @if $box-shadow {
+      box-shadow: $box-shadow;
+    }
+
+    /* Hover state */
+    &.usa-button--hover,
+    &:hover {
+      @if $bg-hover {
+        background-color: $bg-hover;
+      }
+
+      @if $color-hover {
+        color: $color-hover;
+      }
+    }
+
+    /* Active state */
+    &.usa-button--active,
+    &:active {
+      @if $bg-active {
+        background-color: $bg-active;
+      }
+
+      @if $color-active {
+        color: $color-active;
+      }
+    }
+
+    /* Inverse modifier */
+    &.usa-button--inverse {
+      @include usx-button-inverse;
+    }
+  }
+}
+
+/* ---------------------------------- */
+
+/* Enhance USWDS Variants             */
+
+/* ---------------------------------- */
+
+/* Primary */
+@include usx-button-variant(
+  ".usa-button--primary",
+  $usx-button-primary-bg,
+  $usx-button-primary-bg-hover,
+  $usx-button-primary-bg-active,
+  $usx-button-primary-text,
+  $usx-button-primary-text-hover,
+  $usx-button-primary-text-active,
+  $usx-button-primary-border
+);
+
+/* Secondary */
+@include usx-button-variant(
+  ".usa-button--secondary",
+  $usx-button-secondary-bg,
+  $usx-button-secondary-bg-hover,
+  $usx-button-secondary-bg-active,
+  $usx-button-secondary-text,
+  $usx-button-secondary-text-hover,
+  $usx-button-secondary-text-active,
+  $usx-button-secondary-border
+);
+
+/* Accent Cool */
+@include usx-button-variant(
+  ".usa-button--accent-cool",
+  $usx-button-accent-cool-bg,
+  $usx-button-accent-cool-bg-hover,
+  $usx-button-accent-cool-bg-active,
+  $usx-button-accent-cool-text,
+  $usx-button-accent-cool-text-hover,
+  $usx-button-accent-cool-text-active,
+  $usx-button-accent-cool-border
+);
+
+/* Accent Warm */
+@include usx-button-variant(
+  ".usa-button--accent-warm",
+  $usx-button-accent-warm-bg,
+  $usx-button-accent-warm-bg-hover,
+  $usx-button-accent-warm-bg-active,
+  $usx-button-accent-warm-text,
+  $usx-button-accent-warm-text-hover,
+  $usx-button-accent-warm-text-active,
+  $usx-button-accent-warm-border
+);
+
+/* Outline */
+@include usx-button-variant(
+  ".usa-button--outline",
+  $usx-button-outline-bg,
+  $usx-button-outline-bg-hover,
+  $usx-button-outline-bg-active,
+  $usx-button-outline-text,
+  $usx-button-outline-text-hover,
+  $usx-button-outline-text-active,
+  $usx-button-outline-box-shadow,
+  true
+);
+
+/* Unstyled */
+@include usx-button-variant(
+  ".usa-button--unstyled",
+  null,
+  null,
+  null,
+  $usx-color-primary,
+  $usx-color-primary-hover,
+  $usx-color-primary-active,
+  null
+);
+
+.usa-button.usx-button {
+  .usa-button--outline {
+    box-shadow: 0 0 0 2px currentcolor;
+
+    @if $usx-button-outline-border-width {
+      box-shadow: 0 0 0 $usx-button-outline-border-width currentcolor;
+    }
+  }
+
+  &.usx-button--ghost {
+    background-color: transparent;
+    color: currentcolor;
+
+    &:not([disabled]):not([aria-disabled="true"]) {
+      &.usa-button--primary {
+        @if $usx-color-primary {
+          color: $usx-color-primary;
+        }
+      }
+
+      &.usa-button--secondary {
+        @if $usx-color-secondary {
+          color: $usx-color-secondary;
+        }
+      }
+
+      &.usa-button--accent-cool {
+        @if $usx-color-accent-cool {
+          color: $usx-color-accent-cool;
+        }
+      }
+
+      &.usa-button--accent-warm {
+        @if $usx-color-accent-warm {
+          color: $usx-color-accent-warm;
+        }
+      }
+
+      &.usa-button--base {
+        @if $usx-color-base {
+          color: $usx-color-base;
+        }
+      }
+
+      &.usa-button--hover,
+      &:hover {
+        background-color: color-mix(in srgb, currentcolor 20%, transparent);
+      }
+
+      &.usa-button--active,
+      &:active {
+        background-color: color-mix(in srgb, currentcolor 35%, transparent);
+      }
+
+      &.usa-button--inverse {
+        color: white;
+
+        @if $usx-surface-1 {
+          color: $usx-surface-1;
+        }
+      }
+    }
+  }
+}

package/src/components/_calendar-date.scss

@@ -0,0 +1,50 @@
+@use 'pkg:@solexllc/usx-theme/variables' as *;
+
+/* stylelint-disable selector-class-pattern -- Public USX classes use BEM naming. */
+.usx-calendar-date {
+  // USWDS has margin-right: 1rem, but it's for the purposes of the collection component.
+  // USX sets this margin in usx-collection instead to allow the independent use of calendar-date without the margin.
+  margin: 0;
+
+  // Width only applies when used standalone (not inside a collection, which controls its own layout)
+  &:not(.usa-collection *) {
+    width: 4rem;
+  }
+
+  .usx-calendar-date-month {
+    border-top-left-radius: 2px;
+    border-top-right-radius: 2px;
+    background-color: $usx-color-primary;
+    color: $usx-text-inverse;
+  }
+
+  .usx-calendar-date-day {
+    border-bottom-left-radius: 2px;
+    border-bottom-right-radius: 2px;
+    color: $usx-color-primary;
+
+    @if $usx-color-primary {
+      border: 1px solid $usx-color-primary;
+    }
+  }
+
+  .usx-calendar-date-month, .usx-calendar-date-day {
+    font-size: $usx-calendar-date-font-size;
+    display: block;
+    font-weight: $usx-font-weight-bold;
+    padding: .25rem;
+    text-align: center;
+  }
+}
+
+@media (width >= 40em) {
+  .usx-calendar-date {
+    &:not(.usx-collection *) {
+      width: 5rem;
+    }
+
+    .usx-calendar-date-month, .usx-calendar-date-day {
+      padding: .5rem;
+    }
+  }
+}

package/src/components/_carousel.scss

@@ -0,0 +1,142 @@
+@use 'pkg:@solexllc/usx-theme/variables' as *;
+
+/* stylelint-disable selector-class-pattern -- Public USX classes use BEM naming. */
+
+/* ============================= */
+
+/* Base Carousel                 */
+
+/* ============================= */
+
+.usx-carousel {
+  height: 100%;
+  display: block;
+  position: relative;
+}
+
+/* Viewport (scroll container) */
+.usx-carousel__viewport {
+  height: 100%;
+  overflow-x: auto;
+  scroll-snap-type: x mandatory;
+  scroll-behavior: smooth;
+
+  /* Improve UX */
+  -webkit-overflow-scrolling: touch;
+  scrollbar-width: thin;
+}
+
+/* Track */
+.usx-carousel__track {
+  height: 100%;
+  display: flex;
+  gap: 1rem;
+}
+
+/* Slides */
+.usx-carousel__slide {
+  flex: 0 0 100%;
+  scroll-snap-align: start;
+  overflow: clip;
+  outline: none;
+}
+
+.usx-carousel__slide:focus {
+  outline: .25rem solid #2491ff;
+  outline-offset: -.25rem;
+
+  @if $usx-carousel-focus {
+    outline-color: $usx-carousel-focus;
+  }
+}
+
+/* ============================= */
+
+/* Dots Navigation               */
+
+/* ============================= */
+
+.usx-carousel__dots {
+  display: flex;
+  justify-content: center;
+  gap: 0.5rem;
+  position: absolute;
+  bottom: 10px;
+  width: 100%;
+
+  @if $usx-carousel-dot-gap {
+    gap: $usx-carousel-dot-gap;
+  }
+}
+
+.usx-carousel__dots a {
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+  background: #c0c0c0;
+  display: inline-block;
+  text-decoration: none;
+
+  @if $usx-carousel-dot-bg {
+    background: $usx-carousel-dot-bg;
+  }
+
+  &:hover {
+    background: #a0a0a0;
+
+    @if $usx-carousel-dot-bg-hover {
+      background: $usx-carousel-dot-bg-hover;
+    }
+  }
+
+  &:active {
+    background: #808080;
+
+    @if $usx-carousel-dot-bg-active {
+      background: $usx-carousel-dot-bg-active;
+    }
+  }
+}
+
+
+/* ============================= */
+
+/* Card Specifics                */
+
+/* ============================= */
+
+
+.usa-card__media {
+  .usx-card__carousel {
+    border-top-left-radius: calc(.5rem - 2px);
+    border-top-right-radius: calc(.5rem - 2px);
+    overflow: hidden;
+    background-color: #f8fafc;
+
+    @if $usx-carousel-card-media-bg {
+      background-color: $usx-carousel-card-media-bg;
+    }
+  }
+
+  &.usa-card__media--inset {
+    .usx-card__carousel {
+      border-radius: 0;
+    }
+  }
+}
+
+@media (width >= 40em) {
+  .usa-card--flag .usa-card__media:not(.usa-card__media--inset) {
+    .usx-card__carousel {
+      border-radius: 0;
+      border-top-left-radius: calc(.5rem - 2px);
+      border-bottom-left-radius: calc(.5rem - 2px);
+    }
+
+    .usa-card--media-right .usx-card__carousel {
+      border-radius: 0;
+      border-top-right-radius: calc(.5rem - 2px);
+      border-bottom-right-radius: calc(.5rem - 2px);
+    }
+  }
+}