@happyvertical/smrt-ui 0.30.0

package/dist/components/roles/RoleBadge.svelte

@@ -0,0 +1,84 @@
+<script lang="ts">
+/**
+ * RoleBadge - Role label component
+ * refactored for Material 3
+ */
+import type { Role } from '@happyvertical/smrt-types';
+
+export interface Props {
+  role: Role;
+  size?: 'sm' | 'md' | 'lg';
+}
+
+const { role, size = 'md' }: Props = $props();
+
+const variantClass = $derived.by(() => {
+  switch (role.slug) {
+    case 'owner':
+      return 'variant-owner';
+    case 'admin':
+      return 'variant-admin';
+    case 'member':
+      return 'variant-member';
+    default:
+      return 'variant-default';
+  }
+});
+</script>
+
+<span
+  class="role-badge {variantClass}"
+  class:sm={size === 'sm'}
+  class:lg={size === 'lg'}
+>
+  {role.name}
+</span>
+
+<style>
+  .role-badge {
+    display: inline-flex;
+    align-items: center;
+    padding: 0 var(--smrt-spacing-3, 12px);
+    height: 24px;
+    font: var(--smrt-typography-label-large-font);
+    font-weight: var(--smrt-typography-weight-semibold, 600);
+    border-radius: var(--smrt-radius-md, 8px);
+    white-space: nowrap;
+    transition: all 200ms cubic-bezier(0.2, 0, 0, 1);
+  }
+
+  .role-badge.sm {
+    padding: 0 var(--smrt-spacing-2, 8px);
+    height: 20px;
+    font: var(--smrt-typography-label-small-font);
+    font-weight: var(--smrt-typography-weight-semibold, 600);
+  }
+
+  .role-badge.lg {
+    padding: 0 var(--smrt-spacing-4, 16px);
+    height: 32px;
+    font: var(--smrt-typography-title-small-font);
+    font-weight: var(--smrt-typography-weight-semibold, 600);
+  }
+
+  /* Variant Colors using M3 roles */
+  .variant-owner {
+    background-color: var(--smrt-color-tertiary-container);
+    color: var(--smrt-color-on-tertiary-container);
+  }
+
+  .variant-admin {
+    background-color: var(--smrt-color-primary-container);
+    color: var(--smrt-color-on-primary-container);
+  }
+
+  .variant-member {
+    background-color: var(--smrt-color-secondary-container);
+    color: var(--smrt-color-on-secondary-container);
+  }
+
+  .variant-default {
+    background-color: var(--smrt-color-surface-variant);
+    color: var(--smrt-color-on-surface-variant);
+  }
+</style>

package/dist/components/roles/RoleBadge.svelte.d.ts

@@ -0,0 +1,13 @@
+/**
+ * RoleBadge - Role label component
+ * refactored for Material 3
+ */
+import type { Role } from '@happyvertical/smrt-types';
+export interface Props {
+    role: Role;
+    size?: 'sm' | 'md' | 'lg';
+}
+declare const RoleBadge: import("svelte").Component<Props, {}, "">;
+type RoleBadge = ReturnType<typeof RoleBadge>;
+export default RoleBadge;
+//# sourceMappingURL=RoleBadge.svelte.d.ts.map

package/dist/components/roles/RoleBadge.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"RoleBadge.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/roles/RoleBadge.svelte.ts"],"names":[],"mappings":"AAGA;;;GAGG;AACH,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,2BAA2B,CAAC;AAGtD,MAAM,WAAW,KAAK;IACpB,IAAI,EAAE,IAAI,CAAC;IACX,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;CAC3B;AA6BD,QAAA,MAAM,SAAS,2CAAwC,CAAC;AACxD,KAAK,SAAS,GAAG,UAAU,CAAC,OAAO,SAAS,CAAC,CAAC;AAC9C,eAAe,SAAS,CAAC"}

package/dist/components/roles/RoleSelector.svelte

