@svadmin/lite 0.16.11 → 0.22.0

package/dist/components/LiteResult.svelte

@@ -0,0 +1,52 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+
+  interface Props {
+    status?: 'success' | 'error' | 'warning' | 'info' | '404' | '403' | '500';
+    title: string;
+    description?: string;
+    actionHref?: string;
+    actionLabel?: string;
+    secondaryHref?: string;
+    secondaryLabel?: string;
+    children?: Snippet;
+  }
+
+  let {
+    status = 'info',
+    title,
+    description,
+    actionHref,
+    actionLabel,
+    secondaryHref,
+    secondaryLabel,
+    children,
+  }: Props = $props();
+
+  const icon = $derived(status === 'success' ? '✓' : status === 'error' || status === '500' ? '!' : status === 'warning' ? '!' : status === '404' ? '404' : status === '403' ? '403' : 'i');
+</script>
+
+<section class="lite-result" data-status={status} role="status">
+  <span class="lite-result__icon" aria-hidden="true">{icon}</span>
+  <h2>{title}</h2>
+  {#if description}<p>{description}</p>{/if}
+  {@render children?.()}
+  {#if actionHref || secondaryHref}
+    <div class="lite-inline-sm">
+      {#if actionHref}<a class="lite-btn lite-btn-primary" href={actionHref}>{actionLabel ?? 'Continue'}</a>{/if}
+      {#if secondaryHref}<a class="lite-btn" href={secondaryHref}>{secondaryLabel ?? 'Back'}</a>{/if}
+    </div>
+  {/if}
+</section>
+
+<style>
+  .lite-result { display: block; justify-items: center; padding: 48px 24px; border: 1px solid #E5E6EB; border-radius: 8px; background: #fff; text-align: center; }
+  .lite-result__icon { display: inline-grid; place-items: center; width: 56px; height: 56px; border-radius: 999px; background: #E8F3FF; color: #165DFF; font-size: 24px; font-weight: 700; }
+  .lite-result[data-status='success'] .lite-result__icon { background: #E8FFEA; color: #009A29; }
+  .lite-result[data-status='error'] .lite-result__icon, .lite-result[data-status='500'] .lite-result__icon { background: #FFECE8; color: #F53F3F; }
+  .lite-result[data-status='warning'] .lite-result__icon { background: #FFF7E8; color: #D25F00; }
+  .lite-result h2 { margin: 0; color: #1D2129; font-size: 20px; }
+  .lite-result p { max-width: 40rem; margin: 0; color: #4E5969; font-size: 14px; line-height: 1.6; }
+
+  .lite-result > * + * { margin-top: 10px; }
+</style>

package/dist/components/LiteResult.svelte.d.ts

@@ -0,0 +1,14 @@
+import type { Snippet } from 'svelte';
+interface Props {
+    status?: 'success' | 'error' | 'warning' | 'info' | '404' | '403' | '500';
+    title: string;
+    description?: string;
+    actionHref?: string;
+    actionLabel?: string;
+    secondaryHref?: string;
+    secondaryLabel?: string;
+    children?: Snippet;
+}
+declare const LiteResult: import("svelte").Component<Props, {}, "">;
+type LiteResult = ReturnType<typeof LiteResult>;
+export default LiteResult;

package/dist/components/LiteRowActions.svelte

@@ -0,0 +1,36 @@
+<script lang="ts">
+  import type { HTMLFormAttributes } from 'svelte/elements';
+
+  interface RowAction {
+    id: string;
+    label: string;
+    href?: string;
+    action?: string;
+    method?: HTMLFormAttributes['method'];
+    danger?: boolean;
+    disabled?: boolean;
+  }
+
+  interface Props {
+    actions: RowAction[];
+    label?: string;
+  }
+
+  let { actions, label = 'Row actions' }: Props = $props();
+</script>
+
+<div class="lite-inline-xs" role="group" aria-label={label}>
+  {#each actions as action (action.id)}
+    {#if action.disabled}
+      <span class="lite-btn lite-btn-sm" aria-disabled="true">{action.label}</span>
+    {:else if action.href}
+      <a class="lite-btn lite-btn-sm" class:lite-btn-danger={action.danger} href={action.href}>{action.label}</a>
+    {:else if action.action}
+      <form method={action.method ?? 'POST'} action={action.action}>
+        <button class="lite-btn lite-btn-sm" class:lite-btn-danger={action.danger} type="submit">{action.label}</button>
+      </form>
+    {:else}
+      <span class="lite-muted">{action.label}</span>
+    {/if}
+  {/each}
+</div>

package/dist/components/LiteRowActions.svelte.d.ts

@@ -0,0 +1,17 @@
+import type { HTMLFormAttributes } from 'svelte/elements';
+interface RowAction {
+    id: string;
+    label: string;
+    href?: string;
+    action?: string;
+    method?: HTMLFormAttributes['method'];
+    danger?: boolean;
+    disabled?: boolean;
+}
+interface Props {
+    actions: RowAction[];
+    label?: string;
+}
+declare const LiteRowActions: import("svelte").Component<Props, {}, "">;
+type LiteRowActions = ReturnType<typeof LiteRowActions>;
+export default LiteRowActions;

package/dist/components/LiteSensitiveDataMask.svelte

@@ -2,11 +2,14 @@
   interface Props {
     value?: string | number | null;
     type?: 'phone' | 'id-card' | 'email' | 'bank-card' | 'secret' | 'custom';
+    /** Caller class merged with the built-in class list. */
+    class?: string;
   }
 
   let {
     value = '',
     type = 'phone',
+    class: className = '',
   }: Props = $props();
 
   const rawString = $derived(String(value ?? ''));
@@ -31,6 +34,6 @@
   const masked = $derived(mask(rawString, type));
 </script>
 
-<span class="lite-sensitive-mask" style="font-family: monospace; font-size: 12px;">
+<span class="lite-sensitive-mask {className}" style="font-family: monospace; font-size: 12px;">
   {masked}
 </span>

package/dist/components/LiteSensitiveDataMask.svelte.d.ts

@@ -1,6 +1,8 @@
 interface Props {
     value?: string | number | null;
     type?: 'phone' | 'id-card' | 'email' | 'bank-card' | 'secret' | 'custom';
+    /** Caller class merged with the built-in class list. */
+    class?: string;
 }
 declare const LiteSensitiveDataMask: import("svelte").Component<Props, {}, "">;
 type LiteSensitiveDataMask = ReturnType<typeof LiteSensitiveDataMask>;

package/dist/components/LiteShow.svelte

@@ -49,7 +49,7 @@
       {#each showFields as field, _i (_i)}
         {@const value = record[field.key]}
         <tr>
-          <td style="width:200px;font-weight:600;color:#64748b;vertical-align:top;">
+          <td style="width:200px;font-weight:600;color:#4E5969;vertical-align:top;">
             {field.label}
           </td>
           <td>

package/dist/components/LiteShowField.svelte

@@ -63,7 +63,7 @@
   <span>••••••••</span>
 {:else if field.type === "color" && value}
   <span style="display:inline-flex;align-items:center;">
-    <span style="display:inline-block;width:14px;height:14px;border-radius:3px;background:{toSafeText(value)};border:1px solid #cbd5e1;margin-right:6px;"></span>
+    <span style="display:inline-block;width:14px;height:14px;border-radius:3px;background:{toSafeText(value)};border:1px solid #E5E6EB;margin-right:6px;"></span>
     <span class="lite-font-mono">{toSafeText(value)}</span>
   </span>
 {:else if field.type === "url" && value}
@@ -87,7 +87,7 @@
     <span class="lite-badge">{tag}</span>
   {/each}
 {:else if field.type === "json" && value}
-  <pre style="margin:0;font-size:12px;background:#f8fafc;padding:12px;border-radius:6px;border:1px solid #e2e8f0;overflow-x:auto;">{typeof value === "string" ? value : JSON.stringify(value, null, 2)}</pre>
+  <pre style="margin:0;font-size:12px;background:#F7F8FA;padding:12px;border-radius:6px;border:1px solid #E5E6EB;overflow-x:auto;">{typeof value === "string" ? value : JSON.stringify(value, null, 2)}</pre>
 {:else if field.type === "select" && field.options}
   <span class={getStatusBadgeClass(value)}>{formatValue(value, field)}</span>
 {:else if field.type === "relation" && field.resource && value != null}

package/dist/components/LiteSignaturePad.svelte

@@ -47,7 +47,7 @@
 <style>
   .sv-lite-signature-card {
     display: block;
-    border: 1px solid #e2e8f0;
+    border: 1px solid #E5E6EB;
     border-radius: 6px;
     padding: 12px;
     background-color: #ffffff;
@@ -56,19 +56,19 @@
   .sv-lite-sig-header {
     margin-bottom: 8px;
     font-size: 13px;
-    color: #0f172a;
+    color: #1D2129;
   }
   .sv-lite-sig-sub {
-    color: #64748b;
+    color: #4E5969;
     font-size: 11px;
     margin-left: 6px;
   }
   .sv-lite-sig-preview {
-    border: 2px dashed #cbd5e1;
+    border: 2px dashed #E5E6EB;
     border-radius: 4px;
     padding: 10px;
     text-align: center;
-    background-color: #f8fafc;
+    background-color: #F7F8FA;
     margin-bottom: 10px;
   }
   .sv-lite-sig-img {
@@ -77,12 +77,12 @@
     vertical-align: middle;
   }
   .sv-lite-sig-empty {
-    border: 2px dashed #cbd5e1;
+    border: 2px dashed #E5E6EB;
     border-radius: 4px;
     padding: 24px;
     text-align: center;
-    color: #94a3b8;
-    background-color: #f8fafc;
+    color: #86909C;
+    background-color: #F7F8FA;
     margin-bottom: 10px;
   }
   .sv-lite-sig-file {
@@ -92,7 +92,7 @@
   .sv-lite-sig-btn {
     padding: 4px 10px;
     font-size: 11px;
-    background-color: #4f46e5;
+    background-color: #165DFF;
     color: #ffffff;
     border: none;
     border-radius: 3px;

package/dist/components/LiteSkeleton.svelte

@@ -0,0 +1,100 @@
+<script lang="ts">
+  interface Props {
+    lines?: number;
+    width?: string;
+    height?: string;
+    circle?: boolean;
+    label?: string;
+    /**
+     * Page-level skeleton layout, mirroring the reference PageSkeleton: header,
+     * then `rows` blocks of the requested shape. `text` keeps the plain lines.
+     */
+    variant?: 'text' | 'list' | 'show' | 'form';
+    /** Number of body rows/blocks for the page variants. */
+    rows?: number;
+    /** Caller class merged with the built-in class list. */
+    class?: string;
+  }
+
+  let {
+    lines = 3,
+    width = '100%',
+    height = '14px',
+    circle = false,
+    label = 'Loading',
+    variant = 'text',
+    rows = 5,
+    class: className = '',
+  }: Props = $props();
+
+  const blockCount = $derived(Math.max(1, rows));
+</script>
+
+<div
+  class={`lite-skeleton lite-skeleton--${variant} ${className}`.trim()}
+  role="status"
+  aria-label={label}
+  aria-busy="true"
+  data-variant={variant}
+>
+  {#if variant !== 'text'}
+    <!-- Page-level skeleton: same structure as the reference, generated from props. -->
+    <div class="lite-skeleton__header" aria-hidden="true">
+      <span class="lite-skeleton__line" style="width:200px;height:32px"></span>
+      <span class="lite-skeleton__line" style="width:300px"></span>
+      {#if variant === 'list'}<span class="lite-skeleton__line" style="width:120px;height:40px"></span>{/if}
+    </div>
+    <div class="lite-skeleton__panel" aria-hidden="true">
+      {#each Array.from({ length: blockCount }, (_, index) => index) as index (index)}
+        <div class="lite-skeleton__block" data-shape={variant}>
+          {#if variant === 'list'}
+            <span class="lite-skeleton__line" style="flex:1;height:24px"></span>
+            <span class="lite-skeleton__line" style="flex:1;height:24px"></span>
+            <span class="lite-skeleton__line" style="flex:1;height:24px"></span>
+            <span class="lite-skeleton__line" style="flex:1;height:24px"></span>
+          {:else if variant === 'show'}
+            <span class="lite-skeleton__line" style="width:100px"></span>
+            <span class="lite-skeleton__line" style="width:250px;height:24px"></span>
+          {:else}
+            <span class="lite-skeleton__line" style="width:100px"></span>
+            <span class="lite-skeleton__line" style="width:100%;max-width:420px;height:40px"></span>
+          {/if}
+        </div>
+      {/each}
+      {#if variant === 'form'}
+        <div class="lite-skeleton__block" data-shape="actions">
+          <span class="lite-skeleton__line" style="width:100px;height:40px"></span>
+          <span class="lite-skeleton__line" style="width:100px;height:40px"></span>
+        </div>
+      {/if}
+    </div>
+  {:else if circle}
+    <span class="lite-skeleton__circle" aria-hidden="true"></span>
+  {:else}
+    {#each Array.from({ length: Math.max(1, lines) }, (_, index) => index) as index (index)}
+      <span class="lite-skeleton__line" style={`width:${index === lines - 1 && lines > 1 ? '65%' : width};height:${height}`} aria-hidden="true"></span>
+    {/each}
+  {/if}
+  <span class="lite-skeleton__sr">{label}</span>
+</div>
+
+<style>
+  .lite-skeleton { display: block; }
+  .lite-skeleton__line, .lite-skeleton__circle { display: block; background: #F2F3F5; animation: lite-skeleton-pulse 1.4s ease-in-out infinite; }
+  .lite-skeleton__line { border-radius: 4px; }
+  .lite-skeleton__circle { width: 40px; height: 40px; border-radius: 999px; }
+  .lite-skeleton__sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
+  @keyframes lite-skeleton-pulse { 50% { opacity: 0.5; } }
+
+  .lite-skeleton__line + .lite-skeleton__line { margin-top: 8px; }
+
+  .lite-skeleton__header { display: flex; flex-wrap: wrap; }
+  .lite-skeleton__header > * + * { margin-left: 8px; }
+  .lite-skeleton__header > :first-child { flex: 0 0 auto; }
+  .lite-skeleton__panel { margin-top: 24px; padding: 16px; border: 1px solid #E5E6EB; border-radius: 6px; }
+  .lite-skeleton__block + .lite-skeleton__block { margin-top: 16px; }
+  .lite-skeleton__block[data-shape='list'] { display: flex; }
+  .lite-skeleton__block[data-shape='list'] > * + * { margin-left: 16px; }
+  .lite-skeleton__block[data-shape='actions'] { display: flex; }
+  .lite-skeleton__block[data-shape='actions'] > * + * { margin-left: 8px; }
+</style>

package/dist/components/LiteSkeleton.svelte.d.ts

@@ -0,0 +1,19 @@
+interface Props {
+    lines?: number;
+    width?: string;
+    height?: string;
+    circle?: boolean;
+    label?: string;
+    /**
+     * Page-level skeleton layout, mirroring the reference PageSkeleton: header,
+     * then `rows` blocks of the requested shape. `text` keeps the plain lines.
+     */
+    variant?: 'text' | 'list' | 'show' | 'form';
+    /** Number of body rows/blocks for the page variants. */
+    rows?: number;
+    /** Caller class merged with the built-in class list. */
+    class?: string;
+}
+declare const LiteSkeleton: import("svelte").Component<Props, {}, "">;
+type LiteSkeleton = ReturnType<typeof LiteSkeleton>;
+export default LiteSkeleton;

package/dist/components/LiteSpace.svelte

@@ -0,0 +1,31 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+
+  interface Props {
+    direction?: 'horizontal' | 'vertical';
+    size?: 'sm' | 'md' | 'lg';
+    wrap?: boolean;
+    /** Caller class merged with the built-in class list. */
+    class?: string;
+    children: Snippet;
+  }
+
+  let { direction = 'horizontal', size = 'md', wrap = false, class: className = '', children }: Props = $props();
+</script>
+
+<div class="lite-space {className}" data-direction={direction} data-size={size} data-wrap={wrap || undefined}>
+  {@render children()}
+</div>
+
+<style>
+  .lite-space { display: flex; }
+  .lite-space[data-direction='horizontal'] { flex-direction: row; }
+  .lite-space[data-direction='vertical'] { flex-direction: column; }
+  .lite-space[data-wrap] { flex-wrap: wrap; }
+  .lite-space[data-direction='horizontal'] > * + * { margin-left: 8px; }
+  .lite-space[data-direction='vertical'] > * + * { margin-top: 8px; }
+  .lite-space[data-size='sm'][data-direction='horizontal'] > * + * { margin-left: 4px; }
+  .lite-space[data-size='sm'][data-direction='vertical'] > * + * { margin-top: 4px; }
+  .lite-space[data-size='lg'][data-direction='horizontal'] > * + * { margin-left: 16px; }
+  .lite-space[data-size='lg'][data-direction='vertical'] > * + * { margin-top: 16px; }
+</style>

package/dist/components/LiteSpace.svelte.d.ts

@@ -0,0 +1,12 @@
+import type { Snippet } from 'svelte';
+interface Props {
+    direction?: 'horizontal' | 'vertical';
+    size?: 'sm' | 'md' | 'lg';
+    wrap?: boolean;
+    /** Caller class merged with the built-in class list. */
+    class?: string;
+    children: Snippet;
+}
+declare const LiteSpace: import("svelte").Component<Props, {}, "">;
+type LiteSpace = ReturnType<typeof LiteSpace>;
+export default LiteSpace;

package/dist/components/LiteSpin.svelte

@@ -0,0 +1,27 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+
+  interface Props {
+    spinning?: boolean;
+    size?: 'sm' | 'md' | 'lg';
+    label?: string;
+    children?: Snippet;
+  }
+
+  let { spinning = true, size = 'md', label = 'Loading', children }: Props = $props();
+  const px = $derived(size === 'sm' ? 16 : size === 'lg' ? 36 : 24);
+</script>
+
+<div class="lite-spin" aria-busy={spinning || undefined}>
+  {#if spinning}
+    <span class="lite-spin__indicator" style={`width:${px}px;height:${px}px`} role="status" aria-label={label}></span>
+  {/if}
+  {#if children}{@render children()}{/if}
+</div>
+
+<style>
+  .lite-spin { display: inline-flex; align-items: center; }
+  .lite-spin__indicator { display: inline-block; border: 2px solid #E5E6EB; border-top-color: #165DFF; border-radius: 999px; animation: lite-spin 0.8s linear infinite; }
+  @keyframes lite-spin { to { transform: rotate(360deg); } }
+  @media (prefers-reduced-motion: reduce) { .lite-spin__indicator { animation: none; } }
+</style>

package/dist/components/LiteSpin.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { Snippet } from 'svelte';
+interface Props {
+    spinning?: boolean;
+    size?: 'sm' | 'md' | 'lg';
+    label?: string;
+    children?: Snippet;
+}
+declare const LiteSpin: import("svelte").Component<Props, {}, "">;
+type LiteSpin = ReturnType<typeof LiteSpin>;
+export default LiteSpin;

package/dist/components/LiteSplitPaneLayout.svelte

@@ -5,25 +5,37 @@
     direction?: 'horizontal' | 'vertical';
     pane1?: Snippet;
     pane2?: Snippet;
+    /** Caller class for the outer split container. */
+    class?: string;
+    /** Caller class for the first pane. */
+    classPane1?: string;
+    /** Caller class for the divider. */
+    classDivider?: string;
+    /** Caller class for the second pane. */
+    classPane2?: string;
   }
 
   let {
     direction = 'horizontal',
     pane1,
     pane2,
+    class: className = '',
+    classPane1 = '',
+    classDivider = '',
+    classPane2 = '',
   }: Props = $props();
 </script>
 
-<div class="lite-split-layout lite-split-{direction}">
-  <div class="lite-split-pane-1">
+<div class={`lite-split-layout lite-split-${direction} ${className}`.trim()}>
+  <div class={`lite-split-pane-1 ${classPane1}`.trim()}>
     {#if pane1}
       {@render pane1()}
     {/if}
   </div>
 
-  <div class="lite-split-divider"></div>
+  <div class={`lite-split-divider ${classDivider}`.trim()}></div>
 
-  <div class="lite-split-pane-2">
+  <div class={`lite-split-pane-2 ${classPane2}`.trim()}>
     {#if pane2}
       {@render pane2()}
     {/if}
@@ -34,7 +46,7 @@
   .lite-split-layout {
     display: flex;
     background: #ffffff;
-    border: 1px solid #cbd5e1;
+    border: 1px solid #E5E6EB;
     border-radius: 6px;
     margin-bottom: 16px;
     min-height: 300px;
@@ -56,7 +68,7 @@
     overflow-y: auto;
   }
   .lite-split-divider {
-    background: #e2e8f0;
+    background: #E5E6EB;
     width: 2px;
   }
   .lite-split-vertical .lite-split-divider {

package/dist/components/LiteSplitPaneLayout.svelte.d.ts

@@ -3,6 +3,14 @@ interface Props {
     direction?: 'horizontal' | 'vertical';
     pane1?: Snippet;
     pane2?: Snippet;
+    /** Caller class for the outer split container. */
+    class?: string;
+    /** Caller class for the first pane. */
+    classPane1?: string;
+    /** Caller class for the divider. */
+    classDivider?: string;
+    /** Caller class for the second pane. */
+    classPane2?: string;
 }
 declare const LiteSplitPaneLayout: import("svelte").Component<Props, {}, "">;
 type LiteSplitPaneLayout = ReturnType<typeof LiteSplitPaneLayout>;

package/dist/components/LiteSpreadsheetView.svelte

@@ -133,7 +133,7 @@
 <style>
   .sv-lite-sheet-container {
     display: block;
-    border: 1px solid #e2e8f0;
+    border: 1px solid #E5E6EB;
     border-radius: 6px;
     padding: 12px;
     background-color: #ffffff;
@@ -143,7 +143,7 @@
   .sv-lite-sheet-header {
     margin-bottom: 10px;
     font-size: 13px;
-    color: #0f172a;
+    color: #1D2129;
   }
   .sv-lite-sheet-table {
     width: 100%;
@@ -151,22 +151,22 @@
     font-family: monospace;
   }
   .sv-lite-sheet-table th, .sv-lite-sheet-table td {
-    border: 1px solid #cbd5e1;
+    border: 1px solid #E5E6EB;
     padding: 2px;
   }
   .sv-lite-sheet-th-num, .sv-lite-sheet-td-num {
-    background-color: #f1f5f9;
+    background-color: #F2F3F5;
     text-align: center;
     width: 32px;
-    color: #64748b;
+    color: #4E5969;
     font-weight: bold;
     font-size: 10px;
   }
   .sv-lite-sheet-th {
-    background-color: #f8fafc;
+    background-color: #F7F8FA;
     text-align: center;
     font-weight: 600;
-    color: #1e293b;
+    color: #1D2129;
     min-width: 80px;
   }
   .sv-lite-cell-input {
@@ -184,7 +184,7 @@
   }
   .sv-lite-sheet-save {
     padding: 5px 12px;
-    background-color: #4f46e5;
+    background-color: #165DFF;
     color: #ffffff;
     border: none;
     border-radius: 3px;

package/dist/components/LiteStatistic.svelte

@@ -0,0 +1,63 @@
+<script lang="ts">
+  interface Props {
+    title?: string;
+    value: number | string;
+    precision?: number;
+    prefix?: string;
+    suffix?: string;
+    trend?: 'up' | 'down' | 'neutral';
+    trendLabel?: string;
+    loading?: boolean;
+    /** Caller class merged with the built-in class list. */
+    class?: string;
+  }
+
+  let {
+    title,
+    value,
+    precision = 0,
+    prefix,
+    suffix,
+    trend,
+    trendLabel,
+    loading = false,
+    class: className = '',
+  }: Props = $props();
+
+  const display = $derived(
+    typeof value === 'number'
+      ? new Intl.NumberFormat(undefined, { minimumFractionDigits: precision, maximumFractionDigits: precision }).format(value)
+      : value,
+  );
+</script>
+
+<div class="lite-statistic {className}" aria-busy={loading || undefined}>
+  {#if title}<p class="lite-statistic__title">{title}</p>{/if}
+  <p class="lite-statistic__value">
+    {#if prefix}<span>{prefix}</span>{/if}
+    {#if loading}<span class="lite-statistic__skeleton" aria-hidden="true"></span><span class="lite-statistic__sr">{display}</span>{:else}{display}{/if}
+    {#if suffix}<span>{suffix}</span>{/if}
+  </p>
+  {#if trend || trendLabel}
+    <p class="lite-statistic__trend" data-trend={trend ?? 'neutral'}>
+      {#if trend === 'up'}↑{:else if trend === 'down'}↓{:else}→{/if}
+      {#if trendLabel}<span>{trendLabel}</span>{/if}
+    </p>
+  {/if}
+</div>
+
+<style>
+  .lite-statistic { display: block; min-width: 0; }
+  .lite-statistic__title { margin: 0; color: #86909C; font-size: 13px; }
+  .lite-statistic__value { display: flex; align-items: baseline; margin: 0; color: #1D2129; font-size: 24px; font-weight: 650; line-height: 1.2; }
+  .lite-statistic__value > span:first-child, .lite-statistic__value > span:last-child { color: #86909C; font-size: 13px; font-weight: 500; }
+  .lite-statistic__trend { display: flex; margin: 0; color: #86909C; font-size: 12px; }
+  .lite-statistic__trend[data-trend='up'] { color: #009A29; }
+  .lite-statistic__trend[data-trend='down'] { color: #F53F3F; }
+  .lite-statistic__skeleton { display: inline-block; width: 72px; height: 22px; border-radius: 4px; background: #F2F3F5; animation: lite-statistic-pulse 1.4s ease-in-out infinite; }
+  .lite-statistic__sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
+  @keyframes lite-statistic-pulse { 50% { opacity: 0.5; } }
+
+  .lite-statistic__value > * + * { margin-left: 4px; }
+  .lite-statistic__trend > * + * { margin-left: 4px; }
+</style>

package/dist/components/LiteStatistic.svelte.d.ts

@@ -0,0 +1,15 @@
+interface Props {
+    title?: string;
+    value: number | string;
+    precision?: number;
+    prefix?: string;
+    suffix?: string;
+    trend?: 'up' | 'down' | 'neutral';
+    trendLabel?: string;
+    loading?: boolean;
+    /** Caller class merged with the built-in class list. */
+    class?: string;
+}
+declare const LiteStatistic: import("svelte").Component<Props, {}, "">;
+type LiteStatistic = ReturnType<typeof LiteStatistic>;
+export default LiteStatistic;