@svgrid/grid 3.0.0 → 3.0.2

package/dist/GridMenus.svelte

@@ -10,6 +10,7 @@
   import "./sv-grid-scrollbar";
   import { onScrollOutside } from "./a11y/dismissable";
   import type { Snippet } from "svelte";
+  import type { GridIconName } from "./grid-icons";
   import SvListBox from "./SvListBox.svelte";
   import type {
     FilterOperator,
@@ -23,7 +24,7 @@
 
   import type { SvGridController } from "./SvGrid.controller.svelte";
 
-  let { ctrl, icon }: { ctrl: SvGridController<TFeatures, TData>; icon: Snippet<[string]> } = $props();
+  let { ctrl, icon }: { ctrl: SvGridController<TFeatures, TData>; icon: Snippet<[GridIconName]> } = $props();
 
   // View facade: re-bind the controller's reactive members so the markup
   // (moved verbatim from SvGrid.svelte) stays identical.
@@ -403,7 +404,7 @@
               onclick={() => patchFilter(colId, { join: "OR" })}>OR</button>
             <button type="button" class="sv-grid-menu-join-x" title="Remove second condition"
               aria-label="Remove second condition"
-              onclick={() => patchFilter(colId, { operator2: undefined, value2: undefined, valueTo2: undefined, join: undefined })}>×</button>
+              onclick={() => patchFilter(colId, { operator2: undefined, value2: undefined, valueTo2: undefined, join: undefined })}>{@render icon("remove")}</button>
           </div>
           <select
             class="sv-grid-menu-operator-select"
@@ -452,11 +453,18 @@
           <span class="sv-grid-menu-head-note">{pickedCount} of {totalCount}</span>
         {/if}
       </div>
-      <input
-        class="sv-grid-menu-search"
-        placeholder="Search values..."
-        bind:value={ctrl.columnMenuSearch}
-      />
+      <!-- The magnifier used to be a background-image data URI in SvGrid.css
+           with a hard-coded stroke colour, so it ignored every theme and could
+           not be overridden. It is markup now, and the input keeps its own
+           class: focusFilterPanel() and a test both resolve `.sv-grid-menu-search`. -->
+      <span class="sv-grid-menu-search-wrap">
+        {@render icon("search")}
+        <input
+          class="sv-grid-menu-search"
+          placeholder="Search values..."
+          bind:value={ctrl.columnMenuSearch}
+        />
+      </span>
       <label class="sv-grid-facet sv-grid-facet-all">
         <input type="checkbox" checked={isAllFacetsChecked(colId)} onchange={() => toggleAllFacets(colId)} />
         <!-- Says what it will actually do: with a query typed it acts on the
@@ -593,7 +601,7 @@
           onclick={() => pinColumnLeft(menuColumnId)}
         >
           <span class="sv-grid-header-icon"
-            >{@render icon("op-startsWith")}</span
+            >{@render icon("pin-left")}</span
           > Pin to left
         </button>
         <button
@@ -604,7 +612,7 @@
           onclick={() => pinColumnRight(menuColumnId)}
         >
           <span class="sv-grid-header-icon"
-            >{@render icon("op-greaterThan")}</span
+            >{@render icon("pin-right")}</span
           > Pin to right
         </button>
         <button
@@ -614,7 +622,7 @@
           disabled={!menuPinSide}
           onclick={() => unpinColumn(menuColumnId)}
         >
-          <span class="sv-grid-header-icon">{@render icon("x")}</span> Unpin column
+          <span class="sv-grid-header-icon">{@render icon("unpin")}</span> Unpin column
         </button>
       {/if}
       <div class="sv-grid-menu-sep"></div>

package/dist/GridMenus.svelte.d.ts

@@ -1,11 +1,12 @@
 import { type RowData, type TableFeatures } from "./index.js";
 import "./sv-grid-scrollbar.js";
 import type { Snippet } from "svelte";
+import type { GridIconName } from "./grid-icons.js";
 import type { SvGridController } from "./SvGrid.controller.svelte.js";
 declare function $$render<TFeatures extends TableFeatures = TableFeatures, TData extends RowData = RowData>(): {
     props: {
         ctrl: SvGridController<TFeatures, TData>;
-        icon: Snippet<[string]>;
+        icon: Snippet<[GridIconName]>;
     };
     exports: {};
     bindings: "";

package/dist/SvAutoComplete.svelte

@@ -1,169 +1,169 @@
-<script lang="ts">
-  /**
-   * SvAutoComplete - a free-text input with a live-filtered suggestion list.
-   * Unlike SvComboBox, it accepts ANY value (the text), suggestions are just
-   * shortcuts. Parity: Smart `smart-input` (autocomplete). Emits the text string.
-   *
-   * One styled renderer over the headless `createAutocomplete` core; only
-   * portal/measure render concerns live here.
-   */
-  import { anchoredRect, portalToBody, popIn, type AnchoredRect } from './popover'
-  import { startPanelResize } from './panel-resize'
-  import { createDismissableLayer } from './a11y/dismissable'
-  import { type ListOption } from './list-option'
-  import SvField from './SvField.svelte'
-  import { nextEditorId, type SvEditorProps } from './editor-contract'
-  import { createAutocomplete } from './createAutocomplete.svelte'
-
-  type Props = SvEditorProps & {
-    value?: string
-    onChange?: (value: string) => void
-    /** Suggestions - strings or {value,label} (label is shown, value inserted). */
-    suggestions?: ReadonlyArray<string | ListOption>
-    minChars?: number
-    placeholder?: string
-    /** Show a bottom drag grip so the user can resize the open suggestion panel's
-     *  height (hidden when the panel flips upward, where there is no room to grow). */
-    resizable?: boolean
-  }
-
-  let {
-    value = $bindable(''),
-    onChange,
-    suggestions = [],
-    minChars = 1,
-    placeholder,
-    resizable = false,
-    disabled = false,
-    name,
-    size = 'md',
-    ariaLabel,
-    invalid = false,
-    block = false,
-    required = false,
-    error,
-    label,
-    hint,
-    dir,
-    id,
-    loading = false,
-  }: Props = $props()
-
-  const autoId = nextEditorId('sv-ac')
-  const uid = $derived(id ?? autoId)
-
-  let fieldEl = $state<HTMLInputElement | null>(null)
-  let panelEl = $state<HTMLDivElement | null>(null)
-  let rect = $state<AnchoredRect>({ top: 0, left: 0, width: 0, openUpward: false, maxHeight: 0, availHeight: 0 })
-  // User-chosen panel height (px) once they drag the resize grip; null = auto.
-  let userHeight = $state<number | null>(null)
-  const DEFAULT_CAP = 288
-  const panelMaxH = $derived(
-    resizable && userHeight != null ? Math.min(userHeight, rect.availHeight) : Math.min(rect.availHeight, DEFAULT_CAP),
-  )
-  const showGrip = $derived(resizable && !rect.openUpward)
-
-  const ac = createAutocomplete({
-    value: () => value,
-    onChange: (v) => { value = v; onChange?.(v) },
-    suggestions: () => suggestions,
-    minChars: () => minChars,
-    disabled: () => disabled,
-    ariaLabel: () => ariaLabel,
-    focusInput: () => fieldEl?.focus(),
-    id: () => uid,
-    invalid: () => invalid,
-    required: () => required,
-    error: () => error,
-    hint: () => hint,
-  })
-
-  function updatePos() {
-    if (!fieldEl) return
-    // estimatedHeight only picks the flip direction; real max-height is availHeight
-    // below, so the panel takes its natural content height. See SvComboBox. When
-    // the user has dragged the grip, anchor the flip decision to THAT height.
-    const est = resizable && userHeight != null ? userHeight : Math.min(ac.filtered.length, 8) * 34 + 12
-    rect = anchoredRect(fieldEl.getBoundingClientRect(), { estimatedHeight: est })
-  }
-
-  function startResize(e: PointerEvent) {
-    if (!panelEl) return
-    startPanelResize(e, {
-      startHeight: panelEl.clientHeight,
-      min: 96,
-      max: () => rect.availHeight,
-      onHeight: (h) => { userHeight = h; updatePos() },
-    })
-  }
-
-  $effect(() => {
-    if (!ac.open) return
-    updatePos()
-    const rp = () => updatePos()
-    window.addEventListener('scroll', rp, true); window.addEventListener('resize', rp)
-    const layer = createDismissableLayer({ element: () => [fieldEl, panelEl], onDismiss: () => ac.close(), closeOnEscape: false })
-    layer.activate()
-    return () => { window.removeEventListener('scroll', rp, true); window.removeEventListener('resize', rp); layer.release() }
-  })
-</script>
-
-<SvField id={uid} {label} {hint} {error} {required} {dir} {loading}>
-  <input
-    bind:this={fieldEl}
-    class="sv-ac sv-ac--{size}"
-    class:is-block={block}
-    class:is-invalid={invalid}
-    type="text"
-    {placeholder}
-    {...ac.inputProps()}
-  />
-</SvField>
-
-{#if ac.open}
-  <div bind:this={panelEl} class="sv-ddl__panel" class:is-resizable={showGrip} use:portalToBody use:popIn={{ up: rect.openUpward }} style:position="fixed" style:top={rect.openUpward ? undefined : `${rect.top}px`} style:bottom={rect.openUpward ? `${rect.bottom}px` : undefined} style:left={`${rect.left}px`} style:min-width={`${rect.width}px`} style:max-height={`${panelMaxH}px`} style:height={resizable && userHeight != null && !rect.openUpward ? `${panelMaxH}px` : undefined} {...ac.listboxProps()}>
-    {#each ac.filtered as opt, i (i)}
-      <!-- svelte-ignore a11y_click_events_have_key_events a11y_interactive_supports_focus -->
-      <div class="sv-ddl__opt" class:is-active={ac.isActive(i)} {...ac.optionProps(i)}>{opt.label}</div>
-    {/each}
-    {#if showGrip}
-      <!-- svelte-ignore a11y_no_static_element_interactions -->
-      <div class="sv-ddl__grip" onpointerdown={startResize} title="Drag to resize" aria-hidden="true">
-        <span class="sv-ddl__grip-dots"></span>
-      </div>
-    {/if}
-  </div>
-{/if}
-{#if name}<input type="hidden" {name} value={value} />{/if}
-
-<style>
-  .sv-ac {
-    --_accent: var(--sg-accent, #2563eb);
-    box-sizing: border-box; width: 220px;
-    background: var(--sg-input-bg, #fff); color: var(--sg-fg, #0f172a);
-    border: 1px solid var(--sg-input-border, var(--sg-border, #cbd5e1)); border-radius: var(--sg-radius, 8px);
-    font: inherit; padding: 0 10px; outline: none;
-  }
-  .sv-ac--sm { height: 28px; font-size: 12px; }
-  .sv-ac--md { height: 34px; font-size: 13px; }
-  .sv-ac--lg { height: 40px; font-size: 15px; }
-  .sv-ac:focus { border-color: var(--_accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--_accent) 22%, transparent); }
-  .sv-ac.is-invalid { border-color: var(--sg-danger, #dc2626); }
-  .sv-ac.is-invalid:focus { box-shadow: 0 0 0 2px color-mix(in srgb, var(--sg-danger, #dc2626) 22%, transparent); }
-  /* Bottom resize grip (shared "····" handle - see SvDropDownList / panel-resize). */
-  :global(.sv-ddl__panel.is-resizable) { padding-bottom: 0; }
-  :global(.sv-ddl__grip) {
-    position: sticky; bottom: 0; z-index: 1; margin: 2px -4px -4px; height: 15px;
-    display: flex; align-items: center; justify-content: center; cursor: ns-resize;
-    background: var(--sg-bg, #fff); border-top: 1px solid var(--sg-border, #e2e8f0);
-    border-radius: 0 0 10px 10px; touch-action: none;
-  }
-  :global(.sv-ddl__grip-dots) {
-    width: 26px; height: 4px; color: var(--sg-muted, #94a3b8); opacity: 0.6;
-    background-image: radial-gradient(currentColor 1px, transparent 1.6px);
-    background-size: 6px 4px; background-position: center; background-repeat: repeat-x;
-  }
-  :global(.sv-ddl__grip:hover .sv-ddl__grip-dots) { opacity: 1; }
-  /* Fill the container - see `block` in SvEditorProps. */
-  .sv-ac.is-block { width: 100%; max-width: 100%; }
-</style>
+<script lang="ts">
+  /**
+   * SvAutoComplete - a free-text input with a live-filtered suggestion list.
+   * Unlike SvComboBox, it accepts ANY value (the text), suggestions are just
+   * shortcuts. Parity: Smart `smart-input` (autocomplete). Emits the text string.
+   *
+   * One styled renderer over the headless `createAutocomplete` core; only
+   * portal/measure render concerns live here.
+   */
+  import { anchoredRect, portalToBody, popIn, type AnchoredRect } from './popover'
+  import { startPanelResize } from './panel-resize'
+  import { createDismissableLayer } from './a11y/dismissable'
+  import { type ListOption } from './list-option'
+  import SvField from './SvField.svelte'
+  import { nextEditorId, type SvEditorProps } from './editor-contract'
+  import { createAutocomplete } from './createAutocomplete.svelte'
+
+  type Props = SvEditorProps & {
+    value?: string
+    onChange?: (value: string) => void
+    /** Suggestions - strings or {value,label} (label is shown, value inserted). */
+    suggestions?: ReadonlyArray<string | ListOption>
+    minChars?: number
+    placeholder?: string
+    /** Show a bottom drag grip so the user can resize the open suggestion panel's
+     *  height (hidden when the panel flips upward, where there is no room to grow). */
+    resizable?: boolean
+  }
+
+  let {
+    value = $bindable(''),
+    onChange,
+    suggestions = [],
+    minChars = 1,
+    placeholder,
+    resizable = false,
+    disabled = false,
+    name,
+    size = 'md',
+    ariaLabel,
+    invalid = false,
+    block = false,
+    required = false,
+    error,
+    label,
+    hint,
+    dir,
+    id,
+    loading = false,
+  }: Props = $props()
+
+  const autoId = nextEditorId('sv-ac')
+  const uid = $derived(id ?? autoId)
+
+  let fieldEl = $state<HTMLInputElement | null>(null)
+  let panelEl = $state<HTMLDivElement | null>(null)
+  let rect = $state<AnchoredRect>({ top: 0, left: 0, width: 0, openUpward: false, maxHeight: 0, availHeight: 0 })
+  // User-chosen panel height (px) once they drag the resize grip; null = auto.
+  let userHeight = $state<number | null>(null)
+  const DEFAULT_CAP = 288
+  const panelMaxH = $derived(
+    resizable && userHeight != null ? Math.min(userHeight, rect.availHeight) : Math.min(rect.availHeight, DEFAULT_CAP),
+  )
+  const showGrip = $derived(resizable && !rect.openUpward)
+
+  const ac = createAutocomplete({
+    value: () => value,
+    onChange: (v) => { value = v; onChange?.(v) },
+    suggestions: () => suggestions,
+    minChars: () => minChars,
+    disabled: () => disabled,
+    ariaLabel: () => ariaLabel,
+    focusInput: () => fieldEl?.focus(),
+    id: () => uid,
+    invalid: () => invalid,
+    required: () => required,
+    error: () => error,
+    hint: () => hint,
+  })
+
+  function updatePos() {
+    if (!fieldEl) return
+    // estimatedHeight only picks the flip direction; real max-height is availHeight
+    // below, so the panel takes its natural content height. See SvComboBox. When
+    // the user has dragged the grip, anchor the flip decision to THAT height.
+    const est = resizable && userHeight != null ? userHeight : Math.min(ac.filtered.length, 8) * 34 + 12
+    rect = anchoredRect(fieldEl.getBoundingClientRect(), { estimatedHeight: est })
+  }
+
+  function startResize(e: PointerEvent) {
+    if (!panelEl) return
+    startPanelResize(e, {
+      startHeight: panelEl.clientHeight,
+      min: 96,
+      max: () => rect.availHeight,
+      onHeight: (h) => { userHeight = h; updatePos() },
+    })
+  }
+
+  $effect(() => {
+    if (!ac.open) return
+    updatePos()
+    const rp = () => updatePos()
+    window.addEventListener('scroll', rp, true); window.addEventListener('resize', rp)
+    const layer = createDismissableLayer({ element: () => [fieldEl, panelEl], onDismiss: () => ac.close(), closeOnEscape: false })
+    layer.activate()
+    return () => { window.removeEventListener('scroll', rp, true); window.removeEventListener('resize', rp); layer.release() }
+  })
+</script>
+
+<SvField id={uid} {label} {hint} {error} {required} {dir} {loading}>
+  <input
+    bind:this={fieldEl}
+    class="sv-ac sv-ac--{size}"
+    class:is-block={block}
+    class:is-invalid={invalid}
+    type="text"
+    {placeholder}
+    {...ac.inputProps()}
+  />
+</SvField>
+
+{#if ac.open}
+  <div bind:this={panelEl} class="sv-ddl__panel" class:is-resizable={showGrip} use:portalToBody use:popIn={{ up: rect.openUpward }} style:position="fixed" style:top={rect.openUpward ? undefined : `${rect.top}px`} style:bottom={rect.openUpward ? `${rect.bottom}px` : undefined} style:left={`${rect.left}px`} style:min-width={`${rect.width}px`} style:max-height={`${panelMaxH}px`} style:height={resizable && userHeight != null && !rect.openUpward ? `${panelMaxH}px` : undefined} {...ac.listboxProps()}>
+    {#each ac.filtered as opt, i (i)}
+      <!-- svelte-ignore a11y_click_events_have_key_events a11y_interactive_supports_focus -->
+      <div class="sv-ddl__opt" class:is-active={ac.isActive(i)} {...ac.optionProps(i)}>{opt.label}</div>
+    {/each}
+    {#if showGrip}
+      <!-- svelte-ignore a11y_no_static_element_interactions -->
+      <div class="sv-ddl__grip" onpointerdown={startResize} title="Drag to resize" aria-hidden="true">
+        <span class="sv-ddl__grip-dots"></span>
+      </div>
+    {/if}
+  </div>
+{/if}
+{#if name}<input type="hidden" {name} value={value} />{/if}
+
+<style>
+  .sv-ac {
+    --_accent: var(--sg-accent, #2563eb);
+    box-sizing: border-box; width: 220px;
+    background: var(--sg-input-bg, #fff); color: var(--sg-fg, #0f172a);
+    border: 1px solid var(--sg-input-border, var(--sg-border, #cbd5e1)); border-radius: var(--sg-radius, 8px);
+    font: inherit; padding: 0 10px; outline: none;
+  }
+  .sv-ac--sm { height: 28px; font-size: 12px; }
+  .sv-ac--md { height: 34px; font-size: 13px; }
+  .sv-ac--lg { height: 40px; font-size: 15px; }
+  .sv-ac:focus { border-color: var(--_accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--_accent) 22%, transparent); }
+  .sv-ac.is-invalid { border-color: var(--sg-danger, #dc2626); }
+  .sv-ac.is-invalid:focus { box-shadow: 0 0 0 2px color-mix(in srgb, var(--sg-danger, #dc2626) 22%, transparent); }
+  /* Bottom resize grip (shared "····" handle - see SvDropDownList / panel-resize). */
+  :global(.sv-ddl__panel.is-resizable) { padding-bottom: 0; }
+  :global(.sv-ddl__grip) {
+    position: sticky; bottom: 0; z-index: 1; margin: 2px -4px -4px; height: 15px;
+    display: flex; align-items: center; justify-content: center; cursor: ns-resize;
+    background: var(--sg-bg, #fff); border-top: 1px solid var(--sg-border, #e2e8f0);
+    border-radius: 0 0 10px 10px; touch-action: none;
+  }
+  :global(.sv-ddl__grip-dots) {
+    width: 26px; height: 4px; color: var(--sg-muted, #94a3b8); opacity: 0.6;
+    background-image: radial-gradient(currentColor 1px, transparent 1.6px);
+    background-size: 6px 4px; background-position: center; background-repeat: repeat-x;
+  }
+  :global(.sv-ddl__grip:hover .sv-ddl__grip-dots) { opacity: 1; }
+  /* Fill the container - see `block` in SvEditorProps. */
+  .sv-ac.is-block { width: 100%; max-width: 100%; }
+</style>

package/dist/SvAvatar.svelte

@@ -1,75 +1,75 @@
-<script lang="ts">
-  /**
-   * SvAvatar - a user/entity avatar: an image with an initials + colour-hash
-   * fallback (used when there is no `src` or the image fails to load), plus an
-   * optional presence status dot. Parity: Smart avatar.
-   *
-   * ```svelte
-   * <SvAvatar name="Ada Lovelace" src="/ada.jpg" status="online" />
-   * ```
-   */
-  import { avatarInitials, avatarColorHue } from './avatar'
-
-  type Props = {
-    name?: string
-    src?: string
-    alt?: string
-    /** Preset (sm 28 / md 36 / lg 48) or an explicit pixel size. */
-    size?: 'sm' | 'md' | 'lg' | number
-    shape?: 'circle' | 'square'
-    status?: 'online' | 'offline' | 'busy' | 'away'
-    /** Override the hash-derived fallback colour (any CSS colour). */
-    color?: string
-  }
-
-  let { name = '', src, alt, size = 'md', shape = 'circle', status, color }: Props = $props()
-
-  const px = $derived(typeof size === 'number' ? size : size === 'sm' ? 28 : size === 'lg' ? 48 : 36)
-  const initials = $derived(avatarInitials(name))
-  const bg = $derived(color ?? `hsl(${avatarColorHue(name || '?')} 62% 45%)`)
-  // Fall back to initials when the image errors.
-  let broken = $state(false)
-  const showImg = $derived(!!src && !broken)
-</script>
-
-<span
-  class="sv-avatar sv-avatar--{shape}"
-  style:width={`${px}px`}
-  style:height={`${px}px`}
-  style:font-size={`${Math.round(px * 0.4)}px`}
-  style:background={showImg ? undefined : bg}
-  role="img"
-  aria-label={alt ?? (name || 'avatar')}
-  title={name || undefined}
->
-  {#if showImg}
-    <img class="sv-avatar__img" src={src} alt={alt ?? name} onerror={() => (broken = true)} />
-  {:else if initials}
-    <span class="sv-avatar__initials" aria-hidden="true">{initials}</span>
-  {:else}
-    <svg class="sv-avatar__ph" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M12 12a5 5 0 1 0 0-10 5 5 0 0 0 0 10Zm0 2c-4.4 0-8 2.5-8 5.5V22h16v-2.5C20 16.5 16.4 14 12 14Z" /></svg>
-  {/if}
-  {#if status}<span class="sv-avatar__status is-{status}" aria-hidden="true"></span>{/if}
-</span>
-
-<style>
-  .sv-avatar {
-    position: relative; display: inline-grid; place-items: center; overflow: visible;
-    color: #fff; font-weight: 600; line-height: 1; user-select: none; flex: none;
-    vertical-align: middle;
-  }
-  .sv-avatar--circle { border-radius: 50%; }
-  .sv-avatar--square { border-radius: 22%; }
-  .sv-avatar__img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; display: block; }
-  .sv-avatar--circle .sv-avatar__img, .sv-avatar--circle { }
-  .sv-avatar__initials { letter-spacing: 0.02em; }
-  .sv-avatar__ph { width: 62%; height: 62%; opacity: 0.9; }
-  .sv-avatar__status {
-    position: absolute; right: -1px; bottom: -1px; width: 28%; height: 28%; min-width: 8px; min-height: 8px;
-    border-radius: 50%; border: 2px solid var(--sg-bg, #fff);
-  }
-  .sv-avatar__status.is-online { background: var(--sg-success, #16a34a); }
-  .sv-avatar__status.is-offline { background: var(--sg-muted, #94a3b8); }
-  .sv-avatar__status.is-busy { background: var(--sg-danger, #dc2626); }
-  .sv-avatar__status.is-away { background: var(--sg-warning, #d97706); }
-</style>
+<script lang="ts">
+  /**
+   * SvAvatar - a user/entity avatar: an image with an initials + colour-hash
+   * fallback (used when there is no `src` or the image fails to load), plus an
+   * optional presence status dot. Parity: Smart avatar.
+   *
+   * ```svelte
+   * <SvAvatar name="Ada Lovelace" src="/ada.jpg" status="online" />
+   * ```
+   */
+  import { avatarInitials, avatarColorHue } from './avatar'
+
+  type Props = {
+    name?: string
+    src?: string
+    alt?: string
+    /** Preset (sm 28 / md 36 / lg 48) or an explicit pixel size. */
+    size?: 'sm' | 'md' | 'lg' | number
+    shape?: 'circle' | 'square'
+    status?: 'online' | 'offline' | 'busy' | 'away'
+    /** Override the hash-derived fallback colour (any CSS colour). */
+    color?: string
+  }
+
+  let { name = '', src, alt, size = 'md', shape = 'circle', status, color }: Props = $props()
+
+  const px = $derived(typeof size === 'number' ? size : size === 'sm' ? 28 : size === 'lg' ? 48 : 36)
+  const initials = $derived(avatarInitials(name))
+  const bg = $derived(color ?? `hsl(${avatarColorHue(name || '?')} 62% 45%)`)
+  // Fall back to initials when the image errors.
+  let broken = $state(false)
+  const showImg = $derived(!!src && !broken)
+</script>
+
+<span
+  class="sv-avatar sv-avatar--{shape}"
+  style:width={`${px}px`}
+  style:height={`${px}px`}
+  style:font-size={`${Math.round(px * 0.4)}px`}
+  style:background={showImg ? undefined : bg}
+  role="img"
+  aria-label={alt ?? (name || 'avatar')}
+  title={name || undefined}
+>
+  {#if showImg}
+    <img class="sv-avatar__img" src={src} alt={alt ?? name} onerror={() => (broken = true)} />
+  {:else if initials}
+    <span class="sv-avatar__initials" aria-hidden="true">{initials}</span>
+  {:else}
+    <svg class="sv-avatar__ph" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M12 12a5 5 0 1 0 0-10 5 5 0 0 0 0 10Zm0 2c-4.4 0-8 2.5-8 5.5V22h16v-2.5C20 16.5 16.4 14 12 14Z" /></svg>
+  {/if}
+  {#if status}<span class="sv-avatar__status is-{status}" aria-hidden="true"></span>{/if}
+</span>
+
+<style>
+  .sv-avatar {
+    position: relative; display: inline-grid; place-items: center; overflow: visible;
+    color: #fff; font-weight: 600; line-height: 1; user-select: none; flex: none;
+    vertical-align: middle;
+  }
+  .sv-avatar--circle { border-radius: 50%; }
+  .sv-avatar--square { border-radius: 22%; }
+  .sv-avatar__img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; display: block; }
+  .sv-avatar--circle .sv-avatar__img, .sv-avatar--circle { }
+  .sv-avatar__initials { letter-spacing: 0.02em; }
+  .sv-avatar__ph { width: 62%; height: 62%; opacity: 0.9; }
+  .sv-avatar__status {
+    position: absolute; right: -1px; bottom: -1px; width: 28%; height: 28%; min-width: 8px; min-height: 8px;
+    border-radius: 50%; border: 2px solid var(--sg-bg, #fff);
+  }
+  .sv-avatar__status.is-online { background: var(--sg-success, #16a34a); }
+  .sv-avatar__status.is-offline { background: var(--sg-muted, #94a3b8); }
+  .sv-avatar__status.is-busy { background: var(--sg-danger, #dc2626); }
+  .sv-avatar__status.is-away { background: var(--sg-warning, #d97706); }
+</style>