@carissa-io/theme-default 0.3.14 → 0.3.16

package/DESIGN.md

@@ -49,6 +49,8 @@ Both modes ship in the same package; dark is **opt-in per app** with `data-mode`
 | `warning` | `#a16207` | `#fbbf24` |
 | `info` | `#1d4ed8` | `#60a5fa` |
 | `focus` | `#000000` | `#ffffff` |
+| `scrollbar-thumb` | `#737373` | `#737373` |
+| `scrollbar-track` | `#ffffff` | `#0a0a0a` |
 
 Decisions: dark inverts the contrast of the light theme, it does not invent a new look (near-black ground, the primary action becomes white,
 square corners and the 1px focus ring stay). The ground is `#0a0a0a`, not pure black, so surfaces (`#171717`) can be told apart. Primary and focus
@@ -74,6 +76,7 @@ Contrast (WCAG 2.x): text 4.5:1, borders and the focus ring 3:1.
 | `info` on `background` / on `surface` | 6.70 / 6.15 | 7.79 / 7.05 |
 | `error` on `surface` | 4.15 | 6.48 |
 | `disabled-text` on `surface` (disabled, exempt) | 2.31 | 3.78 |
+| `scrollbar-thumb` on `scrollbar-track` / on `background` (the same colour) | 4.74 | 4.18 |
 
 The light `error` on `surface` (4.15) is below 4.5 for text, so the Alert never sets text in the status color (only the icon and the accent border, which need 3:1).
 
@@ -81,6 +84,11 @@ Every `muted` text pairing passes AA in both modes (a test asserts it): the ligh
 `surface-active`, so it is now `#666666` (5.74 / 5.27 / 4.56). The disabled states are exempt from WCAG but are listed in the backlog for a contrast review. Known gap in dark: the 0-width listbox option separator keeps the component default
 (`#dee2e6`); it draws nothing today.
 
+## Scrollbars
+Two rules theme every scroll container, and no component carries a scrollbar rule: `scrollbar-color: var(--c-scrollbar-thumb) var(--c-scrollbar-track)` on `:root` (inherited, so every scroller gets it) and `scrollbar-width: thin` on `*`. The thumb is the neutral 500 (`#737373`) in both modes; the track is the page ground, equal to `background` (`#ffffff` / `#0a0a0a`), so the scrollbar is just a thumb on the page and no extra rail is drawn. The thumb passes the 3:1 non-text minimum against the track and the background (4.74 / 4.18, the same pair) and also on `surface` (4.35 / 3.78) and the `surface-active` hover fill (3.76 / 3.19); a test asserts that the track equals the background and the ratio in each mode. Known trade-off: inside a surface-coloured container (the sidebar, a card) the track shows as a strip of the page colour; a theme can override `$scrollbar-track` (and the dark role) with its surface value. The width is `thin` (the `$scrollbar-width` token), which suits the Swiss restraint and still leaves a target the pointer can grab; touch and overlay scrollbars ignore it.
+
+Known limits: `scrollbar-width` is not an inherited property, so a `:root` declaration would thin only the page; it is declared with a universal rule instead, which has zero specificity so it never overrides a component. The rules use the standard properties only, so there is colour and thickness but no rounding, no arrows and no hover state (those need the `::-webkit-scrollbar` pseudo-elements, which the theme deliberately does not use). Support is Chrome 121+, Firefox 64+ and Safari 18.2+; older browsers keep the native bar, which stays usable. A scroller that sets its own `scrollbar-width` keeps it, whatever the order: the carousel hides its bar on purpose (`scrollbar-width: none`, a class selector) and the theme does not undo it.
+
 ## Typography
 Configured through [components-typography](components/components-typography): `Heading` (the element comes from `level`, the look from `size`)
 and `Text`. Neutral grotesque, no margins (spacing belongs to the layout), color from `$text`; only muted text uses `$muted`.
