@happyvertical/smrt-chat 0.30.0

package/dist/svelte/components/shared/FileUpload.svelte

@@ -0,0 +1,382 @@
+<script lang="ts">
+/**
+ * FileUpload - Attachment upload UI
+ * Button with drag-and-drop zone. Shows file preview before upload.
+ * Supports file type filtering and max size constraints.
+ */
+import { useI18n } from '@happyvertical/smrt-ui/i18n';
+import { M } from '../../i18n.js';
+
+const { t } = useI18n();
+
+export interface Props {
+  /** Callback when files are selected */
+  onupload: (files: FileList) => void;
+  /** Accepted file types (e.g., "image/*,.pdf") */
+  accept?: string;
+  /** Maximum file size in bytes */
+  maxSize?: number;
+  /** Whether the upload is disabled */
+  disabled?: boolean;
+}
+
+const {
+  onupload,
+  accept,
+  maxSize = 25 * 1024 * 1024,
+  disabled = false,
+}: Props = $props();
+
+let isDragOver = $state(false);
+let pendingFiles = $state<File[]>([]);
+let sizeError = $state('');
+
+function validateAndStage(fileList: FileList | null) {
+  if (!fileList || fileList.length === 0) return;
+  sizeError = '';
+
+  const valid: File[] = [];
+  const oversized: string[] = [];
+
+  for (const file of Array.from(fileList)) {
+    if (file.size > maxSize) {
+      oversized.push(file.name);
+    } else {
+      valid.push(file);
+    }
+  }
+
+  if (oversized.length > 0) {
+    sizeError = `${oversized.join(', ')} exceed${oversized.length === 1 ? 's' : ''} the ${formatSize(maxSize)} limit`;
+  }
+
+  pendingFiles = [...pendingFiles, ...valid];
+}
+
+function handleDrop(event: DragEvent) {
+  event.preventDefault();
+  isDragOver = false;
+  if (disabled) return;
+  validateAndStage(event.dataTransfer?.files ?? null);
+}
+
+function handleDragOver(event: DragEvent) {
+  event.preventDefault();
+  if (!disabled) isDragOver = true;
+}
+
+function handleDragLeave() {
+  isDragOver = false;
+}
+
+function handleInputChange(event: Event) {
+  const input = event.target as HTMLInputElement;
+  validateAndStage(input.files);
+  input.value = '';
+}
+
+function removePending(index: number) {
+  pendingFiles = pendingFiles.filter((_, i) => i !== index);
+  if (pendingFiles.length === 0) sizeError = '';
+}
+
+function confirmUpload() {
+  if (pendingFiles.length === 0) return;
+  const dt = new DataTransfer();
+  for (const file of pendingFiles) {
+    dt.items.add(file);
+  }
+  onupload(dt.files);
+  pendingFiles = [];
+  sizeError = '';
+}
+
+function formatSize(bytes: number): string {
+  if (bytes < 1024) return `${bytes} B`;
+  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
+  return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+}
+
+function getFileIcon(type: string): string {
+  if (type.startsWith('image/')) return 'img';
+  if (type.startsWith('video/')) return 'vid';
+  if (type.startsWith('audio/')) return 'aud';
+  if (type === 'application/pdf') return 'pdf';
+  return 'file';
+}
+</script>
+
+<div class="file-upload" class:file-upload--disabled={disabled}>
+  {#if pendingFiles.length > 0}
+    <div class="file-upload__preview" aria-label={t(M['chat.file_upload.preview'])}>
+      {#each pendingFiles as file, i (file.name + i)}
+        <div class="file-upload__file">
+          <span class="file-upload__file-icon">{getFileIcon(file.type)}</span>
+          <div class="file-upload__file-info">
+            <span class="file-upload__file-name">{file.name}</span>
+            <span class="file-upload__file-size">{formatSize(file.size)}</span>
+          </div>
+          <button
+            class="file-upload__file-remove"
+            type="button"
+            onclick={() => removePending(i)}
+            aria-label={t(M['chat.file_upload.remove'], { name: file.name })}
+          >
+            <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
+              <path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" />
+            </svg>
+          </button>
+        </div>
+      {/each}
+
+      <div class="file-upload__preview-actions">
+        <button
+          class="file-upload__confirm-btn"
+          type="button"
+          onclick={confirmUpload}
+        >
+          {t(M['chat.file_upload.upload_files'], { count: pendingFiles.length, plural: pendingFiles.length !== 1 ? 's' : '' })}
+        </button>
+        <button
+          class="file-upload__clear-btn"
+          type="button"
+          onclick={() => { pendingFiles = []; sizeError = ''; }}
+        >
+          Clear
+        </button>
+      </div>
+    </div>
+  {/if}
+
+  {#if sizeError}
+    <div class="file-upload__error" role="alert">
+      {sizeError}
+    </div>
+  {/if}
+
+  <!-- svelte-ignore a11y_no_static_element_interactions -->
+  <div
+    class="file-upload__drop-zone"
+    class:file-upload__drop-zone--active={isDragOver}
+    class:file-upload__drop-zone--disabled={disabled}
+    ondrop={handleDrop}
+    ondragover={handleDragOver}
+    ondragleave={handleDragLeave}
+  >
+    <label class="file-upload__label">
+      <input
+        type="file"
+        class="file-upload__input"
+        {accept}
+        multiple
+        {disabled}
+        onchange={handleInputChange}
+      />
+      <svg class="file-upload__icon" width="24" height="24" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
+        <path d="M9 16h6v-6h4l-7-7-7 7h4zm-4 2h14v2H5z" />
+      </svg>
+      <span class="file-upload__text">
+        {#if disabled}
+          {t(M['chat.file_upload.disabled'])}
+        {:else}
+          {t(M['chat.file_upload.drop_files'])}
+        {/if}
+      </span>
+      <span class="file-upload__hint">{t(M['chat.file_upload.max_size'], { size: formatSize(maxSize) })}</span>
+    </label>
+  </div>
+</div>
+
+<style>
+  .file-upload {
+    display: flex;
+    flex-direction: column;
+    gap: var(--smrt-spacing-2, 8px);
+  }
+
+  .file-upload--disabled {
+    opacity: 0.5;
+    pointer-events: none;
+  }
+
+  .file-upload__drop-zone {
+    border: 2px dashed var(--smrt-color-outline-variant, #c4c6d0);
+    border-radius: var(--smrt-radius-large, 12px);
+    padding: var(--smrt-spacing-5, 20px);
+    text-align: center;
+    transition:
+      border-color var(--smrt-duration-short2, 150ms),
+      background var(--smrt-duration-short2, 150ms);
+  }
+
+  .file-upload__drop-zone--active {
+    border-color: var(--smrt-color-primary, #005ac1);
+    background: var(--smrt-color-primary-container, #d6e3ff);
+  }
+
+  .file-upload__drop-zone--disabled {
+    cursor: not-allowed;
+  }
+
+  .file-upload__label {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: var(--smrt-spacing-2, 8px);
+    cursor: pointer;
+  }
+
+  .file-upload__drop-zone--disabled .file-upload__label {
+    cursor: not-allowed;
+  }
+
+  .file-upload__input {
+    display: none;
+  }
+
+  .file-upload__icon {
+    color: var(--smrt-color-outline, #74777f);
+  }
+
+  .file-upload__text {
+    font: var(--smrt-typography-body-medium-font, 0.875rem/1.4 sans-serif);
+    color: var(--smrt-color-on-surface, #1a1c1e);
+  }
+
+  .file-upload__hint {
+    font: var(--smrt-typography-label-small-font, 500 0.6875rem/1 sans-serif);
+    color: var(--smrt-color-outline, #74777f);
+  }
+
+  .file-upload__preview {
+    display: flex;
+    flex-direction: column;
+    gap: var(--smrt-spacing-1, 4px);
+    padding: var(--smrt-spacing-2, 8px);
+    background: var(--smrt-color-surface-container-low, #f7f7fb);
+    border-radius: var(--smrt-radius-medium, 8px);
+    border: 1px solid var(--smrt-color-outline-variant, #c4c6d0);
+  }
+
+  .file-upload__file {
+    display: flex;
+    align-items: center;
+    gap: var(--smrt-spacing-2, 8px);
+    padding: var(--smrt-spacing-2, 8px);
+    border-radius: var(--smrt-radius-small, 4px);
+    background: var(--smrt-color-surface, #fefbff);
+  }
+
+  .file-upload__file-icon {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 28px;
+    height: 28px;
+    border-radius: var(--smrt-radius-small, 4px);
+    background: var(--smrt-color-surface-variant, #e1e2ec);
+    font: var(--smrt-typography-label-small-font, 500 0.6875rem/1 sans-serif);
+    color: var(--smrt-color-on-surface-variant, #43474e);
+    text-transform: uppercase;
+    flex-shrink: 0;
+  }
+
+  .file-upload__file-info {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    gap: var(--smrt-spacing-1, 4px);
+    min-width: 0;
+  }
+
+  .file-upload__file-name {
+    font: var(--smrt-typography-body-small-font, 0.8125rem/1.4 sans-serif);
+    color: var(--smrt-color-on-surface, #1a1c1e);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  .file-upload__file-size {
+    font: var(--smrt-typography-label-small-font, 500 0.6875rem/1 sans-serif);
+    color: var(--smrt-color-outline, #74777f);
+  }
+
+  .file-upload__file-remove {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 24px;
+    height: 24px;
+    border: none;
+    background: none;
+    color: var(--smrt-color-on-surface-variant, #43474e);
+    cursor: pointer;
+    border-radius: var(--smrt-radius-full, 9999px);
+    flex-shrink: 0;
+    transition: background var(--smrt-duration-short2, 150ms);
+  }
+
+  .file-upload__file-remove:hover {
+    background: var(--smrt-color-error-container, #ffdad6);
+    color: var(--smrt-color-error, #ba1a1a);
+  }
+
+  .file-upload__preview-actions {
+    display: flex;
+    gap: var(--smrt-spacing-2, 8px);
+    padding-top: var(--smrt-spacing-1, 4px);
+  }
+
+  .file-upload__confirm-btn {
+    padding: var(--smrt-spacing-2, 8px) var(--smrt-spacing-4, 16px);
+    border: none;
+    border-radius: var(--smrt-radius-full, 9999px);
+    background: var(--smrt-color-primary, #005ac1);
+    color: var(--smrt-color-on-primary, #ffffff);
+    font: var(--smrt-typography-label-large-font, 500 0.875rem/1.25 sans-serif);
+    cursor: pointer;
+    transition: opacity var(--smrt-duration-short2, 150ms);
+  }
+
+  .file-upload__confirm-btn:hover {
+    opacity: 0.85;
+  }
+
+  .file-upload__confirm-btn:focus-visible {
+    outline: 2px solid var(--smrt-color-primary, #005ac1);
+    outline-offset: 2px;
+  }
+
+  .file-upload__clear-btn {
+    padding: var(--smrt-spacing-2, 8px) var(--smrt-spacing-4, 16px);
+    border: 1px solid var(--smrt-color-outline, #74777f);
+    border-radius: var(--smrt-radius-full, 9999px);
+    background: transparent;
+    color: var(--smrt-color-on-surface-variant, #43474e);
+    font: var(--smrt-typography-label-large-font, 500 0.875rem/1.25 sans-serif);
+    cursor: pointer;
+    transition: background var(--smrt-duration-short2, 150ms);
+  }
+
+  .file-upload__clear-btn:hover {
+    background: var(--smrt-color-surface-variant, #e1e2ec);
+  }
+
+  .file-upload__error {
+    padding: var(--smrt-spacing-2, 8px) var(--smrt-spacing-3, 12px);
+    border-radius: var(--smrt-radius-small, 4px);
+    background: var(--smrt-color-error-container, #ffdad6);
+    color: var(--smrt-color-on-error-container, #410002);
+    font: var(--smrt-typography-body-small-font, 0.8125rem/1.4 sans-serif);
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .file-upload__drop-zone,
+    .file-upload__file-remove,
+    .file-upload__confirm-btn,
+    .file-upload__clear-btn {
+      transition: none;
+    }
+  }
+</style>

package/dist/svelte/components/shared/FileUpload.svelte.d.ts

@@ -0,0 +1,14 @@
+export interface Props {
+    /** Callback when files are selected */
+    onupload: (files: FileList) => void;
+    /** Accepted file types (e.g., "image/*,.pdf") */
+    accept?: string;
+    /** Maximum file size in bytes */
+    maxSize?: number;
+    /** Whether the upload is disabled */
+    disabled?: boolean;
+}
+declare const FileUpload: import("svelte").Component<Props, {}, "">;
+type FileUpload = ReturnType<typeof FileUpload>;
+export default FileUpload;
+//# sourceMappingURL=FileUpload.svelte.d.ts.map

package/dist/svelte/components/shared/FileUpload.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FileUpload.svelte.d.ts","sourceRoot":"","sources":["../../../../src/svelte/components/shared/FileUpload.svelte.ts"],"names":[],"mappings":"AAYA,MAAM,WAAW,KAAK;IACpB,uCAAuC;IACvC,QAAQ,EAAE,CAAC,KAAK,EAAE,QAAQ,KAAK,IAAI,CAAC;IACpC,iDAAiD;IACjD,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,iCAAiC;IACjC,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,qCAAqC;IACrC,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAyJD,QAAA,MAAM,UAAU,2CAAwC,CAAC;AACzD,KAAK,UAAU,GAAG,UAAU,CAAC,OAAO,UAAU,CAAC,CAAC;AAChD,eAAe,UAAU,CAAC"}

package/dist/svelte/components/shared/LinkPreview.svelte

@@ -0,0 +1,108 @@
+<script lang="ts">
+/**
+ * LinkPreview - URL preview card
+ * Compact card with thumbnail, title, and description.
+ */
+
+export interface Props {
+  /** The URL being previewed */
+  url: string;
+  /** Title of the linked page */
+  title?: string;
+  /** Description of the linked page */
+  description?: string;
+  /** Preview thumbnail image URL */
+  imageUrl?: string;
+}
+
+const { url, title, description, imageUrl }: Props = $props();
+
+const hostname = $derived.by(() => {
+  try {
+    return new URL(url).hostname;
+  } catch {
+    return url;
+  }
+});
+</script>
+
+<a class="link-preview" href={url} target="_blank" rel="noopener noreferrer">
+  {#if imageUrl}
+    <div class="link-preview__image">
+      <img src={imageUrl} alt={title ?? ''} />
+    </div>
+  {/if}
+  <div class="link-preview__body">
+    {#if title}
+      <span class="link-preview__title">{title}</span>
+    {/if}
+    {#if description}
+      <span class="link-preview__description">{description}</span>
+    {/if}
+    <span class="link-preview__domain">{hostname}</span>
+  </div>
+</a>
+
+<style>
+  .link-preview {
+    display: flex;
+    border: 1px solid var(--smrt-color-outline-variant, #c4c6cf);
+    border-radius: var(--smrt-radius-medium, 0.5rem);
+    overflow: hidden;
+    text-decoration: none;
+    color: inherit;
+    max-width: 360px;
+    transition: box-shadow var(--smrt-duration-short2, 150ms) var(--smrt-easing-standard, ease);
+  }
+
+  .link-preview:hover {
+    box-shadow: var(--smrt-elevation-1, 0 1px 3px rgba(0, 0, 0, 0.12));
+  }
+
+  .link-preview__image {
+    width: 80px;
+    min-height: 60px;
+    flex-shrink: 0;
+    overflow: hidden;
+    background: var(--smrt-color-surface-container, #f3f4f6);
+  }
+
+  .link-preview__image img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+
+  .link-preview__body {
+    display: flex;
+    flex-direction: column;
+    gap: var(--smrt-spacing-1, 0.25rem);
+    padding: var(--smrt-spacing-2, 0.375rem) var(--smrt-spacing-3, 0.75rem);
+    min-width: 0;
+    overflow: hidden;
+  }
+
+  .link-preview__title {
+    font-size: var(--smrt-typography-body-medium-size, 0.875rem);
+    font-weight: var(--smrt-typography-weight-medium, 500);
+    color: var(--smrt-color-on-surface, #1b1b1f);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  .link-preview__description {
+    font-size: var(--smrt-typography-body-small-size, 0.75rem);
+    color: var(--smrt-color-on-surface-variant, #43474e);
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    line-clamp: 2;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+  }
+
+  .link-preview__domain {
+    font-size: var(--smrt-typography-label-small-size, 0.6875rem);
+    color: var(--smrt-color-outline, #74777f);
+  }
+</style>

package/dist/svelte/components/shared/LinkPreview.svelte.d.ts

@@ -0,0 +1,18 @@
+/**
+ * LinkPreview - URL preview card
+ * Compact card with thumbnail, title, and description.
+ */
+export interface Props {
+    /** The URL being previewed */
+    url: string;
+    /** Title of the linked page */
+    title?: string;
+    /** Description of the linked page */
+    description?: string;
+    /** Preview thumbnail image URL */
+    imageUrl?: string;
+}
+declare const LinkPreview: import("svelte").Component<Props, {}, "">;
+type LinkPreview = ReturnType<typeof LinkPreview>;
+export default LinkPreview;
+//# sourceMappingURL=LinkPreview.svelte.d.ts.map

package/dist/svelte/components/shared/LinkPreview.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"LinkPreview.svelte.d.ts","sourceRoot":"","sources":["../../../../src/svelte/components/shared/LinkPreview.svelte.ts"],"names":[],"mappings":"AAGA;;;GAGG;AAEH,MAAM,WAAW,KAAK;IACpB,8BAA8B;IAC9B,GAAG,EAAE,MAAM,CAAC;IACZ,+BAA+B;IAC/B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,qCAAqC;IACrC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,kCAAkC;IAClC,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAoCD,QAAA,MAAM,WAAW,2CAAwC,CAAC;AAC1D,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC;AAClD,eAAe,WAAW,CAAC"}

package/dist/svelte/components/shared/MentionAutocomplete.svelte

@@ -0,0 +1,168 @@
+<script lang="ts">
+/**
+ * MentionAutocomplete - @mention suggestions popup
+ * Floating dropdown positioned near cursor. Shows matching profile names
+ * with optional avatars. Keyboard navigable.
+ */
+import { useI18n } from '@happyvertical/smrt-ui/i18n';
+import { M } from '../../i18n.js';
+import Avatar from './Avatar.svelte';
+
+const { t } = useI18n();
+
+export interface Props {
+  /** Current search query (text after @) */
+  query: string;
+  /** Matching suggestions */
+  suggestions: Array<{ id: string; name: string; avatarUrl?: string }>;
+  /** Select a suggestion */
+  onselect: (id: string) => void;
+  /** Whether the popup is visible */
+  isVisible: boolean;
+}
+
+const { query, suggestions, onselect, isVisible }: Props = $props();
+
+let activeIndex = $state(0);
+
+// Reset active index when suggestions change
+$effect(() => {
+  if (suggestions.length) {
+    activeIndex = 0;
+  }
+});
+
+function handleKeydown(event: KeyboardEvent) {
+  if (!isVisible || suggestions.length === 0) return;
+
+  switch (event.key) {
+    case 'ArrowDown':
+      event.preventDefault();
+      activeIndex = (activeIndex + 1) % suggestions.length;
+      break;
+    case 'ArrowUp':
+      event.preventDefault();
+      activeIndex = (activeIndex - 1 + suggestions.length) % suggestions.length;
+      break;
+    case 'Enter':
+    case 'Tab':
+      event.preventDefault();
+      onselect(suggestions[activeIndex].id);
+      break;
+    case 'Escape':
+      break;
+  }
+}
+
+function highlightMatch(
+  name: string,
+  q: string,
+): { before: string; match: string; after: string } {
+  if (!q) return { before: name, match: '', after: '' };
+  const lower = name.toLowerCase();
+  const idx = lower.indexOf(q.toLowerCase());
+  if (idx === -1) return { before: name, match: '', after: '' };
+  return {
+    before: name.slice(0, idx),
+    match: name.slice(idx, idx + q.length),
+    after: name.slice(idx + q.length),
+  };
+}
+</script>
+
+<svelte:window onkeydown={isVisible ? handleKeydown : undefined} />
+
+{#if isVisible && suggestions.length > 0}
+  <div
+    class="mention-autocomplete"
+    role="listbox"
+    aria-label={t(M['chat.mention_autocomplete.suggestions'])}
+  >
+    {#each suggestions as suggestion, i (suggestion.id)}
+      {@const parts = highlightMatch(suggestion.name, query)}
+      <button
+        class="mention-autocomplete__item"
+        class:mention-autocomplete__item--active={i === activeIndex}
+        type="button"
+        role="option"
+        aria-selected={i === activeIndex}
+        onclick={() => onselect(suggestion.id)}
+        onpointerenter={() => activeIndex = i}
+      >
+        <Avatar
+          name={suggestion.name}
+          avatarUrl={suggestion.avatarUrl}
+          size="sm"
+        />
+        <span class="mention-autocomplete__name">
+          {parts.before}<mark class="mention-autocomplete__highlight">{parts.match}</mark>{parts.after}
+        </span>
+      </button>
+    {/each}
+  </div>
+{/if}
+
+<style>
+  .mention-autocomplete {
+    position: absolute;
+    bottom: 100%;
+    left: 0;
+    margin-bottom: var(--smrt-spacing-1, 4px);
+    min-width: 200px;
+    max-width: 320px;
+    max-height: 240px;
+    overflow-y: auto;
+    background: var(--smrt-color-surface, #fefbff);
+    border: 1px solid var(--smrt-color-outline-variant, #c4c6d0);
+    border-radius: var(--smrt-radius-medium, 8px);
+    box-shadow: var(--smrt-elevation-2, 0 2px 8px rgba(0, 0, 0, 0.15));
+    z-index: var(--smrt-z-index-dropdown, 1000);
+    padding: var(--smrt-spacing-1, 4px);
+    display: flex;
+    flex-direction: column;
+  }
+
+  .mention-autocomplete__item {
+    display: flex;
+    align-items: center;
+    gap: var(--smrt-spacing-2, 8px);
+    width: 100%;
+    padding: var(--smrt-spacing-2, 8px);
+    border: none;
+    background: transparent;
+    cursor: pointer;
+    text-align: left;
+    color: var(--smrt-color-on-surface, #1a1c1e);
+    border-radius: var(--smrt-radius-small, 4px);
+    transition: background var(--smrt-duration-short2, 150ms);
+  }
+
+  .mention-autocomplete__item:hover,
+  .mention-autocomplete__item--active {
+    background: var(--smrt-color-surface-container-high, #e6e6ea);
+  }
+
+  .mention-autocomplete__item:focus-visible {
+    outline: 2px solid var(--smrt-color-primary, #005ac1);
+    outline-offset: -2px;
+  }
+
+  .mention-autocomplete__name {
+    font: var(--smrt-typography-body-medium-font, 0.875rem/1.25 sans-serif);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  .mention-autocomplete__highlight {
+    background: transparent;
+    color: var(--smrt-color-primary, #005ac1);
+    font-weight: var(--smrt-typography-weight-semibold, 600);
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .mention-autocomplete__item {
+      transition: none;
+    }
+  }
+</style>