@svadmin/lite 0.25.7 → 0.26.0

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

@@ -0,0 +1,31 @@
+import type { Snippet } from 'svelte';
+type MetricColumns = 1 | 2 | 3 | 4 | 5 | 6 | 'auto';
+type MetricGap = 'sm' | 'md' | 'lg';
+interface LiteMetricGridItem {
+    id?: string;
+    label: string;
+    value: string | number;
+    description?: string;
+    trend?: 'up' | 'down' | 'neutral';
+    trendValue?: string;
+    icon?: string;
+    href?: string;
+}
+interface Props {
+    items?: LiteMetricGridItem[];
+    cols?: MetricColumns;
+    gap?: MetricGap;
+    title?: string;
+    description?: string;
+    loading?: boolean;
+    skeletonCount?: number;
+    empty?: boolean;
+    emptyMessage?: string;
+    class?: string;
+    actions?: Snippet;
+    children?: Snippet;
+    emptyContent?: Snippet;
+}
+declare const LiteMetricGrid: import("svelte").Component<Props, {}, "">;
+type LiteMetricGrid = ReturnType<typeof LiteMetricGrid>;
+export default LiteMetricGrid;

package/dist/components/LiteMicroAppFrame.svelte

@@ -0,0 +1,57 @@
+<script lang="ts">
+  import type { HTMLIframeAttributes } from 'svelte/elements';
+
+  interface Props {
+    src: string;
+    title?: string;
+    height?: string | number;
+    sandbox?: string;
+    allow?: string;
+    referrerpolicy?: HTMLIframeAttributes['referrerpolicy'];
+    fallbackHref?: string;
+    fallbackLabel?: string;
+    class?: string;
+  }
+
+  let {
+    src,
+    title = 'Embedded application',
+    height = '650px',
+    sandbox = 'allow-scripts allow-forms allow-same-origin',
+    allow,
+    referrerpolicy = 'strict-origin-when-cross-origin',
+    fallbackHref,
+    fallbackLabel = 'Open in a new tab',
+    class: className = '',
+  }: Props = $props();
+
+  const frameHeight = $derived(typeof height === 'number' ? `${height}px` : height);
+</script>
+
+<section class="lite-micro-app-frame lite-card {className}" aria-label={title}>
+  <header>
+    <h2>{title}</h2>
+    {#if fallbackHref}<a href={fallbackHref} target="_blank" rel="noopener noreferrer">{fallbackLabel}</a>{/if}
+  </header>
+
+  <iframe
+    {src}
+    {title}
+    {sandbox}
+    {allow}
+    {referrerpolicy}
+    style={`height:${frameHeight};`}
+    loading="lazy"
+  ></iframe>
+  <p class="lite-micro-app-help">Embedded messaging, theme sync and automatic height are client-side enhancements.</p>
+</section>
+
+<style>
+  .lite-micro-app-frame { padding: 12px; }
+  .lite-micro-app-frame header { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 8px; }
+  .lite-micro-app-frame header a { margin-left: 12px; }
+  .lite-micro-app-frame h2 { margin: 0; color: #1d2129; font-size: 15px; }
+  .lite-micro-app-frame header a { color: #165dff; font-size: 12px; }
+  .lite-micro-app-frame iframe { display: block; width: 100%; border: 1px solid #e5e6eb; border-radius: 4px; background: #fff; }
+  .lite-micro-app-help { margin: 6px 0 0; color: #86909c; font-size: 11px; }
+</style>

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

@@ -0,0 +1,15 @@
+import type { HTMLIframeAttributes } from 'svelte/elements';
+interface Props {
+    src: string;
+    title?: string;
+    height?: string | number;
+    sandbox?: string;
+    allow?: string;
+    referrerpolicy?: HTMLIframeAttributes['referrerpolicy'];
+    fallbackHref?: string;
+    fallbackLabel?: string;
+    class?: string;
+}
+declare const LiteMicroAppFrame: import("svelte").Component<Props, {}, "">;
+type LiteMicroAppFrame = ReturnType<typeof LiteMicroAppFrame>;
+export default LiteMicroAppFrame;

package/dist/components/LiteOrgChart.svelte

@@ -0,0 +1,78 @@
+<script lang="ts">
+  export interface LiteOrgNode {
+    id: string;
+    name: string;
+    title?: string;
+    department?: string;
+    href?: string;
+    children?: LiteOrgNode[];
+  }
+
+  interface Props {
+    data?: LiteOrgNode | LiteOrgNode[];
+    title?: string;
+    emptyText?: string;
+    class?: string;
+  }
+
+  let {
+    data = [],
+    title = 'Organization chart',
+    emptyText = 'No organization data',
+    class: className = '',
+  }: Props = $props();
+
+  interface FlatNode {
+    node: LiteOrgNode;
+    depth: number;
+  }
+
+  function flatten(nodes: LiteOrgNode[], depth = 0, out: FlatNode[] = []): FlatNode[] {
+    for (const node of nodes) {
+      out.push({ node, depth });
+      if (node.children?.length) flatten(node.children, depth + 1, out);
+    }
+    return out;
+  }
+
+  const rows = $derived(flatten(Array.isArray(data) ? data : [data]));
+</script>
+
+<section class="lite-org-chart lite-card {className}" aria-label={title}>
+  <h2>{title}</h2>
+  {#if rows.length === 0}
+    <p class="lite-org-empty">{emptyText}</p>
+  {:else}
+    <table class="lite-table">
+      <thead>
+        <tr>
+          <th>Name</th>
+          <th>Title</th>
+          <th>Department</th>
+        </tr>
+      </thead>
+      <tbody>
+        {#each rows as row (row.node.id)}
+          <tr data-depth={row.depth}>
+            <td>
+              <span class="lite-org-indent" style={`padding-left:${row.depth * 16}px`}>
+                {#if row.depth > 0}<span class="lite-org-branch" aria-hidden="true">└</span>{/if}
+                {#if row.node.href}<a href={row.node.href}>{row.node.name}</a>{:else}{row.node.name}{/if}
+              </span>
+            </td>
+            <td>{row.node.title ?? '—'}</td>
+            <td>{row.node.department ?? '—'}</td>
+          </tr>
+        {/each}
+      </tbody>
+    </table>
+  {/if}
+</section>
+
+<style>
+  .lite-org-chart { padding: 16px; }
+  .lite-org-chart h2 { margin: 0 0 12px; color: #1d2129; font-size: 16px; }
+  .lite-org-empty { margin: 0; padding: 20px; color: #86909c; text-align: center; }
+  .lite-org-indent { display: inline-block; }
+  .lite-org-branch { display: inline-block; margin-right: 4px; color: #86909c; }
+</style>

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

@@ -0,0 +1,17 @@
+export interface LiteOrgNode {
+    id: string;
+    name: string;
+    title?: string;
+    department?: string;
+    href?: string;
+    children?: LiteOrgNode[];
+}
+interface Props {
+    data?: LiteOrgNode | LiteOrgNode[];
+    title?: string;
+    emptyText?: string;
+    class?: string;
+}
+declare const LiteOrgChart: import("svelte").Component<Props, {}, "">;
+type LiteOrgChart = ReturnType<typeof LiteOrgChart>;
+export default LiteOrgChart;

package/dist/components/LitePresenceAvatarGroup.svelte

@@ -1,55 +1,158 @@
 <script lang="ts">
-  interface LitePresenceUser {
+  export interface LitePresenceUser {
     id: string;
     name: string;
-    status?: 'online' | 'idle' | 'editing';
+    avatar?: string;
+    role?: string;
+    status?: 'online' | 'viewing' | 'idle' | 'editing';
   }
 
   interface Props {
     users?: LitePresenceUser[];
     label?: string;
-    /** Caller class merged with the built-in class list. */
+    maxVisible?: number;
+    maxCount?: number;
+    size?: 'sm' | 'md' | 'lg';
+    showStatusDot?: boolean;
     class?: string;
   }
 
   let {
     users = [],
     label = 'Viewing now',
-    class: className = ''
+    maxVisible,
+    maxCount,
+    size = 'md',
+    showStatusDot = true,
+    class: className = '',
   }: Props = $props();
+
+  const limit = $derived(Math.max(0, maxVisible ?? maxCount ?? 4));
+  const visible = $derived(users.slice(0, limit));
+  const hidden = $derived(users.slice(limit));
+
+  function initials(name: string): string {
+    return name
+      .trim()
+      .split(/\s+/)
+      .map((part) => part[0] ?? '')
+      .join('')
+      .slice(0, 2)
+      .toUpperCase() || 'U';
+  }
+
+  function statusLabel(status: LitePresenceUser['status']): string {
+    return status ?? 'online';
+  }
 </script>
 
-<div class="lite-presence-container {className}">
+<div class="lite-presence-container lite-presence-{size} {className}">
   <span class="lite-presence-label">{label}:</span>
-  {#each users as user (user.id)}
-    <span class="lite-presence-badge" title="{user.name} ({user.status ?? 'online'})">
-      👤 {user.name}
+
+  {#each visible as user (user.id)}
+    <span
+      class="lite-presence-badge"
+      title={`${user.name}${user.role ? ` (${user.role})` : ''} · ${statusLabel(user.status)}`}
+      data-presence-user={user.id}
+      data-status={statusLabel(user.status)}
+    >
+      {#if user.avatar}
+        <img src={user.avatar} alt="" class="lite-presence-avatar" />
+      {:else}
+        <span class="lite-presence-initials" aria-hidden="true">{initials(user.name)}</span>
+      {/if}
+      <span class="lite-presence-name">{user.name}</span>
+      {#if showStatusDot && user.status}
+        <span class="lite-presence-dot" aria-hidden="true"></span>
+      {/if}
     </span>
   {/each}
+
+  {#if hidden.length > 0}
+    <span
+      class="lite-presence-overflow"
+      title={hidden.map((user) => user.name).join(', ')}
+      aria-label={`+${hidden.length} more users`}
+    >
+      +{hidden.length}
+    </span>
+  {/if}
+
   {#if users.length === 0}
-    <span style="color: #86909C; font-size: 11px;">No active viewers</span>
+    <span class="lite-presence-empty">No active viewers</span>
   {/if}
 </div>
 
 <style>
   .lite-presence-container {
     display: inline-flex;
+    flex-wrap: wrap;
     align-items: center;
     font-size: 12px;
     margin-bottom: 8px;
   }
   .lite-presence-label {
-    color: #4E5969;
-    margin-right: 6px;
+    color: #4e5969;
+    margin-right: 2px;
     font-weight: 500;
   }
   .lite-presence-badge {
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    padding: 2px 6px 2px 3px;
+    background: #f2f3f5;
+    border: 1px solid #e5e6eb;
+    border-radius: 999px;
+    margin-right: 2px;
+    font-size: 11px;
+    line-height: 1.4;
+  }
+  .lite-presence-avatar,
+  .lite-presence-initials {
     display: inline-block;
-    padding: 2px 6px;
-    background: #F2F3F5;
-    border: 1px solid #E5E6EB;
-    border-radius: 4px;
+    width: 20px;
+    height: 20px;
+    flex: 0 0 20px;
     margin-right: 4px;
+    border-radius: 999px;
+    text-align: center;
+    line-height: 20px;
+    object-fit: cover;
+    background: #e8f3ff;
+    color: #165dff;
+    font-size: 9px;
+    font-weight: 700;
+  }
+  .lite-presence-name { max-width: 100px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+  .lite-presence-dot {
+    margin-left: 4px;
+    width: 6px;
+    height: 6px;
+    border-radius: 999px;
+    background: #00b42a;
+    box-shadow: 0 0 0 1px #fff;
+  }
+  .lite-presence-badge[data-status='idle'] .lite-presence-dot { background: #86909c; }
+  .lite-presence-badge[data-status='editing'] .lite-presence-dot { background: #ff7d00; }
+  .lite-presence-badge[data-status='viewing'] .lite-presence-dot { background: #00b42a; }
+  .lite-presence-overflow {
+    display: inline-block;
+    min-width: 24px;
+    line-height: 24px;
+    text-align: center;
+    height: 24px;
+    padding: 0 5px;
+    border: 1px solid #e5e6eb;
+    border-radius: 999px;
+    background: #fff;
+    color: #4e5969;
     font-size: 11px;
+    font-weight: 600;
   }
+  .lite-presence-empty { color: #86909c; font-size: 11px; }
+  .lite-presence-sm .lite-presence-avatar,
+  .lite-presence-sm .lite-presence-initials { width: 16px; height: 16px; flex-basis: 16px; font-size: 8px; }
+  .lite-presence-lg .lite-presence-avatar,
+  .lite-presence-lg .lite-presence-initials { width: 26px; height: 26px; flex-basis: 26px; font-size: 10px; }
 </style>

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

@@ -1,12 +1,17 @@
-interface LitePresenceUser {
+export interface LitePresenceUser {
     id: string;
     name: string;
-    status?: 'online' | 'idle' | 'editing';
+    avatar?: string;
+    role?: string;
+    status?: 'online' | 'viewing' | 'idle' | 'editing';
 }
 interface Props {
     users?: LitePresenceUser[];
     label?: string;
-    /** Caller class merged with the built-in class list. */
+    maxVisible?: number;
+    maxCount?: number;
+    size?: 'sm' | 'md' | 'lg';
+    showStatusDot?: boolean;
     class?: string;
 }
 declare const LitePresenceAvatarGroup: import("svelte").Component<Props, {}, "">;

package/dist/components/LiteSafeDeleteConfirm.svelte

@@ -0,0 +1,86 @@
+<script lang="ts">
+  export interface LiteDeleteImpact {
+    label: string;
+    count?: number;
+    description?: string;
+  }
+
+  interface Props {
+    title?: string;
+    description?: string;
+    impactItems?: LiteDeleteImpact[];
+    action: string;
+    method?: 'POST' | 'post';
+    confirmLabel?: string;
+    cancelHref?: string;
+    cancelLabel?: string;
+    confirmationText?: string;
+    name?: string;
+    class?: string;
+  }
+
+  let {
+    title = 'Delete this record?',
+    description = 'This action cannot be undone. Review the impact before continuing.',
+    impactItems = [],
+    action,
+    method = 'POST',
+    confirmLabel = 'Delete permanently',
+    cancelHref,
+    cancelLabel = 'Cancel',
+    confirmationText,
+    name = 'confirm',
+    class: className = '',
+  }: Props = $props();
+</script>
+
+<section class="lite-safe-delete lite-card {className}" aria-label={title}>
+  <header>
+    <h2>{title}</h2>
+    <p>{description}</p>
+  </header>
+
+  {#if impactItems.length > 0}
+    <ul class="lite-safe-delete-impact">
+      {#each impactItems as item (item.label)}
+        <li>
+          <strong>{item.label}</strong>
+          {#if typeof item.count === 'number'}<span class="lite-safe-delete-count">{item.count}</span>{/if}
+          {#if item.description}<span class="lite-safe-delete-desc">{item.description}</span>{/if}
+        </li>
+      {/each}
+    </ul>
+  {/if}
+
+  <form method={method} action={action}>
+    {#if confirmationText}
+      <label for="lite-delete-confirmation">
+        Type <strong>{confirmationText}</strong> to confirm
+      </label>
+      <input id="lite-delete-confirmation" name={name} autocomplete="off" required />
+    {/if}
+    <div class="lite-safe-delete-actions">
+      <button type="submit" class="lite-safe-delete-danger">{confirmLabel}</button>
+      {#if cancelHref}<a href={cancelHref}>{cancelLabel}</a>{/if}
+    </div>
+  </form>
+</section>
+
+<style>
+  .lite-safe-delete { padding: 16px; border-color: #ffd8d2; }
+  .lite-safe-delete header h2 { margin: 0; color: #1d2129; font-size: 16px; }
+  .lite-safe-delete header p { margin: 6px 0 12px; color: #4e5969; font-size: 12px; line-height: 1.5; }
+  .lite-safe-delete-impact { margin: 0 0 12px; padding: 0; list-style: none; }
+  .lite-safe-delete-impact li { display: flex; align-items: baseline; padding: 7px 9px; border: 1px solid #ffe4e0; border-radius: 4px; background: #fff7f6; color: #4e5969; font-size: 12px; }
+  .lite-safe-delete-impact li > * + * { margin-left: 6px; }
+  .lite-safe-delete-impact li + li { margin-top: 6px; }
+  .lite-safe-delete-impact strong { color: #1d2129; }
+  .lite-safe-delete-count { padding: 1px 5px; border-radius: 999px; background: #f53f3f; color: #fff; font-size: 11px; }
+  .lite-safe-delete-desc { color: #86909c; }
+  .lite-safe-delete label { display: block; margin-bottom: 5px; color: #4e5969; font-size: 12px; }
+  .lite-safe-delete input { width: 100%; box-sizing: border-box; padding: 7px 9px; border: 1px solid #e5e6eb; border-radius: 4px; font: inherit; font-size: 13px; }
+  .lite-safe-delete-actions { display: flex; align-items: center; margin-top: 12px; }
+  .lite-safe-delete-actions > * + * { margin-left: 12px; }
+  .lite-safe-delete-danger { padding: 7px 12px; border: 0; border-radius: 4px; background: #f53f3f; color: #fff; font-size: 12px; cursor: pointer; }
+  .lite-safe-delete-actions a { color: #4e5969; font-size: 12px; }
+</style>

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

@@ -0,0 +1,21 @@
+export interface LiteDeleteImpact {
+    label: string;
+    count?: number;
+    description?: string;
+}
+interface Props {
+    title?: string;
+    description?: string;
+    impactItems?: LiteDeleteImpact[];
+    action: string;
+    method?: 'POST' | 'post';
+    confirmLabel?: string;
+    cancelHref?: string;
+    cancelLabel?: string;
+    confirmationText?: string;
+    name?: string;
+    class?: string;
+}
+declare const LiteSafeDeleteConfirm: import("svelte").Component<Props, {}, "">;
+type LiteSafeDeleteConfirm = ReturnType<typeof LiteSafeDeleteConfirm>;
+export default LiteSafeDeleteConfirm;

package/dist/components/LiteSignaturePad.svelte

@@ -4,6 +4,7 @@
   interface Props {
     name?: string;
     value?: string;
+    alt?: string;
     label?: string;
     formAction?: string;
     disabled?: boolean;
@@ -13,6 +14,7 @@
   let {
     name = 'signature',
     value = '',
+    alt = 'Signature preview',
     label = 'Electronic Signature',
     formAction = '',
     disabled = false,
@@ -28,7 +30,7 @@
 
   {#if value}
     <div class="sv-lite-sig-preview">
-      <img src={value} alt="Signature Preview" class="sv-lite-sig-img" />
+      <img src={value} alt={alt} class="sv-lite-sig-img" />
     </div>
   {:else}
     <div class="sv-lite-sig-empty">

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

@@ -1,6 +1,7 @@
 interface Props {
     name?: string;
     value?: string;
+    alt?: string;
     label?: string;
     formAction?: string;
     disabled?: boolean;

package/dist/components/LiteTaskCenter.svelte

@@ -0,0 +1,133 @@
+<script lang="ts">
+  export type LiteTaskStatus = 'running' | 'pending' | 'completed' | 'failed' | 'cancelled';
+
+  export interface LiteBackgroundTask {
+    id: string;
+    title: string;
+    status: LiteTaskStatus;
+    progress?: number;
+    processed?: number;
+    total?: number;
+    error?: string;
+    downloadHref?: string;
+    cancelAction?: string;
+    retryAction?: string;
+  }
+
+  interface Props {
+    tasks?: LiteBackgroundTask[];
+    title?: string;
+    emptyText?: string;
+    clearAction?: string;
+    clearLabel?: string;
+    class?: string;
+  }
+
+  let {
+    tasks = [],
+    title = 'Background tasks',
+    emptyText = 'No background tasks',
+    clearAction,
+    clearLabel = 'Clear completed',
+    class: className = '',
+  }: Props = $props();
+
+  const completedCount = $derived(tasks.filter((task) => task.status === 'completed').length);
+
+  function statusLabel(status: LiteTaskStatus): string {
+    switch (status) {
+      case 'running': return 'Running';
+      case 'pending': return 'Pending';
+      case 'completed': return 'Completed';
+      case 'failed': return 'Failed';
+      case 'cancelled': return 'Cancelled';
+    }
+  }
+
+  function boundedProgress(task: LiteBackgroundTask): number {
+    if (typeof task.progress === 'number') return Math.max(0, Math.min(100, task.progress));
+    if (task.total && task.total > 0 && typeof task.processed === 'number') {
+      return Math.max(0, Math.min(100, Math.round((task.processed / task.total) * 100)));
+    }
+    return task.status === 'completed' ? 100 : 0;
+  }
+</script>
+
+<section class="lite-task-center lite-card {className}" aria-label={title}>
+  <header>
+    <div>
+      <h2>{title}</h2>
+      <p>{tasks.length} task{tasks.length === 1 ? '' : 's'}{completedCount ? ` · ${completedCount} completed` : ''}</p>
+    </div>
+    {#if clearAction && completedCount > 0}
+      <form method="POST" action={clearAction}>
+        <button type="submit" class="lite-task-secondary">{clearLabel}</button>
+      </form>
+    {/if}
+  </header>
+
+  {#if tasks.length === 0}
+    <p class="lite-task-empty" role="status">{emptyText}</p>
+  {:else}
+    <table class="lite-table">
+      <thead>
+        <tr>
+          <th>Task</th>
+          <th>Status</th>
+          <th>Progress</th>
+          <th>Actions</th>
+        </tr>
+      </thead>
+      <tbody>
+        {#each tasks as task (task.id)}
+          <tr data-task-id={task.id} data-status={task.status}>
+            <td>
+              <strong>{task.title}</strong>
+              {#if task.error}<span class="lite-task-error">{task.error}</span>{/if}
+            </td>
+            <td><span class="lite-task-status" data-status={task.status}>{statusLabel(task.status)}</span></td>
+            <td>
+              <progress max="100" value={boundedProgress(task)} aria-label={`${task.title} progress`}></progress>
+              <span class="lite-task-progress-text">
+                {boundedProgress(task)}%{typeof task.processed === 'number' && typeof task.total === 'number'
+                  ? ` · ${task.processed} / ${task.total}`
+                  : ''}
+              </span>
+            </td>
+            <td class="lite-task-actions">
+              {#if task.downloadHref}<a href={task.downloadHref}>Download</a>{/if}
+              {#if task.retryAction}
+                <form method="POST" action={task.retryAction}><button type="submit" class="lite-task-link">Retry</button></form>
+              {/if}
+              {#if task.cancelAction && (task.status === 'running' || task.status === 'pending')}
+                <form method="POST" action={task.cancelAction}><button type="submit" class="lite-task-link">Cancel</button></form>
+              {/if}
+            </td>
+          </tr>
+        {/each}
+      </tbody>
+    </table>
+  {/if}
+</section>
+
+<style>
+  .lite-task-center { padding: 16px; }
+  .lite-task-center header { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 12px; }
+  .lite-task-center header > form { margin-left: 12px; }
+  .lite-task-center header h2 { margin: 0; color: #1d2129; font-size: 16px; }
+  .lite-task-center header p { margin: 4px 0 0; color: #4e5969; font-size: 12px; }
+  .lite-task-empty { margin: 0; padding: 20px; color: #86909c; text-align: center; }
+  .lite-task-error { display: block; margin-top: 3px; color: #f53f3f; font-size: 11px; }
+  .lite-task-status { display: inline-block; padding: 2px 6px; border-radius: 999px; background: #f2f3f5; color: #4e5969; font-size: 11px; }
+  .lite-task-status[data-status='running'] { background: #e8f3ff; color: #165dff; }
+  .lite-task-status[data-status='pending'] { background: #fff7e8; color: #d25f00; }
+  .lite-task-status[data-status='completed'] { background: #e8ffea; color: #00b42a; }
+  .lite-task-status[data-status='failed'] { background: #ffece8; color: #f53f3f; }
+  .lite-task-status[data-status='cancelled'] { background: #f2f3f5; color: #86909c; }
+  .lite-task-center progress { width: 100%; height: 6px; }
+  .lite-task-progress-text { display: block; margin-top: 3px; color: #86909c; font-size: 11px; }
+  .lite-task-actions { white-space: nowrap; }
+  .lite-task-actions form { display: inline; }
+  .lite-task-link { padding: 0; border: 0; background: none; color: #165dff; font: inherit; font-size: 12px; cursor: pointer; }
+  .lite-task-secondary { padding: 5px 9px; border: 1px solid #e5e6eb; border-radius: 4px; background: #fff; color: #4e5969; font-size: 11px; cursor: pointer; }
+</style>