@carissa-io/theme-default 0.3.13 → 0.3.15

package/DESIGN.md

@@ -270,6 +270,16 @@ The close button is a plain "x" in `--c-muted`, `--c-text` on hover, with the us
 components, and it is the same in both modes (it dims whatever mode the page is in). The box fades in and rises 0.5rem in `$transition-duration`; with reduced motion it
 just appears.
 
+**Scroll edges (Modal and Drawer).** The body scrolls between the header and the footer, so a long body used to be cut flush against the title and the buttons with nothing
+to show where the scroll area ends. The theme draws that edge: a **1px `--c-disabled-border` line** under the header and over the footer (the footer line exists only
+when there is a footer), plus a fixed 0.5rem gap between each line and the header or footer content (the components' default, left as it is). The line is the quiet
+neutral border, not `--c-muted` (the Divider's 5.74:1 line would compete with the content and with the box border): on `--c-background` it is **1.48:1 in light**
+(`#d4d4d4` on `#fff`) and **1.91:1 in dark** (`#404040` on `#0a0a0a`). It is a decorative separator (the scroll position and the content are exposed by the scrollable region
+itself), so the 3:1 non-text minimum does not apply; the test only requires it to be distinguishable from the background (above 1.1:1) and records the two ratios,
+in the same spirit as the Progress track (a faint guide, 1.3:1). It is a custom property, so dark mode needs no extra rule. The unscrolled layout is the same as before:
+the header keeps 1.25rem above and 0.5rem below its content, and the body keeps the remaining 0.75rem (1.25rem less the 0.5rem gap) on each side, so the distance
+between the title and the content is still 1.25rem, now with the line inside it; a body without a header or without a footer keeps the whole 1.25rem on that side.
+
 ## Toast
 From [components-toast](components/components-toast): the fixed region of toasts (24rem wide, 1rem from the edges, 0.75rem between toasts, above the page content) and its six
 placements. The look of each toast is the Alert's (see above), so its colors, roles and contrast are the Alert's in both modes. The action is a bold, underlined
@@ -359,6 +369,7 @@ and `--c-text` for the current page (`aria-current="page"`). The content collaps
 From [components-drawer](components/components-drawer): `Drawer`, the Modal's box as a panel on an edge of the screen (`start`, `end`, `top`, `bottom`; `sm` 20rem, `md` 28rem, `lg` 40rem). It is `--c-background` with `--c-text` (17.93:1 / 18.16:1), a 1px `--c-muted` border
 (the edge that still reads in dark), square, with the Modal's layered shadow and the same padding (1.5rem by 1.25rem) and close button (`--c-muted`, `--c-text` on hover). The **backdrop** is `rgb(0 0 0 / 0.5)` in both modes, with the shadow the only literal color of the block.
 The panel slides in over `$transition-duration`; with reduced motion it just appears.
+The header and footer lines and the 0.5rem gaps are the Modal's (see [Modal](#modal), scroll edges): 1px `--c-disabled-border`, 1.48:1 light and 1.91:1 dark on `--c-background`.
 
 ## Menu
 From [components-menu](components/components-menu): `Menu`, `MenuItem`, `MenuSeparator` and `MenuLabel`. The panel is the Popover's (`--c-background`, a 1px `--c-muted` border, flat). Items are `--c-text` with 0.625rem of block and 0.75rem of side padding, and hover and keyboard focus share a `--c-surface-active`
@@ -440,6 +451,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

@@ -142,7 +142,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

@@ -1651,7 +1651,8 @@
   gap: 1rem;
   align-items: flex-start;
   justify-content: space-between;
-  padding: 1.25rem 1.5rem 0;
+  padding: 1.25rem 1.5rem 0.5rem;
+  border-bottom: 1px solid var(--c-disabled-border);
 }
 
 .c-modal__heading {
@@ -1692,9 +1693,17 @@
 .c-modal__body {
   flex: 1 1 auto;
   min-height: 0;
-  padding: 1.25rem 1.5rem;
+  padding-inline: 1.5rem;
+  padding-top: max(0px, 1.25rem - 0.5rem);
+  padding-bottom: max(0px, 1.25rem - 0.5rem);
   overflow-y: auto;
 }
+.c-modal__body:first-child {
+  padding-top: 1.25rem;
+}
+.c-modal__body:last-child {
+  padding-bottom: 1.25rem;
+}
 
 .c-modal__footer {
   display: flex;
@@ -1702,7 +1711,8 @@
   flex-wrap: wrap;
   gap: 1rem;
   justify-content: flex-end;
-  padding: 0 1.5rem 1.25rem;
+  padding: 0.5rem 1.5rem 1.25rem;
+  border-top: 1px solid var(--c-disabled-border);
 }
 
 @keyframes c-toast-enter {
@@ -3563,7 +3573,8 @@ hr.c-divider {
   gap: 1rem;
   align-items: flex-start;
   justify-content: space-between;
-  padding: 1.25rem 1.5rem 0;
+  padding: 1.25rem 1.5rem 0.5rem;
+  border-bottom: 1px solid var(--c-disabled-border);
 }
 
 .c-drawer__heading {
@@ -3604,9 +3615,17 @@ hr.c-divider {
 .c-drawer__body {
   flex: 1 1 auto;
   min-height: 0;
-  padding: 1.25rem 1.5rem;
+  padding-inline: 1.5rem;
+  padding-top: max(0px, 1.25rem - 0.5rem);
+  padding-bottom: max(0px, 1.25rem - 0.5rem);
   overflow-y: auto;
 }
+.c-drawer__body:first-child {
+  padding-top: 1.25rem;
+}
+.c-drawer__body:last-child {
+  padding-bottom: 1.25rem;
+}
 
 .c-drawer__footer {
   display: flex;
@@ -3614,7 +3633,8 @@ hr.c-divider {
   flex-wrap: wrap;
   gap: 1rem;
   justify-content: flex-end;
-  padding: 0 1.5rem 1.25rem;
+  padding: 0.5rem 1.5rem 1.25rem;
+  border-top: 1px solid var(--c-disabled-border);
 }
 
 .c-menu {
@@ -5436,3 +5456,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.13",
+  "version": "0.3.15",
   "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",
@@ -56,7 +56,7 @@
     "@carissa-io/components-card": "^0.1.0",
     "@carissa-io/components-alert": "^0.1.0",
     "@carissa-io/components-spinner": "^0.1.0",
-    "@carissa-io/components-modal": "^0.1.0",
+    "@carissa-io/components-modal": "^0.1.2",
     "@carissa-io/components-toast": "^0.1.0",
     "@carissa-io/components-divider": "^0.1.0",
     "@carissa-io/components-badge": "^0.1.0",
@@ -74,7 +74,7 @@
     "@carissa-io/components-stepper": "^0.1.0",
     "@carissa-io/components-sidebar": "^0.1.0",
     "@carissa-io/components-navbar": "^0.1.0",
-    "@carissa-io/components-drawer": "^0.1.0",
+    "@carissa-io/components-drawer": "^0.1.2",
     "@carissa-io/components-menu": "^0.1.0",
     "@carissa-io/components-table": "^0.1.0",
     "@carissa-io/components-list": "^0.1.0",
@@ -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",
@@ -324,7 +345,7 @@
     "@carissa-io/components-date-range": "^0.1.0",
     "@carissa-io/components-description-list": "^0.1.0",
     "@carissa-io/components-divider": "^0.1.0",
-    "@carissa-io/components-drawer": "^0.1.0",
+    "@carissa-io/components-drawer": "^0.1.2",
     "@carissa-io/components-empty-state": "^0.1.0",
     "@carissa-io/components-faq": "^0.1.0",
     "@carissa-io/components-field": "^0.1.0",
@@ -335,7 +356,9 @@
     "@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-modal": "^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",
     "@carissa-io/components-otp-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/index.scss

@@ -655,7 +655,8 @@
 // Modal: a box on the page background with a 1px muted border (the edge that still reads in dark, where a shadow is almost
 // invisible), the theme radius, and the same 1.5rem / 1.25rem padding as Card. The backdrop is the one literal color: black
 // at 50%, the same in both modes. Its index forwards the typography styles, already loaded and configured above, so this
-// block goes after the Typography one (and after Card, which forwards it too).
+// block goes after the Typography one (and after Card, which forwards it too). The scroll edges: a 1px --c-disabled-border line
+// under the header and over the footer (the clip edge of the scrolling body), with the component's default 0.5rem gaps.
 @use '@carissa-io/components-modal/scss' as modal with (
     $c-modal-background: $var-background,
     $c-modal-color: $var-text,
@@ -666,6 +667,10 @@
     $c-modal-padding-x: 1.5rem,
     $c-modal-padding-y: 1.25rem,
     $c-modal-gap: 1rem,
+    $c-modal-header-divider-width: 1px,
+    $c-modal-header-divider-color: $var-disabled-border,
+    $c-modal-footer-divider-width: 1px,
+    $c-modal-footer-divider-color: $var-disabled-border,
     $c-modal-margin: 1rem,
     $c-modal-width-sm: 24rem,
     $c-modal-width-md: 32rem,
@@ -1141,7 +1146,7 @@
 // Drawer: the Modal's box as a panel on the edge: --c-background with --c-text, a 1px --c-muted border (the edge that still
 // reads in dark), the same padding and the same close button. The backdrop is the one literal color, black at 50% in both
 // modes, and so is the shadow. Its index forwards the typography styles, already loaded and configured above: this block
-// goes after the Typography one.
+// goes after the Typography one. The scroll edges are the Modal's: 1px --c-disabled-border lines, default 0.5rem gaps.
 @use '@carissa-io/components-drawer/scss' as drawer with (
     $c-drawer-background: $var-background,
     $c-drawer-color: $var-text,
@@ -1152,6 +1157,10 @@
     $c-drawer-padding-x: 1.5rem,
     $c-drawer-padding-y: 1.25rem,
     $c-drawer-gap: 1rem,
+    $c-drawer-header-divider-width: 1px,
+    $c-drawer-header-divider-color: $var-disabled-border,
+    $c-drawer-footer-divider-width: 1px,
+    $c-drawer-footer-divider-color: $var-disabled-border,
     $c-drawer-size-sm: 20rem,
     $c-drawer-size-md: 28rem,
     $c-drawer-size-lg: 40rem,
@@ -1716,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
+);