@svadmin/lite 0.16.11 → 0.22.0

package/dist/components/LiteStatsCard.svelte

@@ -20,6 +20,8 @@
     icon?: string;
     /** Link to detail page */
     href?: string;
+    /** Caller class merged with the built-in class list. */
+    class?: string;
   }
 
   let {
@@ -30,11 +32,12 @@
     trendValue,
     icon,
     href,
+    class: className = '',
   }: Props = $props();
 </script>
 
 {#if href}
-  <a href={href} class="lite-stats-card lite-card" style="text-decoration:none;display:block;">
+  <a href={href} class="lite-stats-card lite-card {className}" style="text-decoration:none;display:block;">
     {#if icon}
       <div class="lite-stats-icon">{icon}</div>
     {/if}
@@ -51,7 +54,7 @@
     {/if}
   </a>
 {:else}
-  <div class="lite-stats-card lite-card">
+  <div class="lite-stats-card lite-card {className}">
     {#if icon}
       <div class="lite-stats-icon">{icon}</div>
     {/if}

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

@@ -18,6 +18,8 @@ interface Props {
     icon?: string;
     /** Link to detail page */
     href?: string;
+    /** Caller class merged with the built-in class list. */
+    class?: string;
 }
 declare const LiteStatsCard: import("svelte").Component<Props, {}, "">;
 type LiteStatsCard = ReturnType<typeof LiteStatsCard>;

package/dist/components/LiteStatusBadge.svelte

@@ -0,0 +1,33 @@
+<script lang="ts">
+  import LiteBadge, { type LiteBadgeVariant } from './LiteBadge.svelte';
+
+  interface Props {
+    status: string;
+    tone?: LiteBadgeVariant;
+    label?: string;
+    href?: string;
+    /** Caller class merged with the built-in class list. */
+    class?: string;
+  }
+
+  let { status, tone, label, href, class: className = '' }: Props = $props();
+
+  const normalized = $derived(status.toLowerCase().replace(/[\s_]+/g, '-'));
+  const resolvedTone = $derived(tone ?? (
+    ['active', 'success', 'completed', 'approved', 'online', 'enabled'].includes(normalized) ? 'success'
+      : ['error', 'failed', 'rejected', 'danger', 'offline', 'disabled'].includes(normalized) ? 'destructive'
+        : ['warning', 'pending', 'review', 'processing'].includes(normalized) ? 'warning'
+          : ['info', 'new', 'draft'].includes(normalized) ? 'info'
+            : 'secondary'
+  ));
+</script>
+
+{#if href}
+  <a href={href} class="lite-status-badge {className}"><LiteBadge variant={resolvedTone}>{label ?? status}</LiteBadge></a>
+{:else}
+  <span class="lite-status-badge {className}"><LiteBadge variant={resolvedTone}>{label ?? status}</LiteBadge></span>
+{/if}
+
+<style>
+  .lite-status-badge { display: inline-flex; text-decoration: none; }
+</style>

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

@@ -0,0 +1,12 @@
+import { type LiteBadgeVariant } from './LiteBadge.svelte';
+interface Props {
+    status: string;
+    tone?: LiteBadgeVariant;
+    label?: string;
+    href?: string;
+    /** Caller class merged with the built-in class list. */
+    class?: string;
+}
+declare const LiteStatusBadge: import("svelte").Component<Props, {}, "">;
+type LiteStatusBadge = ReturnType<typeof LiteStatusBadge>;
+export default LiteStatusBadge;

package/dist/components/LiteStatusTabs.svelte

@@ -0,0 +1,35 @@
+<script lang="ts">
+  interface StatusTab {
+    id: string;
+    label: string;
+    count?: number;
+    href: string;
+    active?: boolean;
+  }
+
+  interface Props {
+    tabs: StatusTab[];
+    label?: string;
+  }
+
+  let { tabs, label = 'Status tabs' }: Props = $props();
+</script>
+
+<nav class="lite-status-tabs" aria-label={label}>
+  {#each tabs as tab (tab.id)}
+    <a href={tab.href} class:active={tab.active} aria-current={tab.active ? 'page' : undefined}>
+      {tab.label}
+      {#if tab.count !== undefined}<span class="lite-badge lite-badge-secondary">{tab.count}</span>{/if}
+    </a>
+  {/each}
+</nav>
+
+<style>
+  .lite-status-tabs { display: flex; flex-wrap: wrap; border-bottom: 1px solid #E5E6EB; }
+  .lite-status-tabs a { display: inline-flex; align-items: center; padding: 8px 12px; border-bottom: 2px solid transparent; color: #4E5969; font-size: 13px; text-decoration: none; }
+  .lite-status-tabs a:hover { color: #165DFF; text-decoration: none; }
+  .lite-status-tabs a.active { border-bottom-color: #165DFF; color: #165DFF; font-weight: 600; }
+
+  .lite-status-tabs a + a { margin-left: 4px; }
+  .lite-status-tabs a > * + * { margin-left: 6px; }
+</style>

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

@@ -0,0 +1,14 @@
+interface StatusTab {
+    id: string;
+    label: string;
+    count?: number;
+    href: string;
+    active?: boolean;
+}
+interface Props {
+    tabs: StatusTab[];
+    label?: string;
+}
+declare const LiteStatusTabs: import("svelte").Component<Props, {}, "">;
+type LiteStatusTabs = ReturnType<typeof LiteStatusTabs>;
+export default LiteStatusTabs;

package/dist/components/LiteStepForm.svelte

@@ -15,6 +15,8 @@
     nextText?: string;
     prevText?: string;
     children?: Snippet;
+    /** Caller class merged with the built-in class list. */
+    class?: string;
   }
 
   let {
@@ -26,10 +28,11 @@
     nextText = 'Next Step',
     prevText = 'Previous Step',
     children,
+    class: className = '',
   }: Props = $props();
 </script>
 
-<div class="lite-step-form-card">
+<div class="lite-step-form-card {className}">
   <!-- Step Indicators -->
   <div class="lite-step-header">
     {#each steps as step, index (index)}
@@ -83,7 +86,7 @@
   .lite-step-form-card {
     padding: 16px;
     background: #ffffff;
-    border: 1px solid #cbd5e1;
+    border: 1px solid #E5E6EB;
     border-radius: 6px;
     margin-bottom: 16px;
   }
@@ -91,7 +94,7 @@
     display: flex;
     align-items: center;
     padding-bottom: 12px;
-    border-bottom: 1px solid #e2e8f0;
+    border-bottom: 1px solid #E5E6EB;
     margin-bottom: 16px;
     overflow-x: auto;
   }
@@ -99,14 +102,14 @@
     display: flex;
     align-items: center;
     font-size: 12px;
-    color: #64748b;
+    color: #4E5969;
   }
   .lite-step-item.lite-step-current {
-    color: #3b82f6;
+    color: #165DFF;
     font-weight: bold;
   }
   .lite-step-item.lite-step-completed {
-    color: #10b981;
+    color: #00B42A;
   }
   .lite-step-circle {
     display: inline-block;
@@ -115,21 +118,21 @@
     line-height: 20px;
     text-align: center;
     border-radius: 50%;
-    background: #f1f5f9;
+    background: #F2F3F5;
     margin-right: 6px;
     font-size: 11px;
   }
   .lite-step-current .lite-step-circle {
-    background: #3b82f6;
+    background: #165DFF;
     color: #ffffff;
   }
   .lite-step-completed .lite-step-circle {
-    background: #10b981;
+    background: #00B42A;
     color: #ffffff;
   }
   .lite-step-arrow {
     margin: 0 10px;
-    color: #cbd5e1;
+    color: #E5E6EB;
   }
   .lite-step-content {
     min-height: 100px;
@@ -139,6 +142,6 @@
     display: flex;
     align-items: center;
     padding-top: 12px;
-    border-top: 1px solid #e2e8f0;
+    border-top: 1px solid #E5E6EB;
   }
 </style>

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

@@ -12,6 +12,8 @@ interface Props {
     nextText?: string;
     prevText?: string;
     children?: Snippet;
+    /** Caller class merged with the built-in class list. */
+    class?: string;
 }
 declare const LiteStepForm: import("svelte").Component<Props, {}, "">;
 type LiteStepForm = ReturnType<typeof LiteStepForm>;

package/dist/components/LiteSteps.svelte

@@ -0,0 +1,64 @@
+<script lang="ts">
+  interface StepItem {
+    title: string;
+    description?: string;
+    href?: string;
+    disabled?: boolean;
+  }
+
+  interface Props {
+    items: StepItem[];
+    current?: number;
+    status?: 'wait' | 'process' | 'finish' | 'error';
+    direction?: 'horizontal' | 'vertical';
+    label?: string;
+    /** Caller class merged with the built-in class list. */
+    class?: string;
+  }
+
+  let {
+    items,
+    current = 0,
+    status = 'process',
+    direction = 'horizontal',
+    label = 'Steps',
+    class: className = '',
+  }: Props = $props();
+
+  function state(index: number): string {
+    if (index < current) return 'finish';
+    if (index === current) return status === 'error' ? 'error' : status === 'finish' ? 'finish' : 'process';
+    return 'wait';
+  }
+</script>
+
+<ol class="lite-steps {className}" data-direction={direction} aria-label={label}>
+  {#each items as item, index (item.title)}
+    {@const stateValue = state(index)}
+    <li class="lite-steps__item" data-status={stateValue} data-disabled={item.disabled || undefined}>
+      <span class="lite-steps__indicator" aria-hidden="true">{stateValue === 'finish' ? '✓' : stateValue === 'error' ? '!' : index + 1}</span>
+      <span class="lite-steps__text">
+        {#if item.href && !item.disabled}<a href={item.href}>{item.title}</a>{:else}<strong>{item.title}</strong>{/if}
+        {#if item.description}<small>{item.description}</small>{/if}
+      </span>
+    </li>
+  {/each}
+</ol>
+
+<style>
+  .lite-steps { display: flex; margin: 0; padding: 0; list-style: none; }
+  .lite-steps[data-direction='vertical'] { flex-direction: column; }
+  .lite-steps__item { display: flex; flex: 1; align-items: flex-start; min-width: 0; }
+  .lite-steps__indicator { display: inline-grid; flex: 0 0 26px; place-items: center; width: 26px; height: 26px; border: 1px solid #C9CDD4; border-radius: 999px; background: #fff; color: #86909C; font-size: 12px; font-weight: 600; }
+  .lite-steps__item[data-status='finish'] .lite-steps__indicator { border-color: #00B42A; background: #E8FFEA; color: #009A29; }
+  .lite-steps__item[data-status='process'] .lite-steps__indicator { border-color: #165DFF; background: #E8F3FF; color: #165DFF; }
+  .lite-steps__item[data-status='error'] .lite-steps__indicator { border-color: #F53F3F; background: #FFECE8; color: #F53F3F; }
+  .lite-steps__item[data-disabled] { opacity: 0.55; }
+  .lite-steps__text { display: block; min-width: 0; color: #1D2129; font-size: 13px; }
+  .lite-steps__text a { color: #165DFF; }
+  .lite-steps__text small { color: #86909C; font-size: 12px; }
+
+  .lite-steps > .lite-steps__item + .lite-steps__item { margin-left: 12px; }
+  .lite-steps__indicator { margin-right: 8px; }
+  .lite-steps__text > * + * { margin-top: 2px; }
+</style>

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

@@ -0,0 +1,18 @@
+interface StepItem {
+    title: string;
+    description?: string;
+    href?: string;
+    disabled?: boolean;
+}
+interface Props {
+    items: StepItem[];
+    current?: number;
+    status?: 'wait' | 'process' | 'finish' | 'error';
+    direction?: 'horizontal' | 'vertical';
+    label?: string;
+    /** Caller class merged with the built-in class list. */
+    class?: string;
+}
+declare const LiteSteps: import("svelte").Component<Props, {}, "">;
+type LiteSteps = ReturnType<typeof LiteSteps>;
+export default LiteSteps;

package/dist/components/LiteTable.svelte

@@ -24,6 +24,8 @@
     stickyColumns?: { left?: string; right?: string };
     /** Pin actions on the right; this takes precedence over stickyColumns.right. */
     stickyActions?: boolean;
+    /** Caller class merged with the built-in class list. */
+    class?: string;
   }
 
   let {
@@ -39,6 +41,7 @@
     enableBatch = false,
     stickyColumns = {},
     stickyActions = false,
+    class: className = ''
   }: Props = $props();
 
   const tableId = $props.id();
@@ -98,7 +101,7 @@
   <form id={"batch-delete-" + tableId} method="POST" action="?/batchDelete" style="display:none;"></form>
 {/if}
 
-<table class="lite-table">
+<table class="lite-table {className}">
   <thead>
     <tr>
       {#if showBatch}
@@ -199,7 +202,7 @@
 
 {#if showBatch && records.length > 0}
   <div class="lite-batch-bar">
-    <span style="font-size: 13px; color: #64748b;">
+    <span style="font-size: 13px; color: #4E5969;">
       Select items above to perform batch actions
     </span>
     <button

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

@@ -22,6 +22,8 @@ interface Props {
     };
     /** Pin actions on the right; this takes precedence over stickyColumns.right. */
     stickyActions?: boolean;
+    /** Caller class merged with the built-in class list. */
+    class?: string;
 }
 declare const LiteTable: import("svelte").Component<Props, {}, "">;
 type LiteTable = ReturnType<typeof LiteTable>;

package/dist/components/LiteTableSummary.svelte

@@ -13,6 +13,8 @@
     titleColumnKey?: string;
     prefix?: Record<string, string>;
     suffix?: Record<string, string>;
+    /** Caller class merged with the built-in class list. */
+    class?: string;
   }
 
   let {
@@ -23,6 +25,7 @@
     titleColumnKey,
     prefix = {},
     suffix = {},
+    class: className = '',
   }: Props = $props();
 
   const titleKey = $derived(titleColumnKey || (columns[0]?.key ?? ''));
@@ -50,7 +53,7 @@
   }
 </script>
 
-<div class="lite-table-summary-container">
+<div class="lite-table-summary-container {className}">
   <table class="lite-table lite-summary-table">
     <tbody>
       <tr>
@@ -65,7 +68,7 @@
                 {#if prefix[col.key]}{prefix[col.key]}{/if}{calculate(col.key, aggType)}{#if suffix[col.key]}{suffix[col.key]}{/if}
               </span>
             {:else}
-              <span style="color: #94a3b8;">—</span>
+              <span style="color: #86909C;">—</span>
             {/if}
           </td>
         {/each}
@@ -78,8 +81,8 @@
   .lite-table-summary-container {
     width: 100%;
     overflow-x: auto;
-    background: #f8fafc;
-    border-top: 2px solid #cbd5e1;
+    background: #F7F8FA;
+    border-top: 2px solid #E5E6EB;
   }
   .lite-summary-table {
     width: 100%;
@@ -88,6 +91,6 @@
   .lite-summary-table td {
     padding: 8px 12px;
     font-size: 12px;
-    color: #1e293b;
+    color: #1D2129;
   }
 </style>

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

@@ -11,6 +11,8 @@ interface Props {
     titleColumnKey?: string;
     prefix?: Record<string, string>;
     suffix?: Record<string, string>;
+    /** Caller class merged with the built-in class list. */
+    class?: string;
 }
 declare const LiteTableSummary: import("svelte").Component<Props, {}, "">;
 type LiteTableSummary = ReturnType<typeof LiteTableSummary>;

package/dist/components/LiteTabs.svelte

@@ -1,36 +1,53 @@
 <script lang="ts">
   /**
-   * LiteTabs — SSR-compatible tab navigation.
-   * Uses simple <a> tags and flexbox. No JS required.
+   * LiteTabs — SSR-compatible tab/segmented navigation.
+   *
+   * Selection is URL driven: each option is a link and the active one carries
+   * `aria-current="page"`. Disabled options render as plain text so they cannot be
+   * focused or navigated to, matching the reference `disabled` contract without
+   * needing client state.
    */
 
   interface TabItem {
     label: string;
     value: string;
     href: string;
+    disabled?: boolean;
   }
 
   interface Props {
     items: TabItem[];
     activeValue: string;
+    /** Accessible name for the tab list. */
+    label?: string;
+    /** Caller class merged with the built-in class list. */
+    class?: string;
   }
 
-  let { items, activeValue }: Props = $props();
+  let { items, activeValue, label, class: className = '' }: Props = $props();
 </script>
 
-<div class="lite-tabs">
+<nav class={`lite-tabs ${className}`.trim()} aria-label={label}>
   {#each items as item, _i (_i)}
-    <a href={item.href} class="lite-tab {activeValue === item.value ? 'active' : ''}">
-      {item.label}
-    </a>
+    {#if item.disabled}
+      <span class="lite-tab" aria-disabled="true">{item.label}</span>
+    {:else}
+      <a
+        href={item.href}
+        class="lite-tab {activeValue === item.value ? 'active' : ''}"
+        aria-current={activeValue === item.value ? 'page' : undefined}
+      >
+        {item.label}
+      </a>
+    {/if}
   {/each}
-</div>
+</nav>
 
 <style>
   .lite-tabs {
     display: flex;
     flex-wrap: wrap;
-    border-bottom: 2px solid #e2e8f0;
+    border-bottom: 2px solid #E5E6EB;
     margin-bottom: 24px;
     padding-bottom: 0;
   }
@@ -39,19 +56,12 @@
     margin-right: 4px;
     font-size: 14px;
     font-weight: 500;
-    color: #64748b;
+    color: #4E5969;
     border-bottom: 2px solid transparent;
     margin-bottom: -2px;
     text-decoration: none;
-    transition: color 0.15s ease, border-color 0.15s ease;
-  }
-  .lite-tab:hover {
-    color: #0f172a;
-    text-decoration: none;
-  }
-  .lite-tab.active {
-    color: #4f46e5;
-    border-bottom-color: #4f46e5;
-    font-weight: 600;
   }
+  .lite-tab:hover { color: #165DFF; text-decoration: none; }
+  .lite-tab.active { color: #165DFF; border-bottom-color: #165DFF; }
+  .lite-tab[aria-disabled='true'] { color: #C9CDD4; cursor: not-allowed; }
 </style>

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

@@ -1,15 +1,24 @@
 /**
- * LiteTabs — SSR-compatible tab navigation.
- * Uses simple <a> tags and flexbox. No JS required.
+ * LiteTabs — SSR-compatible tab/segmented navigation.
+ *
+ * Selection is URL driven: each option is a link and the active one carries
+ * `aria-current="page"`. Disabled options render as plain text so they cannot be
+ * focused or navigated to, matching the reference `disabled` contract without
+ * needing client state.
  */
 interface TabItem {
     label: string;
     value: string;
     href: string;
+    disabled?: boolean;
 }
 interface Props {
     items: TabItem[];
     activeValue: string;
+    /** Accessible name for the tab list. */
+    label?: string;
+    /** Caller class merged with the built-in class list. */
+    class?: string;
 }
 declare const LiteTabs: import("svelte").Component<Props, {}, "">;
 type LiteTabs = ReturnType<typeof LiteTabs>;

package/dist/components/LiteTag.svelte

@@ -0,0 +1,31 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import LiteBadge, { type LiteBadgeVariant } from './LiteBadge.svelte';
+
+  interface Props {
+    variant?: LiteBadgeVariant;
+    label?: string;
+    closable?: boolean;
+    removeHref?: string;
+    removeLabel?: string;
+    children?: Snippet;
+  }
+
+  let {
+    variant = 'secondary',
+    label = '',
+    closable = false,
+    removeHref,
+    removeLabel = 'Remove tag',
+    children,
+  }: Props = $props();
+</script>
+
+<span class="lite-tag">
+  <LiteBadge {variant}>
+    {#if children}{@render children()}{:else}{label}{/if}
+  </LiteBadge>
+  {#if closable && removeHref}
+    <a class="lite-tag-close" href={removeHref} aria-label={removeLabel}>×</a>
+  {/if}
+</span>

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

@@ -0,0 +1,13 @@
+import type { Snippet } from 'svelte';
+import { type LiteBadgeVariant } from './LiteBadge.svelte';
+interface Props {
+    variant?: LiteBadgeVariant;
+    label?: string;
+    closable?: boolean;
+    removeHref?: string;
+    removeLabel?: string;
+    children?: Snippet;
+}
+declare const LiteTag: import("svelte").Component<Props, {}, "">;
+type LiteTag = ReturnType<typeof LiteTag>;
+export default LiteTag;

package/dist/components/LiteTimeline.svelte

@@ -0,0 +1,48 @@
+<script lang="ts">
+  interface TimelineEntry {
+    id: string;
+    title: string;
+    description?: string;
+    time?: string;
+    tone?: 'neutral' | 'info' | 'success' | 'warning' | 'danger';
+    active?: boolean;
+  }
+
+  interface Props {
+    items: TimelineEntry[];
+    label?: string;
+    /** Caller class merged with the built-in class list. */
+    class?: string;
+  }
+
+  let { items, label = 'Timeline', class: className = '' }: Props = $props();
+</script>
+
+<ol class="lite-timeline {className}" aria-label={label}>
+  {#each items as item (item.id)}
+    <li class="lite-timeline__item" data-tone={item.tone ?? 'neutral'} data-active={item.active || undefined}>
+      <span class="lite-timeline__marker" aria-hidden="true"></span>
+      <div>
+        {#if item.time}<time>{item.time}</time>{/if}
+        <p>{item.title}</p>
+        {#if item.description}<small>{item.description}</small>{/if}
+      </div>
+    </li>
+  {/each}
+</ol>
+
+<style>
+  .lite-timeline { display: block; margin: 0; padding: 0; list-style: none; }
+  .lite-timeline__item { position: relative; padding-left: 24px; }
+  .lite-timeline__item + .lite-timeline__item { margin-top: 16px; }
+  .lite-timeline__item:not(:last-child)::before { position: absolute; top: 16px; bottom: -16px; left: 5px; width: 1px; background: #E5E6EB; content: ''; }
+  .lite-timeline__marker { position: absolute; top: 5px; left: 0; width: 11px; height: 11px; border: 2px solid #C9CDD4; border-radius: 999px; background: #fff; }
+  .lite-timeline__item[data-tone='info'] .lite-timeline__marker { border-color: #165DFF; }
+  .lite-timeline__item[data-tone='success'] .lite-timeline__marker { border-color: #00B42A; }
+  .lite-timeline__item[data-tone='warning'] .lite-timeline__marker { border-color: #FF7D00; }
+  .lite-timeline__item[data-tone='danger'] .lite-timeline__marker { border-color: #F53F3F; }
+  .lite-timeline__item[data-active] .lite-timeline__marker { background: #165DFF; border-color: #165DFF; }
+  .lite-timeline__item time { color: #86909C; font-size: 12px; }
+  .lite-timeline__item p { margin: 0; color: #1D2129; font-size: 14px; font-weight: 600; }
+  .lite-timeline__item small { display: block; margin-top: 4px; color: #4E5969; font-size: 13px; line-height: 1.6; }
+</style>

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

@@ -0,0 +1,17 @@
+interface TimelineEntry {
+    id: string;
+    title: string;
+    description?: string;
+    time?: string;
+    tone?: 'neutral' | 'info' | 'success' | 'warning' | 'danger';
+    active?: boolean;
+}
+interface Props {
+    items: TimelineEntry[];
+    label?: string;
+    /** Caller class merged with the built-in class list. */
+    class?: string;
+}
+declare const LiteTimeline: import("svelte").Component<Props, {}, "">;
+type LiteTimeline = ReturnType<typeof LiteTimeline>;
+export default LiteTimeline;