stream-chat-react 14.12.0 → 15.0.0-rc.1

package/dist/css/index.css

@@ -988,6 +988,36 @@
   --str-chat__accent-primary: var(
     --str-chat__brand-400
   ); /** The main brand color. Used for interactive elements, buttons, links, and primary actions. Override this to apply your brand color across the SDK. */
+  /**
+   * Button accents, split by role because one accent cannot serve both in dark mode.
+   *
+   * The light theme gets away with a single `accent-primary` (brand-500, #005fff): it is dark enough to
+   * carry white text as a *background*, and dark enough to read against white as *text*. Dark mode
+   * lightens the accent to the ramp pivot (brand-400, #4586ff) so it stays legible as a foreground — and
+   * that same lightening drops the solid button to 3.44:1, below the 4.5:1 WCAG AA needs for the 14px
+   * text these buttons use. The pivot fails *both* roles: 3.44:1 with white on it, 3.73:1 as text on a
+   * dark surface. Every colour rule in `Button.scss` keys on an appearance + variant pair, so both roles
+   * are reachable and both were failing.
+   *
+   * Fixed by giving each role the step that suits it, measured rather than eyeballed:
+   */
+  /* Solid buttons keep `accent-primary` as the background, so overriding it still rebrands them.
+     Only the text on top flips to dark, which is what a *lightened* accent surface calls for:
+     #000 on #4586ff = 6.11:1, against 3.44:1 for the white it replaces. */
+  --str-chat__button-primary-text-on-accent: var(--str-chat__chrome-0);
+  --str-chat__button-destructive-text-on-accent: var(
+    --str-chat__chrome-0
+  ); /* #000 on #fc526a = 6.55:1, up from 3.20:1. */
+  /* Outline and ghost buttons paint the accent as *text* on the page surface, which needs the opposite
+     move — a lighter step. These pin to the ramp rather than to `accent-primary`, so an integrator's
+     override does not reach them in dark mode; there is no way to derive a lighter shade in CSS without
+     `color-mix()`, which nothing else in this codebase relies on yet. */
+  --str-chat__button-primary-text: var(
+    --str-chat__brand-500
+  ); /* blue-300 #78a8ff on #323232 = 5.40:1, up from 3.73:1. */
+  --str-chat__button-destructive-text: var(
+    --str-chat__red-300
+  ); /* #fe87a1 on #323232 = 5.61:1, up from 4.00:1. */
 }
 
 /* Numeric styles are used for compact, layout-critical UI elements such as:
@@ -1574,8 +1604,7 @@ to create clearer separation from the base surface.
 }
 .str-chat__form-numeric-input__input {
   flex: 0 1 auto;
-  min-width: 2ch;
-  width: 2.5rem;
+  min-width: 2.5rem;
   padding: var(--str-chat__spacing-xs, 0.5rem) 0;
   font-size: var(--str-chat__typography-font-size-sm, 0.875rem);
   font-weight: var(--str-chat__typography-font-weight-medium, 500);
@@ -2766,57 +2795,6 @@ to create clearer separation from the base surface.
   outline-offset: 2px;
 }
 
-/*
- * Upload progress shown on an attachment carried by a message whose send is already under way.
- *
- * The markup is the same pair the composer's attachment previews use — UploadProgressIndicator
- * followed by AttachmentUploadedSizeIndicator — so these rules deliberately mirror the tokens
- * in MessageComposer/styling/AttachmentPreview.scss. An attachment should look the same either
- * side of pressing send.
- */
-.str-chat__attachment-upload-progress {
-  display: flex;
-  align-items: center;
-  gap: var(--str-chat__spacing-xxs);
-  color: var(--str-chat__text-secondary);
-  font: var(--str-chat__font-metadata-default);
-}
-.str-chat__attachment-upload-progress .str-chat__loading-indicator,
-.str-chat__attachment-upload-progress .str-chat__progress-indicator {
-  flex: 0 0 auto;
-  width: var(--str-chat__icon-size-sm);
-  height: var(--str-chat__icon-size-sm);
-  color: var(--str-chat__accent-primary);
-}
-
-/*
- * Images, video and galleries have no file-size row to take over, so the indicator is overlaid
- * on the media, on a rounded chip.
- *
- * Pinned to the top-inline-end corner, not the bottom: a still-uploading video keeps its
- * transport controls (its local blob plays fine), and those occupy the full width of the bottom
- * edge. `pointer-events: none` keeps the chip from swallowing clicks meant for the media.
- *
- * It renders as a sibling of the media component so the media's own box and sizing logic are
- * untouched; only the surrounding container becomes a positioning context.
- */
-.str-chat__message-attachment--image,
-.str-chat__message-attachment--gallery,
-.str-chat__message-attachment--media {
-  position: relative;
-}
-
-.str-chat__attachment-upload-progress--overlay {
-  position: absolute;
-  inset-inline-end: var(--str-chat__spacing-xs);
-  inset-block-start: var(--str-chat__spacing-xs);
-  z-index: 1;
-  padding: var(--str-chat__spacing-xxs) var(--str-chat__spacing-xs);
-  border-radius: var(--str-chat__radius-max);
-  background: var(--str-chat__background-core-elevation-0);
-  pointer-events: none;
-}
-
 .str-chat__message-attachment-audio-widget {
   background: transparent;
   color: var(--str-chat__text-primary);
@@ -3328,7 +3306,6 @@ to create clearer separation from the base surface.
   align-items: center;
   justify-content: center;
   position: relative;
-  z-index: 1;
   width: 2.75rem;
   height: 2.75rem;
   border-radius: var(--str-chat__radius-max);
@@ -3437,6 +3414,57 @@ to create clearer separation from the base surface.
   font: var(--str-chat__font-metadata-emphasis);
 }
 
