@happyvertical/smrt-ui 0.34.5 → 0.34.7

package/AGENTS.md

@@ -14,11 +14,20 @@ SMRT has one shared set of UI primitives, split across two packages by concern:
 
 - **`smrt-ui` (here) owns the domain-agnostic VISUAL primitives** — `Button`,
   `Card`, `Modal`/`ConfirmDialog`, `Badge`, `Avatar`, `Chip`, `Dropdown`,
-  `Tooltip`, `Skeleton`, `Tree`, `Pagination`, `DataTable`, … (it has **no**
-  form-input components — those carry i18n/voice logic and belong above the leaf).
-- **`smrt-svelte` owns the FORM primitives** — `Input`, `Textarea`, `Select`,
-  `Checkbox`/`Toggle`, `Form`, and the specialized date/measurement/address/file
-  inputs.
+  `Tooltip`, `Skeleton`, `Tree`, `Pagination`, `DataTable`, … — **plus the
+  Provider-free base FORM primitives** under `./forms` (`Form`, `Input`,
+  `Select`, `Textarea`, `Toggle`, `FormGroup`), relocated here in #1589's
+  deferred-forms phase so domain packages can adopt them without pulling in the
+  smrt-svelte Provider or closing a build-graph cycle. These are dependency-free:
+  no Provider, no i18n, no spoken-input logic.
+- **`smrt-svelte` owns the Provider-REQUIRED form primitives** — `CheckboxInput`,
+  the rich `Form` (field registration + voice), `TextInput`, `MoneyInput`, and
+  the specialized date/measurement/address/file inputs (they call `useAppState`
+  / the AI hooks and carry i18n + spoken-input logic). It re-exports the base
+  **input** primitives (`Input`, `Select`, `Textarea`, `Toggle`, `FormGroup`)
+  from here so `@happyvertical/smrt-svelte/forms` stays the full barrel — but
+  **not** `Form`: that barrel's `Form` is the rich Provider-backed one, so the
+  Provider-free `Form` is only importable from `@happyvertical/smrt-ui/forms`.
 
 **Domain packages import visual primitives from `smrt-ui` and form primitives
 from `smrt-svelte`, and must not hand-roll raw `<button>` / `<input>` /
@@ -38,6 +47,7 @@ components are exempt — they *are* the primitives.
 | `./layout` | `Container`, `Grid`, `Header`, `Footer`, `PageHeader`, `EmptyState`, … |
 | `./calendar` | `Calendar`, `DayView` |
 | `./chat` | `MessageBubble`, `ReactionPicker`, `TypingIndicator` |
+| `./forms` | Provider-free base form primitives: `Form`, `Input`, `Select`, `Textarea`, `Toggle`, `FormGroup` (+ the FormGroup a11y context helpers) |
 | `./i18n` | i18n **client**: `useI18n`, `<Trans>`, `defineMessages`, `renderTemplate` (no `smrt-languages` import — the server resolver stays in `smrt-svelte/i18n/server`) |
 | `./registry` | `ModuleUIRegistry` for cross-package component discovery |
 | `./theme` | simple `ThemeProvider` + context (`useTheme` consumes this from `smrt-svelte`) |

package/dist/components/chat/MessageBubble.svelte

@@ -1,26 +1,50 @@
 <script lang="ts">
 /**
- * MessageBubble — a single chat message with user / agent / system variants.
+ * MessageBubble — a single chat message, tokenised and a11y-clean.
  *
- * Renders the author + an optional `<time>` timestamp, the message body
- * (`children`), and optional `reactions` / `actions` snippets. The bubble is a
- * labelled `role="group"` (`<author>, <role>`) so assistive tech can navigate
- * messages and announce who sent each one.
+ * Two complementary forms share one styled container:
+ *
+ * - **Bare bubble** (the common case for a message list that renders its own
+ *   author/time/reactions around each row): opt into the styling axes by passing
+ *   `variant` and/or `own` (plus `content` or a `children` snippet). No header or
+ *   labelled group is rendered — unless you also pass an `author` — so it nests
+ *   cleanly inside an already-labelled message row without a redundant landmark.
+ * - **Self-contained card** (legacy form): pass `role` / `author` / `timestamp`
+ *   (and optionally the `reactions` / `actions` snippets) without the styling
+ *   axes. A header and a labelled `role="group"` (`<author|role> (<role>)`) are
+ *   rendered so assistive tech can announce who sent each message; `author`
+ *   falls back to a role label ("You" / "Assistant" / "System").
+ *
+ * `variant` + `own` are the canonical styling axes. The legacy `role` prop sets
+ * the header's role label and derives `variant`/`own` when those are not given.
  */
 import type { Snippet } from 'svelte';
 import type { ChatMessageRole } from '../../types-generic';
 
