@carissa-io/theme-default 0.3.14 → 0.3.15

package/DESIGN.md

@@ -451,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

@@ -5456,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.14",
+  "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",
@@ -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/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
+);