+/*
+ * Upload progress shown on an attachment carried by a message whose send is already under way.
+ *
+ * The markup is the same pair the composer's attachment previews use — UploadProgressIndicator
+ * followed by AttachmentUploadedSizeIndicator — so these rules deliberately mirror the tokens
+ * in MessageComposer/styling/AttachmentPreview.scss. An attachment should look the same either
+ * side of pressing send.
+ */
+.str-chat__attachment-upload-progress {
+  display: flex;
+  align-items: center;
+  gap: var(--str-chat__spacing-xxs);
+  color: var(--str-chat__text-secondary);
+  font: var(--str-chat__font-metadata-default);
+}
+.str-chat__attachment-upload-progress .str-chat__loading-indicator,
+.str-chat__attachment-upload-progress .str-chat__progress-indicator {
+  flex: 0 0 auto;
+  width: var(--str-chat__icon-size-sm);
+  height: var(--str-chat__icon-size-sm);
+  color: var(--str-chat__accent-primary);
+}
+
+/*
+ * Images, video and galleries have no file-size row to take over, so the indicator is overlaid
+ * on the media, on a rounded chip.
+ *
+ * Pinned to the top-inline-end corner, not the bottom: a still-uploading video keeps its
+ * transport controls (its local blob plays fine), and those occupy the full width of the bottom
+ * edge. `pointer-events: none` keeps the chip from swallowing clicks meant for the media.
+ *
+ * It renders as a sibling of the media component so the media's own box and sizing logic are
+ * untouched; only the surrounding container becomes a positioning context.
+ */
+.str-chat__message-attachment--image,
+.str-chat__message-attachment--gallery,
+.str-chat__message-attachment--media {
+  position: relative;
+}
+
+.str-chat__attachment-upload-progress--overlay {
+  position: absolute;
+  inset-inline-end: var(--str-chat__spacing-xs);
+  inset-block-start: var(--str-chat__spacing-xs);
+  z-index: 1;
+  padding: var(--str-chat__spacing-xxs) var(--str-chat__spacing-xs);
+  border-radius: var(--str-chat__radius-max);
+  background: var(--str-chat__background-core-elevation-0);
+  pointer-events: none;
+}
+
 .str-chat .str-chat__duration-display {
   letter-spacing: 0;
   min-width: 35px;
@@ -3821,43 +3849,26 @@ to create clearer separation from the base surface.
   inset-inline-end: 0;
 }
 
