@getmicdrop/svelte-components 5.21.0 → 5.21.1

package/dist/primitives/SearchResultItem/SearchResultItem.svelte

@@ -1,109 +1,109 @@
-<script lang="ts">
-  /**
-   * SearchResultItem Component
-   * Search dropdown result item with blue hover.
-   *
-   * Two modes:
-   * - Simple (no type): Blue hover, no border - for basic dropdowns
-   * - Typed (with type): Colored left border by entity type - matches global search styling
-   *
-   * Replaces: Button variant="search-result"
-   */
-  import { twMerge } from 'tailwind-merge';
-  import type { Snippet } from 'svelte';
-  import { buttonMenuItemSizes } from '../../tokens/sizing.js';
-
-  /** Entity type for colored border mode */
-  export type SearchResultType = 'event' | 'order' | 'performer' | 'venue' | 'collection' | 'series';
-
-  interface Props {
-    /** Size variant */
-    size?: 'sm' | 'md' | 'lg';
-    /** Entity type - when provided, shows colored left border instead of blue hover */
-    type?: SearchResultType;
-    /** Disabled state */
-    disabled?: boolean;
-    /** Selected/highlighted state (alias: isActive) */
-    selected?: boolean;
-    /** Content */
-    children?: Snippet;
-    /** Trailing content (icons, badges) */
-    trailing?: Snippet;
-    /** Additional classes */
-    class?: string;
-    /** Click handler */
-    onclick?: (e: MouseEvent) => void;
-    [key: string]: unknown;
-  }
-
-  let {
-    size = 'md',
-    type,
-    disabled = false,
-    selected = false,
-    children,
-    trailing,
-    class: className = '',
-    onclick,
-    ...restProps
-  }: Props = $props();
-
-  // Border colors by entity type - matches micdrop-frontend SearchResultItem
-  const borderColors: Record<SearchResultType, string> = {
-    event: 'border-l-blue-500',
-    order: 'border-l-yellow-500',
-    performer: 'border-l-pink-500',
-    venue: 'border-l-indigo-500',
-    collection: 'border-l-purple-500',
-    series: 'border-l-blue-500',
-  };
-
-  // Simple mode (no type): rounded with blue hover
-  const simpleBaseClasses = 'w-full text-left rounded-lg font-medium leading-none focus:outline-hidden transition-all duration-150 ease-out select-none';
-  const simpleDefaultClasses = 'text-gray-900 bg-transparent border-transparent hover:bg-blue-50 focus:bg-blue-50 dark:text-white dark:hover:bg-blue-900/20 dark:focus:bg-blue-900/20';
-  const simpleSelectedClasses = 'text-gray-900 bg-blue-50 dark:text-white dark:bg-blue-900/20';
-
-  // Typed mode (with type): colored left border, gray hover
-  const typedBaseClasses = 'w-full text-left font-medium leading-none focus:outline-hidden transition-all duration-150 ease-out select-none border-l-3';
-  const typedDefaultClasses = 'text-gray-900 bg-transparent hover:bg-gray-50 hover:border-l-4 dark:text-white dark:hover:bg-gray-700';
-  const typedSelectedClasses = 'text-gray-900 bg-primary-100 border-l-primary-600 border-l-4 dark:text-white dark:bg-gray-700';
-
-  const disabledClasses = 'text-gray-400 cursor-not-allowed dark:text-gray-500';
-
-  let sizeClass = $derived(buttonMenuItemSizes[size] || buttonMenuItemSizes.md);
-  let hasTrailing = $derived(typeof trailing === 'function' || trailing);
-  let isTypedMode = $derived(!!type);
-
-  let variantClass = $derived(() => {
-    if (disabled) return disabledClasses;
-    if (isTypedMode) {
-      return selected ? typedSelectedClasses : typedDefaultClasses;
-    }
-    return selected ? simpleSelectedClasses : simpleDefaultClasses;
-  });
-
-  let borderClass = $derived(isTypedMode && type ? borderColors[type] : '');
-
-  let classes = $derived(twMerge(
-    isTypedMode ? typedBaseClasses : simpleBaseClasses,
-    hasTrailing ? 'flex items-center justify-between' : 'flex items-center justify-start',
-    sizeClass,
-    borderClass,
-    variantClass(),
-    disabled ? 'cursor-not-allowed' : 'cursor-pointer active:scale-[0.97] active:opacity-90',
-    className
-  ));
-</script>
-
-<button
-  type="button"
-  class={classes}
-  {disabled}
-  {onclick}
-  {...restProps}
->
-  <span class="inline-flex items-center gap-1.5">
-    {#if typeof children === 'function'}{@render children()}{:else if children}{children}{/if}
-  </span>
-  {#if typeof trailing === 'function'}{@render trailing()}{:else if trailing}{trailing}{/if}
-</button>
+<script lang="ts">
+  /**
+   * SearchResultItem Component
+   * Search dropdown result item with blue hover.
+   *
+   * Two modes:
+   * - Simple (no type): Blue hover, no border - for basic dropdowns
+   * - Typed (with type): Colored left border by entity type - matches global search styling
+   *
+   * Replaces: Button variant="search-result"
+   */
+  import { twMerge } from 'tailwind-merge';
+  import type { Snippet } from 'svelte';
+  import { buttonMenuItemSizes } from '../../tokens/sizing.js';
+
+  /** Entity type for colored border mode */
+  export type SearchResultType = 'event' | 'order' | 'performer' | 'venue' | 'collection' | 'series';
+
+  interface Props {
+    /** Size variant */
+    size?: 'sm' | 'md' | 'lg';
+    /** Entity type - when provided, shows colored left border instead of blue hover */
+    type?: SearchResultType;
+    /** Disabled state */
+    disabled?: boolean;
+    /** Selected/highlighted state (alias: isActive) */
+    selected?: boolean;
+    /** Content */
+    children?: Snippet;
+    /** Trailing content (icons, badges) */
+    trailing?: Snippet;
+    /** Additional classes */
+    class?: string;
+    /** Click handler */
+    onclick?: (e: MouseEvent) => void;
+    [key: string]: unknown;
+  }
+
+  let {
+    size = 'md',
+    type,
+    disabled = false,
+    selected = false,
+    children,
+    trailing,
+    class: className = '',
+    onclick,
+    ...restProps
+  }: Props = $props();
+
+  // Border colors by entity type - matches micdrop-frontend SearchResultItem
+  const borderColors: Record<SearchResultType, string> = {
+    event: 'border-l-blue-500',
+    order: 'border-l-yellow-500',
+    performer: 'border-l-pink-500',
+    venue: 'border-l-indigo-500',
+    collection: 'border-l-purple-500',
+    series: 'border-l-blue-500',
+  };
+
+  // Simple mode (no type): rounded with blue hover
+  const simpleBaseClasses = 'w-full text-left rounded-lg font-medium leading-none focus:outline-hidden transition-all duration-150 ease-out select-none';
+  const simpleDefaultClasses = 'text-text-primary bg-transparent border-transparent hover:bg-status-info-bg focus:bg-status-info-bg';
+  const simpleSelectedClasses = 'text-text-primary bg-status-info-bg';
+
+  // Typed mode (with type): colored left border, gray hover
+  const typedBaseClasses = 'w-full text-left font-medium leading-none focus:outline-hidden transition-all duration-150 ease-out select-none border-l-3';
+  const typedDefaultClasses = 'text-text-primary bg-transparent hover:bg-bg-secondary hover:border-l-4';
+  const typedSelectedClasses = 'text-text-primary bg-primary-100 border-l-primary-600 border-l-4';
+
+  const disabledClasses = 'text-muted-foreground cursor-not-allowed';
+
+  let sizeClass = $derived(buttonMenuItemSizes[size] || buttonMenuItemSizes.md);
+  let hasTrailing = $derived(typeof trailing === 'function' || trailing);
+  let isTypedMode = $derived(!!type);
+
+  let variantClass = $derived(() => {
+    if (disabled) return disabledClasses;
+    if (isTypedMode) {
+      return selected ? typedSelectedClasses : typedDefaultClasses;
+    }
+    return selected ? simpleSelectedClasses : simpleDefaultClasses;
+  });
+
+  let borderClass = $derived(isTypedMode && type ? borderColors[type] : '');
+
+  let classes = $derived(twMerge(
+    isTypedMode ? typedBaseClasses : simpleBaseClasses,
+    hasTrailing ? 'flex items-center justify-between' : 'flex items-center justify-start',
+    sizeClass,
+    borderClass,
+    variantClass(),
+    disabled ? 'cursor-not-allowed' : 'cursor-pointer active:scale-[0.97] active:opacity-90',
+    className
+  ));
+</script>
+
+<button
+  type="button"
+  class={classes}
+  {disabled}
+  {onclick}
+  {...restProps}
+>
+  <span class="inline-flex items-center gap-1.5">
+    {#if typeof children === 'function'}{@render children()}{:else if children}{children}{/if}
+  </span>
+  {#if typeof trailing === 'function'}{@render trailing()}{:else if trailing}{trailing}{/if}
+</button>

package/dist/primitives/SidebarToggle/SidebarToggle.spec.js

@@ -1,61 +1,61 @@
-import { render, fireEvent } from '@testing-library/svelte';
-import { createRawSnippet } from 'svelte';
-import { expect, describe, test, vi } from 'vitest';
-import SidebarToggle from './SidebarToggle.svelte';
-
-function textSnippet(text) {
-  return createRawSnippet(() => ({
-    render: () => `<span>${text}</span>`
-  }));
-}
-
-describe('SidebarToggle', () => {
-  test('renders a button', () => {
-    const { container } = render(SidebarToggle);
-    expect(container.querySelector('button')).toBeInTheDocument();
-  });
-
-  test('button has type="button"', () => {
-    const { container } = render(SidebarToggle);
-    expect(container.querySelector('button')).toHaveAttribute('type', 'button');
-  });
-
-  test('aria-expanded is false by default', () => {
-    const { container } = render(SidebarToggle);
-    expect(container.querySelector('button')).toHaveAttribute('aria-expanded', 'false');
-  });
-
-  test('aria-expanded is true when expanded', () => {
-    const { container } = render(SidebarToggle, { props: { expanded: true } });
-    expect(container.querySelector('button')).toHaveAttribute('aria-expanded', 'true');
-  });
-
-  test('disabled state', () => {
-    const { container } = render(SidebarToggle, { props: { disabled: true } });
-    expect(container.querySelector('button')).toBeDisabled();
-  });
-
-  test('onclick handler', async () => {
-    const onclick = vi.fn();
-    const { container } = render(SidebarToggle, { props: { onclick } });
-    await fireEvent.click(container.querySelector('button'));
-    expect(onclick).toHaveBeenCalled();
-  });
-
-  test('applies custom className', () => {
-    const { container } = render(SidebarToggle, { props: { class: 'my-toggle' } });
-    expect(container.querySelector('.my-toggle')).toBeInTheDocument();
-  });
-
-  test('renders children content when provided as snippet', () => {
-    const { container } = render(SidebarToggle, {
-      props: { children: textSnippet('Toggle icon') }
-    });
-    expect(container.querySelector('button').textContent).toBe('Toggle icon');
-  });
-
-  test('renders empty button when no children provided', () => {
-    const { container } = render(SidebarToggle);
-    expect(container.querySelector('button').textContent).toBe('');
-  });
-});
+import { render, fireEvent } from '@testing-library/svelte';
+import { createRawSnippet } from 'svelte';
+import { expect, describe, test, vi } from 'vitest';
+import SidebarToggle from './SidebarToggle.svelte';
+
+function textSnippet(text) {
+  return createRawSnippet(() => ({
+    render: () => `<span>${text}</span>`
+  }));
+}
+
+describe('SidebarToggle', () => {
+  test('renders a button', () => {
+    const { container } = render(SidebarToggle);
+    expect(container.querySelector('button')).toBeInTheDocument();
+  });
+
+  test('button has type="button"', () => {
+    const { container } = render(SidebarToggle);
+    expect(container.querySelector('button')).toHaveAttribute('type', 'button');
+  });
+
+  test('aria-expanded is false by default', () => {
+    const { container } = render(SidebarToggle);
+    expect(container.querySelector('button')).toHaveAttribute('aria-expanded', 'false');
+  });
+
+  test('aria-expanded is true when expanded', () => {
+    const { container } = render(SidebarToggle, { props: { expanded: true } });
+    expect(container.querySelector('button')).toHaveAttribute('aria-expanded', 'true');
+  });
+
+  test('disabled state', () => {
+    const { container } = render(SidebarToggle, { props: { disabled: true } });
+    expect(container.querySelector('button')).toBeDisabled();
+  });
+
+  test('onclick handler', async () => {
+    const onclick = vi.fn();
+    const { container } = render(SidebarToggle, { props: { onclick } });
+    await fireEvent.click(container.querySelector('button'));
+    expect(onclick).toHaveBeenCalled();
+  });
+
+  test('applies custom className', () => {
+    const { container } = render(SidebarToggle, { props: { class: 'my-toggle' } });
+    expect(container.querySelector('.my-toggle')).toBeInTheDocument();
+  });
+
+  test('renders children content when provided as snippet', () => {
+    const { container } = render(SidebarToggle, {
+      props: { children: textSnippet('Toggle icon') }
+    });
+    expect(container.querySelector('button').textContent).toBe('Toggle icon');
+  });
+
+  test('renders empty button when no children provided', () => {
+    const { container } = render(SidebarToggle);
+    expect(container.querySelector('button').textContent).toBe('');
+  });
+});

package/dist/primitives/SidebarToggle/SidebarToggle.svelte

@@ -1,55 +1,55 @@
-<script lang="ts">
-  /**
-   * SidebarToggle Component
-   * Compact pill button for sidebar expand/collapse.
-   *
-   * Replaces: Button variant="sidebar-toggle"
-   */
-  import { twMerge } from 'tailwind-merge';
-  import type { Snippet } from 'svelte';
-
-  interface Props {
-    /** Expanded state (affects icon direction if using chevron) */
-    expanded?: boolean;
-    /** Disabled state */
-    disabled?: boolean;
-    /** Content (typically a chevron icon) */
-    children?: Snippet;
-    /** Additional classes */
-    class?: string;
-    /** Click handler */
-    onclick?: (e: MouseEvent) => void;
-    [key: string]: unknown;
-  }
-
-  let {
-    expanded = false,
-    disabled = false,
-    children,
-    class: className = '',
-    onclick,
-    ...restProps
-  }: Props = $props();
-
-  const baseClasses = 'w-6 h-7 inline-flex items-center justify-center rounded-lg font-medium leading-none focus:outline-hidden transition-all duration-150 ease-out select-none';
-  const defaultClasses = 'text-gray-900 bg-blue-100 border border-blue-200 hover:bg-blue-200 shadow-lg dark:text-white dark:bg-gray-800 dark:border-gray-700 dark:hover:bg-gray-700';
-  const disabledClasses = 'bg-gray-200 border-gray-200 text-gray-400 cursor-not-allowed dark:bg-gray-700 dark:border-gray-700 dark:text-gray-500';
-
-  let classes = $derived(twMerge(
-    baseClasses,
-    disabled ? disabledClasses : defaultClasses,
-    disabled ? 'cursor-not-allowed' : 'cursor-pointer active:scale-[0.95] active:opacity-90',
-    className
-  ));
-</script>
-
-<button
-  type="button"
-  class={classes}
-  {disabled}
-  aria-expanded={expanded}
-  {onclick}
-  {...restProps}
->
-  {#if typeof children === 'function'}{@render children()}{:else if children}{children}{/if}
-</button>
+<script lang="ts">
+  /**
+   * SidebarToggle Component
+   * Compact pill button for sidebar expand/collapse.
+   *
+   * Replaces: Button variant="sidebar-toggle"
+   */
+  import { twMerge } from 'tailwind-merge';
+  import type { Snippet } from 'svelte';
+
+  interface Props {
+    /** Expanded state (affects icon direction if using chevron) */
+    expanded?: boolean;
+    /** Disabled state */
+    disabled?: boolean;
+    /** Content (typically a chevron icon) */
+    children?: Snippet;
+    /** Additional classes */
+    class?: string;
+    /** Click handler */
+    onclick?: (e: MouseEvent) => void;
+    [key: string]: unknown;
+  }
+
+  let {
+    expanded = false,
+    disabled = false,
+    children,
+    class: className = '',
+    onclick,
+    ...restProps
+  }: Props = $props();
+
+  const baseClasses = 'w-6 h-7 inline-flex items-center justify-center rounded-lg font-medium leading-none focus:outline-hidden transition-all duration-150 ease-out select-none';
+  const defaultClasses = 'text-text-primary bg-status-info-bg border border-status-info-border hover:bg-status-info-bg/80 shadow-lg';
+  const disabledClasses = 'bg-bg-tertiary border-border text-muted-foreground cursor-not-allowed';
+
+  let classes = $derived(twMerge(
+    baseClasses,
+    disabled ? disabledClasses : defaultClasses,
+    disabled ? 'cursor-not-allowed' : 'cursor-pointer active:scale-[0.95] active:opacity-90',
+    className
+  ));
+</script>
+
+<button
+  type="button"
+  class={classes}
+  {disabled}
+  aria-expanded={expanded}
+  {onclick}
+  {...restProps}
+>
+  {#if typeof children === 'function'}{@render children()}{:else if children}{children}{/if}
+</button>

package/dist/primitives/Skeleton/CardPlaceholder.spec.js

@@ -121,7 +121,7 @@ describe('CardPlaceholder Styling', () => {
     const { container } = render(CardPlaceholder);
     const wrapper = container.querySelector('[role="status"]');
     expect(wrapper).toHaveClass('border');
-    expect(wrapper).toHaveClass('border-gray-200');
+    expect(wrapper).toHaveClass('border-border');
   });
 
   test('has rounded corners', () => {

package/dist/primitives/Skeleton/CardPlaceholder.svelte

@@ -1,96 +1,96 @@
-<script lang="ts">
-  const defaultLabels = {
-    loadingCard: 'Loading card',
-    loading: 'Loading...',
-  };
-
-  interface Props {
-    size?: 'sm' | 'md' | 'lg' | 'xl' | '2xl';
-    animate?: boolean;
-    showAvatar?: boolean;
-    showImage?: boolean;
-    class?: string;
-    labels?: Partial<typeof defaultLabels>;
-    [key: string]: unknown;
-  }
-
-  let {
-    size = 'md',
-    animate = true,
-    showAvatar = true,
-    showImage = true,
-    class: className = '',
-    labels: userLabels = {},
-    ...restProps
-  }: Props = $props();
-
-  let labels = $derived({ ...defaultLabels, ...userLabels });
-
-  const cardSizeClasses = {
-    sm: 'max-w-xs',
-    md: 'max-w-sm',
-    lg: 'max-w-md',
-    xl: 'max-w-lg',
-    '2xl': 'max-w-xl'
-  };
-
-  const imageSizeClasses = {
-    sm: 'h-32',
-    md: 'h-48',
-    lg: 'h-56',
-    xl: 'h-64',
-    '2xl': 'h-72'
-  };
-
-  let cardWidthClass = $derived(cardSizeClasses[size] || cardSizeClasses.md);
-  let imageHeightClass = $derived(imageSizeClasses[size] || imageSizeClasses.md);
-  let animateClass = $derived(animate ? 'animate-pulse' : '');
-</script>
-
-<div
-  role="status"
-  class="{cardWidthClass} p-4 border border-gray-200 rounded-lg shadow dark:border-gray-700 {animateClass} {className}"
-  aria-label={labels.loadingCard}
-  {...restProps}
->
-  {#if showImage}
-    <div class="flex items-center justify-center {imageHeightClass} mb-4 bg-gray-300 rounded-lg dark:bg-gray-700">
-      <svg
-        class="w-10 h-10 text-gray-200 dark:text-gray-600"
-        aria-hidden="true"
-        xmlns="http://www.w3.org/2000/svg"
-        fill="currentColor"
-        viewBox="0 0 16 20"
-      >
-        <path d="M14.066 0H7v5a2 2 0 0 1-2 2H0v11a1.97 1.97 0 0 0 1.934 2h12.132A1.97 1.97 0 0 0 16 18V2a1.97 1.97 0 0 0-1.934-2ZM10.5 6a1.5 1.5 0 1 1 0 2.999A1.5 1.5 0 0 1 10.5 6Zm2.221 10.515a1 1 0 0 1-.858.485h-8a1 1 0 0 1-.9-1.43L5.6 10.039a.978.978 0 0 1 .936-.57 1 1 0 0 1 .9.632l1.181 2.981.541-1a.945.945 0 0 1 .883-.522 1 1 0 0 1 .879.529l1.832 3.438a1 1 0 0 1-.031.988Z"/>
-        <path d="M5 5V.13a2.96 2.96 0 0 0-1.293.749L.879 3.707A2.98 2.98 0 0 0 .13 5H5Z"/>
-      </svg>
-    </div>
-  {/if}
-
-  <div class="h-2.5 bg-gray-200 rounded-full dark:bg-gray-700 w-48 mb-4"></div>
-  <div class="h-2 bg-gray-200 rounded-full dark:bg-gray-700 mb-2.5"></div>
-  <div class="h-2 bg-gray-200 rounded-full dark:bg-gray-700 max-w-80 mb-2.5"></div>
-  <div class="h-2 bg-gray-200 rounded-full dark:bg-gray-700 max-w-72 mb-2.5"></div>
-  <div class="h-2 bg-gray-200 rounded-full dark:bg-gray-700 max-w-sm"></div>
-
-  {#if showAvatar}
-    <div class="flex items-center mt-4">
-      <svg
-        class="w-8 h-8 text-gray-200 dark:text-gray-700 me-3"
-        aria-hidden="true"
-        xmlns="http://www.w3.org/2000/svg"
-        fill="currentColor"
-        viewBox="0 0 20 20"
-      >
-        <path d="M10 0a10 10 0 1 0 10 10A10.011 10.011 0 0 0 10 0Zm0 5a3 3 0 1 1 0 6 3 3 0 0 1 0-6Zm0 13a8.949 8.949 0 0 1-4.951-1.488A3.987 3.987 0 0 1 9 13h2a3.987 3.987 0 0 1 3.951 3.512A8.949 8.949 0 0 1 10 18Z"/>
-      </svg>
-      <div>
-        <div class="h-2.5 bg-gray-200 rounded-full dark:bg-gray-700 w-32 mb-2"></div>
-        <div class="h-2 bg-gray-200 rounded-full dark:bg-gray-700 w-48"></div>
-      </div>
-    </div>
-  {/if}
-
-  <span class="sr-only">{labels.loading}</span>
-</div>
+<script lang="ts">
+  const defaultLabels = {
+    loadingCard: 'Loading card',
+    loading: 'Loading...',
+  };
+
+  interface Props {
+    size?: 'sm' | 'md' | 'lg' | 'xl' | '2xl';
+    animate?: boolean;
+    showAvatar?: boolean;
+    showImage?: boolean;
+    class?: string;
+    labels?: Partial<typeof defaultLabels>;
+    [key: string]: unknown;
+  }
+
+  let {
+    size = 'md',
+    animate = true,
+    showAvatar = true,
+    showImage = true,
+    class: className = '',
+    labels: userLabels = {},
+    ...restProps
+  }: Props = $props();
+
+  let labels = $derived({ ...defaultLabels, ...userLabels });
+
+  const cardSizeClasses = {
+    sm: 'max-w-xs',
+    md: 'max-w-sm',
+    lg: 'max-w-md',
+    xl: 'max-w-lg',
+    '2xl': 'max-w-xl'
+  };
+
+  const imageSizeClasses = {
+    sm: 'h-32',
+    md: 'h-48',
+    lg: 'h-56',
+    xl: 'h-64',
+    '2xl': 'h-72'
+  };
+
+  let cardWidthClass = $derived(cardSizeClasses[size] || cardSizeClasses.md);
+  let imageHeightClass = $derived(imageSizeClasses[size] || imageSizeClasses.md);
+  let animateClass = $derived(animate ? 'animate-pulse' : '');
+</script>
+
+<div
+  role="status"
+  class="{cardWidthClass} p-4 border border-border rounded-lg shadow {animateClass} {className}"
+  aria-label={labels.loadingCard}
+  {...restProps}
+>
+  {#if showImage}
+    <div class="flex items-center justify-center {imageHeightClass} mb-4 bg-bg-quaternary rounded-lg">
+      <svg
+        class="w-10 h-10 text-text-tertiary"
+        aria-hidden="true"
+        xmlns="http://www.w3.org/2000/svg"
+        fill="currentColor"
+        viewBox="0 0 16 20"
+      >
+        <path d="M14.066 0H7v5a2 2 0 0 1-2 2H0v11a1.97 1.97 0 0 0 1.934 2h12.132A1.97 1.97 0 0 0 16 18V2a1.97 1.97 0 0 0-1.934-2ZM10.5 6a1.5 1.5 0 1 1 0 2.999A1.5 1.5 0 0 1 10.5 6Zm2.221 10.515a1 1 0 0 1-.858.485h-8a1 1 0 0 1-.9-1.43L5.6 10.039a.978.978 0 0 1 .936-.57 1 1 0 0 1 .9.632l1.181 2.981.541-1a.945.945 0 0 1 .883-.522 1 1 0 0 1 .879.529l1.832 3.438a1 1 0 0 1-.031.988Z"/>
+        <path d="M5 5V.13a2.96 2.96 0 0 0-1.293.749L.879 3.707A2.98 2.98 0 0 0 .13 5H5Z"/>
+      </svg>
+    </div>
+  {/if}
+
+  <div class="h-2.5 bg-bg-tertiary rounded-full w-48 mb-4"></div>
+  <div class="h-2 bg-bg-tertiary rounded-full mb-2.5"></div>
+  <div class="h-2 bg-bg-tertiary rounded-full max-w-80 mb-2.5"></div>
+  <div class="h-2 bg-bg-tertiary rounded-full max-w-72 mb-2.5"></div>
+  <div class="h-2 bg-bg-tertiary rounded-full max-w-sm"></div>
+
+  {#if showAvatar}
+    <div class="flex items-center mt-4">
+      <svg
+        class="w-8 h-8 text-text-tertiary me-3"
+        aria-hidden="true"
+        xmlns="http://www.w3.org/2000/svg"
+        fill="currentColor"
+        viewBox="0 0 20 20"
+      >
+        <path d="M10 0a10 10 0 1 0 10 10A10.011 10.011 0 0 0 10 0Zm0 5a3 3 0 1 1 0 6 3 3 0 0 1 0-6Zm0 13a8.949 8.949 0 0 1-4.951-1.488A3.987 3.987 0 0 1 9 13h2a3.987 3.987 0 0 1 3.951 3.512A8.949 8.949 0 0 1 10 18Z"/>
+      </svg>
+      <div>
+        <div class="h-2.5 bg-bg-tertiary rounded-full w-32 mb-2"></div>
+        <div class="h-2 bg-bg-tertiary rounded-full w-48"></div>
+      </div>
+    </div>
+  {/if}
+
+  <span class="sr-only">{labels.loading}</span>
+</div>