@sproutsocial/racine 31.7.0 → 31.7.3

package/CHANGELOG.md

@@ -1,5 +1,92 @@
 # Change Log
 
+## 31.7.3
+
+### Patch Changes
+
+- Updated dependencies [4f969e6]
+- Updated dependencies [6c37edd]
+- Updated dependencies [a64cdfd]
+  - @sproutsocial/seeds-react-rating@1.0.43
+  - @sproutsocial/seeds-react-skeleton@1.1.23
+  - @sproutsocial/seeds-react-textarea@1.0.24
+  - @sproutsocial/seeds-react-list@0.3.29
+
+## 31.7.2
+
+### Patch Changes
+
+- Updated dependencies [0f4bfe2]
+- Updated dependencies [85f9728]
+- Updated dependencies [fa7d859]
+  - @sproutsocial/seeds-react-narrative-kit@0.6.0
+  - @sproutsocial/seeds-react-theme@4.2.0
+  - @sproutsocial/seeds-react-accordion@0.4.50
+  - @sproutsocial/seeds-react-avatar@1.1.19
+  - @sproutsocial/seeds-react-banner@1.1.24
+  - @sproutsocial/seeds-react-box@1.1.23
+  - @sproutsocial/seeds-react-breadcrumb@1.1.9
+  - @sproutsocial/seeds-react-card@1.1.44
+  - @sproutsocial/seeds-react-chart-legend@1.0.43
+  - @sproutsocial/seeds-react-container@0.3.17
+  - @sproutsocial/seeds-react-content-block@0.5.17
+  - @sproutsocial/seeds-react-data-table@2.6.25
+  - @sproutsocial/seeds-react-datepicker@1.0.41
+  - @sproutsocial/seeds-react-drawer@2.2.10
+  - @sproutsocial/seeds-react-duration@1.0.26
+  - @sproutsocial/seeds-react-empty-state@1.0.25
+  - @sproutsocial/seeds-react-fieldset@1.0.25
+  - @sproutsocial/seeds-react-form-field@1.1.19
+  - @sproutsocial/seeds-react-grid@0.2.7
+  - @sproutsocial/seeds-react-hooks@3.2.4
+  - @sproutsocial/seeds-react-icon@2.4.2
+  - @sproutsocial/seeds-react-image@1.0.23
+  - @sproutsocial/seeds-react-indicator@1.0.42
+  - @sproutsocial/seeds-react-keyboard-key@1.0.25
+  - @sproutsocial/seeds-react-label@1.0.25
+  - @sproutsocial/seeds-react-link@1.1.15
+  - @sproutsocial/seeds-react-list@0.3.28
+  - @sproutsocial/seeds-react-loader@1.0.25
+  - @sproutsocial/seeds-react-loader-button@1.0.48
+  - @sproutsocial/seeds-react-message@1.0.51
+  - @sproutsocial/seeds-react-mixins@4.3.9
+  - @sproutsocial/seeds-react-modal@2.5.25
+  - @sproutsocial/seeds-react-numeral@1.0.50
+  - @sproutsocial/seeds-react-pagination@0.1.23
+  - @sproutsocial/seeds-react-panel@1.0.3
+  - @sproutsocial/seeds-react-partner-logo@1.7.15
+  - @sproutsocial/seeds-react-progress@0.2.10
+  - @sproutsocial/seeds-react-rating@1.0.42
+  - @sproutsocial/seeds-react-segmented-control@1.1.24
+  - @sproutsocial/seeds-react-select@1.1.43
+  - @sproutsocial/seeds-react-skeleton@1.1.22
+  - @sproutsocial/seeds-react-stack@1.0.22
+  - @sproutsocial/seeds-react-table@1.0.44
+  - @sproutsocial/seeds-react-tabs@1.4.13
+  - @sproutsocial/seeds-react-textarea@1.0.23
+  - @sproutsocial/seeds-react-theme-provider@1.1.22
+  - @sproutsocial/seeds-react-toast@1.0.44
+  - @sproutsocial/seeds-react-token@1.5.9
+  - @sproutsocial/seeds-react-token-input@1.4.51
+  - @sproutsocial/seeds-react-tooltip@1.1.29
+  - @sproutsocial/seeds-react-visually-hidden@1.0.24
+  - @sproutsocial/seeds-react-badge@2.0.36
+  - @sproutsocial/seeds-react-checkbox@1.3.44
+  - @sproutsocial/seeds-react-content-header@0.2.22
+  - @sproutsocial/seeds-react-input@1.5.29
+  - @sproutsocial/seeds-react-peek-in@0.3.2
+  - @sproutsocial/seeds-react-popout@2.5.11
+  - @sproutsocial/seeds-react-button@2.2.3
+  - @sproutsocial/seeds-react-switch@1.2.41
+  - @sproutsocial/seeds-react-radio@1.3.25
+
+## 31.7.1
+
+### Patch Changes
+
+- Updated dependencies [82bad75]
+  - @sproutsocial/seeds-react-narrative-kit@0.5.1
+
 ## 31.7.0
 
 ### Minor Changes

package/dist/components.css