+/** Visual tone: a peer message, an assistant message, or a centered notice. */
+export type MessageBubbleVariant = 'default' | 'agent' | 'system';
+
 export interface Props {
-  /** Who sent the message. Drives styling and the group label. */
+  /** Visual tone. Canonical styling axis. */
+  variant?: MessageBubbleVariant;
+  /** Whether the current viewer authored this message — drives alignment + own-color. */
+  own?: boolean;
+  /**
+   * Legacy role. Prefer `variant` + `own`. Sets the header's role label and,
+   * when `variant`/`own` are unset, derives them (user → own default, agent →
+   * agent, system → system).
+   */
   role?: ChatMessageRole;
-  /** Display name of the sender. */
+  /** Plain-text body. Ignored when a `children` snippet is provided. */
+  content?: string;
+  /** Body snippet (takes precedence over `content`). */
+  children?: Snippet;
+  /** Display name of the sender. When set, a header + labelled group render. */
   author?: string;
-  /** Message time; rendered in a `<time datetime>` element. */
+  /** Message time; rendered in a `<time datetime>` element in the header. */
   timestamp?: Date;
   /** Override the visible timestamp text (defaults to a locale time). */
   timestampLabel?: string;
-  /** Message body. */
-  children: Snippet;
   /** Optional reactions row (e.g. a `ReactionPicker` or reaction chips). */
   reactions?: Snippet;
   /** Optional per-message actions (reply, copy, …). */
@@ -28,11 +52,14 @@ export interface Props {
 }
 
 const {
+  variant,
+  own,
   role = 'user',
+  content,
+  children,
   author,
   timestamp,
   timestampLabel,
-  children,
   reactions,
   actions,
 }: Props = $props();
@@ -43,23 +70,50 @@ const roleNoun: Record<ChatMessageRole, string> = {
   system: 'System',
 };
 
-const groupLabel = $derived(`${author ?? roleNoun[role]} (${role})`);
+// `variant`/`own` are canonical; derive them from the legacy `role` only when
+// they are not explicitly supplied.
+const effectiveVariant = $derived<MessageBubbleVariant>(
+  variant ??
+    (role === 'agent' ? 'agent' : role === 'system' ? 'system' : 'default'),
+);
+const effectiveOwn = $derived(own ?? role === 'user');
+
+// The bare-bubble form is signalled by opting into the explicit styling axes
+// (`variant`/`own`); the legacy card form (`role`/`author`/`timestamp`) is not.
+const isBareForm = $derived(variant !== undefined || own !== undefined);
+const headerName = $derived(author ?? roleNoun[role]);
+// Render a header + labelled group for the legacy card form, or whenever an
+// author is supplied. A bare bubble with no author stays a plain styled
+// container (its host row owns the label).
+const hasHeader = $derived(author !== undefined || !isBareForm);
+const groupLabel = $derived(`${headerName} (${role})`);
 const isoTime = $derived(timestamp ? timestamp.toISOString() : undefined);
 const timeText = $derived(
   timestampLabel ?? timestamp?.toLocaleTimeString() ?? '',
 );
 </script>
 
-<div class="bubble bubble--{role}" role="group" aria-label={groupLabel}>
-  <div class="bubble__header">
-    <span class="bubble__author">{author ?? roleNoun[role]}</span>
-    {#if timeText}
-      <time class="bubble__time" datetime={isoTime}>{timeText}</time>
-    {/if}
-  </div>
+<div
+  class="bubble bubble--{effectiveVariant}"
+  class:bubble--own={effectiveOwn}
+  role={hasHeader ? 'group' : undefined}
+  aria-label={hasHeader ? groupLabel : undefined}
+>
+  {#if hasHeader}
+    <div class="bubble__header">
+      <span class="bubble__author">{headerName}</span>
+      {#if timeText}
+        <time class="bubble__time" datetime={isoTime}>{timeText}</time>
+      {/if}
+    </div>
+  {/if}
 
   <div class="bubble__body">
-    {@render children()}
+    {#if children}
+      {@render children()}
+    {:else if content !== undefined}
+      <p class="bubble__content">{content}</p>
+    {/if}
   </div>
 
   {#if reactions}
@@ -76,23 +130,57 @@ const timeText = $derived(
     display: flex;
     flex-direction: column;
     gap: var(--smrt-spacing-1, 4px);
-    max-width: 42rem;
-    padding: var(--smrt-spacing-2, 8px) var(--smrt-spacing-3, 12px);
+    max-width: 75%;
+    padding: var(--smrt-spacing-3, 12px) var(--smrt-spacing-4, 16px);
     border-radius: var(--smrt-radius-large, 12px);
-    background: var(--smrt-color-surface-container, #f3edf7);
-    color: var(--smrt-color-on-surface);
+    font-size: var(--smrt-typography-body-medium-size, 0.875rem);
+    line-height: 1.4;
+    word-break: break-word;
   }
 
-  .bubble--user {
-    background: var(--smrt-color-primary-container);
-    color: var(--smrt-color-on-primary-container);
-    align-self: flex-end;
+  /* default — a peer message; `own` is the current viewer's message. */
+  .bubble--default {
+    background: var(--smrt-color-surface-container, #f3f4f6);
+    color: var(--smrt-color-on-surface, #1b1b1f);
+    border-bottom-left-radius: var(--smrt-radius-small, 4px);
+  }
+  .bubble--default.bubble--own {
+    background: var(--smrt-color-primary, #005ac1);
+    color: var(--smrt-color-on-primary, #ffffff);
+    border-bottom-right-radius: var(--smrt-radius-small, 4px);
+    border-bottom-left-radius: var(--smrt-radius-large, 12px);
+  }
+
+  /* agent — assistant message, accented on the leading edge. */
+  .bubble--agent {
+    background: var(--smrt-color-tertiary-container, #ffd8e4);
+    color: var(--smrt-color-on-tertiary-container, #31111d);
+    border-bottom-left-radius: var(--smrt-radius-small, 4px);
+    border-left: 3px solid var(--smrt-color-tertiary, #7d5260);
+  }
+  .bubble--agent.bubble--own {
+    border-left: none;
+    border-right: 3px solid var(--smrt-color-tertiary, #7d5260);
+    border-bottom-right-radius: var(--smrt-radius-small, 4px);
+    border-bottom-left-radius: var(--smrt-radius-large, 12px);
   }
+
+  /* system — centered notice. */
   .bubble--system {
-    background: var(--smrt-color-surface-container-high);
-    color: var(--smrt-color-on-surface-variant);
+    max-width: 100%;
+    background: transparent;
+    color: var(--smrt-color-on-surface-variant, #43474e);
+    text-align: center;
+    font-size: var(--smrt-typography-body-small-size, 0.75rem);
+    padding: var(--smrt-spacing-2, 6px) var(--smrt-spacing-4, 16px);
+    border-radius: 0;
     align-self: center;
-    font-style: italic;
+  }
+
+  /* Self-align own messages when laid out in a column (card form). In a host
+     row that already aligns own messages this is a harmless no-op. */
+  .bubble--own {
+    align-self: flex-end;
   }
 
   .bubble__header {
@@ -111,11 +199,13 @@ const timeText = $derived(
   }
 
   .bubble__body {
-    font-size: var(--smrt-typography-body-medium-size, 1rem);
-    line-height: var(--smrt-typography-body-medium-line-height, 1.5);
     white-space: pre-wrap;
     word-break: break-word;
   }
+  .bubble__content {
+    margin: 0;
+    white-space: pre-wrap;
+  }
 
   .bubble__reactions,
   .bubble__actions {

package/dist/components/chat/MessageBubble.svelte.d.ts

@@ -1,24 +1,47 @@
 /**
- * MessageBubble — a single chat message with user / agent / system variants.
+ * MessageBubble — a single chat message, tokenised and a11y-clean.
  *
- * Renders the author + an optional `<time>` timestamp, the message body
- * (`children`), and optional `reactions` / `actions` snippets. The bubble is a
- * labelled `role="group"` (`<author>, <role>`) so assistive tech can navigate
- * messages and announce who sent each one.
+ * Two complementary forms share one styled container:
+ *
+ * - **Bare bubble** (the common case for a message list that renders its own
+ *   author/time/reactions around each row): opt into the styling axes by passing
+ *   `variant` and/or `own` (plus `content` or a `children` snippet). No header or
+ *   labelled group is rendered — unless you also pass an `author` — so it nests
+ *   cleanly inside an already-labelled message row without a redundant landmark.
+ * - **Self-contained card** (legacy form): pass `role` / `author` / `timestamp`
+ *   (and optionally the `reactions` / `actions` snippets) without the styling
+ *   axes. A header and a labelled `role="group"` (`<author|role> (<role>)`) are
+ *   rendered so assistive tech can announce who sent each message; `author`
+ *   falls back to a role label ("You" / "Assistant" / "System").
+ *
+ * `variant` + `own` are the canonical styling axes. The legacy `role` prop sets
+ * the header's role label and derives `variant`/`own` when those are not given.
  */
 import type { Snippet } from 'svelte';
 import type { ChatMessageRole } from '../../types-generic';
+/** Visual tone: a peer message, an assistant message, or a centered notice. */
+export type MessageBubbleVariant = 'default' | 'agent' | 'system';
 export interface Props {
-    /** Who sent the message. Drives styling and the group label. */
+    /** Visual tone. Canonical styling axis. */
+    variant?: MessageBubbleVariant;
+    /** Whether the current viewer authored this message — drives alignment + own-color. */
+    own?: boolean;
+    /**
+     * Legacy role. Prefer `variant` + `own`. Sets the header's role label and,
+     * when `variant`/`own` are unset, derives them (user → own default, agent →
+     * agent, system → system).
+     */
     role?: ChatMessageRole;
-    /** Display name of the sender. */
+    /** Plain-text body. Ignored when a `children` snippet is provided. */
+    content?: string;
+    /** Body snippet (takes precedence over `content`). */
+    children?: Snippet;
+    /** Display name of the sender. When set, a header + labelled group render. */
     author?: string;
-    /** Message time; rendered in a `<time datetime>` element. */
+    /** Message time; rendered in a `<time datetime>` element in the header. */
     timestamp?: Date;
     /** Override the visible timestamp text (defaults to a locale time). */
     timestampLabel?: string;
-    /** Message body. */
-    children: Snippet;
     /** Optional reactions row (e.g. a `ReactionPicker` or reaction chips). */
     reactions?: Snippet;
     /** Optional per-message actions (reply, copy, …). */

package/dist/components/chat/MessageBubble.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MessageBubble.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/chat/MessageBubble.svelte.ts"],"names":[],"mappings":"AAGA;;;;;;;GAOG;AACH,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AACtC,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AAG3D,MAAM,WAAW,KAAK;IACpB,gEAAgE;IAChE,IAAI,CAAC,EAAE,eAAe,CAAC;IACvB,kCAAkC;IAClC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,6DAA6D;IAC7D,SAAS,CAAC,EAAE,IAAI,CAAC;IACjB,uEAAuE;IACvE,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,oBAAoB;IACpB,QAAQ,EAAE,OAAO,CAAC;IAClB,0EAA0E;IAC1E,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,qDAAqD;IACrD,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAuDD,QAAA,MAAM,aAAa,2CAAwC,CAAC;AAC5D,KAAK,aAAa,GAAG,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC;AACtD,eAAe,aAAa,CAAC"}
+{"version":3,"file":"MessageBubble.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/chat/MessageBubble.svelte.ts"],"names":[],"mappings":"AAGA;;;;;;;;;;;;;;;;;;GAkBG;AACH,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AACtC,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AAG3D,+EAA+E;AAC/E,MAAM,MAAM,oBAAoB,GAAG,SAAS,GAAG,OAAO,GAAG,QAAQ,CAAC;AAElE,MAAM,WAAW,KAAK;IACpB,2CAA2C;IAC3C,OAAO,CAAC,EAAE,oBAAoB,CAAC;IAC/B,uFAAuF;IACvF,GAAG,CAAC,EAAE,OAAO,CAAC;IACd;;;;OAIG;IACH,IAAI,CAAC,EAAE,eAAe,CAAC;IACvB,sEAAsE;IACtE,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,sDAAsD;IACtD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,8EAA8E;IAC9E,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,2EAA2E;IAC3E,SAAS,CAAC,EAAE,IAAI,CAAC;IACjB,uEAAuE;IACvE,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,0EAA0E;IAC1E,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,qDAAqD;IACrD,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAiFD,QAAA,MAAM,aAAa,2CAAwC,CAAC;AAC5D,KAAK,aAAa,GAAG,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC;AACtD,eAAe,aAAa,CAAC"}

package/dist/components/chat/ReactionPicker.svelte

@@ -2,15 +2,29 @@
 /**
  * ReactionPicker — a labelled group of emoji reaction buttons.
  *
- * Each button has a text accessible name (so the emoji isn't announced as raw
- * glyphs), and the group carries an `aria-label`. Fires `onpick(emoji)` on
- * activation.
+ * Each button carries a text accessible name (so the emoji isn't announced as
+ * raw glyphs) and the group carries an `aria-label`. Fires `onpick(emoji)` on
+ * activation. The group label and the fallback name for unrecognised emoji
+ * default to translated `ui.reaction_picker.*` strings; the common reactions use
+ * built-in English names unless a caller supplies `emojiLabel` (e.g. to route
+ * every label through a domain i18n catalog). Wraps gracefully for larger emoji
+ * sets.
  */
+import { M } from '../../i18n/strings.ui.js';
+import { useI18n } from '../../i18n/use-i18n.js';
+
 export interface Props {
   /** Emoji set to offer. */
   emojis?: string[];
-  /** Accessible label for the group. */
+  /** Accessible label for the group. Defaults to a translated "Add reaction". */
   label?: string;
+  /**
+   * Accessible name for each emoji button. Defaults to a built-in name for the
+   * common reactions, else a translated "React with {emoji}".
+   */
+  emojiLabel?: (emoji: string) => string;
+  /** Whether the picker is shown. */
+  isOpen?: boolean;
   /** Fired with the chosen emoji. */
   onpick?: (emoji: string) => void;
 }
@@ -27,30 +41,48 @@ const EMOJI_LABELS: Record<string, string> = {
 
 const {
   emojis = DEFAULT_EMOJIS,
-  label = 'Add reaction',
+  label,
+  emojiLabel,
+  isOpen = true,
   onpick,
 }: Props = $props();
+
+const { t } = useI18n();
+
+const groupLabel = $derived(label ?? t(M['ui.reaction_picker.label']));
+
+function nameFor(emoji: string): string {
+  return (
+    emojiLabel?.(emoji) ??
+    EMOJI_LABELS[emoji] ??
+    t(M['ui.reaction_picker.react_with'], { emoji })
+  );
+}
 </script>
 
-<div class="reactions" role="group" aria-label={label}>
-  {#each emojis as emoji (emoji)}
-    <button
-      type="button"
-      class="reactions__btn"
-      aria-label={EMOJI_LABELS[emoji] ?? `React with ${emoji}`}
-      onclick={() => onpick?.(emoji)}
-    >
-      <span aria-hidden="true">{emoji}</span>
-    </button>
-  {/each}
-</div>
+{#if isOpen}
+  <div class="reactions" role="group" aria-label={groupLabel}>
+    {#each emojis as emoji (emoji)}
+      <button
+        type="button"
+        class="reactions__btn"
+        aria-label={nameFor(emoji)}
+        onclick={() => onpick?.(emoji)}
+      >
+        <span aria-hidden="true">{emoji}</span>
+      </button>
+    {/each}
+  </div>
+{/if}
 
 <style>
   .reactions {
     display: inline-flex;
+    flex-wrap: wrap;
     gap: var(--smrt-spacing-1, 4px);
     padding: var(--smrt-spacing-1, 4px);
-    border-radius: var(--smrt-radius-full, 9999px);
+    max-width: 16rem;
+    border-radius: var(--smrt-radius-large, 12px);
     background: var(--smrt-color-surface-container, #f3edf7);
   }
 

package/dist/components/chat/ReactionPicker.svelte.d.ts

@@ -1,15 +1,15 @@
-/**
- * ReactionPicker — a labelled group of emoji reaction buttons.
- *
- * Each button has a text accessible name (so the emoji isn't announced as raw
- * glyphs), and the group carries an `aria-label`. Fires `onpick(emoji)` on
- * activation.
- */
 export interface Props {
     /** Emoji set to offer. */
     emojis?: string[];
-    /** Accessible label for the group. */
+    /** Accessible label for the group. Defaults to a translated "Add reaction". */
     label?: string;
+    /**
+     * Accessible name for each emoji button. Defaults to a built-in name for the
+     * common reactions, else a translated "React with {emoji}".
+     */
+    emojiLabel?: (emoji: string) => string;
+    /** Whether the picker is shown. */
+    isOpen?: boolean;
     /** Fired with the chosen emoji. */
     onpick?: (emoji: string) => void;
 }

package/dist/components/chat/ReactionPicker.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ReactionPicker.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/chat/ReactionPicker.svelte.ts"],"names":[],"mappings":"AAGA;;;;;;GAMG;AACH,MAAM,WAAW,KAAK;IACpB,0BAA0B;IAC1B,MAAM,CAAC,EAAE,MAAM,EAAE,CAAC;IAClB,sCAAsC;IACtC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,mCAAmC;IACnC,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CAClC;AAiCD,QAAA,MAAM,cAAc,2CAAwC,CAAC;AAC7D,KAAK,cAAc,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AACxD,eAAe,cAAc,CAAC"}
+{"version":3,"file":"ReactionPicker.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/chat/ReactionPicker.svelte.ts"],"names":[],"mappings":"AAkBA,MAAM,WAAW,KAAK;IACpB,0BAA0B;IAC1B,MAAM,CAAC,EAAE,MAAM,EAAE,CAAC;IAClB,+EAA+E;IAC/E,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,UAAU,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;IACvC,mCAAmC;IACnC,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,mCAAmC;IACnC,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CAClC;AAoDD,QAAA,MAAM,cAAc,2CAAwC,CAAC;AAC7D,KAAK,cAAc,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AACxD,eAAe,cAAc,CAAC"}

package/dist/components/chat/TypingIndicator.svelte

@@ -2,51 +2,68 @@
 /**
  * TypingIndicator — animated "…is typing" affordance.
  *
- * The visible dots are decorative (`aria-hidden`); the meaning is carried by an
- * sr-only label inside a polite `role="status"` live region so screen readers
- * hear "<name> is typing" without the animation noise. Honors reduced-motion.
+ * Renders a visible label plus decorative animated dots (`aria-hidden`) inside a
+ * polite `role="status"` live region, so both sighted users and screen readers
+ * learn who is typing. Honors reduced-motion.
+ *
+ * Pass `names` to announce one or more typists ("Ada is typing", "Ada and Bob
+ * are typing", "Ada and 2 others are typing") — an empty list renders nothing.
+ * Or pass a single `name` / a full `label` override. The animated dots stand in
+ * for the trailing ellipsis, so the label text omits it.
  */
 export interface Props {
-  /** Who is typing (e.g. "Assistant"). */
+  /** Who is typing (single). */
   name?: string;
-  /** Full label override; defaults to "<name> is typing…" / "Typing…". */
+  /** Names of everyone currently typing — aggregated into the label. */
+  names?: string[];
+  /** Full label override; defaults to an aggregation of `names`/`name`. */
   label?: string;
 }
 
-const { name, label }: Props = $props();
-const text = $derived(label ?? (name ? `${name} is typing…` : 'Typing…'));
+const { name, names, label }: Props = $props();
+
+// Names-mode (an explicit list) renders nothing when nobody is typing; the
+// single-`name`/`label` form always renders.
+const inNamesMode = $derived(names !== undefined);
+const show = $derived(!inNamesMode || (names?.length ?? 0) > 0);
+
+const text = $derived.by(() => {
+  if (label) return label;
+  if (names && names.length > 0) {
+    if (names.length === 1) return `${names[0]} is typing`;
+    if (names.length === 2) return `${names[0]} and ${names[1]} are typing`;
+    return `${names[0]} and ${names.length - 1} others are typing`;
+  }
+  return name ? `${name} is typing` : 'Typing';
+});
 </script>
 
-<div class="typing" role="status" aria-live="polite">
-  <span class="typing__sr">{text}</span>
-  <span class="typing__dots" aria-hidden="true">
-    <span class="typing__dot"></span>
-    <span class="typing__dot"></span>
-    <span class="typing__dot"></span>
-  </span>
-</div>
+{#if show}
+  <div class="typing" role="status" aria-live="polite">
+    <span class="typing__text">{text}</span>
+    <span class="typing__dots" aria-hidden="true">
+      <span class="typing__dot"></span>
+      <span class="typing__dot"></span>
+      <span class="typing__dot"></span>
+    </span>
+  </div>
+{/if}
 
 <style>
   .typing {
     display: inline-flex;
     align-items: center;
-    gap: var(--smrt-spacing-1, 4px);
+    gap: var(--smrt-spacing-2, 8px);
     padding: var(--smrt-spacing-2, 8px) var(--smrt-spacing-3, 12px);
     border-radius: var(--smrt-radius-large, 12px);
     background: var(--smrt-color-surface-container, #f3edf7);
     width: fit-content;
   }
 
-  .typing__sr {
-    position: absolute;
-    width: 1px;
-    height: 1px;
-    padding: 0;
-    margin: -1px;
-    overflow: hidden;
-    clip: rect(0, 0, 0, 0);
+  .typing__text {
+    font-size: var(--smrt-typography-body-small-size, 0.75rem);
+    color: var(--smrt-color-on-surface-variant, #49454f);
     white-space: nowrap;
-    border: 0;
   }
 
   .typing__dots {

package/dist/components/chat/TypingIndicator.svelte.d.ts

@@ -1,14 +1,21 @@
 /**
  * TypingIndicator — animated "…is typing" affordance.
  *
- * The visible dots are decorative (`aria-hidden`); the meaning is carried by an
- * sr-only label inside a polite `role="status"` live region so screen readers
- * hear "<name> is typing" without the animation noise. Honors reduced-motion.
+ * Renders a visible label plus decorative animated dots (`aria-hidden`) inside a
+ * polite `role="status"` live region, so both sighted users and screen readers
+ * learn who is typing. Honors reduced-motion.
+ *
+ * Pass `names` to announce one or more typists ("Ada is typing", "Ada and Bob
+ * are typing", "Ada and 2 others are typing") — an empty list renders nothing.
+ * Or pass a single `name` / a full `label` override. The animated dots stand in
+ * for the trailing ellipsis, so the label text omits it.
  */
 export interface Props {
-    /** Who is typing (e.g. "Assistant"). */
+    /** Who is typing (single). */
     name?: string;
-    /** Full label override; defaults to "<name> is typing…" / "Typing…". */
+    /** Names of everyone currently typing — aggregated into the label. */
+    names?: string[];
+    /** Full label override; defaults to an aggregation of `names`/`name`. */
     label?: string;
 }
 declare const TypingIndicator: import("svelte").Component<Props, {}, "">;

package/dist/components/chat/TypingIndicator.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TypingIndicator.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/chat/TypingIndicator.svelte.ts"],"names":[],"mappings":"AAGA;;;;;;GAMG;AACH,MAAM,WAAW,KAAK;IACpB,wCAAwC;IACxC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,wEAAwE;IACxE,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAqBD,QAAA,MAAM,eAAe,2CAAwC,CAAC;AAC9D,KAAK,eAAe,GAAG,UAAU,CAAC,OAAO,eAAe,CAAC,CAAC;AAC1D,eAAe,eAAe,CAAC"}
+{"version":3,"file":"TypingIndicator.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/chat/TypingIndicator.svelte.ts"],"names":[],"mappings":"AAGA;;;;;;;;;;;GAWG;AACH,MAAM,WAAW,KAAK;IACpB,8BAA8B;IAC9B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,sEAAsE;IACtE,KAAK,CAAC,EAAE,MAAM,EAAE,CAAC;IACjB,yEAAyE;IACzE,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAqCD,QAAA,MAAM,eAAe,2CAAwC,CAAC;AAC9D,KAAK,eAAe,GAAG,UAAU,CAAC,OAAO,eAAe,CAAC,CAAC;AAC1D,eAAe,eAAe,CAAC"}