@@ -451,6 +459,21 @@ From [components-theme-switch](components/components-theme-switch): `ThemeSwitch
 ## Icon
 From [components-icon](components/components-icon): `Icon`. No colour of its own: the stroke is `currentColor`, so an icon has the contrast of the text it sits in (17.93:1 / 18.16:1 for `--c-text`, 5.74:1 / 7.85:1 for `--c-muted`, both above the 3:1 non-text minimum). Sizes are pinned in rem (1, 1.25, 1.5 and 2rem) so they do not drift with the font size around them. A decorative icon is `aria-hidden`; a lone one needs a `label`.
 
+## AI label
+From [components-ai-label](components/components-ai-label): `AiLabel`. The mark is the neutral Badge (`--c-surface` with a `--c-muted` border, `--c-text` text at 16.44:1, see [Badge](#badge)); the optional details line is `--c-muted` text (5.74:1 / 7.85:1 on the background, 5.27:1 / 7.11:1 on `--c-surface`) at the caption size next to a `sm` mark and the small size next to a `md` one, with 0.5rem between the two. It is text beside the mark: nothing opens and nothing needs a keyboard.
+
+## Thinking indicator
+From [components-thinking-indicator](components/components-thinking-indicator): `ThinkingIndicator`. Three 0.375rem dots in `currentColor` of an indicator whose text is `--c-muted` (5.74:1 / 7.85:1 on the background, 5.27:1 / 7.11:1 on `--c-surface`), with the label in the small body size. The dots are decorative (the label is the accessible text), so their pulsing opacity (0.25 to 1) carries no contrast requirement; they keep the component's per-state timing (`queued` slowest, `working` fastest) and stand still at 0.6 opacity under `prefers-reduced-motion`. The dots are round, the only round shape of the set: they are not a control.
+
+## Streaming text
+From [components-streaming-text](components/components-streaming-text): `StreamingText`. The text is `--c-text` (17.93:1 / 18.16:1 on the background, 16.44:1 on `--c-surface`) at the body line height (1.5). The caret is a 0.125em wide square bar in `currentColor`, so it always has the contrast of the text it follows and follows both modes with no colour of its own; it blinks at 1s and is steady under `prefers-reduced-motion`. The caret is `aria-hidden` and the text never announces itself.
+
+## Message
+From [components-message](components/components-message): `Message`. The roles are told apart by more than colour: the **user's** message sits at the end of the column on a `--c-surface-active` bubble, the **assistant's** at the start on a `--c-surface` bubble with a 1px `--c-surface-active` border, and the **system's** is centred, unframed and `--c-muted`; every message also shows its author name as a bold caption in `--c-muted` (a visible text cue that does not depend on colour or alignment). Contrast: `--c-text` is 14.23:1 / 13.88:1 on the user bubble and 16.44:1 / 16.44:1 on the assistant one; the name is 4.56:1 / 6.00:1 on the user bubble and 5.27:1 / 7.11:1 on the assistant one; the system text is 5.74:1 / 7.85:1 on the background. The bubbles are square, like the cards, with 0.75rem 1rem of padding, and the bubble fills sit at 1.26:1 / 1.31:1 (`--c-surface-active`) and 1.09:1 / 1.10:1 (`--c-surface`) against the background, so they are a quiet cue and never the only one. A **stopped** note is `--c-muted` text. A **failed** note is a sentence (the mapped error code, never the server's text) in `--c-error` (4.53:1 / 7.16:1) inside a 1px `--c-error` frame (3:1 or more as a graphic) on a `--c-background` fill, so the raw light `error` is not set on the grey bubble, where it would be 4.15:1; it is not colour alone because the sentence says what happened. Actions sit under the content, 0.25rem apart.
+
+## Message list
+From [components-message-list](components/components-message-list): `MessageList`. A scrolling log with no fill of its own: it sits on the page background and the bubbles carry the contrast. Messages are 1rem apart inside 1rem of padding. The log takes keyboard focus so it can be scrolled, and its ring is the theme's 1px `--c-focus` outline drawn inside the box (21:1 / 19.8:1 on the background). The "Jump to latest" button is the secondary Button (see [Buttons](#buttons)) centred on the bottom edge and floating 1rem above it; it appears only when the reader scrolled up. The `empty` slot is an `EmptyState` with 2rem of padding (keep the list on `--c-background`, see [Empty state](#empty-state)). No scroll shadow: the component has no variable for it.
+
 ## Keyboard focus (all controls)
 One rule keeps the controls coherent: **an outlined control thickens its own border from 1px to 2px, black** (text fields,
 select, combobox, date picker, textarea, upload, empty checkbox, off switch, radio, secondary and ghost buttons); **a filled

package/README.md

@@ -29,7 +29,7 @@ peer dependencies).
 ## Color modes
 The theme has a light and a dark palette in one package. The palette is a set of CSS custom properties (`--c-background`, `--c-text`,
 `--c-muted`, `--c-surface`, `--c-surface-active`, `--c-primary`, `--c-on-primary`, `--c-primary-hover`, `--c-primary-active`,
-`--c-disabled-text`, `--c-disabled-border`, `--c-error`, `--c-success`, `--c-warning`, `--c-info`, `--c-focus`) that every component reads. **Dark is opt-in per app**: without
+`--c-disabled-text`, `--c-disabled-border`, `--c-error`, `--c-success`, `--c-warning`, `--c-info`, `--c-focus`, `--c-scrollbar-thumb`, `--c-scrollbar-track`) that every component reads. **Dark is opt-in per app**: without
 the attribute below the app is light, exactly as before.
 
 An app opts in with one line in the file where it imports the theme (`App/theme.js`), setting the mode on `<html>`:
@@ -63,6 +63,19 @@ first paint: put this in the `<head>` of the page, before the stylesheet, with t
 The Sass tokens above stay the static **light** values (for Sass consumers); the dark values are in `scss/_modes.scss`. The page background and
 text color are the app's: give `body` `background: var(--c-background); color: var(--c-text)`.
 
+## Scrollbars
+The theme styles every scroll container with no change in any component: the page, the message list, the table wrapper, the modal and
+drawer bodies, the select, combobox and listbox popups, the sidebar and code blocks. It is two rules: `scrollbar-color: var(--c-scrollbar-thumb)
+var(--c-scrollbar-track)` on `:root` (the property is inherited) and `scrollbar-width: thin` on `*`, because `scrollbar-width` is not inherited and so
+has to be declared on every element. The `*` rule has zero specificity, so any component rule or your own rule wins over it. The colors
+are two palette roles, so they follow `data-mode`; the thickness is the `$scrollbar-width` token.
+
+To change them in your own theme, set `$scrollbar-thumb`, `$scrollbar-track` and `$scrollbar-width` in your `scss/_tokens.scss` (and the
+dark values of the two roles in `scss/_modes.scss`); keep the thumb at 3:1 or more against the track and against the background. The default track is the page background, so inside a surface-coloured container (the sidebar, a card) it shows as a strip of the page colour; a theme that prefers it quieter there sets `$scrollbar-track` to its surface value. An app that
+only needs one scroller to look different overrides the two properties on that element (`scrollbar-color`, `scrollbar-width`); the carousel
+already hides its own bar. Browsers without the standard properties (before Chrome 121, Firefox 64 or Safari 18.2) keep the native bar. See
+[DESIGN.md](DESIGN.md) for the values and limits.
+
 ## Tokens
 The palette and the values shared by every component are Sass variables in `scss/_tokens.scss`, the single source of
 the theme's values (`scss/index.scss` reads them with `@use 'tokens' as *`). The file emits no CSS, so an app can read
@@ -89,6 +102,9 @@ change.
 | `$success` | `#15803d` | success accent and icon (Alert) |
 | `$warning` | `#a16207` | warning accent and icon (Alert) |
 | `$info` | `#1d4ed8` | info accent and icon (Alert) |