@@ -1277,6 +1277,11 @@
 .seeds-metric-highlight {
   box-sizing: border-box;
   display: flex;
+  /* Wrap the fixed-width chart onto its own line when the metric block + chart
+     can't sit side by side (narrow cards / mobile). The metric block claims its
+     min-content width below, so a cramped row drops the chart down rather than
+     overflowing the card and getting clipped by the container. */
+  flex-wrap: wrap;
   align-items: flex-start;
   gap: var(--space-350); /* 12px */
   border-radius: var(--radius-800); /* 12px */
@@ -1303,8 +1308,11 @@
   flex-direction: column;
   align-items: flex-start;
   gap: var(--space-200); /* 4px */
-  flex: 1 0 0;
-  min-width: 0;
+  /* Grow to fill the row, but never shrink below the metric's own content
+     (the nowrap value + trend pill). That min-content floor is what forces the
+     chart to wrap below on narrow cards instead of the row overflowing. */
+  flex: 1 1 auto;
+  min-width: min-content;
 }
 
 .seeds-metric-highlight-vertical .seeds-metric-highlight-metric {
@@ -1336,6 +1344,7 @@
 
 .seeds-metric-highlight-value-row {
   display: flex;
+  flex-wrap: wrap; /* trend pill drops under the value on very narrow cards */
   align-items: center;
   gap: var(--space-300); /* 8px */
 }
@@ -1513,6 +1522,24 @@
   font-family: var(--font-family);
 }
 
+/* Grid and flex items default to `min-width: auto`, so they never shrink below
+   their own min-content. A wide row of widgets (a metric grid, a card grid) then
+   forces its column wider than the padded surface — and since the container clips
+   with overflow:hidden, the excess is cut off at the edge, eating the right-hand
+   padding, and the whole layout can't reflow down to mobile widths. Letting the
+   container and its layout descendants shrink to zero lets the grids collapse to
+   their fair 1fr share and reflow within the padding, so the padding stays
+   consistent at every size.
+
+   Wrapped in :where() so the whole rule carries ZERO specificity — it is only a
+   default. Any component that needs a real floor (e.g. the data callout's 270px
+   donut slot) sets its own min-width via a plain class and always wins, instead
+   of racing this rule on source order. */
+:where(.seeds-narrative-container),
+:where(.seeds-narrative-container *) {
+  min-width: 0;
+}
+
 /* Decorative inner gradient border anchored to the top-left corner.
    A masked ::before so the gradient renders as a uniform-width ring that follows
    border-radius and never tints the content. The radial ellipse fades to
@@ -1925,6 +1952,54 @@
 
 }
 
+/* --- seeds-react-narrative-kit --- */
+/**
+ * Seeds NarrativeSection component classes.
+ * Use these instead of writing out individual Tailwind utility classes.
+ *
+ * Requires @sproutsocial/seeds-react-theme/dist/theme-all.css imported for
+ * CSS variable definitions and dark mode support.
+ *
+ * Usage:
+ *   <section class="seeds-narrative-section">
+ *     <h2 class="seeds-narrative-section-title">What's Happening</h2>
+ *     <div class="seeds-narrative-section-content">...</div>
+ *   </section>
+ */
+
+@layer components {
+
+/* The wrapper stacks the title above the content with a small gap. It carries
+   no surface of its own — it's meant to sit inside a NarrativeContainer. */
+.seeds-narrative-section {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-400); /* 16px — title to content */
+}
+
+/* The content slot stacks the section's widgets with the same 32px rhythm a
+   single-column grid (gap={500}) would give them, so multiple primitives inside
+   one section are spaced exactly as they are between sections. */
+.seeds-narrative-section-content {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-500); /* 32px — between widgets */
+}
+
+/* The section title: bold 14px/24px in the headline color token (#273333,
+   which also tracks dark mode). Matches the summary-label recipe used across
+   the kit. The heading element ships with user-agent margins, so reset them. */
+.seeds-narrative-section-title {
+  margin: 0;
+  font-family: var(--font-family);
+  font-size: 14px;
+  line-height: 24px;
+  font-weight: var(--font-weight-bold);
+  color: var(--color-text-headline); /* #273333 */
+}
+
+}
+
 /* --- seeds-react-narrative-kit --- */
 /**
  * Seeds NarrativeSocialMediaCard component classes.
@@ -1941,19 +2016,19 @@
  *   </div>
  */
 
