@svadmin/lite 0.17.0 → 0.22.1

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}

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>

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,30 +1,47 @@
 <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 {
@@ -43,15 +60,8 @@
     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: #1D2129;
-    text-decoration: none;
-  }
-  .lite-tab.active {
-    color: #165DFF;
-    border-bottom-color: #165DFF;
-    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;

package/dist/components/LiteTour.svelte

@@ -0,0 +1,54 @@
+<script lang="ts">
+  interface TourStep {
+    title: string;
+    description?: string;
+    href?: string;
+  }
+
+  interface Props {
+    steps: TourStep[];
+    title?: string;
+    current?: number;
+    dismissHref?: string;
+    label?: string;
+  }
+
+  let { steps, title = 'Guided tour', current = 0, dismissHref, label = 'Guided tour' }: Props = $props();
+</script>
+
+<section class="lite-tour lite-card" aria-label={label}>
+  <header>
+    <h2>{title}</h2>
+    {#if dismissHref}<a href={dismissHref} aria-label="Dismiss tour">×</a>{/if}
+  </header>
+  <ol>
+    {#each steps as step, index (step.title)}
+      <li data-active={index === current || undefined}>
+        <span>{index + 1}</span>
+        <div>
+          <strong>{step.title}</strong>
+          {#if step.description}<p>{step.description}</p>{/if}
+          {#if step.href}<a href={step.href}>View step</a>{/if}
+        </div>
+      </li>
+    {/each}
+  </ol>
+</section>
+
+<style>
+  .lite-tour { display: block; }
+  .lite-tour header { display: flex; align-items: baseline; justify-content: space-between; }
+  .lite-tour h2 { margin: 0; color: #1D2129; font-size: 14px; }
+  .lite-tour header a { color: #4E5969; font-size: 20px; line-height: 1; text-decoration: none; }
+  .lite-tour ol { display: block; margin: 0; padding: 0; list-style: none; }
+  .lite-tour li { display: flex; padding: 8px; border: 1px solid #F2F3F5; border-radius: 6px; }
+  .lite-tour li[data-active] { border-color: #165DFF; background: #F7F8FA; }
+  .lite-tour li > span { display: inline-grid; flex: 0 0 24px; place-items: center; width: 24px; height: 24px; border-radius: 999px; background: #E8F3FF; color: #165DFF; font-size: 12px; font-weight: 600; }
+  .lite-tour li strong { color: #1D2129; font-size: 13px; }
+  .lite-tour li p { margin: 2px 0 0; color: #4E5969; font-size: 12px; line-height: 1.5; }
+  .lite-tour li a { color: #165DFF; font-size: 12px; }
+
+  .lite-tour > * + * { margin-top: 12px; }
+  .lite-tour li + li { margin-top: 8px; }
+  .lite-tour li > span { margin-right: 10px; }
+</style>

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

@@ -0,0 +1,15 @@
+interface TourStep {
+    title: string;
+    description?: string;
+    href?: string;
+}
+interface Props {
+    steps: TourStep[];
+    title?: string;
+    current?: number;
+    dismissHref?: string;
+    label?: string;
+}
+declare const LiteTour: import("svelte").Component<Props, {}, "">;
+type LiteTour = ReturnType<typeof LiteTour>;
+export default LiteTour;

package/dist/components/LiteTransfer.svelte

@@ -16,6 +16,8 @@
     disabled?: boolean;
     label?: string;
     description?: string;
+    /** Caller class merged with the built-in class list. */
+    class?: string;
   }
 
   let {
@@ -26,6 +28,7 @@
     disabled = false,
     label,
     description,
+    class: className = ''
   }: Props = $props();
 
   const targetKeySet = $derived(new Set(targetKeys.map(String)));
@@ -33,7 +36,7 @@
   const targetItems = $derived(dataSource.filter((item) => targetKeySet.has(String(item.key))));
 </script>
 
-<div class="lite-transfer-container lite-form-group">
+<div class="lite-transfer-container lite-form-group {className}">
   {#if label}
     <span class="lite-label">{label}</span>
   {/if}

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

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

package/dist/components/LiteTree.svelte

@@ -0,0 +1,48 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+
+  interface TreeNode {
+    id: string;
+    label: string;
+    href?: string;
+    disabled?: boolean;
+    children?: TreeNode[];
+  }
+
+  interface Props {
+    nodes: TreeNode[];
+    label?: string;
+    selected?: string;
+    children?: Snippet<[TreeNode]>;
+  }
+
+  let { nodes, label = 'Tree', selected, children }: Props = $props();
+</script>
+
+{#snippet branch(items: TreeNode[], depth: number)}
+  <ul class="lite-tree__list" role={depth === 0 ? 'tree' : 'group'} aria-label={depth === 0 ? label : undefined}>
+    {#each items as node (node.id)}
+      <li role="treeitem" aria-selected={selected === node.id} aria-disabled={node.disabled || undefined}>
+        {#if node.href && !node.disabled}
+          <a href={node.href} class:active={selected === node.id}>{node.label}</a>
+        {:else}
+          <span class:active={selected === node.id}>{node.label}</span>
+        {/if}
+        {#if node.children?.length}{@render branch(node.children, depth + 1)}{/if}
+        {#if children}{@render children(node)}{/if}
+      </li>
+    {/each}
+  </ul>
+{/snippet}
+
+<nav class="lite-tree" aria-label={label}>
+  {@render branch(nodes, 0)}
+</nav>
+
+<style>
+  .lite-tree__list { margin: 0; padding-left: 16px; list-style: none; }
+  .lite-tree > .lite-tree__list { padding-left: 0; }
+  .lite-tree__list li { padding: 2px 0; color: #1D2129; font-size: 13px; }
+  .lite-tree__list a, .lite-tree__list span { display: inline-block; padding: 4px 8px; border-radius: 4px; color: #1D2129; text-decoration: none; }
+  .lite-tree__list a:hover, .lite-tree__list .active { background: #E8F3FF; color: #165DFF; }
+</style>

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

@@ -0,0 +1,17 @@
+import type { Snippet } from 'svelte';
+interface TreeNode {
+    id: string;
+    label: string;
+    href?: string;
+    disabled?: boolean;
+    children?: TreeNode[];
+}
+interface Props {
+    nodes: TreeNode[];
+    label?: string;
+    selected?: string;
+    children?: Snippet<[TreeNode]>;
+}
+declare const LiteTree: import("svelte").Component<Props, {}, "">;
+type LiteTree = ReturnType<typeof LiteTree>;
+export default LiteTree;

package/dist/components/LiteTwoFactorStepper.svelte

@@ -0,0 +1,53 @@
+<script lang="ts">
+  import type { HTMLFormAttributes } from 'svelte/elements';
+  import LiteSteps from './LiteSteps.svelte';
+  import LiteOtpInput from './LiteOtpInput.svelte';
+
+  interface Props {
+    current?: number;
+    /** Step labels; mirrors the reference `steps` prop. */
+    steps?: string[];
+    action: string;
+    method?: HTMLFormAttributes['method'];
+    codeName?: string;
+    submitLabel?: string;
+    title?: string;
+    /** Applied to the step list, matching the reference component. */
+    class?: string;
+  }
+
+  let {
+    current = 1,
+    steps = ['Password verified', 'Enter verification code', 'Access granted'],
+    action,
+    method = 'POST',
+    codeName = 'code',
+    submitLabel = 'Verify',
+    title = 'Two-factor authentication',
+    class: className = '',
+  }: Props = $props();
+</script>
+
+<section class="lite-card lite-two-factor" aria-label={title}>
+  <h2>{title}</h2>
+  <LiteSteps
+    current={current}
+    label="Progress"
+    class={className}
+    items={steps.map((step) => ({ title: step }))}
+  />
+  <form {method} {action} class="lite-two-factor__form">
+    <LiteOtpInput name={codeName} />
+    <button class="lite-btn lite-btn-primary" type="submit">{submitLabel}</button>
+  </form>
+  <p class="lite-muted">Recovery codes can be used once if the authenticator is unavailable.</p>
+</section>
+
+<style>
+  .lite-two-factor { display: block; }
+  .lite-two-factor h2 { margin: 0; color: #1D2129; font-size: 18px; }
+  .lite-two-factor__form { display: block; justify-items: start; }
+
+  .lite-two-factor > * + * { margin-top: 16px; }
+  .lite-two-factor__form > * + * { margin-top: 12px; }
+</style>

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

@@ -0,0 +1,16 @@
+import type { HTMLFormAttributes } from 'svelte/elements';
+interface Props {
+    current?: number;
+    /** Step labels; mirrors the reference `steps` prop. */
+    steps?: string[];
+    action: string;
+    method?: HTMLFormAttributes['method'];
+    codeName?: string;
+    submitLabel?: string;
+    title?: string;
+    /** Applied to the step list, matching the reference component. */
+    class?: string;
+}
+declare const LiteTwoFactorStepper: import("svelte").Component<Props, {}, "">;
+type LiteTwoFactorStepper = ReturnType<typeof LiteTwoFactorStepper>;
+export default LiteTwoFactorStepper;

package/dist/components/LiteVersionDiffViewer.svelte

@@ -5,6 +5,8 @@
     oldTitle?: string;
     newTitle?: string;
     fieldLabels?: Record<string, string>;
+    /** Caller class merged with the built-in class list. */
+    class?: string;
   }
 
   let {
@@ -13,6 +15,7 @@
     oldTitle = 'Previous Version',
     newTitle = 'Current Version',
     fieldLabels = {},
+    class: className = '',
   }: Props = $props();
 
   const allKeys = $derived(
@@ -35,7 +38,7 @@
   }
 </script>
 
-<div class="lite-diff-viewer">
+<div class="lite-diff-viewer {className}">
   <div class="lite-diff-header">
     <strong>Record Comparison</strong>
   </div>

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

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