+/* `.str-chat__channel` is the channel's main content column: a flex column that fills its
+   parent and stacks the header / message list / composer. It used to wrap a `.str-chat__container`
+   (flex row for a side-by-side Thread) and a `.str-chat__main-panel`; the thread is a slot now,
+   so both wrappers are gone and their layout lives here directly. */
 .str-chat__channel {
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-  min-height: 0;
-  position: relative;
-}
-.str-chat__channel .str-chat__container {
-  height: 100%;
-  display: flex;
-}
-.str-chat__channel .str-chat__container .str-chat__main-panel {
   position: relative;
   height: 100%;
   display: flex;
+  flex: 1 1 auto;
   flex-direction: column;
   width: 100%;
   min-width: 0;
+  min-height: 0;
+  /* A drag-and-drop wrapper placed directly inside the channel becomes the content column. */
 }
-.str-chat__channel .str-chat__container {
-  /* Mobile (<768px): when thread is open, show only thread (channel panel collapsed). */
-}
-@media (max-width: 767px) {
-  .str-chat__channel .str-chat__container:has(.str-chat__thread-container) > .str-chat__main-panel,
-  .str-chat__channel .str-chat__container:has(.str-chat__thread-container) > .str-chat__dropzone-root:not(.str-chat__dropzone-root--thread) {
-    flex: 0 0 0;
-    width: 0;
-    min-width: 0;
-    max-width: 0;
-    overflow: hidden;
-  }
-  .str-chat__channel .str-chat__container:has(.str-chat__thread-container) > .str-chat__thread-container,
-  .str-chat__channel .str-chat__container:has(.str-chat__thread-container) > .str-chat__dropzone-root--thread {
-    flex: 1 1 auto;
-    min-width: 0;
-    width: 100%;
-  }
+.str-chat__channel > .str-chat__dropzone-root {
+  display: flex;
+  flex: 1 1 auto;
+  flex-direction: column;
+  min-height: 0;
 }
 
 .str-chat__loading-channel {
@@ -4048,10 +4059,13 @@ to create clearer separation from the base surface.
   padding: var(--str-chat__spacing-md);
   height: var(--str-chat__channel-header-height);
   display: grid;
-  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
+  grid-template-columns: minmax(max-content, 1fr) minmax(0, auto) minmax(max-content, 1fr);
   align-items: center;
 }
 .str-chat__channel-header .str-chat__channel-header__start {
+  display: flex;
+  align-items: center;
+  gap: var(--str-chat__spacing-xs);
   justify-self: start;
   min-width: 0;
 }
@@ -4059,12 +4073,21 @@ to create clearer separation from the base surface.
   display: flex;
   flex-direction: column;
   align-items: center;
+  max-width: 100%;
   overflow-y: hidden;
   overflow-x: hidden;
+}
+.str-chat__channel-header .str-chat__channel-header__data > * {
+  max-width: 100%;
+}
+.str-chat__channel-header .str-chat__channel-header__data {
   justify-self: center;
   min-width: 0;
 }
 .str-chat__channel-header .str-chat__channel-header__end {
+  display: flex;
+  align-items: center;
+  gap: var(--str-chat__spacing-xs);
   justify-self: end;
   min-width: 0;
 }
@@ -4125,18 +4148,6 @@ to create clearer separation from the base surface.
   scrollbar-gutter: stable both-edges;
   scrollbar-width: thin;
 }