+| `$scrollbar-thumb` | `#737373` | scrollbar thumb |
+| `$scrollbar-track` | `$white` | scrollbar track (the page ground) |
+| `$scrollbar-width` | `thin` | scrollbar thickness |
 | `$font-family` | `'Helvetica Neue', Helvetica, Arial, 'Liberation Sans', sans-serif` | type stack |
 | `$font-family-mono` | `ui-monospace, 'SFMono-Regular', Menlo, Consolas, 'Liberation Mono', monospace` | monospace stack for system data and code |
 | `$radius` | `0` | corner radius |
@@ -142,7 +158,7 @@ it: check the names against the theme's `scss/_tokens.scss` before you switch.
 
 ## What it configures
 `components-input`, `-button`, `-checkbox`, `-switch`, `-radio-group`, `-slider`, `-popover`, `-listbox`, `-select`,
-`-combobox`, `-upload`, `-calendar`, `-date-picker`, `-search`, `-typography`, `-card`, `-alert`, `-spinner`, `-modal`, `-toast`, `-divider`, `-badge`, `-tag`, `-link`, `-avatar`, `-skeleton`, `-progress`, `-tooltip`, `-prose`, `-tabs`, `-accordion`, `-breadcrumb`, `-pagination`, `-stepper`, `-sidebar`, `-navbar`, `-drawer`, `-menu`, `-table`, `-list`, `-description-list`, `-stat`, `-empty-state`, `-timeline`, `-tree`, `-code`, `-field`, `-number-input`, `-otp-input`, `-phone`, `-tag-input`, `-time-picker`, `-date-range`, `-rating`, `-color-picker`, `-async-autocomplete`, `-section`, `-faq`, `-carousel`, `-visually-hidden`, `-live-region`, `-theme-switch` and `-icon`. `components-email`, `-password`, `-url` and `-textarea`
+`-combobox`, `-upload`, `-calendar`, `-date-picker`, `-search`, `-typography`, `-card`, `-alert`, `-spinner`, `-modal`, `-toast`, `-divider`, `-badge`, `-tag`, `-link`, `-avatar`, `-skeleton`, `-progress`, `-tooltip`, `-prose`, `-tabs`, `-accordion`, `-breadcrumb`, `-pagination`, `-stepper`, `-sidebar`, `-navbar`, `-drawer`, `-menu`, `-table`, `-list`, `-description-list`, `-stat`, `-empty-state`, `-timeline`, `-tree`, `-code`, `-field`, `-number-input`, `-otp-input`, `-phone`, `-tag-input`, `-time-picker`, `-date-range`, `-rating`, `-color-picker`, `-async-autocomplete`, `-section`, `-faq`, `-carousel`, `-visually-hidden`, `-live-region`, `-theme-switch`, `-icon`, `-ai-label`, `-thinking-indicator`, `-streaming-text`, `-message` and `-message-list`. `components-email`, `-password`, `-url` and `-textarea`
 are styled through the input.
 
 The checkbox's mixed state (`indeterminate`, from the next `components-checkbox` release, class `c-checkbox--indeterminate`) is the checked box with a 10px dash in `--c-on-primary`; on an older checkbox the rule is simply unused.

