@svadmin/lite 0.16.11 → 0.22.0

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

@@ -0,0 +1,20 @@
+interface CalendarEvent {
+    id: string;
+    date: string;
+    label: string;
+    href?: string;
+    tone?: 'neutral' | 'info' | 'success' | 'warning' | 'danger';
+}
+interface Props {
+    value?: string;
+    events?: CalendarEvent[];
+    locale?: string;
+    weekStartsOn?: 0 | 1;
+    min?: string;
+    max?: string;
+    title?: string;
+    hrefFor?: (iso: string) => string;
+}
+declare const LiteCalendar: import("svelte").Component<Props, {}, "">;
+type LiteCalendar = ReturnType<typeof LiteCalendar>;
+export default LiteCalendar;

package/dist/components/LiteCanvasAnnotation.svelte

@@ -62,7 +62,7 @@
 <style>
   .sv-lite-annotation-box {
     display: block;
-    border: 1px solid #e2e8f0;
+    border: 1px solid #E5E6EB;
     border-radius: 6px;
     padding: 12px;
     background-color: #ffffff;
@@ -71,17 +71,17 @@
   .sv-lite-anno-header {
     margin-bottom: 10px;
     font-size: 13px;
-    color: #0f172a;
+    color: #1D2129;
   }
   .sv-lite-anno-count {
-    color: #64748b;
+    color: #4E5969;
     font-size: 11px;
     margin-left: 6px;
   }
   .sv-lite-anno-preview {
     text-align: center;
-    background-color: #f8fafc;
-    border: 1px solid #cbd5e1;
+    background-color: #F7F8FA;
+    border: 1px solid #E5E6EB;
     border-radius: 4px;
     padding: 8px;
     margin-bottom: 10px;
@@ -94,12 +94,12 @@
   .sv-lite-anno-list {
     margin-bottom: 10px;
     padding: 8px;
-    background-color: #f8fafc;
+    background-color: #F7F8FA;
     border-radius: 4px;
   }
   .sv-lite-list-title {
     font-weight: 600;
-    color: #475569;
+    color: #4E5969;
     margin-bottom: 6px;
   }
   .sv-lite-anno-item {
@@ -108,19 +108,19 @@
   .sv-lite-anno-badge {
     display: inline-block;
     padding: 1px 5px;
-    background-color: #fee2e2;
-    color: #991b1b;
+    background-color: #FFECE8;
+    color: #CB272D;
     border-radius: 3px;
     font-size: 10px;
-    text-transform: uppercase;
+    text-transform: none;
     margin-right: 6px;
   }
   .sv-lite-anno-text {
-    color: #334155;
+    color: #1D2129;
   }
   .sv-lite-anno-upload {
     padding-top: 8px;
-    border-top: 1px solid #e2e8f0;
+    border-top: 1px solid #E5E6EB;
   }
   .sv-lite-file-input {
     font-size: 11px;
@@ -129,7 +129,7 @@
   .sv-lite-upload-btn {
     padding: 4px 10px;
     font-size: 11px;
-    background-color: #4f46e5;
+    background-color: #165DFF;
     color: #ffffff;
     border: none;
     border-radius: 3px;

package/dist/components/LiteCarousel.svelte

@@ -0,0 +1,72 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+
+  interface Props {
+    count: number;
+    label?: string;
+    id?: string;
+    /** Zero-based slide rendered as current (matches the reference `index`). */
+    index?: number;
+    /** Caller class merged with the built-in class list. */
+    class?: string;
+    children?: Snippet<[number]>;
+  }
+
+  let {
+    count,
+    label = 'Carousel',
+    id = 'lite-carousel',
+    index = 0,
+    class: className = '',
+    children,
+  }: Props = $props();
+
+  const current = $derived(count > 0 ? Math.min(Math.max(0, Math.trunc(index)), count - 1) : 0);
+</script>
+
+<section
+  class={`lite-carousel ${className}`.trim()}
+  aria-label={label}
+  aria-roledescription="carousel"
+  data-current={current + 1}
+>
+  <div class="lite-carousel__track">
+    {#each Array.from({ length: Math.max(0, count) }, (_, index) => index) as index (index)}
+      <div
+        class="lite-carousel__slide"
+        id={`${id}-${index + 1}`}
+        role="group"
+        aria-roledescription="slide"
+        aria-label={`${index + 1} / ${count}`}
+        data-current={index === current || undefined}
+      >
+        {#if children}{@render children(index)}{:else}<p class="lite-muted">Slide {index + 1}</p>{/if}
+      </div>
+    {/each}
+  </div>
+  {#if count > 1}
+    <nav class="lite-carousel__dots" aria-label="Slides">
+      {#each Array.from({ length: count }, (_, index) => index) as index (index)}
+        <a
+          href={`#${id}-${index + 1}`}
+          aria-label={`Go to slide ${index + 1}`}
+          aria-current={index === current ? 'true' : undefined}
+          class={index === current ? 'active' : undefined}
+        >{index + 1}</a>
+      {/each}
+    </nav>
+  {/if}
+</section>
+
+<style>
+  .lite-carousel { display: block; }
+  .lite-carousel__track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; border: 1px solid #E5E6EB; border-radius: 8px; background: #fff; }
+  .lite-carousel__slide { flex: 0 0 100%; min-width: 0; padding: 16px; scroll-snap-align: start; }
+  .lite-carousel__dots { display: flex; flex-wrap: wrap; justify-content: center; }
+  .lite-carousel__dots a { display: inline-grid; place-items: center; min-width: 24px; height: 24px; border: 1px solid #E5E6EB; border-radius: 999px; color: #4E5969; font-size: 11px; text-decoration: none; }
+  .lite-carousel__dots a:hover { border-color: #165DFF; color: #165DFF; text-decoration: none; }
+  .lite-carousel__dots a.active { border-color: #165DFF; background: #E8F3FF; color: #165DFF; }
+
+  .lite-carousel__dots a + a { margin-left: 4px; }
+  .lite-carousel__track { margin-bottom: 8px; }
+</style>

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

@@ -0,0 +1,14 @@
+import type { Snippet } from 'svelte';
+interface Props {
+    count: number;
+    label?: string;
+    id?: string;
+    /** Zero-based slide rendered as current (matches the reference `index`). */
+    index?: number;
+    /** Caller class merged with the built-in class list. */
+    class?: string;
+    children?: Snippet<[number]>;
+}
+declare const LiteCarousel: import("svelte").Component<Props, {}, "">;
+type LiteCarousel = ReturnType<typeof LiteCarousel>;
+export default LiteCarousel;

package/dist/components/LiteChatDialog.svelte

@@ -45,14 +45,14 @@
 
 <div class="lite-chat-dialog lite-card" style="display:flex;flex-direction:column;height:560px;padding:0;overflow:hidden;max-width:400px;margin:0 auto;">
   <!-- Header -->
-  <div style="background:#0f172a;color:#fff;padding:14px 16px;font-weight:600;flex-shrink:0;display:flex;align-items:center;border-top-left-radius:8px;border-top-right-radius:8px;">
+  <div style="background:#1D2129;color:#fff;padding:14px 16px;font-weight:600;flex-shrink:0;display:flex;align-items:center;border-top-left-radius:8px;border-top-right-radius:8px;">
     {title}
   </div>
 
   <!-- Message History -->
-  <div class="lite-chat-history" style="flex:1;overflow-y:auto;padding:16px;background:#f8fafc;">
+  <div class="lite-chat-history" style="flex:1;overflow-y:auto;padding:16px;background:#F7F8FA;">
     {#if messages.length === 0}
-      <div style="text-align:center;color:#64748b;margin-top:60px;font-size:14px;">
+      <div style="text-align:center;color:#4E5969;margin-top:60px;font-size:14px;">
         How can I help you today?
       </div>
     {/if}
@@ -70,12 +70,12 @@
             font-size:14px;
             line-height:1.5;
             {msg.role === 'user'
-              ? 'background:#4f46e5;color:#fff;border-bottom-right-radius:2px;'
-              : 'background:#e2e8f0;color:#0f172a;border-bottom-left-radius:2px;'}"
+              ? 'background:#165DFF;color:#fff;border-bottom-right-radius:2px;'
+              : 'background:#E5E6EB;color:#1D2129;border-bottom-left-radius:2px;'}"
           >
             <div style="white-space:pre-wrap;word-break:break-word;">{messageText(msg)}</div>
           </div>
-          <div style="font-size:11px;color:#94a3b8;margin-top:4px;">
+          <div style="font-size:11px;color:#86909C;margin-top:4px;">
             {msg.role === 'user' ? 'You' : 'Assistant'} · {formatDate(msg.createdAt)}
           </div>
         </div>
@@ -84,7 +84,7 @@
 
     {#if isLoading}
       <div id="latest-msg" style="display:flex;flex-direction:column;align-items:flex-start;margin-bottom:16px;">
-        <div style="background:#e2e8f0;color:#64748b;padding:10px 14px;border-radius:12px;border-bottom-left-radius:2px;font-size:13px;font-style:italic;">
+        <div style="background:#E5E6EB;color:#4E5969;padding:10px 14px;border-radius:12px;border-bottom-left-radius:2px;font-size:13px;font-style:italic;">
           Thinking...
         </div>
       </div>
@@ -92,7 +92,7 @@
   </div>
 
   <!-- Input Form -->
-  <form method="POST" action={actionRoute} style="display:flex;padding:12px;background:#fff;border-top:1px solid #e2e8f0;align-items:stretch;margin:0;flex-shrink:0;">
+  <form method="POST" action={actionRoute} style="display:flex;padding:12px;background:#fff;border-top:1px solid #E5E6EB;align-items:stretch;margin:0;flex-shrink:0;">
     <textarea
       name="message"
       class="lite-input"

package/dist/components/LiteCollapse.svelte

@@ -0,0 +1,49 @@
+<script lang="ts">
+  interface CollapseItem {
+    id: string;
+    title: string;
+    description?: string;
+    content: string;
+    open?: boolean;
+    disabled?: boolean;
+  }
+
+  interface Props {
+    items: CollapseItem[];
+    label?: string;
+  }
+
+  let { items, label = 'Collapsible sections' }: Props = $props();
+</script>
+
+<div class="lite-collapse" role="group" aria-label={label}>
+  {#each items as item (item.id)}
+    <section class="lite-collapse__item" data-open={item.open || undefined} data-disabled={item.disabled || undefined}>
+      {#if item.disabled}
+        <!-- Disabled sections must not navigate: a dead anchor still moves focus and
+             changes the URL, so render plain text instead of a link. -->
+        <span class="lite-collapse__trigger" aria-disabled="true">
+          <span>{item.title}</span>
+          {#if item.description}<small>{item.description}</small>{/if}
+        </span>
+      {:else}
+        <a class="lite-collapse__trigger" href={`#${item.id}`}>
+          <span>{item.title}</span>
+          {#if item.description}<small>{item.description}</small>{/if}
+        </a>
+      {/if}
+      <div class="lite-collapse__body" id={item.id}>{item.content}</div>
+    </section>
+  {/each}
+</div>
+
+<style>
+  .lite-collapse { border: 1px solid #E5E6EB; border-radius: 8px; background: #fff; overflow: hidden; }
+  .lite-collapse__item + .lite-collapse__item { border-top: 1px solid #E5E6EB; }
+  .lite-collapse__trigger { display: block; padding: 12px 16px; color: #1D2129; font-size: 14px; font-weight: 500; text-decoration: none; }
+  .lite-collapse__trigger:hover { background: #F7F8FA; text-decoration: none; }
+  .lite-collapse__trigger small { margin-left: 8px; color: #86909C; font-size: 12px; font-weight: 400; }
+  .lite-collapse__item[data-disabled] .lite-collapse__trigger { color: #C9CDD4; cursor: not-allowed; }
+  .lite-collapse__body { display: none; padding: 12px 16px; border-top: 1px solid #F2F3F5; color: #4E5969; font-size: 13px; line-height: 1.6; }
+  .lite-collapse__item[data-open] .lite-collapse__body, .lite-collapse__body:target { display: block; }
+</style>

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

@@ -0,0 +1,15 @@
+interface CollapseItem {
+    id: string;
+    title: string;
+    description?: string;
+    content: string;
+    open?: boolean;
+    disabled?: boolean;
+}
+interface Props {
+    items: CollapseItem[];
+    label?: string;
+}
+declare const LiteCollapse: import("svelte").Component<Props, {}, "">;
+type LiteCollapse = ReturnType<typeof LiteCollapse>;
+export default LiteCollapse;

package/dist/components/LiteColumnHeaderFilter.svelte

@@ -4,15 +4,18 @@
   interface Props {
     field: FieldDefinition;
     action?: string;
+    /** Caller class merged with the built-in class list. */
+    class?: string;
   }
 
   let {
     field,
     action = '',
+    class: className = '',
   }: Props = $props();
 </script>
 
-<span class="lite-column-header-filter">
+<span class="lite-column-header-filter {className}">
   <a
     href="{action}?filter_field={field.key}"
     class="lite-filter-icon"

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

@@ -2,6 +2,8 @@ import type { FieldDefinition } from '@svadmin/core';
 interface Props {
     field: FieldDefinition;
     action?: string;
+    /** Caller class merged with the built-in class list. */
+    class?: string;
 }
 declare const LiteColumnHeaderFilter: import("svelte").Component<Props, {}, "">;
 type LiteColumnHeaderFilter = ReturnType<typeof LiteColumnHeaderFilter>;

package/dist/components/LiteColumnSettings.svelte

@@ -11,6 +11,8 @@
     method?: 'GET' | 'POST' | 'get' | 'post';
     title?: string;
     submitText?: string;
+    /** Caller class merged with the built-in class list. */
+    class?: string;
   }
 
   let {
@@ -19,10 +21,11 @@
     method = 'GET',
     title = 'Column Visibility',
     submitText = 'Apply',
+    class: className = '',
   }: Props = $props();
 </script>
 
-<div class="lite-column-settings lite-form-group">
+<div class="lite-column-settings lite-form-group {className}">
   <div class="lite-column-settings-title">
     <strong>⚙ {title}</strong>
   </div>
@@ -52,13 +55,13 @@
   .lite-column-settings {
     margin-bottom: 12px;
     padding: 8px 12px;
-    background: #f8fafc;
-    border: 1px solid #cbd5e1;
+    background: #F7F8FA;
+    border: 1px solid #E5E6EB;
     border-radius: 4px;
   }
   .lite-column-settings-title {
     font-size: 12px;
-    color: #475569;
+    color: #4E5969;
     margin-bottom: 6px;
   }
   .lite-column-options {

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

@@ -9,6 +9,8 @@ interface Props {
     method?: 'GET' | 'POST' | 'get' | 'post';
     title?: string;
     submitText?: string;
+    /** Caller class merged with the built-in class list. */
+    class?: string;
 }
 declare const LiteColumnSettings: import("svelte").Component<Props, {}, "">;
 type LiteColumnSettings = ReturnType<typeof LiteColumnSettings>;

package/dist/components/LiteCommentThread.svelte

@@ -0,0 +1,113 @@
+<script lang="ts">
+  import { renderRichContent, type MarkdownRenderOptions } from '../rich-content.js';
+
+  interface CommentItem {
+    id: string;
+    author: string;
+    content: string;
+    time?: string;
+    avatar?: string;
+    replies?: CommentItem[];
+  }
+
+  interface Props {
+    comments: CommentItem[];
+    emptyText?: string;
+    label?: string;
+    action?: string;
+    submitLabel?: string;
+    name?: string;
+    /**
+     * Render comment bodies as Markdown/allowlisted HTML. Defaults to `false` so
+     * the default output stays text-only, matching the reference component.
+     */
+    richContent?: boolean;
+    richContentOptions?: MarkdownRenderOptions;
+  }
+
+  let {
+    comments,
+    emptyText = 'No comments yet',
+    label = 'Comments',
+    action,
+    submitLabel = 'Comment',
+    name = 'comment',
+    richContent = false,
+    richContentOptions,
+  }: Props = $props();
+
+  function body(value: string): string {
+    return renderRichContent(value, richContentOptions);
+  }
+</script>
+
+<section class="lite-comments" aria-label={label}>
+  {#if comments.length === 0}
+    <p class="lite-muted">{emptyText}</p>
+  {:else}
+    <ol class="lite-comments__list">
+      {#each comments as comment (comment.id)}
+        <li class="lite-comments__item">
+          {#if comment.avatar}<img src={comment.avatar} alt="" loading="lazy" />{:else}<span class="lite-comments__avatar" aria-hidden="true">{comment.author.slice(0, 1)}</span>{/if}
+          <div class="lite-comments__body">
+            <p class="lite-comments__meta"><strong>{comment.author}</strong>{#if comment.time}<time>{comment.time}</time>{/if}</p>
+            {#if richContent}
+              <!-- eslint-disable-next-line svelte/no-at-html-tags -- 内容由 renderRichContent 转义或白名单过滤，高亮回调仅允许可信服务端实现。 -->
+              <div class="lite-comments__rich">{@html body(comment.content)}</div>
+            {:else}
+              <p>{comment.content}</p>
+            {/if}
+            {#if comment.replies?.length}
+              <ol class="lite-comments__replies">
+                {#each comment.replies as reply (reply.id)}
+                  <li>
+                    <strong>{reply.author}</strong>
+                    {#if richContent}
+                      <!-- eslint-disable-next-line svelte/no-at-html-tags -- 内容由 renderRichContent 转义或白名单过滤，高亮回调仅允许可信服务端实现。 -->
+                      <span class="lite-comments__rich">{@html body(reply.content)}</span>
+                    {:else}
+                      {reply.content}
+                    {/if}
+                  </li>
+                {/each}
+              </ol>
+            {/if}
+          </div>
+        </li>
+      {/each}
+    </ol>
+  {/if}
+  {#if action}
+    <form class="lite-comments__form" method="POST" {action}>
+      <label class="lite-form-group">
+        <span>Add a comment</span>
+        <textarea class="lite-input" name={name} rows="3" required></textarea>
+      </label>
+      <button class="lite-btn lite-btn-primary lite-btn-sm" type="submit">{submitLabel}</button>
+    </form>
+  {/if}
+</section>
+
+<style>
+  .lite-comments { display: block; }
+  .lite-comments__list, .lite-comments__replies { display: block; margin: 0; padding: 0; list-style: none; }
+  .lite-comments__item { display: flex; align-items: flex-start; padding-bottom: 12px; border-bottom: 1px solid #F2F3F5; }
+  .lite-comments__avatar, .lite-comments__item > img { display: inline-grid; flex: 0 0 32px; place-items: center; width: 32px; height: 32px; border-radius: 999px; background: #E8F3FF; color: #165DFF; font-size: 13px; font-weight: 600; object-fit: cover; }
+  .lite-comments__body { min-width: 0; flex: 1; }
+  .lite-comments__body > p { margin: 4px 0 0; color: #4E5969; font-size: 13px; line-height: 1.6; white-space: pre-wrap; }
+  .lite-comments__meta { display: flex; flex-wrap: wrap; align-items: baseline; margin: 0; color: #1D2129; font-size: 13px; }
+  .lite-comments__meta time { color: #86909C; font-size: 12px; }
+  .lite-comments__replies { margin-top: 8px; padding-left: 12px; border-left: 2px solid #F2F3F5; color: #4E5969; font-size: 12px; }
+  .lite-comments__form { display: block; justify-items: start; }
+
+  .lite-comments__item > img, .lite-comments__avatar { margin-right: 10px; }
+  .lite-comments__meta > * + * { margin-left: 8px; }
+  .lite-comments__form textarea { margin-bottom: 8px; }
+  .lite-comments__rich :global(p) { margin: 0 0 6px; }
+  .lite-comments__rich :global(p:last-child) { margin-bottom: 0; }
+  .lite-comments__rich :global(code) { padding: 1px 4px; border-radius: 3px; background: #F2F3F5; font-family: monospace; font-size: 12px; }
+  .lite-comments__rich :global(pre) { margin: 0 0 6px; padding: 8px; overflow-x: auto; border-radius: 4px; background: #F2F3F5; }
+  .lite-comments__rich :global(a) { color: #165DFF; }
+  .lite-comments__rich :global(ul),
+  .lite-comments__rich :global(ol) { margin: 0 0 6px; padding-left: 18px; }
+</style>

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

@@ -0,0 +1,26 @@
+import { type MarkdownRenderOptions } from '../rich-content.js';
+interface CommentItem {
+    id: string;
+    author: string;
+    content: string;
+    time?: string;
+    avatar?: string;
+    replies?: CommentItem[];
+}
+interface Props {
+    comments: CommentItem[];
+    emptyText?: string;
+    label?: string;
+    action?: string;
+    submitLabel?: string;
+    name?: string;
+    /**
+     * Render comment bodies as Markdown/allowlisted HTML. Defaults to `false` so
+     * the default output stays text-only, matching the reference component.
+     */
+    richContent?: boolean;
+    richContentOptions?: MarkdownRenderOptions;
+}
+declare const LiteCommentThread: import("svelte").Component<Props, {}, "">;
+type LiteCommentThread = ReturnType<typeof LiteCommentThread>;
+export default LiteCommentThread;

package/dist/components/LiteConfirmDialog.svelte

@@ -51,9 +51,9 @@
     aria-describedby={description ? descriptionId : undefined}
     tabindex="-1"
   >
-    <div id={titleId} style="font-weight:600;margin-bottom:8px;color:#0f172a;">{title}</div>
+    <div id={titleId} style="font-weight:600;margin-bottom:8px;color:#1D2129;">{title}</div>
     {#if description}
-      <div id={descriptionId} style="font-size:12px;color:#64748b;margin-bottom:16px;">{description}</div>
+      <div id={descriptionId} style="font-size:12px;color:#4E5969;margin-bottom:16px;">{description}</div>
     {/if}
     <form method="POST" {action} class="lite-inline-actions lite-justify-end">
       {#each Object.entries(hiddenInputs) as [key, val] (key)}

package/dist/components/LiteCountdown.svelte

@@ -0,0 +1,49 @@
+<script lang="ts">
+  interface Props {
+    target?: Date | string | number;
+    duration?: number;
+    title?: string;
+    format?: 'full' | 'clock';
+    refreshHref?: string;
+  }
+
+  let { target, duration, title, format = 'full', refreshHref }: Props = $props();
+
+  function resolveRemaining(): number {
+    if (duration !== undefined) return Math.max(0, duration * 1000);
+    if (!target) return 0;
+    const end = target instanceof Date ? target.getTime() : new Date(target).getTime();
+    return Number.isNaN(end) ? 0 : Math.max(0, end - Date.now());
+  }
+
+  function formatTime(value: number): string {
+    const total = Math.max(0, Math.floor(value / 1000));
+    const days = Math.floor(total / 86400);
+    const hours = Math.floor((total % 86400) / 3600);
+    const minutes = Math.floor((total % 3600) / 60);
+    const seconds = total % 60;
+    const clock = [hours, minutes, seconds].map((part) => String(part).padStart(2, '0')).join(':');
+    return format === 'clock' ? clock : days > 0 ? `${days}d ${clock}` : clock;
+  }
+
+  const remaining = $derived(resolveRemaining());
+  const deadline = $derived(target ? (target instanceof Date ? target.toISOString() : new Date(target).toISOString()) : undefined);
+</script>
+
+<div class="lite-countdown" data-finished={remaining <= 0 || undefined}>
+  {#if title}<p class="lite-countdown__title">{title}</p>{/if}
+  <time class="lite-countdown__value" datetime={deadline}>{formatTime(remaining)}</time>
+  {#if deadline}<small>Deadline: {deadline}</small>{/if}
+  {#if refreshHref}<a href={refreshHref}>Refresh</a>{/if}
+</div>
+
+<style>
+  .lite-countdown { display: block; }
+  .lite-countdown__title { margin: 0; color: #86909C; font-size: 13px; }
+  .lite-countdown__value { color: #1D2129; font-size: 24px; font-weight: 650; font-variant-numeric: tabular-nums; line-height: 1.2; }
+  .lite-countdown[data-finished] .lite-countdown__value { color: #86909C; }
+  .lite-countdown small { color: #86909C; font-size: 12px; }
+  .lite-countdown a { color: #165DFF; font-size: 12px; }
+
+  .lite-countdown > * + * { margin-top: 4px; }
+</style>

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

@@ -0,0 +1,10 @@
+interface Props {
+    target?: Date | string | number;
+    duration?: number;
+    title?: string;
+    format?: 'full' | 'clock';
+    refreshHref?: string;
+}
+declare const LiteCountdown: import("svelte").Component<Props, {}, "">;
+type LiteCountdown = ReturnType<typeof LiteCountdown>;
+export default LiteCountdown;