-.str-chat__channel-list .str-chat__channel-list-inner .str-chat__channel-list-inner__main .str-chat__channel-list-empty {
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  padding: calc(var(--str-chat__space-8) + var(--str-chat__space-4));
-}
-.str-chat__channel-list .str-chat__channel-list-inner .str-chat__channel-list-inner__main .str-chat__channel-list-empty p {
-  color: var(--str-chat__text-secondary);
-  font: var(--str-chat__font-caption-default);
-}
 .str-chat__channel-list .str-chat__load-more-button {
   display: flex;
   justify-content: center;
@@ -4150,7 +4161,17 @@ to create clearer separation from the base surface.
   height: 32px;
 }
 .str-chat__channel-list .str-chat__channel-list-empty {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: calc(var(--str-chat__space-8) + var(--str-chat__space-4));
+  color: var(--str-chat__text-secondary);
+}
+.str-chat__channel-list .str-chat__channel-list-empty p {
   color: var(--str-chat__text-secondary);
+  font: var(--str-chat__font-caption-default);
 }
 .str-chat__channel-list {
   /* Mobile: hide when nav closed; when open show as overlay. */
@@ -4244,7 +4265,7 @@ to create clearer separation from the base surface.
 .str-chat__channel-list-item:not(:disabled):active {
   background: var(--str-chat__background-utility-pressed);
 }
-.str-chat__channel-list-item:not(:disabled)[aria-pressed=true] {
+.str-chat__channel-list-item:not(:disabled)[aria-selected=true] {
   background: var(--str-chat__background-utility-selected);
 }
 .str-chat__channel-list-item .str-chat__avatar {
@@ -4381,6 +4402,7 @@ to create clearer separation from the base surface.
   display: flex;
   flex-grow: 1;
   min-width: 0;
+  min-height: 0;
   position: relative;
 }
 .str-chat__chat-view .str-chat__chat-view__threads > .str-chat__dropzone-root--thread,
@@ -4391,6 +4413,62 @@ to create clearer separation from the base surface.
   width: 100%;
 }
 
+.str-chat__chat-view__workspace-layout {
+  display: flex;
+  width: 100%;
+  height: 100%;
+  min-width: 0;
+}
+
+.str-chat__chat-view__workspace-layout-nav-rail {
+  display: flex;
+  flex-shrink: 0;
+}
+
+.str-chat__chat-view__workspace-layout-entity-list-pane {
+  display: flex;
+  min-width: 0;
+}
+
+.str-chat__chat-view__workspace-layout-slots {
+  display: flex;
+  flex: 1 1 auto;
+  min-width: 0;
+}
+
+.str-chat__chat-view__workspace-layout-slots--empty {
+  justify-content: center;
+}
+
+.str-chat__chat-view__workspace-layout-slot {
+  display: flex;
+  flex: 1 1 0;
+  min-width: 0;
+}
+
+.str-chat__chat-view__slot {
+  display: flex;
+  flex: 1 1 0;
+  height: 100%;
+  min-height: 0;
+  min-width: 0;
+}
+.str-chat__chat-view__slot:empty {
+  display: none;
+}
+
+.str-chat__chat-view__slot:not(:empty) ~ .str-chat__chat-view__slot:not(:empty) {
+  border-inline-start: 1px solid var(--str-chat__border-core-default);
+}
+
+.str-chat__chat-view__slot .str-chat__thread-container {
+  border-inline-start: 0;
+}
+
+.str-chat__chat-view__slot--hidden {
+  display: none;
+}
+
 .str-chat__date-separator--floating {
   position: absolute;
   top: 0;
@@ -5637,11 +5715,15 @@ to create clearer separation from the base surface.
   );
 }
 .str-chat .str-chat__message .str-chat__quoted-message-preview {
-  background-color: var(--chat-bg-attachment);
+  cursor: pointer;
+  background-color: var(--chat-bg-attachment-incoming);
   width: calc(var(--str-chat__message-with-attachment-max-width) - 2 * var(--str-chat__spacing-xs));
   max-width: 100%;
   min-width: 0;
 }
+.str-chat .str-chat__message .str-chat__quoted-message-preview--own {
+  background-color: var(--chat-bg-attachment-outgoing);
+}
 
 /* Saved for Later: above pin indicator. Font and spacing aligned with pin indicator. */
 .str-chat__message-saved-for-later {
@@ -6561,6 +6643,7 @@ to create clearer separation from the base surface.
   gap: var(--str-chat__spacing-xs);
   position: relative;
   background-color: var(--str-chat__chat-bg-incoming);
+  color: var(--str-chat__chat-text-incoming);
   padding: var(--str-chat__spacing-xs);
   border-radius: var(--str-chat__message-bubble-radius-attachment);
 }