package/dist/index.css

@@ -16,6 +16,8 @@
   --c-warning: #a16207;
   --c-info: #1d4ed8;
   --c-focus: #000;
+  --c-scrollbar-thumb: #737373;
+  --c-scrollbar-track: #fff;
   color-scheme: light;
 }
 
@@ -36,6 +38,8 @@
   --c-warning: #a16207;
   --c-info: #1d4ed8;
   --c-focus: #000;
+  --c-scrollbar-thumb: #737373;
+  --c-scrollbar-track: #fff;
   color-scheme: light;
 }
 
@@ -56,6 +60,8 @@
   --c-warning: #fbbf24;
   --c-info: #60a5fa;
   --c-focus: #fff;
+  --c-scrollbar-thumb: #737373;
+  --c-scrollbar-track: #0a0a0a;
   color-scheme: dark;
 }
 
@@ -77,9 +83,19 @@
     --c-warning: #fbbf24;
     --c-info: #60a5fa;
     --c-focus: #fff;
+    --c-scrollbar-thumb: #737373;
+    --c-scrollbar-track: #0a0a0a;
     color-scheme: dark;
   }
 }
+:root {
+  scrollbar-color: var(--c-scrollbar-thumb) var(--c-scrollbar-track);
+}
+
+* {
+  scrollbar-width: thin;
+}
+
 .c-input {
   display: block;
   font-family: "Helvetica Neue", Helvetica, Arial, "Liberation Sans", sans-serif;
@@ -5456,3 +5472,278 @@ button.c-theme-switch:focus-visible {
   width: 2rem;
   height: 2rem;
 }
+
+.c-ai-label {
+  display: inline-flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+  align-items: center;
+  vertical-align: middle;
+}
+
+.c-ai-label__details {
+  color: var(--c-muted);
+}
+
+.c-ai-label--sm .c-ai-label__details {
+  font-size: 0.75rem;
+}
+
+.c-ai-label--md .c-ai-label__details {
+  font-size: 0.875rem;
+}
+
+@keyframes c-thinking-indicator-dot {
+  0%, 80%, 100% {
+    opacity: 0.25;
+    transform: scale(0.8);
+  }
+  40% {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+.c-thinking-indicator {
+  --c-thinking-indicator-duration: 1.2s;
+  display: inline-flex;
+  gap: 0.5rem;
+  align-items: center;
+  font-size: 0.875rem;
+  color: var(--c-muted);
+}
+
+.c-thinking-indicator--queued {
+  --c-thinking-indicator-duration: 2.4s;
+}
+
+.c-thinking-indicator--typing {
+  --c-thinking-indicator-duration: 1.2s;
+}
+
+.c-thinking-indicator--reasoning {
+  --c-thinking-indicator-duration: 1.8s;
+}
+
+.c-thinking-indicator--working {
+  --c-thinking-indicator-duration: 0.9s;
+}
+
+.c-thinking-indicator__dots {
+  display: inline-flex;
+  gap: 0.25rem;
+  align-items: center;
+}
+
+.c-thinking-indicator__dot {
+  display: block;
+  width: 0.375rem;
+  height: 0.375rem;
+  background: currentColor;
+  border-radius: 50%;
+  opacity: 0.25;
+  animation: c-thinking-indicator-dot var(--c-thinking-indicator-duration) ease-in-out infinite;
+}
+.c-thinking-indicator__dot:nth-child(2) {
+  animation-delay: 0.15s;
+}
+.c-thinking-indicator__dot:nth-child(3) {
+  animation-delay: 0.3s;
+}
+@media (prefers-reduced-motion: reduce) {
+  .c-thinking-indicator__dot {
+    opacity: 0.6;
+    animation: none;
+  }
+}
+
+.c-thinking-indicator__label--hidden {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  white-space: nowrap;
+  border: 0;
+  clip-path: inset(50%);
+}
+
+@keyframes c-streaming-text-caret {
+  0%, 45% {
+    opacity: 1;
+  }
+  55%, 100% {
+    opacity: 0;
+  }
+}
+.c-streaming-text {
+  color: var(--c-text);
+  overflow-wrap: anywhere;
+}
+
+.c-streaming-text--plain {
+  line-height: 1.5;
+  white-space: pre-wrap;
+}
+
+.c-streaming-text__caret {
+  display: inline-block;
+  width: 0.125em;
+  height: 1.1em;
+  margin-inline-start: 0.125em;
+  vertical-align: text-bottom;
+  background: currentColor;
+  border-radius: 0;
+  animation: c-streaming-text-caret 1s step-end infinite;
+}
+@media (prefers-reduced-motion: reduce) {
+  .c-streaming-text__caret {
+    animation: none;
+  }
+}
+
+.c-message {
+  box-sizing: border-box;
+  display: flex;
+  gap: 0.75rem;
+  align-items: flex-start;
+  max-width: 42rem;
+}
+
+.c-message--user {
+  align-self: flex-end;
+  flex-direction: row-reverse;
+  color: var(--c-text);
+}
+
+.c-message--assistant {
+  align-self: flex-start;
+  color: var(--c-text);
+}
+
+.c-message--system {
+  align-self: center;
+  font-size: 0.875rem;
+  color: var(--c-muted);
+}
+
+.c-message__avatar {
+  flex: none;
+}
+
+.c-message__body {
+  box-sizing: border-box;
+  display: flex;
+  flex: 0 1 auto;
+  flex-direction: column;
+  gap: 0.5rem;
+  min-width: 0;
+  padding: 0.75rem 1rem;
+  border: 1px solid transparent;
+  border-radius: 0;
+}
+
+.c-message--user .c-message__body {
+  background: var(--c-surface-active);
+  border-color: var(--c-surface-active);
+}
+
+.c-message--assistant .c-message__body {
+  background: var(--c-surface);
+  border-color: var(--c-surface-active);
+}
+
+.c-message--system .c-message__body {
+  background: transparent;
+  border-color: transparent;
+}
+
+.c-message__header {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.75rem;
+  align-items: center;
+}
+
+.c-message__name {
+  display: block;
+  font-size: 0.75rem;
+  font-weight: 700;
+  color: var(--c-muted);
+}
+
+.c-message__content {
+  min-width: 0;
+}
+
+.c-message__note {
+  margin: 0;
+  font-size: 0.875rem;
+}
+
+.c-message__note--stopped {
+  color: var(--c-muted);
+}
+
+.c-message__note--failed {
+  padding: 0.5rem 0.75rem;
+  color: var(--c-error);
+  background: var(--c-background);
+  border: 1px solid var(--c-error);
+  border-radius: 0;
+}
+
+.c-message__actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.25rem;
+  margin-top: 0.25rem;
+}
+
+.c-message-list {
+  position: relative;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  min-height: 0;
+}
+
+.c-message-list__log {
+  box-sizing: border-box;
+  flex: 1 1 auto;
+  min-height: 0;
+  padding: 1rem;
+  overflow-y: auto;
+  overscroll-behavior: contain;
+  overflow-anchor: none;
+  background: transparent;
+}
+.c-message-list__log:focus-visible {
+  outline: 1px solid var(--c-focus);
+  outline-offset: -2px;
+}
+
+.c-message-list__content {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+.c-message-list__empty {
+  padding: 2rem;
+}
+
+.c-message-list__jump {
+  position: absolute;
+  right: 0;
+  bottom: 1rem;
+  left: 0;
+  z-index: 1;
+  display: flex;
+  justify-content: center;
+  pointer-events: none;
+}
+.c-message-list__jump > * {
+  pointer-events: auto;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@carissa-io/theme-default",
-  "version": "0.3.14",
+  "version": "0.3.16",
   "description": "Carissa UI: the default theme (Swiss minimalism) as SCSS variable overrides of the Carissa components, with a compiled CSS build",
   "type": "module",
   "style": "dist/index.css",
@@ -100,7 +100,12 @@
     "@carissa-io/components-visually-hidden": "^0.1.0",
     "@carissa-io/components-live-region": "^0.1.0",
     "@carissa-io/components-theme-switch": "^0.1.0",
-    "@carissa-io/components-icon": "^0.1.0"
+    "@carissa-io/components-icon": "^0.1.0",
+    "@carissa-io/components-ai-label": "^0.1.0",
+    "@carissa-io/components-thinking-indicator": "^0.1.0",
+    "@carissa-io/components-streaming-text": "^0.1.0",
+    "@carissa-io/components-message": "^0.1.0",
+    "@carissa-io/components-message-list": "^0.1.0"
   },
   "peerDependenciesMeta": {
     "@carissa-io/components-input": {
@@ -303,10 +308,26 @@
     },
     "@carissa-io/components-icon": {
       "optional": true
+    },
+    "@carissa-io/components-ai-label": {
+      "optional": true
+    },
+    "@carissa-io/components-thinking-indicator": {
+      "optional": true
+    },
+    "@carissa-io/components-streaming-text": {
+      "optional": true
+    },
+    "@carissa-io/components-message": {
+      "optional": true
+    },
+    "@carissa-io/components-message-list": {
+      "optional": true
     }
   },
   "devDependencies": {
     "@carissa-io/components-accordion": "^0.1.0",
+    "@carissa-io/components-ai-label": "^0.1.0",
     "@carissa-io/components-alert": "^0.1.0",
     "@carissa-io/components-async-autocomplete": "^0.1.0",
     "@carissa-io/components-avatar": "^0.1.0",
@@ -335,6 +356,8 @@
     "@carissa-io/components-listbox": "^0.1.1",
     "@carissa-io/components-live-region": "^0.1.0",
     "@carissa-io/components-menu": "^0.1.0",
+    "@carissa-io/components-message": "^0.1.0",
+    "@carissa-io/components-message-list": "^0.1.0",
     "@carissa-io/components-modal": "^0.1.2",
     "@carissa-io/components-navbar": "^0.1.0",
     "@carissa-io/components-number-input": "^0.1.0",
@@ -355,12 +378,14 @@
     "@carissa-io/components-spinner": "^0.1.0",
     "@carissa-io/components-stat": "^0.1.0",
     "@carissa-io/components-stepper": "^0.1.0",
+    "@carissa-io/components-streaming-text": "^0.1.0",
     "@carissa-io/components-switch": "^0.1.1",
     "@carissa-io/components-table": "^0.1.0",
     "@carissa-io/components-tabs": "^0.1.0",
     "@carissa-io/components-tag": "^0.1.0",
     "@carissa-io/components-tag-input": "^0.1.0",
     "@carissa-io/components-theme-switch": "^0.1.0",
+    "@carissa-io/components-thinking-indicator": "^0.1.0",
     "@carissa-io/components-time-picker": "^0.1.0",
     "@carissa-io/components-timeline": "^0.1.0",
     "@carissa-io/components-toast": "^0.1.0",

package/scss/_modes.scss

@@ -1,5 +1,6 @@
 // Carissa Default theme color modes: the light and dark palettes, emitted as CSS custom properties (`--c-<role>`).
-// Loading this partial emits the CSS below (`@use 'modes' as *` in index.scss); `_tokens.scss` stays Sass-only.
+// Loading this partial emits the CSS below (`@use 'modes' as *` in index.scss), including the two scrollbar rules (`:root` and `*`) at the end;
+// `_tokens.scss` stays Sass-only.
 //
 //   no attribute            light (the default)
 //   data-mode="light"       light
@@ -28,6 +29,8 @@ $light: (
     'warning': t.$warning,
     'info': t.$info,
     'focus': t.$focus-color,
+    'scrollbar-thumb': t.$scrollbar-thumb,
+    'scrollbar-track': t.$scrollbar-track,
 );
 
 // Dark: near-black ground, the contrast of the light theme inverted (see DESIGN.md for the ratios).
@@ -48,6 +51,8 @@ $dark: (
     'warning': #fbbf24,
     'info': #60a5fa,
     'focus': #fff,
+    'scrollbar-thumb': #737373,
+    'scrollbar-track': #0a0a0a, // the dark background
 );
 
 // What the component blocks read: `var(--c-<role>)`, one per role.
@@ -67,6 +72,8 @@ $var-success: var(--c-success);
 $var-warning: var(--c-warning);
 $var-info: var(--c-info);
 $var-focus: var(--c-focus);
+$var-scrollbar-thumb: var(--c-scrollbar-thumb);
+$var-scrollbar-track: var(--c-scrollbar-track);
 
 // The dropdown arrow of Select, Combobox and Date picker (the same roles as the `$arrow-*` tokens).
 $var-arrow-color: $var-muted;
@@ -97,3 +104,16 @@ $var-arrow-color-disabled: $var-disabled-text;
         @include palette($dark, dark);
     }
 }
+
+// Scrollbars, in two rules because the two properties differ. `scrollbar-color` is inherited, so one declaration on `:root` reaches every
+// scroll container. `scrollbar-width` is NOT inherited (only the page viewport would get it), so it is declared on every element with the
+// universal selector. `*` has zero specificity (`:where(*)` would be the same; `*` is plain and just as supported), so it never beats a
+// component rule: a scroller that sets its own width (the carousel hides its bar with `scrollbar-width: none`) keeps it, in any order.
+// Standard properties only: colour and thickness, no rounding.
+:root {
+    scrollbar-color: $var-scrollbar-thumb $var-scrollbar-track;
+}
+
+* {
+    scrollbar-width: t.$scrollbar-width;
+}

package/scss/_tokens.scss

@@ -21,6 +21,10 @@ $error: #dc3545;
 $success: #15803d;
 $warning: #a16207;
 $info: #1d4ed8;
+// Scrollbars (every scroll container inherits them from `:root`): a neutral thumb on a track that is the page ground, thin.
+$scrollbar-thumb: #737373; // 4.74:1 on the white track and background (the neutral 500)
+$scrollbar-track: $white; // the light background: the track is the page ground
+$scrollbar-width: thin;
 
 // Values shared by every component, so the whole theme moves together.
 $font-family: ('Helvetica Neue', Helvetica, Arial, 'Liberation Sans', sans-serif);

package/scss/index.scss

@@ -1725,3 +1725,87 @@
     $c-icon-size-lg: 1.5rem,
     $c-icon-size-xl: 2rem
 );
+
+// AI label: the mark is a neutral Badge (configured above; the ai-label index forwards its styles, so this block comes after
+// the Badge one) and the optional details line is --c-muted text (5.74:1 / 7.85:1 on the background, 5.27:1 / 7.11:1 on
+// --c-surface) in the theme's caption and small sizes. It reads as text beside the mark: nothing opens.
+@use '@carissa-io/components-ai-label/scss' as ai-label with (
+    $c-ai-label-gap: 0.5rem,
+    $c-ai-label-details-color: $var-muted,
+    $c-ai-label-details-font-size-sm: $font-size-caption,
+    $c-ai-label-details-font-size-md: $font-size-small
+);
+
+// Thinking indicator: the three dots are the text colour of the indicator, --c-muted (5.74:1 / 7.85:1 on the background; the
+// dots are decorative, the label carries the meaning), and they keep the component's own timing; the animation stops under
+// prefers-reduced-motion. The label is the theme's small body text in the same --c-muted.
+@use '@carissa-io/components-thinking-indicator/scss' as thinking-indicator with (
+    $c-thinking-indicator-gap: 0.5rem,
+    $c-thinking-indicator-color: $var-muted,
+    $c-thinking-indicator-font-size: $font-size-small,
+    $c-thinking-indicator-dot-color: currentColor
+);
+
+// Streaming text: the answer is --c-text (17.93:1 / 18.16:1 on the background) at the theme's body line height. The caret is a
+// thin square bar in currentColor, so it always has the contrast of the text it follows, in both modes; it is steady under
+// prefers-reduced-motion. No other block forwards it.
+@use '@carissa-io/components-streaming-text/scss' as streaming-text with (
+    $c-streaming-text-color: $var-text,
+    $c-streaming-text-line-height: $line-height-normal,
+    $c-streaming-text-caret-color: currentColor,
+    $c-streaming-text-caret-width: 0.125em,
+    $c-streaming-text-caret-radius: 0
+);
+
+// Message: the roles differ by more than colour. The user's message sits at the end of the column on a --c-surface-active bubble
+// (--c-text 14.23:1 / 13.88:1), the assistant's at the start on --c-surface (16.44:1 / 16.44:1) and the system's is centred, muted
+// (--c-muted 5.74:1 / 7.85:1 on the background) and unframed; every message also shows its author name, a bold caption in --c-muted
+// (5.27:1 / 7.11:1 on --c-surface, 4.56:1 / 6.00:1 on --c-surface-active). Bubbles are square like the cards. A stopped note is
+// --c-muted text; a failed one is --c-error text in a 1px --c-error frame on --c-background (4.53:1 / 7.16:1), a sentence and a frame,
+// never colour alone. No other block forwards it.
+@use '@carissa-io/components-message/scss' as message with (
+    $c-message-gap: 0.75rem,
+    $c-message-max-width: 42rem,
+    $c-message-padding-y: 0.75rem,
+    $c-message-padding-x: 1rem,
+    $c-message-radius: $radius,
+    $c-message-border-width: 1px,
+    $c-message-body-gap: 0.5rem,
+    $c-message-user-color: $var-text,
+    $c-message-user-background: $var-surface-active,
+    $c-message-user-border-color: $var-surface-active,
+    $c-message-assistant-color: $var-text,
+    $c-message-assistant-background: $var-surface,
+    $c-message-assistant-border-color: $var-surface-active,
+    $c-message-system-color: $var-muted,
+    $c-message-system-background: transparent,
+    $c-message-system-border-color: transparent,
+    $c-message-system-font-size: $font-size-small,
+    $c-message-name-color: $var-muted,
+    $c-message-name-font-size: $font-size-caption,
+    $c-message-name-font-weight: $font-weight-bold,
+    $c-message-header-gap: 0.75rem,
+    $c-message-note-font-size: $font-size-small,
+    $c-message-stopped-color: $var-muted,
+    $c-message-failed-color: $var-error,
+    $c-message-failed-background: $var-background,
+    $c-message-failed-border-color: $var-error,
+    $c-message-failed-radius: $radius,
+    $c-message-failed-padding: 0.5rem 0.75rem,
+    $c-message-actions-gap: 0.25rem,
+    $c-message-actions-margin-top: 0.25rem
+);
+
+// Message list: no fill of its own (it sits on the page background, so the bubbles above carry the contrast). The log takes
+// keyboard focus, so it gets the theme's 1px --c-focus ring drawn inside (21:1 / 19.8:1). The "Jump to latest" button is the
+// secondary Button (configured above; the list index forwards its styles, so this block comes after the Button, Live region
+// and Icon ones) floating 1rem above the bottom edge, centred. The empty state is the EmptyState's (configured above).
+@use '@carissa-io/components-message-list/scss' as message-list with (
+    $c-message-list-padding: 1rem,
+    $c-message-list-gap: 1rem,
+    $c-message-list-focus-outline: $focus-width solid $var-focus,
+    $c-message-list-focus-outline-offset: -2px,
+    $c-message-list-empty-padding: 2rem,
+    $c-message-list-jump-bottom: 1rem,
+    $c-message-list-jump-z-index: 1
+);