@carissa-io/theme-default 0.3.18 → 0.3.20

package/DESIGN.md

@@ -477,6 +477,15 @@ From [components-message](components/components-message): `Message`. The roles a
 ## 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.
 
+## Prompt input
+From [components-prompt-input](components/components-prompt-input): `PromptInput`. The composer is a `--c-surface` panel with a 1px `--c-muted` frame (5.27:1 / 7.11:1 on `--c-surface`, 5.74:1 / 7.85:1 on the background, so 3:1 or more as a graphic), square, with 0.5rem of padding and 0.5rem between the attachments row and the field row. The field is the Input, so it stays on `--c-background` inside the panel and keeps its own states: `--c-muted` border, `--c-primary` on hover, and the thick `--c-focus` ring on keyboard focus (21:1 / 19.8:1), which is the focus ring of the composer (the panel has no ring of its own). The send button is the primary Button with an arrow icon, and while an answer streams it becomes the same button with a stop icon, so the control never moves. The buttons sit at the last line (`flex-end`) while the field grows, the field never shows a resize handle, and `min-width: 0` lets it shrink in a narrow column, so growing to `max_rows` shifts nothing around it. Known limit: the Input's textarea minimum height (6rem) applies to the field, so the composer starts about four lines tall whatever `rows` says; a theme cannot lower it for the composer alone. A disabled composer relies on the Input's disabled colours (`--c-disabled-text` on `--c-surface`, exempt from contrast), so the panel keeps full opacity.
+
+## Suggested prompts
+From [components-suggested-prompts](components/components-suggested-prompts): `SuggestedPrompts`. Each suggestion is a secondary Button (see [Buttons](#buttons)): `--c-text` label on `--c-background` (17.93:1 / 18.16:1) with a 1px `--c-muted` border, `--c-primary` on hover. Horizontal suggestions are 0.5rem apart and wrap onto as many lines as needed, starting at the start edge; vertical ones stack at full width with the label at the start. Each keeps the 44px touch target of the Button. The group has no fill or frame of its own.
+
+## Message actions
+From [components-message-actions](components/components-message-actions): `MessageActions`. Quiet ghost icon buttons (transparent, a `--c-surface` fill on hover, `--c-surface-active` while pressed), 0.25rem apart, 16px icons in the `--c-text` colour (14.23:1 / 13.88:1 or more on the bubbles). Keyboard focus is the Button's `--c-focus` ring on the item that holds the roving focus. A chosen thumb takes `--c-info` (6.15:1 / 7.05:1 on `--c-surface`, 6.70:1 / 7.79:1 on the background) and a copied action `--c-success` (4.60:1 / 10.29:1 on `--c-surface`, 5.02:1 / 11.36:1 on the background; 3.98:1 on `--c-surface-active` in light, which is above the 3:1 an icon needs). Neither state is colour alone: the thumb carries `aria-pressed` and the copied action swaps the copy icon for a check and takes the `Copied` name, which is also announced. The component has no variable for a fill on the chosen thumb, so the visible cue of the chosen thumb is its colour; a filled icon or a background would be a component release.
+
 ## 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

@@ -169,7 +169,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`, `-icon`, `-ai-label`, `-thinking-indicator`, `-streaming-text`, `-message` and `-message-list`. `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`, `-message-list`, `-prompt-input`, `-suggested-prompts` and `-message-actions`. `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

@@ -5787,3 +5787,110 @@ button.c-theme-switch:focus-visible {
 .c-message-list__jump > * {
   pointer-events: auto;
 }
+
+.c-prompt-input {
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  padding: 0.5rem;
+  border: 1px solid var(--c-muted);
+  border-radius: 0;
+  background: var(--c-surface);
+}
+
+.c-prompt-input--disabled {
+  opacity: 1;
+}
+
+.c-prompt-input__attachments {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+}
+
+.c-prompt-input__row {
+  display: flex;
+  align-items: flex-end;
+  gap: 0.5rem;
+}
+
+.c-prompt-input__actions {
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+}
+
+.c-prompt-input__input {
+  flex: 1 1 auto;
+  min-width: 0;
+}
+.c-prompt-input__input .c-input__control {
+  resize: none;
+  min-height: 0;
+}
+
+.c-prompt-input .c-prompt-input__input .c-input__box {
+  border: 0;
+  background: transparent;
+  padding-top: 0.8125rem;
+  padding-bottom: 0.8125rem;
+  padding-left: 0.25rem;
+  padding-right: 0.25rem;
+  min-height: 0;
+}
+.c-prompt-input .c-prompt-input__input .c-input__box:focus-within {
+  box-shadow: none;
+}
+
+.c-prompt-input:focus-within {
+  border-color: var(--c-focus);
+  box-shadow: 0 0 0 1px var(--c-focus);
+}
+
+.c-prompt-input__send,
+.c-prompt-input__stop {
+  flex: 0 0 auto;
+}
+
+.c-suggested-prompts {
+  box-sizing: border-box;
+  display: flex;
+  gap: 0.5rem;
+  padding: 0;
+}
+
+.c-suggested-prompts--horizontal {
+  flex-flow: row wrap;
+  justify-content: flex-start;
+}
+
+.c-suggested-prompts--vertical {
+  flex-direction: column;
+  align-items: stretch;
+}
+.c-suggested-prompts--vertical .c-suggested-prompts__item {
+  justify-content: start;
+  text-align: start;
+}
+
+.c-message-actions {
+  box-sizing: border-box;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.25rem;
+  padding: 0;
+}
+
+.c-message-actions__action--pressed {
+  color: var(--c-info);
+}
+
+.c-message-actions__action[aria-pressed=true] {
+  background: transparent;
+}
+
+.c-message-actions__action--copied {
+  color: var(--c-success);
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@carissa-io/theme-default",
-  "version": "0.3.18",
+  "version": "0.3.20",
   "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",
@@ -105,7 +105,10 @@
     "@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"
+    "@carissa-io/components-message-list": "^0.1.0",
+    "@carissa-io/components-prompt-input": "^0.1.2",
+    "@carissa-io/components-suggested-prompts": "^0.1.0",
+    "@carissa-io/components-message-actions": "^0.1.0"
   },
   "peerDependenciesMeta": {
     "@carissa-io/components-input": {
@@ -323,6 +326,15 @@
     },
     "@carissa-io/components-message-list": {
       "optional": true
+    },
+    "@carissa-io/components-prompt-input": {
+      "optional": true
+    },
+    "@carissa-io/components-suggested-prompts": {
+      "optional": true
+    },
+    "@carissa-io/components-message-actions": {
+      "optional": true
     }
   },
   "devDependencies": {
@@ -357,6 +369,7 @@
     "@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-actions": "^0.1.0",
     "@carissa-io/components-message-list": "^0.1.0",
     "@carissa-io/components-modal": "^0.1.3",
     "@carissa-io/components-navbar": "^0.1.0",
@@ -366,6 +379,7 @@
     "@carissa-io/components-phone": "^0.1.0",
     "@carissa-io/components-popover": "^0.1.1",
     "@carissa-io/components-progress": "^0.1.0",
+    "@carissa-io/components-prompt-input": "^0.1.2",
     "@carissa-io/components-prose": "^0.1.0",
     "@carissa-io/components-radio-group": "^0.1.1",
     "@carissa-io/components-rating": "^0.1.0",
@@ -379,11 +393,13 @@
     "@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-suggested-prompts": "^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-textarea": "^0.1.1",
     "@carissa-io/components-theme-switch": "^0.1.0",
     "@carissa-io/components-thinking-indicator": "^0.1.0",
     "@carissa-io/components-time-picker": "^0.1.0",

package/scss/index.scss

@@ -1809,3 +1809,55 @@
     $c-message-list-jump-bottom: 1rem,
     $c-message-list-jump-z-index: 1
 );
+
+// Prompt input: the composer is a --c-surface panel with a 1px --c-muted frame (5.27:1 / 7.11:1 on --c-surface, 3:1 or more as a
+// graphic) around the attachments, the actions, the field and the send button. The field is the Input (configured above), so it
+// stays white on the panel and keeps its own hover border and --c-focus ring (the thick one of every outlined control). The send
+// and stop button is the primary Button. Corners are square and the buttons sit on the last line while the field grows, so
+// nothing shifts. The textarea minimum height of the Input (6rem) also applies to the field. The prompt input forwards the
+// textarea (so the input), button and icon styles: this block comes after those. No other block forwards it.
+@use '@carissa-io/components-prompt-input/scss' as prompt-input with (
+    $c-prompt-input-gap: 0.5rem,
+    $c-prompt-input-padding: 0.5rem,
+    $c-prompt-input-background: $var-surface,
+    $c-prompt-input-border: 1px solid $var-muted,
+    $c-prompt-input-radius: $radius,
+    $c-prompt-input-row-gap: 0.5rem,
+    $c-prompt-input-row-align: flex-end,
+    $c-prompt-input-attachments-gap: 0.5rem,
+    $c-prompt-input-actions-gap: 0.25rem,
+    $c-prompt-input-input-min-width: 0,
+    $c-prompt-input-input-resize: none,
+    // One box, not a box in a box: the field inside is flat, as tall as the 44px send button on one line, and the composer's own
+    // border shows the focus (the Input's ring is turned off inside it).
+    $c-prompt-input-input-border: 0,
+    $c-prompt-input-input-background: transparent,
+    $c-prompt-input-input-padding-y: 0.8125rem,
+    $c-prompt-input-input-padding-x: 0.25rem,
+    $c-prompt-input-input-box-min-height: 0,
+    $c-prompt-input-input-focus-shadow: none,
+    $c-prompt-input-border-color-focus: $var-focus,
+    $c-prompt-input-focus-shadow: 0 0 0 $focus-width $var-focus,
+    $c-prompt-input-disabled-opacity: 1
+);
+
+// Suggested prompts: the starter questions are secondary Buttons (configured above; the index forwards their styles, so this block
+// comes after the Button one): a 1px --c-muted border and --c-text label, black on hover. 0.5rem apart, they wrap onto several
+// lines when horizontal and stack at full width, label at the start, when vertical.
+@use '@carissa-io/components-suggested-prompts/scss' as suggested-prompts with (
+    $c-suggested-prompts-gap: 0.5rem,
+    $c-suggested-prompts-padding: 0,
+    $c-suggested-prompts-justify: flex-start,
+    $c-suggested-prompts-item-text-align: start
+);
+
+// Message actions: quiet ghost icon buttons (transparent, a --c-surface fill on hover) 0.25rem apart, each with the Button's
+// --c-focus ring on the one that holds the roving focus. A chosen thumb takes --c-info (6.15:1 / 7.05:1 on --c-surface) and a
+// copied one --c-success (4.60:1 / 10.29:1), and the copied one also swaps to a check icon; the thumbs also carry aria-pressed.
+// The index forwards the button, icon and live-region styles: this block comes after those.
+@use '@carissa-io/components-message-actions/scss' as message-actions with (
+    $c-message-actions-gap: 0.25rem,
+    $c-message-actions-padding: 0,
+    $c-message-actions-pressed-color: $var-info,
+    $c-message-actions-copied-color: $var-success
+);