@@ -6608,7 +6691,7 @@ to create clearer separation from the base surface.
 }
 .str-chat .str-chat__quoted-message-preview .str-chat__quoted-message-preview__content .str-chat__quoted-message-preview__message .str-chat__quoted-message-preview__message-text * {
   white-space: nowrap;
-  color: var(--str-chat__chat-text-incoming);
+  color: inherit;
 }
 .str-chat .str-chat__quoted-message-preview .str-chat__quoted-message-preview__image {
   display: flex;
@@ -6643,6 +6726,7 @@ to create clearer separation from the base surface.
 }
 .str-chat .str-chat__quoted-message-preview--own {
   background-color: var(--str-chat__chat-bg-outgoing);
+  color: var(--str-chat__chat-text-outgoing);
 }
 
 .str-chat__button.str-chat__attachment-preview__remove-button {
@@ -6816,10 +6900,12 @@ to create clearer separation from the base surface.
   margin: 0;
 }
 
-.str-chat__main-panel .str-chat__ul .str-chat__li:first-of-type {
+/* Scoped to the channel's main list (`.str-chat__channel`), not thread lists (which render
+   under `.str-chat__thread-container`). */
+.str-chat__channel .str-chat__ul .str-chat__li:first-of-type {
   padding-top: 4.5rem;
 }
-.str-chat__main-panel .str-chat__ul .str-chat__date-separator + .str-chat__li:first-of-type {
+.str-chat__channel .str-chat__ul .str-chat__date-separator + .str-chat__li:first-of-type {
   padding-top: inherit;
 }
 
@@ -8088,6 +8174,7 @@ to create clearer separation from the base surface.
 }
 .str-chat__search-results .str-chat__search-results-header .str-chat__search-results-header__filter-source-buttons {
   display: flex;
+  flex-wrap: wrap;
   gap: var(--str-chat__spacing-xxs);
   padding-inline: var(--str-chat__spacing-md);
 }
@@ -8316,6 +8403,15 @@ to create clearer separation from the base surface.
   display: flex;
   flex-direction: column;
   width: 100%;
+  min-height: 0;
+  /* A drag-and-drop wrapper placed directly inside the thread becomes the content column,
+     mirroring the same rule in `Channel.scss`. */
+}
+.str-chat__thread-container > .str-chat__dropzone-root {
+  display: flex;
+  flex: 1 1 auto;
+  flex-direction: column;
+  min-height: 0;
 }
 
 .str-chat__parent-message-li {
@@ -8346,7 +8442,7 @@ to create clearer separation from the base surface.
   padding: var(--str-chat__spacing-md);
   height: var(--str-chat__channel-header-height);
   display: grid;
-  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
+  grid-template-columns: minmax(max-content, 1fr) minmax(0, auto) minmax(max-content, 1fr);
   align-items: center;
   background: var(--str-chat__background-core-elevation-1);
   color: var(--str-chat__text-primary);
@@ -8363,8 +8459,14 @@ to create clearer separation from the base surface.
   display: flex;
   flex-direction: column;
   align-items: center;
+  max-width: 100%;
   overflow-y: hidden;
   overflow-x: hidden;
+}
+.str-chat__thread-header .str-chat__thread-header-details > * {
+  max-width: 100%;
+}
+.str-chat__thread-header .str-chat__thread-header-details {
   min-width: 0;
   justify-self: center;
 }
@@ -8380,6 +8482,9 @@ to create clearer separation from the base surface.
   overflow-y: hidden;
 }
 .str-chat__thread-header .str-chat__thread-header__start {
+  display: flex;
+  align-items: center;
+  gap: var(--str-chat__spacing-xs);
   min-width: 0;
   justify-self: start;
 }
@@ -8617,7 +8722,7 @@ to create clearer separation from the base surface.
 .str-chat__thread-list-item:not(:disabled):active {
   background: var(--str-chat__background-utility-pressed);
 }
-.str-chat__thread-list-item:not(:disabled)[aria-pressed=true] {
+.str-chat__thread-list-item:not(:disabled)[aria-selected=true] {
   background: var(--str-chat__background-utility-selected);
 }
 .str-chat__thread-list-item .str-chat__avatar {