@@ -0,0 +1,216 @@
+<script lang="ts">
+import type { Role } from '@happyvertical/smrt-types';
+
+export interface Props {
+  roles: Role[];
+  value?: string | null;
+  onchange: (roleId: string) => void;
+  disabled?: boolean;
+  placeholder?: string;
+  showDescription?: boolean;
+}
+
+const {
+  roles,
+  value = null,
+  onchange,
+  disabled = false,
+  placeholder = 'Select a role',
+  showDescription = false,
+}: Props = $props();
+
+let open = $state(false);
+const selectedRole = $derived(roles.find((r) => r.id === value));
+
+function handleSelect(roleId: string) {
+  onchange(roleId);
+  open = false;
+}
+
+function handleKeydown(e: KeyboardEvent) {
+  if (e.key === 'Escape') {
+    open = false;
+  }
+}
+</script>
+
+<svelte:window onkeydown={handleKeydown} />
+
+<div class="role-selector" class:disabled>
+  <button
+    type="button"
+    class="trigger"
+    class:open
+    onclick={() => (open = !open)}
+    {disabled}
+    aria-haspopup="listbox"
+    aria-expanded={open}
+  >
+    {#if selectedRole}
+      <span class="selected">
+        <span class="role-name">{selectedRole.name}</span>
+        {#if selectedRole.isSystem}
+          <span class="system-badge">System</span>
+        {/if}
+      </span>
+    {:else}
+      <span class="placeholder">{placeholder}</span>
+    {/if}
+    <svg class="chevron" viewBox="0 0 20 20" fill="currentColor">
+      <path
+        fill-rule="evenodd"
+        d="M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z"
+        clip-rule="evenodd"
+      />
+    </svg>
+  </button>
+
+  {#if open}
+    <div class="dropdown" role="listbox">
+      {#each roles as role (role.id)}
+        <button
+          type="button"
+          class="option"
+          class:selected={role.id === value}
+          onclick={() => handleSelect(role.id!)}
+          role="option"
+          aria-selected={role.id === value}
+        >
+          <div class="option-content">
+            <span class="role-name">{role.name}</span>
+            {#if role.isSystem}
+              <span class="system-badge">System</span>
+            {/if}
+          </div>
+          {#if showDescription && role.description}
+            <span class="description">{role.description}</span>
+          {/if}
+        </button>
+      {/each}
+    </div>
+  {/if}
+</div>
+
+<style>
+  .role-selector {
+    position: relative;
+    width: 100%;
+  }
+
+  .role-selector.disabled {
+    opacity: 0.6;
+  }
+
+  .trigger {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    width: 100%;
+    padding: 0.5rem 0.75rem;
+    background: var(--smrt-color-surface, white);
+    border: 1px solid var(--smrt-color-outline-variant, #d1d5db);
+    border-radius: var(--smrt-radius-small, 0.375rem);
+    font-size: var(--smrt-typography-body-medium-size, 0.875rem);
+    cursor: pointer;
+    text-align: left;
+  }
+
+  .trigger:focus {
+    outline: none;
+    border-color: var(--smrt-color-primary, #005ac1);
+    box-shadow: 0 0 0 3px color-mix(in srgb, var(--smrt-color-primary, #005ac1) 10%, transparent);
+  }
+
+  .trigger.open {
+    border-color: var(--smrt-color-primary, #005ac1);
+  }
+
+  .trigger:disabled {
+    background: var(--smrt-color-surface-container-high, #f3f4f6);
+    cursor: not-allowed;
+  }
+
+  .selected {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+
+  .placeholder {
+    color: var(--smrt-color-on-surface-variant, #9ca3af);
+  }
+
+  .chevron {
+    width: 1.25rem;
+    height: 1.25rem;
+    color: var(--smrt-color-on-surface-variant, #6b7280);
+    transition: transform var(--smrt-duration-short2, 150ms) var(--smrt-easing-standard, ease);
+  }
+
+  .trigger.open .chevron {
+    transform: rotate(180deg);
+  }
+
+  .dropdown {
+    position: absolute;
+    top: 100%;
+    left: 0;
+    right: 0;
+    margin-top: 0.25rem;
+    background: var(--smrt-color-surface, white);
+    border: 1px solid var(--smrt-color-outline-variant, #e5e7eb);
+    border-radius: var(--smrt-radius-small, 0.375rem);
+    box-shadow: var(--smrt-elevation-2, 0 4px 6px -1px rgba(0, 0, 0, 0.1));
+    z-index: var(--smrt-z-index-dropdown, 1000);
+    max-height: 15rem;
+    overflow-y: auto;
+  }
+
+  .option {
+    display: flex;
+    flex-direction: column;
+    gap: 0.125rem;
+    width: 100%;
+    padding: 0.5rem 0.75rem;
+    background: none;
+    border: none;
+    font-size: var(--smrt-typography-body-medium-size, 0.875rem);
+    cursor: pointer;
+    text-align: left;
+  }
+
+  .option:hover {
+    background: var(--smrt-color-surface-container-high, #f3f4f6);
+  }
+
+  .option.selected {
+    background: var(--smrt-color-primary-container, #eff6ff);
+  }
+
+  .option-content {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+
+  .role-name {
+    font-weight: var(--smrt-typography-weight-medium, 500);
+    color: var(--smrt-color-on-surface, #111827);
+    text-transform: capitalize;
+  }
+
+  .system-badge {
+    font-size: var(--smrt-typography-label-small-size, 0.625rem);
+    padding: 0.125rem 0.375rem;
+    background: var(--smrt-color-primary-container, #dbeafe);
+    color: var(--smrt-color-on-primary-container, #1e40af);
+    border-radius: var(--smrt-radius-full, 9999px);
+    text-transform: uppercase;
+    font-weight: var(--smrt-typography-weight-semibold, 600);
+  }
+
+  .description {
+    font-size: var(--smrt-typography-body-small-size, 0.75rem);
+    color: var(--smrt-color-on-surface-variant, #6b7280);
+  }
+</style>

package/dist/components/roles/RoleSelector.svelte.d.ts

@@ -0,0 +1,13 @@
+import type { Role } from '@happyvertical/smrt-types';
+export interface Props {
+    roles: Role[];
+    value?: string | null;
+    onchange: (roleId: string) => void;
+    disabled?: boolean;
+    placeholder?: string;
+    showDescription?: boolean;
+}
+declare const RoleSelector: import("svelte").Component<Props, {}, "">;
+type RoleSelector = ReturnType<typeof RoleSelector>;
+export default RoleSelector;
+//# sourceMappingURL=RoleSelector.svelte.d.ts.map

package/dist/components/roles/RoleSelector.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"RoleSelector.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/roles/RoleSelector.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,2BAA2B,CAAC;AAGtD,MAAM,WAAW,KAAK;IACpB,KAAK,EAAE,IAAI,EAAE,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB,QAAQ,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B;AAuED,QAAA,MAAM,YAAY,2CAAwC,CAAC;AAC3D,KAAK,YAAY,GAAG,UAAU,CAAC,OAAO,YAAY,CAAC,CAAC;AACpD,eAAe,YAAY,CAAC"}

package/dist/components/theme/ThemeProvider.svelte

@@ -0,0 +1,71 @@
+<script lang="ts">
+import {
+  elevationTokens,
+  typographyTokens,
+} from '../../utils/theme/typography.js';
+import { setThemeContext, type ThemeMode } from './context.svelte.js';
+
+interface Props {
+  seed?: string;
+  mode?: ThemeMode;
+  children?: import('svelte').Snippet;
+}
+
+const { seed = '#6750A4', mode = 'system', children }: Props = $props();
+
+function getInitialThemeState() {
+  return { seed, mode };
+}
+
+const initialThemeState = getInitialThemeState();
+const themeState = setThemeContext(
+  initialThemeState.seed,
+  initialThemeState.mode,
+);
+
+// Sync props to state if they change
+$effect(() => {
+  themeState.setSeed(seed);
+});
+
+$effect(() => {
+  themeState.setMode(mode);
+});
+
+// Convert theme object to CSS variables string
+const cssVariables = $derived.by(() => {
+  const themeVars = Object.entries(themeState.theme)
+    .map(([key, value]) => {
+      // camelCase to kebab-case: onPrimary -> --md-sys-color-on-primary
+      const kebab = key
+        .replace(/([a-z0-9]|(?=[A-Z]))([A-Z])/g, '$1-$2')
+        .toLowerCase();
+      return `--md-sys-color-${kebab}: ${value};`;
+    })
+    .join('\n');
+
+  const typoVars = Object.entries(typographyTokens)
+    .map(([key, value]) => `${key}: ${value};`)
+    .join('\n');
+
+  const elevationVars = Object.entries(elevationTokens)
+    .map(([key, value]) => `${key}: ${value};`)
+    .join('\n');
+
+  return [themeVars, typoVars, elevationVars].join('\n');
+});
+</script>
+
+<div class="smrt-theme-provider" style={cssVariables}>
+  {@render children?.()}
+</div>
+
+<style>
+  .smrt-theme-provider {
+    display: contents;
+    /* Base typography and other global resets can go here later */
+    color: var(--md-sys-color-on-background);
+    background-color: var(--md-sys-color-background);
+    font-family: var(--smrt-font-family, Roboto, sans-serif);
+  }
+</style>

package/dist/components/theme/ThemeProvider.svelte.d.ts

@@ -0,0 +1,10 @@
+import { type ThemeMode } from './context.svelte.js';
+interface Props {
+    seed?: string;
+    mode?: ThemeMode;
+    children?: import('svelte').Snippet;
+}
+declare const ThemeProvider: import("svelte").Component<Props, {}, "">;
+type ThemeProvider = ReturnType<typeof ThemeProvider>;
+export default ThemeProvider;
+//# sourceMappingURL=ThemeProvider.svelte.d.ts.map

package/dist/components/theme/ThemeProvider.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ThemeProvider.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/theme/ThemeProvider.svelte.ts"],"names":[],"mappings":"AAOA,OAAO,EAAmB,KAAK,SAAS,EAAE,MAAM,qBAAqB,CAAC;AAGtE,UAAU,KAAK;IACb,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,QAAQ,CAAC,EAAE,OAAO,QAAQ,EAAE,OAAO,CAAC;CACrC;AA2DD,QAAA,MAAM,aAAa,2CAAwC,CAAC;AAC5D,KAAK,aAAa,GAAG,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC;AACtD,eAAe,aAAa,CAAC"}

package/dist/components/theme/context.svelte.d.ts

@@ -0,0 +1,15 @@
+import { type Theme } from '../../utils/theme/color.js';
+export type ThemeMode = 'light' | 'dark' | 'system';
+export declare class ThemeState {
+    mode: ThemeMode;
+    seed: string;
+    systemPrefersDark: boolean;
+    constructor(initialSeed?: string, initialMode?: ThemeMode);
+    get effectiveMode(): 'light' | 'dark';
+    get theme(): Theme;
+    setMode(mode: ThemeMode): void;
+    setSeed(seed: string): void;
+}
+export declare function setThemeContext(seed?: string, mode?: ThemeMode): ThemeState;
+export declare function getThemeContext(): ThemeState;
+//# sourceMappingURL=context.svelte.d.ts.map

package/dist/components/theme/context.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"context.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/theme/context.svelte.ts"],"names":[],"mappings":"AACA,OAAO,EAAiB,KAAK,KAAK,EAAE,MAAM,4BAA4B,CAAC;AAIvE,MAAM,MAAM,SAAS,GAAG,OAAO,GAAG,MAAM,GAAG,QAAQ,CAAC;AAEpD,qBAAa,UAAU;IACrB,IAAI,YAA+B;IACnC,IAAI,SAA6B;IACjC,iBAAiB,UAA0B;gBAGzC,WAAW,GAAE,MAAkB,EAC/B,WAAW,GAAE,SAAoB;IAenC,IAAI,aAAa,IAAI,OAAO,GAAG,MAAM,CAKpC;IAED,IAAI,KAAK,IAAI,KAAK,CAEjB;IAED,OAAO,CAAC,IAAI,EAAE,SAAS;IAIvB,OAAO,CAAC,IAAI,EAAE,MAAM;CAGrB;AAED,wBAAgB,eAAe,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,IAAI,CAAC,EAAE,SAAS,cAI9D;AAED,wBAAgB,eAAe,eAE9B"}

package/dist/components/theme/context.svelte.js

@@ -0,0 +1,42 @@
+import { getContext, setContext } from 'svelte';
+import { generateTheme } from '../../utils/theme/color.js';
+const THEME_KEY = Symbol('SMRT_THEME');
+export class ThemeState {
+    mode = $state('system');
+    seed = $state('#6750A4');
+    systemPrefersDark = $state(false);
+    constructor(initialSeed = '#6750A4', initialMode = 'system') {
+        this.seed = initialSeed;
+        this.mode = initialMode;
+        if (typeof window !== 'undefined') {
+            const mq = window.matchMedia('(prefers-color-scheme: dark)');
+            this.systemPrefersDark = mq.matches;
+            mq.addEventListener('change', (e) => {
+                this.systemPrefersDark = e.matches;
+            });
+        }
+    }
+    get effectiveMode() {
+        if (this.mode === 'system') {
+            return this.systemPrefersDark ? 'dark' : 'light';
+        }
+        return this.mode;
+    }
+    get theme() {
+        return generateTheme(this.seed, this.effectiveMode);
+    }
+    setMode(mode) {
+        this.mode = mode;
+    }
+    setSeed(seed) {
+        this.seed = seed;
+    }
+}
+export function setThemeContext(seed, mode) {
+    const themeState = new ThemeState(seed, mode);
+    setContext(THEME_KEY, themeState);
+    return themeState;
+}
+export function getThemeContext() {
+    return getContext(THEME_KEY);
+}

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

@@ -0,0 +1,3 @@
+export { getThemeContext, type ThemeMode } from './context.svelte.js';
+export { default as ThemeProvider } from './ThemeProvider.svelte';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/theme/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,KAAK,SAAS,EAAE,MAAM,qBAAqB,CAAC;AACtE,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,wBAAwB,CAAC"}

package/dist/components/theme/index.js

@@ -0,0 +1,2 @@
+export { getThemeContext } from './context.svelte.js';
+export { default as ThemeProvider } from './ThemeProvider.svelte';

package/dist/components/ui/Avatar.svelte

@@ -0,0 +1,167 @@
+<script lang="ts">
+/**
+ * Avatar — user/entity image with initials fallback and optional presence dot.
+ *
+ * Renders the image when `src` is set, otherwise initials derived from `name`.
+ * `name` is always the accessible label (image alt / initials aria-label), so an
+ * Avatar is never an unlabelled graphic.
+ */
+import type { HTMLAttributes } from 'svelte/elements';
+
+export type AvatarSize = 'sm' | 'md' | 'lg' | 'xl';
+export type AvatarStatus = 'online' | 'offline' | 'away' | 'busy';
+
+export interface Props extends Omit<HTMLAttributes<HTMLSpanElement>, 'class'> {
+  /** Image URL. When absent, initials from `name` are shown. */
+  src?: string;
+  /** Accessible name; also the image alt and initials fallback source. */
+  name: string;
+  /** Size variant. */
+  size?: AvatarSize;
+  /** Optional presence indicator. */
+  status?: AvatarStatus;
+  /** Extra class on the root. */
+  class?: string;
+}
+
+const {
+  src,
+  name,
+  size = 'md',
+  status,
+  class: className = '',
+  ...rest
+}: Props = $props();
+
+// Fall back to initials if the image fails to load (e.g. a dead avatar URL).
+let imgFailed = $state(false);
+// Reset the failure flag whenever the source changes.
+$effect(() => {
+  src;
+  imgFailed = false;
+});
+
+/** First+last initial (or first two letters of a single word). */
+function initialsOf(value: string): string {
+  const parts = value.trim().split(/\s+/).filter(Boolean);
+  if (parts.length === 0) return '?';
+  if (parts.length === 1) return parts[0].slice(0, 2).toUpperCase();
+  return (parts[0][0] + parts[parts.length - 1][0]).toUpperCase();
+}
+
+const statusLabels: Record<AvatarStatus, string> = {
+  online: 'Online',
+  offline: 'Offline',
+  away: 'Away',
+  busy: 'Busy',
+};
+</script>
+
+<span class="avatar {size} {className}" {...rest}>
+  {#if src && !imgFailed}
+    <img
+      class="avatar__img"
+      {src}
+      alt={name}
+      onerror={() => {
+        imgFailed = true;
+      }}
+    />
+  {:else}
+    <span class="avatar__initials" role="img" aria-label={name}>
+      {initialsOf(name)}
+    </span>
+  {/if}
+  {#if status}
+    <span class="avatar__status {status}">
+      <span class="avatar__sr-only">{statusLabels[status]}</span>
+    </span>
+  {/if}
+</span>
+
+<style>
+  .avatar {
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    border-radius: var(--smrt-radius-full, 9999px);
+    background: var(--smrt-color-surface-container-high);
+    color: var(--smrt-color-on-surface-variant);
+    font-weight: var(--smrt-typography-weight-medium, 500);
+    overflow: visible;
+    user-select: none;
+  }
+
+  .avatar__img {
+    width: 100%;
+    height: 100%;
+    border-radius: inherit;
+    object-fit: cover;
+  }
+
+  .avatar__initials {
+    line-height: 1;
+  }
+
+  /* Sizes */
+  .sm {
+    width: 24px;
+    height: 24px;
+    font-size: var(--smrt-typography-label-small-size, 0.6875rem);
+  }
+  .md {
+    width: 36px;
+    height: 36px;
+    font-size: var(--smrt-typography-label-large-size, 0.875rem);
+  }
+  .lg {
+    width: 48px;
+    height: 48px;
+    font-size: var(--smrt-typography-title-medium-size, 1rem);
+  }
+  .xl {
+    width: 64px;
+    height: 64px;
+    font-size: var(--smrt-typography-title-large-size, 1.375rem);
+  }
+
+  /* Presence dot */
+  .avatar__status {
+    position: absolute;
+    right: 0;
+    bottom: 0;
+    width: 28%;
+    height: 28%;
+    min-width: 8px;
+    min-height: 8px;
+    border-radius: var(--smrt-radius-full, 9999px);
+    border: 2px solid var(--smrt-color-surface);
+    box-sizing: border-box;
+  }
+  .avatar__status.online {
+    background: var(--smrt-color-success, #2e7d32);
+  }
+  .avatar__status.offline {
+    background: var(--smrt-color-outline, #79747e);
+  }
+  .avatar__status.away {
+    background: var(--smrt-color-warning, #ed6c02);
+  }
+  .avatar__status.busy {
+    background: var(--smrt-color-error, #ba1a1a);
+  }
+
+  .avatar__sr-only {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border: 0;
+  }
+</style>

package/dist/components/ui/Avatar.svelte.d.ts

@@ -0,0 +1,26 @@
+/**
+ * Avatar — user/entity image with initials fallback and optional presence dot.
+ *
+ * Renders the image when `src` is set, otherwise initials derived from `name`.
+ * `name` is always the accessible label (image alt / initials aria-label), so an
+ * Avatar is never an unlabelled graphic.
+ */
+import type { HTMLAttributes } from 'svelte/elements';
+export type AvatarSize = 'sm' | 'md' | 'lg' | 'xl';
+export type AvatarStatus = 'online' | 'offline' | 'away' | 'busy';
+export interface Props extends Omit<HTMLAttributes<HTMLSpanElement>, 'class'> {
+    /** Image URL. When absent, initials from `name` are shown. */
+    src?: string;
+    /** Accessible name; also the image alt and initials fallback source. */
+    name: string;
+    /** Size variant. */
+    size?: AvatarSize;
+    /** Optional presence indicator. */
+    status?: AvatarStatus;
+    /** Extra class on the root. */
+    class?: string;
+}
+declare const Avatar: import("svelte").Component<Props, {}, "">;
+type Avatar = ReturnType<typeof Avatar>;
+export default Avatar;
+//# sourceMappingURL=Avatar.svelte.d.ts.map