-/* Import dependent component styles */
-@import "./narrative-attribution.css";
-
 @layer components {
 
 /* Main card container — gray background with rounded corners and padding.
-   Uses Seeds tokens for spacing, colors, and radius to match the design system. */
+   Uses Seeds tokens for spacing, colors, and radius to match the design system.
+   Fills the width it is given (e.g. a grid column) and stretches its content to
+   match, mirroring the horizontal NarrativeOrderedList — so a row of cards grows
+   and resizes together instead of being pinned to a fixed 320px. */
 .seeds-narrative-social-media-card {
   box-sizing: border-box;
   display: flex;
   flex-direction: column;
-  align-items: flex-start;
-  max-width: 320px;
+  align-items: stretch;
+  width: 100%;
   padding: var(--space-450); /* 24px */
   border-radius: var(--radius-500); /* 6px */
   background-color: var(--color-app-bg-base);
@@ -2207,6 +2282,181 @@
 
 }
 
+/* --- seeds-react-profile --- */
+/**
+ * Seeds InlineProfile component classes
+ *
+ * Requires @sproutsocial/seeds-react-theme/dist/theme-all.css imported for
+ * CSS variable definitions and dark mode support.
+ */
+
+@layer components {
+  .seeds-inline-profile {
+    display: inline-flex;
+    flex-direction: row;
+    align-items: center;
+    gap: var(--space-200);
+    max-width: 100%;
+    font-size: var(--font-size-200);
+    line-height: var(--line-height-200);
+    color: var(--color-text-subtext);
+    text-align: inherit;
+  }
+
+  .seeds-inline-profile-avatar {
+    display: inline-flex;
+    flex-shrink: 0;
+  }
+
+  .seeds-inline-profile-content {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--space-200);
+    min-width: 0;
+    flex: 1;
+  }
+
+  .seeds-inline-profile-network {
+    display: inline-flex;
+    align-items: center;
+    flex-shrink: 0;
+  }
+
+  .seeds-inline-profile-text {
+    display: inline-flex;
+    flex-direction: row;
+    align-items: center;
+    gap: var(--space-200);
+    min-width: 0;
+    flex: 1;
+  }
+
+  .seeds-inline-profile-name {
+    display: inline-block;
+    font-size: var(--font-size-200);
+    line-height: var(--line-height-200);
+    font-family: var(--font-family);
+    font-weight: var(--font-weight-semibold);
+    color: var(--color-text-body);
+    max-width: 100%;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .seeds-inline-profile-handle {
+    display: inline-block;
+    font-size: var(--font-size-200);
+    line-height: var(--line-height-200);
+    font-family: var(--font-family);
+    color: var(--color-text-subtext);
+    max-width: 100%;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+}
+
+/* --- seeds-react-profile --- */
+/**
+ * Seeds ProfileCard component classes
+ *
+ * Requires @sproutsocial/seeds-react-theme/dist/theme-all.css imported for
+ * CSS variable definitions and dark mode support.
+ *
+ * The header background color is dynamic (consumer bannerColor or the network
+ * color for the partner) and is supplied via the
+ * --seeds-profile-card-banner-bg custom property set as an inline style on the
+ * header element; the background declaration below consumes it.
+ */
+
+@layer components {
+  .seeds-profile-card {
+    max-width: 300px;
+    border-radius: var(--radius-500);
+    background-color: var(--color-container-bg-base);
+    border: 1px solid var(--color-container-border-base);
+  }
+
+  .seeds-profile-card-header {
+    display: flex;
+    flex-direction: row;
+    position: relative;
+    height: 80px;
+    padding: var(--space-400) var(--space-400) 0 var(--space-400);
+    margin-bottom: 0;
+    color: var(--color-text-inverse);
+    background: var(--seeds-profile-card-banner-bg, transparent);
+    border-radius: var(--radius-500) var(--radius-500) 0 0;
+  }
+
+  .seeds-profile-card-footer {
+    border-top: 1px solid var(--color-container-border-base);
+    border-radius: 0 0 var(--radius-500) var(--radius-500);
+    padding: var(--space-400);
+  }
+
+  .seeds-profile-card-banner-content {
+    display: flex;
+    justify-content: flex-end;
+    width: 100%;
+  }
+
+  .seeds-profile-card-actions {
+    display: flex;
+    justify-content: flex-end;
+    gap: var(--space-100);
+    padding: 0 var(--space-300);
+  }
+
+  .seeds-profile-card-actions:empty {
+    min-height: 44px;
+  }
+
+  .seeds-profile-card-content {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-300);
+    padding: 0 var(--space-400) var(--space-400);
+  }
+
+  .seeds-profile-card-name-section {
+    display: flex;
+    align-items: center;
+    gap: var(--space-200);
+  }
+
+  .seeds-profile-card-info-row {
+    display: flex;
+    align-items: center;
+    gap: var(--space-300);
+  }
+}
+/* --- seeds-react-profile --- */
+/**
+ * Seeds ProfileToken component classes
+ *
+ * Requires @sproutsocial/seeds-react-theme/dist/theme-all.css imported for
+ * CSS variable definitions and dark mode support.
+ */
+
+@layer components {
+  /*
+   * The rendered element carries both .seeds-token (from Token) and
+   * .seeds-profile-token at equal specificity, so the tighter profile padding
+   * would otherwise depend on CSS concatenation order. The compound selector
+   * raises specificity so this override deterministically wins over .seeds-token.
+   */
+  .seeds-token.seeds-profile-token {
+    box-sizing: border-box;
+    display: inline-flex;
+    max-width: 100%;
+    vertical-align: middle;
+    padding: var(--space-100) var(--space-200);
+    margin: var(--space-100) 0;
+  }
+}
+
 /* --- seeds-react-progress --- */
 /**
  * Seeds Progress component classes
@@ -2238,6 +2488,14 @@
   }
 }
 
+/* --- seeds-react-rating --- */
+@layer components {
+  .seeds-rating {
+    display: flex;
+    align-items: center;
+  }
+}
+
 /* --- seeds-react-select --- */
 /**
  * Seeds Select component classes
@@ -2355,6 +2613,130 @@
   }
 }
 
+/* --- seeds-react-skeleton --- */
+/**
+ * Seeds Skeleton component classes
+ * Static reproduction of the styled-components Skeleton visuals.
+ *
+ * Requires @sproutsocial/seeds-react-theme/dist/theme-all.css imported for
+ * CSS variable definitions and dark mode support.
+ *
+ * Usage:
+ *   <div class="seeds-skeleton circular" style="width:48px;height:48px"></div>
+ *   <div class="seeds-skeleton linear" style="width:100%;height:16px"></div>
+ *
+ * The `--skeleton-radius` custom property (set inline from the `borderRadius`
+ * prop) controls corner rounding for the linear surface; the circular variant
+ * masks its own shape.
+ */
+
+@layer components {
+  .seeds-skeleton {
+    position: relative;
+    background: var(--color-container-bg-decorative-neutral);
+    overflow: hidden;
+    border-radius: var(--skeleton-radius, 0);
+  }
+
+  .seeds-skeleton.circular::before {
+    position: absolute;
+    top: -25%;
+    left: -25%;
+    content: "";
+    background-image: conic-gradient(
+      var(--color-container-bg-decorative-neutral) 270deg,
+      var(--color-container-border-decorative-neutral) 300deg
+    );
+    height: 150%;
+    width: 150%;
+    animation: SkeletonRotate 2s infinite linear;
+  }
+
+  .seeds-skeleton.circular::after {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    content: "";
+    height: calc(100% - 8px);
+    width: calc(100% - 8px);
+    background: var(--color-app-bg-base);
+    border-radius: 50%;
+  }
+
+  .seeds-skeleton.linear {
+    position: relative;
+    background-image: linear-gradient(
+      288deg,
+      var(--color-container-bg-decorative-neutral) 32%,
+      var(--color-container-border-decorative-neutral),
+      var(--color-container-bg-decorative-neutral) 68%
+    );
+    background-size: 400%;
+    background-repeat: no-repeat;
+    animation: SkeletonShimmer 2s linear infinite reverse;
+    overflow: hidden;
+  }
+
+  .seeds-skeleton.linear::after {
+    position: absolute;
+    bottom: 0;
+    content: "";
+    height: calc(100% - 4px);
+    width: 100%;
+    background: var(--color-container-bg-decorative-neutral);
+  }
+
+  @media (prefers-reduced-motion) {
+    .seeds-skeleton.linear,
+    .seeds-skeleton.circular::before {
+      animation: none;
+    }
+    .seeds-skeleton::before,
+    .seeds-skeleton::after {
+      display: none;
+    }
+    .seeds-skeleton.linear,
+    .seeds-skeleton.circular {
+      border: 1px solid var(--color-container-border-decorative-neutral);
+      animation: SkeletonPulse 2s linear infinite alternate;
+    }
+  }
+}
+
+@keyframes SkeletonRotate {
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes SkeletonShimmer {
+  0% {
+    background-position: 0% 0;
+  }
+  100% {
+    background-position: 100% 0;
+  }
+}
+
+/*
+ * The styled-components original faded the border via hex-alpha concatenation
+ * (…neutral + "FF" → "1A"); that string trick does not translate to var(--…),
+ * so the fade is reproduced with color-mix (≈10% alpha matches 0x1A).
+ */
+@keyframes SkeletonPulse {
+  0% {
+    border-color: var(--color-container-border-decorative-neutral);
+  }
+  100% {
+    border-color: color-mix(
+      in srgb,
+      var(--color-container-border-decorative-neutral) 10%,
+      transparent
+    );
+  }
+}
+
 /* --- seeds-react-spot-illustration --- */
 /**
  * Seeds SpotIllustration component classes
@@ -2483,6 +2865,98 @@
     line-height: var(--line-height-200);
   }
 }
+/* --- seeds-react-textarea --- */
+/**
+ * Seeds Textarea component classes
+ * Use these instead of writing out individual Tailwind utility classes.
+ *
+ * Requires @sproutsocial/seeds-react-theme/dist/theme-all.css imported for
+ * CSS variable definitions and dark mode support.
+ *
+ * Usage:
+ *   <div class="seeds-textarea">
+ *     <textarea class="seeds-textarea-input"></textarea>
+ *   </div>
+ */
+
+@layer components {
+  .seeds-textarea {
+    box-sizing: border-box;
+    position: relative;
+  }
+
+  .seeds-textarea-disabled {
+    opacity: 0.4;
+  }
+
+  .seeds-textarea-input {
+    box-sizing: border-box;
+    display: block;
+    width: 100%;
+    padding: var(--space-300);
+    border: 1px solid var(--color-form-border-base);
+    border-radius: var(--radius-500);
+    background-color: var(--color-form-bg-base);
+    color: var(--color-text-body);
+    outline: none;
+    resize: none;
+    transition-property: border-color, box-shadow;
+    transition-duration: var(--duration-fast);
+    font-family: var(--font-family);
+    font-size: var(--font-size-200);
+    line-height: var(--line-height-200);
+    font-weight: var(--font-weight-normal);
+    appearance: none;
+  }
+
+  .seeds-textarea-input:focus {
+    box-shadow:
+      0 0 0 1px var(--color-button-primary-bg-base),
+      0 0 0 4px color-mix(in srgb, var(--color-button-primary-bg-base), transparent 70%);
+    outline: none;
+  }
+
+  .seeds-textarea-input::placeholder {
+    color: var(--color-form-placeholder-base);
+    font-style: italic;
+  }
+
+  .seeds-textarea-input-resizable {
+    resize: vertical;
+  }
+
+  .seeds-textarea-input-before {
+    padding-left: 40px;
+  }
+
+  .seeds-textarea-input-after {
+    padding-right: 40px;
+  }
+
+  .seeds-textarea-input-disabled {
+    cursor: not-allowed;
+  }
+
+  .seeds-textarea-input-invalid {
+    border-color: var(--color-form-border-error);
+  }
+
+  .seeds-textarea-accessory {
+    position: absolute;
+    color: var(--color-icon-base);
+  }
+
+  .seeds-textarea-accessory-before {
+    top: var(--space-300);
+    left: var(--space-350);
+  }
+
+  .seeds-textarea-accessory-after {
+    right: var(--space-350);
+    bottom: var(--space-300);
+  }
+}
+
 /* --- seeds-react-token --- */
 /**
  * Seeds Token component classes
@@ -2644,3 +3118,323 @@
       color-mix(in srgb, var(--color-container-border-ai_generated), white 20%);
   }
 }
+
+/* --- seeds-react-tree --- */
+/**
+ * Seeds Tree component classes
+ * CSS-class mirror of the styled-components that previously styled the tree
+ * package (TreeStyles.tsx, TreeCombobox.tsx, Common/TreeSearchableSelectBase.tsx).
+ *
+ * Requires @sproutsocial/seeds-react-theme/dist/theme-all.css imported for
+ * CSS variable definitions and dark mode support.
+ *
+ * Rules live in @layer components so consumer Tailwind utilities (which sit in
+ * the later `utilities` layer) can override component styles on equal
+ * specificity. Without the layer, these unlayered rules would out-rank any
+ * utility class.
+ *
+ * Usage:
+ *   <ul class="seeds-tree" role="tree">
+ *     <li class="seeds-tree-item" role="treeitem">
+ *       <div class="seeds-tree-item-row" style="--tree-level: 1">…</div>
+ *     </li>
+ *   </ul>
+ */
+
+@layer components {
+  /* ---------------------------------------------------------------------- */
+  /* Tree / TreeItem (mirror of TreeStyles.tsx)                             */
+  /* ---------------------------------------------------------------------- */
+
+  .seeds-tree {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    font-family: var(--font-family);
+    font-size: var(--font-size-200);
+    line-height: var(--line-height-200);
+    color: var(--color-text-body);
+  }
+
+  .seeds-tree-item {
+    list-style: none;
+    outline: none;
+  }
+
+  /*
+   * Tree rows stack tightly, so the standard outset Seeds focusRing bleeds
+   * into adjacent rows. Use an inset outline so the ring is drawn just inside
+   * the row's edge and never overlaps siblings or children.
+   *
+   * The same ring is drawn when [data-treeitem-active] is set so combobox
+   * hosts that drive the tree via aria-activedescendant (no real DOM focus)
+   * still get a visible "active" indicator on the row.
+   */
+  .seeds-tree-item:focus-visible > .seeds-tree-item-row,
+  .seeds-tree-item[data-treeitem-active] > .seeds-tree-item-row {
+    outline: 2px solid var(--color-button-primary-bg-base);
+    outline-offset: -2px;
+  }
+
+  .seeds-tree-item-row {
+    display: flex;
+    align-items: center;
+    gap: var(--space-300);
+    padding: var(--space-300);
+    /* Indentation per depth: --tree-level is set inline on each row. */
+    padding-left: calc(
+      var(--space-300) + (var(--tree-level) - 1) * var(--space-400)
+    );
+    border-radius: var(--radius-400);
+    cursor: pointer;
+    user-select: none;
+    background: transparent;
+    transition: background-color var(--duration-fast) var(--ease-ease_in);
+  }
+
+  .seeds-tree-item-row:hover {
+    background: var(--color-listItem-bg-hover);
+  }
+
+  .seeds-tree-item-row.selected {
+    background: var(--color-listItem-bg-hover);
+    font-weight: var(--font-weight-semibold);
+  }
+
+  .seeds-tree-item-row.disabled {
+    opacity: 0.4;
+    cursor: not-allowed;
+    pointer-events: none;
+  }
+
+  .seeds-tree-item-group {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+  }
+
+  .seeds-tree-item-label {
+    flex: 1;
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .seeds-tree-item-icon {
+    display: inline-flex;
+    align-items: center;
+    flex-shrink: 0;
+  }
+
+  .seeds-tree-item-chevron {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    width: var(--space-500);
+    height: var(--space-500);
+    padding: 0;
+    border: none;
+    background: transparent;
+    color: var(--color-icon-base);
+    cursor: pointer;
+    border-radius: var(--radius-300);
+    transition: transform var(--duration-fast) var(--ease-ease_in);
+    transform: rotate(-90deg);
+  }
+
+  .seeds-tree-item-chevron.expanded {
+    transform: rotate(0deg);
+  }
+
+  .seeds-tree-item-chevron:hover {
+    background: var(--color-listItem-bg-hover);
+  }
+
+  /* ---------------------------------------------------------------------- */
+  /* TreeCombobox (mirror of TreeCombobox.tsx)                              */
+  /* ---------------------------------------------------------------------- */
+
+  .seeds-tree-combobox {
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+    min-height: 0;
+  }
+
+  .seeds-tree-combobox-search {
+    padding: var(--space-300);
+    border-bottom: 1px solid var(--color-container-border-base);
+    flex-shrink: 0;
+  }
+
+  .seeds-tree-combobox-input-group {
+    display: flex;
+    align-items: center;
+    gap: var(--space-200);
+    padding: var(--space-200) var(--space-300);
+    border-radius: var(--radius-500);
+    border: 1px solid var(--color-container-border-base);
+    background: var(--color-container-bg-base);
+    color: var(--color-icon-base);
+  }
+
+  .seeds-tree-combobox-input-group:focus-within {
+    box-shadow:
+      0 0 0 1px var(--color-button-primary-bg-base),
+      0 0px 0px 4px
+        color-mix(
+          in srgb,
+          var(--color-button-primary-bg-base),
+          transparent 70%
+        );
+    outline: none;
+  }
+
+  .seeds-tree-combobox-input {
+    flex: 1;
+    border: none;
+    background: transparent;
+    outline: none;
+    font-family: var(--font-family);
+    font-size: var(--font-size-200);
+    line-height: var(--line-height-200);
+    color: var(--color-text-body);
+  }
+
+  .seeds-tree-combobox-input::placeholder {
+    color: var(--color-text-subtext);
+  }
+
+  .seeds-tree-combobox-list {
+    padding: var(--space-200);
+    overflow: auto;
+    flex: 1;
+    min-height: 0;
+  }
+
+  .seeds-tree-combobox-empty {
+    padding: var(--space-300) var(--space-350);
+    text-align: center;
+    color: var(--color-text-subtext);
+    font-size: var(--font-size-200);
+    line-height: var(--line-height-200);
+  }
+
+  /* ---------------------------------------------------------------------- */
+  /* TreeSearchableSelect (mirror of Common/TreeSearchableSelectBase.tsx)   */
+  /* ---------------------------------------------------------------------- */
+
+  .seeds-tree-select-trigger {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--space-300);
+    padding: var(--space-200) var(--space-350);
+    min-width: 160px;
+    width: auto;
+    border-radius: var(--radius-500);
+    border: 1px solid var(--color-form-border-base);
+    background: var(--color-form-bg-base);
+    font-family: var(--font-family);
+    font-size: var(--font-size-200);
+    line-height: var(--line-height-200);
+    color: var(--color-text-body);
+    text-align: left;
+    cursor: default;
+    outline: none;
+    user-select: none;
+    transition:
+      border-color var(--duration-fast) var(--ease-ease_in),
+      box-shadow var(--duration-fast) var(--ease-ease_in);
+  }
+
+  .seeds-tree-select-trigger.full-width {
+    width: 100%;
+  }
+
+  .seeds-tree-select-trigger:focus-visible {
+    box-shadow:
+      0 0 0 1px var(--color-button-primary-bg-base),
+      0 0px 0px 4px
+        color-mix(
+          in srgb,
+          var(--color-button-primary-bg-base),
+          transparent 70%
+        );
+    outline: none;
+  }
+
+  .seeds-tree-select-trigger::-moz-focus-inner {
+    border: 0;
+  }
+
+  .seeds-tree-select-trigger[aria-disabled="true"],
+  .seeds-tree-select-trigger:disabled {
+    opacity: 0.4;
+    cursor: not-allowed;
+  }
+
+  .seeds-tree-select-trigger.invalid {
+    border-color: var(--color-form-border-error);
+  }
+
+  .seeds-tree-select-trigger-label {
+    flex: 1;
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .seeds-tree-select-placeholder {
+    color: var(--color-text-subtext);
+  }
+
+  .seeds-tree-select-chevron {
+    display: inline-flex;
+    align-items: center;
+    color: var(--color-icon-base);
+    transition: transform var(--duration-fast) var(--ease-ease_in);
+  }
+
+  .seeds-tree-select-chevron.open {
+    transform: rotate(-180deg);
+  }
+
+  /*
+   * Visually-hidden input that mirrors the combobox's selected value into a
+   * form-submittable element. Matches Base UI's pattern (used by v3
+   * SearchableSelect): the input stays in the DOM so HTML forms pick up the
+   * value, but it's removed from view and from the accessibility tree.
+   */
+  .seeds-tree-select-hidden-input {
+    clip-path: inset(50%);
+    overflow: hidden;
+    white-space: nowrap;
+    border: 0;
+    padding: 0;
+    width: 1px;
+    height: 1px;
+    margin: -1px;
+    position: fixed;
+    top: 0;
+    left: 0;
+  }
+
+  .seeds-tree-select-popout {
+    display: flex;
+    flex-direction: column;
+    /* Width sizes to content within bounds: at least the trigger width, never */
+    /* wider than the available viewport space. Shallow popups stay flush with */
+    /* the trigger; deeply nested trees expand horizontally as needed. */
+    min-width: var(--radix-popover-trigger-width);
+    max-width: var(--radix-popper-available-width);
+    /* Height caps at 400px (or available viewport) so a popup with many */
+    /* expanded branches scrolls vertically instead of growing off-screen. */
+    max-height: min(var(--radix-popper-available-height), 400px);
+    /* Width is set inline via --tree-select-width (defaults to max-content). */
+    width: var(--tree-select-width, max-content);
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sproutsocial/racine",
-  "version": "31.7.0",
+  "version": "31.7.3",
   "license": "MIT",
   "engines": {
     "node": ">=18"
@@ -73,74 +73,74 @@
   },
   "dependencies": {
     "@size-limit/file": "^11.1.6",
-    "@sproutsocial/seeds-react-accordion": "^0.4.49",
-    "@sproutsocial/seeds-react-avatar": "^1.1.18",
-    "@sproutsocial/seeds-react-badge": "^2.0.35",
-    "@sproutsocial/seeds-react-banner": "^1.1.23",
-    "@sproutsocial/seeds-react-box": "^1.1.22",
-    "@sproutsocial/seeds-react-breadcrumb": "^1.1.8",
-    "@sproutsocial/seeds-react-button": "^2.2.2",
-    "@sproutsocial/seeds-react-card": "^1.1.43",
+    "@sproutsocial/seeds-react-accordion": "^0.4.50",
+    "@sproutsocial/seeds-react-avatar": "^1.1.19",
+    "@sproutsocial/seeds-react-badge": "^2.0.36",
+    "@sproutsocial/seeds-react-banner": "^1.1.24",
+    "@sproutsocial/seeds-react-box": "^1.1.23",
+    "@sproutsocial/seeds-react-breadcrumb": "^1.1.9",
+    "@sproutsocial/seeds-react-button": "^2.2.3",
+    "@sproutsocial/seeds-react-card": "^1.1.44",
     "@sproutsocial/seeds-react-character-counter": "^1.0.4",
-    "@sproutsocial/seeds-react-chart-legend": "^1.0.42",
+    "@sproutsocial/seeds-react-chart-legend": "^1.0.43",
     "@sproutsocial/seeds-react-chat-bubble": "^0.2.2",
-    "@sproutsocial/seeds-react-checkbox": "^1.3.43",
+    "@sproutsocial/seeds-react-checkbox": "^1.3.44",
     "@sproutsocial/seeds-react-collapsible": "^2.0.1",
-    "@sproutsocial/seeds-react-container": "^0.3.16",
-    "@sproutsocial/seeds-react-content-block": "^0.5.16",
-    "@sproutsocial/seeds-react-content-header": "^0.2.21",
-    "@sproutsocial/seeds-react-data-table": "^2.6.24",
-    "@sproutsocial/seeds-react-datepicker": "^1.0.40",
-    "@sproutsocial/seeds-react-drawer": "^2.2.9",
-    "@sproutsocial/seeds-react-duration": "^1.0.25",
-    "@sproutsocial/seeds-react-empty-state": "^1.0.24",
-    "@sproutsocial/seeds-react-fieldset": "^1.0.24",
-    "@sproutsocial/seeds-react-form-field": "^1.1.18",
-    "@sproutsocial/seeds-react-grid": "^0.2.6",
-    "@sproutsocial/seeds-react-hooks": "^3.2.3",
-    "@sproutsocial/seeds-react-icon": "^2.4.1",
-    "@sproutsocial/seeds-react-image": "^1.0.22",
-    "@sproutsocial/seeds-react-indicator": "^1.0.41",
-    "@sproutsocial/seeds-react-input": "^1.5.28",
-    "@sproutsocial/seeds-react-keyboard-key": "^1.0.24",
-    "@sproutsocial/seeds-react-label": "^1.0.24",
-    "@sproutsocial/seeds-react-link": "^1.1.14",
-    "@sproutsocial/seeds-react-list": "^0.3.27",
-    "@sproutsocial/seeds-react-loader": "^1.0.24",
-    "@sproutsocial/seeds-react-loader-button": "^1.0.47",
-    "@sproutsocial/seeds-react-message": "^1.0.50",
-    "@sproutsocial/seeds-react-mixins": "^4.3.8",
-    "@sproutsocial/seeds-react-modal": "^2.5.24",
-    "@sproutsocial/seeds-react-narrative-kit": "^0.5.0",
-    "@sproutsocial/seeds-react-numeral": "^1.0.49",
-    "@sproutsocial/seeds-react-pagination": "^0.1.22",
-    "@sproutsocial/seeds-react-panel": "^1.0.2",
-    "@sproutsocial/seeds-react-peek-in": "^0.3.1",
-    "@sproutsocial/seeds-react-partner-logo": "^1.7.14",
-    "@sproutsocial/seeds-react-popout": "^2.5.10",
+    "@sproutsocial/seeds-react-container": "^0.3.17",
+    "@sproutsocial/seeds-react-content-block": "^0.5.17",
+    "@sproutsocial/seeds-react-content-header": "^0.2.22",
+    "@sproutsocial/seeds-react-data-table": "^2.6.25",
+    "@sproutsocial/seeds-react-datepicker": "^1.0.41",
+    "@sproutsocial/seeds-react-drawer": "^2.2.10",
+    "@sproutsocial/seeds-react-duration": "^1.0.26",
+    "@sproutsocial/seeds-react-empty-state": "^1.0.25",
+    "@sproutsocial/seeds-react-fieldset": "^1.0.25",
+    "@sproutsocial/seeds-react-form-field": "^1.1.19",
+    "@sproutsocial/seeds-react-grid": "^0.2.7",
+    "@sproutsocial/seeds-react-hooks": "^3.2.4",
+    "@sproutsocial/seeds-react-icon": "^2.4.2",
+    "@sproutsocial/seeds-react-image": "^1.0.23",
+    "@sproutsocial/seeds-react-indicator": "^1.0.42",
+    "@sproutsocial/seeds-react-input": "^1.5.29",
+    "@sproutsocial/seeds-react-keyboard-key": "^1.0.25",
+    "@sproutsocial/seeds-react-label": "^1.0.25",
+    "@sproutsocial/seeds-react-link": "^1.1.15",
+    "@sproutsocial/seeds-react-list": "^0.3.29",
+    "@sproutsocial/seeds-react-loader": "^1.0.25",
+    "@sproutsocial/seeds-react-loader-button": "^1.0.48",
+    "@sproutsocial/seeds-react-message": "^1.0.51",
+    "@sproutsocial/seeds-react-mixins": "^4.3.9",
+    "@sproutsocial/seeds-react-modal": "^2.5.25",
+    "@sproutsocial/seeds-react-narrative-kit": "^0.6.0",
+    "@sproutsocial/seeds-react-numeral": "^1.0.50",
+    "@sproutsocial/seeds-react-pagination": "^0.1.23",
+    "@sproutsocial/seeds-react-panel": "^1.0.3",
+    "@sproutsocial/seeds-react-peek-in": "^0.3.2",
+    "@sproutsocial/seeds-react-partner-logo": "^1.7.15",
+    "@sproutsocial/seeds-react-popout": "^2.5.11",
     "@sproutsocial/seeds-react-portal": "^1.2.0",
-    "@sproutsocial/seeds-react-progress": "^0.2.9",
-    "@sproutsocial/seeds-react-radio": "^1.3.24",
-    "@sproutsocial/seeds-react-rating": "^1.0.41",
-    "@sproutsocial/seeds-react-segmented-control": "^1.1.23",
+    "@sproutsocial/seeds-react-progress": "^0.2.10",
+    "@sproutsocial/seeds-react-radio": "^1.3.25",
+    "@sproutsocial/seeds-react-rating": "^1.0.43",
+    "@sproutsocial/seeds-react-segmented-control": "^1.1.24",
     "@sproutsocial/seeds-react-spot-illustration": "^1.2.4",
-    "@sproutsocial/seeds-react-select": "^1.1.42",
-    "@sproutsocial/seeds-react-skeleton": "^1.1.21",
-    "@sproutsocial/seeds-react-stack": "^1.0.21",
-    "@sproutsocial/seeds-react-switch": "^1.2.40",
+    "@sproutsocial/seeds-react-select": "^1.1.43",
+    "@sproutsocial/seeds-react-skeleton": "^1.1.23",
+    "@sproutsocial/seeds-react-stack": "^1.0.22",
+    "@sproutsocial/seeds-react-switch": "^1.2.41",
     "@sproutsocial/seeds-react-system-props": "^3.1.1",
-    "@sproutsocial/seeds-react-table": "^1.0.43",
-    "@sproutsocial/seeds-react-tabs": "^1.4.12",
+    "@sproutsocial/seeds-react-table": "^1.0.44",
+    "@sproutsocial/seeds-react-tabs": "^1.4.13",
     "@sproutsocial/seeds-react-text": "^1.5.0",
-    "@sproutsocial/seeds-react-textarea": "^1.0.22",
-    "@sproutsocial/seeds-react-toast": "^1.0.43",
-    "@sproutsocial/seeds-react-token": "^1.5.8",
-    "@sproutsocial/seeds-react-token-input": "^1.4.50",
-    "@sproutsocial/seeds-react-tooltip": "^1.1.28",
-    "@sproutsocial/seeds-react-theme": "^4.1.1",
-    "@sproutsocial/seeds-react-theme-provider": "^1.1.21",
+    "@sproutsocial/seeds-react-textarea": "^1.0.24",
+    "@sproutsocial/seeds-react-toast": "^1.0.44",
+    "@sproutsocial/seeds-react-token": "^1.5.9",
+    "@sproutsocial/seeds-react-token-input": "^1.4.51",
+    "@sproutsocial/seeds-react-tooltip": "^1.1.29",
+    "@sproutsocial/seeds-react-theme": "^4.2.0",
+    "@sproutsocial/seeds-react-theme-provider": "^1.1.22",
     "@sproutsocial/seeds-react-utilities": "^4.3.0",
-    "@sproutsocial/seeds-react-visually-hidden": "^1.0.23",
+    "@sproutsocial/seeds-react-visually-hidden": "^1.0.24",
     "scroll-into-view-if-needed": "^2.2.20",
     "lodash.uniqueid": "^4.0.1",
     "styled-system": "^5.1.5",
@@ -163,7 +163,7 @@
     "@sproutsocial/seeds-motion": "^1.8.2",
     "@sproutsocial/seeds-networkcolor": "^2.22.0",
     "@sproutsocial/seeds-partner-logos": "^2.4.1",
-    "@sproutsocial/seeds-react-menu": "^1.16.2",
+    "@sproutsocial/seeds-react-menu": "^1.16.3",
     "@sproutsocial/seeds-react-testing-library": "*",
     "@sproutsocial/seeds-space": "^0.8.1",
     "@sproutsocial/seeds-testing": "*",