@happyvertical/smrt-ui 0.30.0

package/dist/components/chat/TypingIndicator.svelte

@@ -0,0 +1,90 @@
+<script lang="ts">
+/**
+ * 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.
+ */
+export interface Props {
+  /** Who is typing (e.g. "Assistant"). */
+  name?: string;
+  /** Full label override; defaults to "<name> is typing…" / "Typing…". */
+  label?: string;
+}
+
+const { name, label }: Props = $props();
+const text = $derived(label ?? (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>
+
+<style>
+  .typing {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--smrt-spacing-1, 4px);
+    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);
+    white-space: nowrap;
+    border: 0;
+  }
+
+  .typing__dots {
+    display: inline-flex;
+    gap: var(--smrt-spacing-1, 4px);
+  }
+
+  .typing__dot {
+    width: 0.5rem;
+    height: 0.5rem;
+    border-radius: var(--smrt-radius-full, 9999px);
+    background: var(--smrt-color-on-surface-variant, #49454f);
+    opacity: 0.5;
+    animation: smrt-typing-bounce 1.2s ease-in-out infinite;
+  }
+  .typing__dot:nth-child(2) {
+    animation-delay: 0.2s;
+  }
+  .typing__dot:nth-child(3) {
+    animation-delay: 0.4s;
+  }
+
+  @keyframes smrt-typing-bounce {
+    0%,
+    60%,
+    100% {
+      transform: translateY(0);
+      opacity: 0.5;
+    }
+    30% {
+      transform: translateY(-3px);
+      opacity: 1;
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .typing__dot {
+      animation: none;
+    }
+  }
+</style>

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

@@ -0,0 +1,17 @@
+/**
+ * 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.
+ */
+export interface Props {
+    /** Who is typing (e.g. "Assistant"). */
+    name?: string;
+    /** Full label override; defaults to "<name> is typing…" / "Typing…". */
+    label?: string;
+}
+declare const TypingIndicator: import("svelte").Component<Props, {}, "">;
+type TypingIndicator = ReturnType<typeof TypingIndicator>;
+export default TypingIndicator;
+//# sourceMappingURL=TypingIndicator.svelte.d.ts.map

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

@@ -0,0 +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"}

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

@@ -0,0 +1,67 @@
+/**
+ * Golden tests for the L3 chat primitives (`./chat` subpath, #1422):
+ * MessageBubble, ReactionPicker, TypingIndicator.
+ */
+import { render, screen } from '@testing-library/svelte';
+import userEvent from '@testing-library/user-event';
+import { createRawSnippet } from 'svelte';
+import { describe, expect, it, vi } from 'vitest';
+import { expectNoA11yViolations } from '../../../test-support/a11y';
+import MessageBubble from '../MessageBubble.svelte';
+import ReactionPicker from '../ReactionPicker.svelte';
+import TypingIndicator from '../TypingIndicator.svelte';
+const body = (text) => createRawSnippet(() => ({ render: () => `<p>${text}</p>` }));
+describe('MessageBubble', () => {
+    it('labels the group by author + role and renders the body', () => {
+        render(MessageBubble, {
+            props: { role: 'agent', author: 'Ada', children: body('Hello there') },
+        });
+        const group = screen.getByRole('group', { name: 'Ada (agent)' });
+        expect(group).toHaveTextContent('Hello there');
+    });
+    it('renders a machine-readable timestamp', () => {
+        const { container } = render(MessageBubble, {
+            props: {
+                author: 'Ada',
+                timestamp: new Date('2026-01-01T10:00:00.000Z'),
+                children: body('hi'),
+            },
+        });
+        expect(container.querySelector('time')).toHaveAttribute('datetime', '2026-01-01T10:00:00.000Z');
+    });
+    it('is axe-clean', async () => {
+        const { container } = render(MessageBubble, {
+            props: { role: 'user', author: 'You', children: body('hi') },
+        });
+        await expectNoA11yViolations(container);
+    });
+});
+describe('ReactionPicker', () => {
+    it('is a labelled group of named emoji buttons', () => {
+        render(ReactionPicker);
+        expect(screen.getByRole('group', { name: 'Add reaction' })).toBeInTheDocument();
+        expect(screen.getByRole('button', { name: 'Thumbs up' })).toBeInTheDocument();
+    });
+    it('reports the picked emoji', async () => {
+        const onpick = vi.fn();
+        render(ReactionPicker, { props: { onpick } });
+        await userEvent.click(screen.getByRole('button', { name: 'Heart' }));
+        expect(onpick).toHaveBeenCalledWith('❤️');
+    });
+    it('is axe-clean', async () => {
+        const { container } = render(ReactionPicker);
+        await expectNoA11yViolations(container);
+    });
+});
+describe('TypingIndicator', () => {
+    it('announces who is typing via a status region', () => {
+        render(TypingIndicator, { props: { name: 'Assistant' } });
+        expect(screen.getByRole('status')).toHaveTextContent('Assistant is typing');
+    });
+    it('is axe-clean', async () => {
+        const { container } = render(TypingIndicator, {
+            props: { name: 'Assistant' },
+        });
+        await expectNoA11yViolations(container);
+    });
+});

package/dist/components/chat/index.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Chat primitives — subpath `@happyvertical/smrt-ui/chat`.
+ *
+ * MessageBubble (user/agent/system), ReactionPicker, TypingIndicator. Generic,
+ * tokenised, a11y-checked building blocks for chat UIs (L3 #1422).
+ */
+export { default as MessageBubble } from './MessageBubble.svelte';
+export { default as ReactionPicker } from './ReactionPicker.svelte';
+export { default as TypingIndicator } from './TypingIndicator.svelte';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/chat/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/chat/index.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AACH,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,wBAAwB,CAAC;AAClE,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,yBAAyB,CAAC;AACpE,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,0BAA0B,CAAC"}

package/dist/components/chat/index.js

@@ -0,0 +1,9 @@
+/**
+ * Chat primitives — subpath `@happyvertical/smrt-ui/chat`.
+ *
+ * MessageBubble (user/agent/system), ReactionPicker, TypingIndicator. Generic,
+ * tokenised, a11y-checked building blocks for chat UIs (L3 #1422).
+ */
+export { default as MessageBubble } from './MessageBubble.svelte';
+export { default as ReactionPicker } from './ReactionPicker.svelte';
+export { default as TypingIndicator } from './TypingIndicator.svelte';