@happyvertical/smrt-ui 0.34.6 → 0.34.7

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"}

package/dist/components/chat/__tests__/chat-primitives.test.js

@@ -29,12 +29,32 @@ describe('MessageBubble', () => {
         });
         expect(container.querySelector('time')).toHaveAttribute('datetime', '2026-01-01T10:00:00.000Z');
     });
-    it('is axe-clean', async () => {
+    it('renders a bare bubble (no header/group) from plain content', () => {
+        render(MessageBubble, {
+            props: { content: 'Hello there', variant: 'default', own: false },
+        });
+        expect(screen.getByText('Hello there')).toBeInTheDocument();
+        // A bare bubble adds no labelled landmark — its host row owns the label.
+        expect(screen.queryByRole('group')).toBeNull();
+    });
+    it('renders a legacy card header even without an author', () => {
+        // The legacy card form (role, no styling axes) keeps its header + labelled
+        // group, falling back to the role label.
+        render(MessageBubble, { props: { role: 'agent', children: body('hi') } });
+        expect(screen.getByRole('group', { name: 'Assistant (agent)' })).toBeInTheDocument();
+    });
+    it('is axe-clean as a labelled card', async () => {
         const { container } = render(MessageBubble, {
             props: { role: 'user', author: 'You', children: body('hi') },
         });
         await expectNoA11yViolations(container);
     });
+    it('is axe-clean as an own bare bubble', async () => {
+        const { container } = render(MessageBubble, {
+            props: { content: 'Hi', variant: 'default', own: true },
+        });
+        await expectNoA11yViolations(container);
+    });
 });
 describe('ReactionPicker', () => {
     it('is a labelled group of named emoji buttons', () => {
@@ -48,6 +68,21 @@ describe('ReactionPicker', () => {
         await userEvent.click(screen.getByRole('button', { name: 'Heart' }));
         expect(onpick).toHaveBeenCalledWith('❤️');
     });
+    it('renders nothing when closed', () => {
+        render(ReactionPicker, { props: { isOpen: false } });
+        expect(screen.queryByRole('group')).toBeNull();
+    });
+    it('honors caller-supplied group + per-emoji labels', () => {
+        render(ReactionPicker, {
+            props: {
+                emojis: ['🚀'],
+                label: 'Emoji reactions',
+                emojiLabel: (emoji) => `React with ${emoji}`,
+            },
+        });
+        expect(screen.getByRole('group', { name: 'Emoji reactions' })).toBeInTheDocument();
+        expect(screen.getByRole('button', { name: 'React with 🚀' })).toBeInTheDocument();
+    });
     it('is axe-clean', async () => {
         const { container } = render(ReactionPicker);
         await expectNoA11yViolations(container);
@@ -58,6 +93,22 @@ describe('TypingIndicator', () => {
         render(TypingIndicator, { props: { name: 'Assistant' } });
         expect(screen.getByRole('status')).toHaveTextContent('Assistant is typing');
     });
+    it('names a single typist from a list', () => {
+        render(TypingIndicator, { props: { names: ['Ada'] } });
+        expect(screen.getByText('Ada is typing')).toBeInTheDocument();
+    });
+    it('names two typists from a list', () => {
+        render(TypingIndicator, { props: { names: ['Ada', 'Bob'] } });
+        expect(screen.getByText('Ada and Bob are typing')).toBeInTheDocument();
+    });
+    it('aggregates three or more typists', () => {
+        render(TypingIndicator, { props: { names: ['Ada', 'Bob', 'Cy'] } });
+        expect(screen.getByText('Ada and 2 others are typing')).toBeInTheDocument();
+    });
+    it('renders nothing when nobody is typing', () => {
+        const { container } = render(TypingIndicator, { props: { names: [] } });
+        expect(container.querySelector('.typing')).toBeNull();
+    });
     it('is axe-clean', async () => {
         const { container } = render(TypingIndicator, {
             props: { name: 'Assistant' },

package/dist/components/forms/Form.svelte

@@ -44,8 +44,10 @@ function handleSubmit(event: SubmitEvent & { currentTarget: HTMLFormElement }) {
 	{@render children()}
 </form>
 
-<style>
-	.form {
-		display: block;
-	}
-</style>
+<!--
+  No base styles: a <form> is `display: block` by default, so an explicit
+  `.form { display: block }` rule would only add a specificity floor that ties
+  with a consumer's single-class layout override (e.g. `:global(.x){display:flex}`)
+  and can win by stylesheet order. The `form` class stays as a stable hook.
+-->
+

package/dist/components/forms/Form.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Form.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/forms/Form.svelte.ts"],"names":[],"mappings":"AAGA;;;;;;;;;;;;;;;;;GAiBG;AACH,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AACtC,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AAG1D,MAAM,WAAW,KAAM,SAAQ,IAAI,CAAC,kBAAkB,EAAE,OAAO,CAAC;IAC9D,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,QAAQ,EAAE,OAAO,CAAC;CACnB;AA6BD,QAAA,MAAM,IAAI,2CAAwC,CAAC;AACnD,KAAK,IAAI,GAAG,UAAU,CAAC,OAAO,IAAI,CAAC,CAAC;AACpC,eAAe,IAAI,CAAC"}
+{"version":3,"file":"Form.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/forms/Form.svelte.ts"],"names":[],"mappings":"AAGA;;;;;;;;;;;;;;;;;GAiBG;AACH,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AACtC,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AAG1D,MAAM,WAAW,KAAM,SAAQ,IAAI,CAAC,kBAAkB,EAAE,OAAO,CAAC;IAC9D,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,QAAQ,EAAE,OAAO,CAAC;CACnB;AA8BD,QAAA,MAAM,IAAI,2CAAwC,CAAC;AACnD,KAAK,IAAI,GAAG,UAAU,CAAC,OAAO,IAAI,CAAC,CAAC;AACpC,eAAe,IAAI,CAAC"}

package/dist/components/forms/Input.svelte

@@ -80,4 +80,10 @@ const resolvedInvalid = $derived(
 	.input::placeholder {
 		color: var(--smrt-color-on-surface-variant, #9ca3af);
 	}
+
+	@media (prefers-reduced-motion: reduce) {
+		.input {
+			transition: none;
+		}
+	}
 </style>

package/dist/components/forms/Select.svelte

@@ -80,4 +80,10 @@ const resolvedInvalid = $derived(
 		cursor: not-allowed;
 		opacity: 0.7;
 	}
+
+	@media (prefers-reduced-motion: reduce) {
+		.select {
+			transition: none;
+		}
+	}
 </style>

package/dist/components/forms/Textarea.svelte

@@ -82,4 +82,10 @@ const resolvedInvalid = $derived(
 	.textarea::placeholder {
 		color: var(--smrt-color-on-surface-variant, #9ca3af);
 	}
+
+	@media (prefers-reduced-motion: reduce) {
+		.textarea {
+			transition: none;
+		}
+	}
 </style>

package/dist/components/forms/Toggle.svelte

@@ -214,4 +214,11 @@ const sizeClasses = {
   .toggle--lg .toggle__label {
     font-size: var(--smrt-typography-body-large-size, 1rem);
   }
+
+  @media (prefers-reduced-motion: reduce) {
+    .toggle__thumb,
+    .toggle__thumb::after {
+      transition: none;
+    }
+  }
 </style>

package/dist/i18n/strings.ui.d.ts

@@ -30,5 +30,7 @@ export declare const M: {
     readonly 'ui.pagination.go_to_page': "ui.pagination.go_to_page";
     readonly 'ui.pagination.next_page': "ui.pagination.next_page";
     readonly 'ui.pagination.last_page': "ui.pagination.last_page";
+    readonly 'ui.reaction_picker.label': "ui.reaction_picker.label";
+    readonly 'ui.reaction_picker.react_with': "ui.reaction_picker.react_with";
 };
 //# sourceMappingURL=strings.ui.d.ts.map

package/dist/i18n/strings.ui.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"strings.ui.d.ts","sourceRoot":"","sources":["../../src/i18n/strings.ui.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAIH,eAAO,MAAM,CAAC;;;;;;;;;;;;;;;;;;;;;;;;CA4CZ,CAAC"}
+{"version":3,"file":"strings.ui.d.ts","sourceRoot":"","sources":["../../src/i18n/strings.ui.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAIH,eAAO,MAAM,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;CAgDZ,CAAC"}

package/dist/i18n/strings.ui.js

@@ -41,4 +41,7 @@ export const M = defineMessages({
     'ui.pagination.go_to_page': 'Go to page {page}',
     'ui.pagination.next_page': 'Next page',
     'ui.pagination.last_page': 'Last page ({totalPages})',
+    // chat/ReactionPicker.svelte
+    'ui.reaction_picker.label': 'Add reaction',
+    'ui.reaction_picker.react_with': 'React with {emoji}',
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@happyvertical/smrt-ui",
-  "version": "0.34.6",
+  "version": "0.34.7",
   "description": "Domain-agnostic Svelte 5 UI runtime for SMRT: primitives, i18n client, theme system, and module UI registry",
   "type": "module",
   "main": "./dist/index.js",
@@ -114,7 +114,7 @@
   },
   "dependencies": {
     "esm-env": "^1.2.2",
-    "@happyvertical/smrt-types": "0.34.6"
+    "@happyvertical/smrt-types": "0.34.7"
   },
   "peerDependencies": {
     "svelte": "^5.18.2"