@svadmin/lite 0.16.11 → 0.22.0

package/dist/components/fields/LiteTagField.svelte

@@ -6,15 +6,17 @@
     value?: unknown;
     error?: string[];
     mode?: 'show' | 'edit' | 'create';
+    /** Caller class merged with the built-in class list. */
+    class?: string;
   }
 
-  let { field, value, error = [], mode = 'show' }: Props = $props();
+  let { field, value, error = [], mode = 'show', class: className = '' }: Props = $props();
   let hasError = $derived(error.length > 0);
   const tags = $derived(Array.isArray(value) ? value.map(String) : []);
 </script>
 
 {#if mode === 'show'}
-  <div class="lite-inline-xs lite-flex-wrap">
+  <div class="lite-inline-xs lite-flex-wrap {className}">
     {#each tags as tag, _i (_i)}
       <span class="lite-badge">{tag}</span>
     {:else}
@@ -22,19 +24,33 @@
     {/each}
   </div>
 {:else}
-  <div>
-    <!-- For SSR without JS, we just accept a comma-separated string -->
-    <input
-      type="text"
-      name={field.key}
-      id={field.key}
-      value={tags.join(', ')}
-      class="lite-input {hasError ? 'lite-input-error' : ''}"
-      placeholder="Comma separated tags (e.g. admin, user, internal)"
-    />
-    <span style="font-size: 11px; color: #6b7280; display: block; margin-top: 4px;">
-      Separate tags with commas.
-    </span>
+  <div class="lite-tags-input {className}">
+    <!-- SSR 无脚本：每个标签一个同名字段，服务端按 getAll 解析为数组。 -->
+    {#each tags as tag, index (index)}
+      <label class="lite-tags-input__row">
+        <span class="lite-visually-hidden">{field.label ?? 'Tag'} {index + 1}</span>
+        <input
+          type="text"
+          name={field.key}
+          value={tag}
+          class="lite-input{hasError ? ' lite-input-error' : ''}"
+          aria-label={`${field.label ?? 'Tag'} ${index + 1}`}
+          placeholder="Remove this tag by clearing the field"
+        />
+      </label>
+    {/each}
+    <label class="lite-tags-input__row">
+      <span class="lite-visually-hidden">{field.label ?? 'Tag'} (new)</span>
+      <input
+        type="text"
+        name={field.key}
+        value=""
+        class="lite-input{hasError ? ' lite-input-error' : ''}"
+        aria-label={`${field.label ?? 'Tag'} (new)`}
+        placeholder="Add a tag"
+      />
+    </label>
+    <span class="lite-tags-input__hint">One tag per field. Leave a field blank to drop it.</span>
     {#if hasError}
       {#each error as err, _i (_i)}
         <div class="lite-error-text">{err}</div>
@@ -42,3 +58,10 @@
     {/if}
   </div>
 {/if}
+
+<style>
+  .lite-tags-input { display: block; }
+  .lite-tags-input__row { display: block; margin-bottom: 6px; }
+  .lite-tags-input__hint { display: block; margin-top: 4px; color: #6B7280; font-size: 11px; }
+  .lite-visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
+</style>

package/dist/components/fields/LiteTagField.svelte.d.ts

@@ -4,6 +4,8 @@ interface Props {
     value?: unknown;
     error?: string[];
     mode?: 'show' | 'edit' | 'create';
+    /** Caller class merged with the built-in class list. */
+    class?: string;
 }
 declare const LiteTagField: import("svelte").Component<Props, {}, "">;
 type LiteTagField = ReturnType<typeof LiteTagField>;

package/dist/components/fields/LiteTextField.svelte

@@ -6,21 +6,42 @@
     value?: unknown;
     error?: string[];
     mode?: 'show' | 'edit' | 'create';
+    /** Caller class merged with the built-in class list. */
+    class?: string;
   }
 
-  let { field, value, error = [], mode = 'show' }: Props = $props();
+  let { field, value, error = [], mode = 'show', class: className = '' }: Props = $props();
   let hasError = $derived(error.length > 0);
+
+  /**
+   * Native input type per value domain. Time, datetime, color, email, url and
+   * phone fields must not degrade to a free-text box.
+   */
+  const nativeType: Record<string, string> = {
+    time: 'time',
+    datetime: 'datetime-local',
+    color: 'color',
+    email: 'email',
+    url: 'url',
+    phone: 'tel',
+  };
+  const hexColour = $derived(typeof value === 'string' && /^#[0-9a-f]{6}$/iu.test(value) ? value : '#000000');
+  const colorNeedsTextFallback = $derived(field.type === 'color' && value != null && String(value) !== '' && !/^#[0-9a-f]{6}$/iu.test(String(value)));
+  const inputType = $derived(
+    field.type === 'color' && colorNeedsTextFallback ? 'text' : nativeType[field.type] ?? 'text',
+  );
+  const inputValue = $derived(inputType === 'color' ? hexColour : String(value ?? ''));
 </script>
 
 {#if mode === 'show'}
-  <span>{value == null ? '—' : String(value)}</span>
+  <span class="lite-field-value {className}">{value == null ? '—' : String(value)}</span>
 {:else}
-  <div>
+  <div class="lite-field-edit {className}">
     <input
-      type="text"
+      type={inputType}
       name={field.key}
       id={field.key}
-      value={String(value ?? '')}
+      value={inputValue}
       class="lite-input {hasError ? 'lite-input-error' : ''}"
       placeholder={field.label}
       {...field.required ? { required: true } : {}}

package/dist/components/fields/LiteTextField.svelte.d.ts

@@ -4,6 +4,8 @@ interface Props {
     value?: unknown;
     error?: string[];
     mode?: 'show' | 'edit' | 'create';
+    /** Caller class merged with the built-in class list. */
+    class?: string;
 }
 declare const LiteTextField: import("svelte").Component<Props, {}, "">;
 type LiteTextField = ReturnType<typeof LiteTextField>;

package/dist/components/fields/LiteTreeSelect.svelte

@@ -23,6 +23,8 @@
     required?: boolean;
     error?: string[];
     mode?: 'show' | 'edit' | 'create';
+    /** Caller class merged with the built-in class list. */
+    class?: string;
   }
 
   let {
@@ -37,6 +39,7 @@
     required = field?.required ?? false,
     error = [],
     mode = 'show',
+    class: className = ''
   }: Props = $props();
 
   const hasError = $derived(error.length > 0);
@@ -87,9 +90,9 @@
 </script>
 
 {#if mode === 'show'}
-  <span class="lite-badge">{formatDisplay(value)}</span>
+  <span class="lite-badge {className}">{formatDisplay(value)}</span>
 {:else}
-  <div class="lite-form-group">
+  <div class="lite-form-group {className}">
     {#if label}
       <label class="lite-label" for={name}>
         {label}

package/dist/components/fields/LiteTreeSelect.svelte.d.ts

@@ -17,6 +17,8 @@ interface Props {
     required?: boolean;
     error?: string[];
     mode?: 'show' | 'edit' | 'create';
+    /** Caller class merged with the built-in class list. */
+    class?: string;
 }
 declare const LiteTreeSelect: import("svelte").Component<Props, {}, "">;
 type LiteTreeSelect = ReturnType<typeof LiteTreeSelect>;

package/dist/components/fields/LiteUrlField.svelte

@@ -7,9 +7,11 @@
     value?: unknown;
     error?: string[];
     mode?: 'show' | 'edit' | 'create';
+    /** Caller class merged with the built-in class list. */
+    class?: string;
   }
 
-  let { field, value, error = [], mode = 'show' }: Props = $props();
+  let { field, value, error = [], mode = 'show', class: className = '' }: Props = $props();
   let hasError = $derived(error.length > 0);
   let displayValue = $derived(toSafeText(value));
   let safeHref = $derived(toSafeHref(value));
@@ -17,7 +19,7 @@
 </script>
 
 {#if mode === 'show'}
-  <span>
+  <span class="lite-field-value {className}">
     {#if displayValue}
       {#if safeHref}
         <a href={safeHref} target="_blank" rel="noopener noreferrer">{displayValue}</a>
@@ -29,7 +31,7 @@
     {/if}
   </span>
 {:else}
-  <div>
+  <div class="lite-field-edit {className}">
     <input
       type="url"
       name={field.key}

package/dist/components/fields/LiteUrlField.svelte.d.ts

@@ -4,6 +4,8 @@ interface Props {
     value?: unknown;
     error?: string[];
     mode?: 'show' | 'edit' | 'create';
+    /** Caller class merged with the built-in class list. */
+    class?: string;
 }
 declare const LiteUrlField: import("svelte").Component<Props, {}, "">;
 type LiteUrlField = ReturnType<typeof LiteUrlField>;

package/dist/components/layout/LiteAuthenticated.svelte

@@ -16,8 +16,8 @@
     {@render children()}
   {/if}
 {:else}
-  <div style="padding: 40px; text-align: center; color: #475569;">
+  <div style="padding: 40px; text-align: center; color: #4E5969;">
     <h2>Authentication Required</h2>
-    <p>Please <a href={loginUrl} style="color: #2563eb;">login here</a> to access this page.</p>
+    <p>Please <a href={loginUrl} style="color: #165DFF;">login here</a> to access this page.</p>
   </div>
 {/if}

package/dist/components/layout/LiteCanAccess.svelte

@@ -19,7 +19,7 @@
   {#if fallback}
     {@render fallback()}
   {:else}
-    <div style="padding: 24px; background: #fff1f2; color: #be123c; border-radius: 6px; border: 1px solid #fecdd3;">
+    <div style="padding: 24px; background: #FFECE8; color: #be123c; border-radius: 6px; border: 1px solid #fecdd3;">
       <h3>Access Denied</h3>
       <p>You do not have permission to view this content.</p>
     </div>

package/dist/components/layout/LiteErrorComponent.svelte

@@ -19,16 +19,16 @@
 
 <div style="min-height: 50vh; display: flex; align-items: center; justify-content: center; padding: 20px;">
   <div class="lite-card" style="max-width: 480px; width: 100%; text-align: center; padding: 40px;">
-    <AlertTriangle style="width: 48px; height: 48px; color: #ef4444; margin: 0 auto 16px;" />
+    <AlertTriangle style="width: 48px; height: 48px; color: #F53F3F; margin: 0 auto 16px;" />
     
-    <h1 style="font-size: 24px; font-weight: 600; color: #0f172a; margin: 0 0 8px;">
+    <h1 style="font-size: 24px; font-weight: 600; color: #1D2129; margin: 0 0 8px;">
       {#if code}
-        <span style="color: #ef4444; margin-right: 8px;">{code}</span>
+        <span style="color: #F53F3F; margin-right: 8px;">{code}</span>
       {/if}
       {title}
     </h1>
     
-    <p style="color: #64748b; font-size: 15px; margin: 0 0 24px; line-height: 1.5;">{message}</p>
+    <p style="color: #4E5969; font-size: 15px; margin: 0 0 24px; line-height: 1.5;">{message}</p>
     
     <a href={homeUrl} class="lite-btn lite-btn-primary" style="display: inline-block;">
       {t('common.returnHome') || 'Return to Home'}

package/dist/components/layout/LiteHeader.svelte

@@ -9,8 +9,8 @@
   let { title = '', children }: Props = $props();
 </script>
 
-<header class="lite-header" style="padding: 16px 24px; background: white; border-bottom: 1px solid #e2e8f0; display: flex; justify-content: space-between; align-items: center;">
-  <h2 style="margin: 0; font-size: 18px; font-weight: 600; color: #0f172a;">{title}</h2>
+<header class="lite-header" style="padding: 16px 24px; background: white; border-bottom: 1px solid #E5E6EB; display: flex; justify-content: space-between; align-items: center;">
+  <h2 style="margin: 0; font-size: 18px; font-weight: 600; color: #1D2129;">{title}</h2>
   <div class="lite-inline-lg" style="align-items: center;">
     {#if children}
       {@render children()}

package/dist/components/layout/LiteSidebar.svelte

@@ -11,6 +11,8 @@
     basePath?: string;
     menu?: MenuItem[];
     canAccess?: (resource: string, action: string) => boolean;
+    /** Caller class merged with the built-in class list. */
+    class?: string;
   }
 
   let {
@@ -21,6 +23,7 @@
     basePath = '/lite',
     menu,
     canAccess,
+    class: className = ''
   }: Props = $props();
 
   const menuResources = $derived(filterVisibleResources(resources, canAccess));
@@ -29,7 +32,7 @@
   const visibleMenu = $derived(menu ? filterVisibleMenu(menu, canAccess) : []);
 </script>
 
-<nav class="lite-sidebar">
+<nav class={`lite-sidebar ${className}`.trim()}>
   <div class="lite-sidebar-brand">{brandName}</div>
   {#if hasCustomMenu}
     <LiteMenuList items={visibleMenu} {basePath} {currentResource} />
@@ -44,10 +47,10 @@
     {/each}
   {/if}
   {#if userName}
-    <div style="position:absolute;bottom:0;left:0;right:0;padding:12px 16px;border-top:1px solid #334155;font-size:12px;color:#94a3b8;">
+    <div style="position:absolute;bottom:0;left:0;right:0;padding:12px 16px;border-top:1px solid #1D2129;font-size:12px;color:#86909C;">
       {userName}
       <form method="POST" action={`${basePath}/login?/logout`} style="display:inline;margin-left:8px;">
-        <button type="submit" class="lite-btn lite-btn-sm" style="color:#94a3b8;border-color:#475569;background:transparent;padding:2px 8px;">Logout</button>
+        <button type="submit" class="lite-btn lite-btn-sm" style="color:#86909C;border-color:#4E5969;background:transparent;padding:2px 8px;">Logout</button>
       </form>
     </div>
   {/if}

package/dist/components/layout/LiteSidebar.svelte.d.ts

@@ -7,6 +7,8 @@ interface Props {
     basePath?: string;
     menu?: MenuItem[];
     canAccess?: (resource: string, action: string) => boolean;
+    /** Caller class merged with the built-in class list. */
+    class?: string;
 }
 declare const LiteSidebar: import("svelte").Component<Props, {}, "">;
 type LiteSidebar = ReturnType<typeof LiteSidebar>;

package/dist/components/pages/LiteCreatePage.svelte

@@ -10,6 +10,8 @@
     errors?: Record<string, string[]>;
     values?: Record<string, unknown>;
     basePath?: string;
+    /** Caller class merged with the built-in class list. */
+    class?: string;
   }
 
   let {
@@ -17,10 +19,11 @@
     errors = {},
     values = {},
     basePath = "/lite",
+    class: className = '',
   }: Props = $props();
 </script>
 
-<div class="lite-page">
+<div class="lite-page {className}">
   <LiteBreadcrumbs
     items={[
       { label: t("common.dashboard") || "Dashboard", href: basePath },

package/dist/components/pages/LiteCreatePage.svelte.d.ts

@@ -4,6 +4,8 @@ interface Props {
     errors?: Record<string, string[]>;
     values?: Record<string, unknown>;
     basePath?: string;
+    /** Caller class merged with the built-in class list. */
+    class?: string;
 }
 declare const LiteCreatePage: import("svelte").Component<Props, {}, "">;
 type LiteCreatePage = ReturnType<typeof LiteCreatePage>;

package/dist/components/pages/LiteEditPage.svelte

@@ -14,6 +14,8 @@
     basePath?: string;
     canDelete?: boolean;
     canShow?: boolean;
+    /** Caller class merged with the built-in class list. */
+    class?: string;
   }
 
   let {
@@ -23,6 +25,7 @@
     basePath = "/lite",
     canDelete,
     canShow,
+    class: className = '',
   }: Props = $props();
 
   let pk = $derived(resource.primaryKey ?? "id");
@@ -31,7 +34,7 @@
   const showView = $derived(canShow ?? resource.canShow !== false);
 </script>
 
-<div class="lite-page">
+<div class="lite-page {className}">
   <LiteBreadcrumbs
     items={[
       { label: t("common.dashboard") || "Dashboard", href: basePath },

package/dist/components/pages/LiteEditPage.svelte.d.ts

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

package/dist/components/pages/LiteForgotPasswordPage.svelte

@@ -18,11 +18,11 @@
   }: Props = $props();
 </script>
 
-<div style="min-height: 100vh; display: flex; align-items: center; justify-content: center; background: #f8fafc; padding: 20px;">
+<div style="min-height: 100vh; display: flex; align-items: center; justify-content: center; background: #F7F8FA; padding: 20px;">
   <div class="lite-card" style="width: 100%; max-width: 400px; padding: 32px;">
     <div style="text-align: center; margin-bottom: 24px;">
-      <h1 style="font-size: 24px; font-weight: 600; color: #0f172a; margin: 0 0 8px;">{title}</h1>
-      <p style="font-size: 14px; color: #64748b; margin: 0;">{description}</p>
+      <h1 style="font-size: 24px; font-weight: 600; color: #1D2129; margin: 0 0 8px;">{title}</h1>
+      <p style="font-size: 14px; color: #4E5969; margin: 0;">{description}</p>
     </div>
 
     <form method="POST" {action} class="lite-stack-lg">
@@ -32,7 +32,7 @@
       </div>
 
       {#if errors.length > 0}
-        <div style="padding: 12px; background: #fef2f2; border-radius: 6px; color: #ef4444; font-size: 13px;">
+        <div style="padding: 12px; background: #FFECE8; border-radius: 6px; color: #F53F3F; font-size: 13px;">
           <ul style="margin: 0; padding-left: 20px;">
             {#each errors as err, _i (_i)}
               <li>{err}</li>
@@ -42,7 +42,7 @@
       {/if}
 
       {#if successMessage}
-        <div style="padding: 12px; background: #ecfdf5; border-radius: 6px; color: #10b981; font-size: 13px;">
+        <div style="padding: 12px; background: #E8FFEA; border-radius: 6px; color: #00B42A; font-size: 13px;">
           {successMessage}
         </div>
       {/if}
@@ -51,8 +51,8 @@
         Send Reset Link
       </button>
 
-      <div style="text-align: center; font-size: 13px; color: #64748b; margin-top: 8px;">
-        Remember your password? <a href={loginUrl} style="color: #2563eb; text-decoration: none;">Back to Login</a>
+      <div style="text-align: center; font-size: 13px; color: #4E5969; margin-top: 8px;">
+        Remember your password? <a href={loginUrl} style="color: #165DFF; text-decoration: none;">Back to Login</a>
       </div>
     </form>
   </div>

package/dist/components/pages/LiteListPage.svelte

@@ -24,6 +24,8 @@
     canEdit?: boolean;
     canDelete?: boolean;
     enableBatch?: boolean;
+    /** Caller class merged with the built-in class list. */
+    class?: string;
   }
 
   let {
@@ -41,6 +43,7 @@
     canEdit,
     canDelete,
     enableBatch = true,
+    class: className = '',
   }: Props = $props();
 
   const showCreate = $derived(canCreate ?? resource.canCreate !== false);
@@ -59,7 +62,7 @@
   );
 </script>
 
-<div class="lite-page">
+<div class="lite-page {className}">
   <LiteBreadcrumbs
     items={[
       { label: t("common.dashboard") || "Dashboard", href: basePath },
@@ -78,7 +81,7 @@
   </div>
 
   <div class="lite-card" style="margin-bottom: 20px;">
-    <div style="padding: 16px; border-bottom: 1px solid #e2e8f0; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap;">
+    <div style="padding: 16px; border-bottom: 1px solid #E5E6EB; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap;">
       <form method="GET" class="lite-filter-bar" style="margin: 0;">
         <input
           type="text"
@@ -127,7 +130,7 @@
         {/if}
       </form>
 
-      <span style="font-size: 13px; color: #64748b;">
+      <span style="font-size: 13px; color: #4E5969;">
         {t("common.total") || "Total"}: <strong>{total}</strong>
       </span>
     </div>

package/dist/components/pages/LiteListPage.svelte.d.ts

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

package/dist/components/pages/LiteProfilePage.svelte

@@ -36,7 +36,7 @@
       <!-- Password update fields can be added here or handled in a separate form -->
 
       {#if errors.length > 0}
-        <div style="padding: 12px; background: #fef2f2; border-radius: 6px; color: #ef4444; font-size: 13px;">
+        <div style="padding: 12px; background: #FFECE8; border-radius: 6px; color: #F53F3F; font-size: 13px;">
           <ul style="margin: 0; padding-left: 20px;">
             {#each errors as err, _i (_i)}
               <li>{err}</li>
@@ -46,7 +46,7 @@
       {/if}
 
       {#if successMessage}
-        <div style="padding: 12px; background: #ecfdf5; border-radius: 6px; color: #10b981; font-size: 13px;">
+        <div style="padding: 12px; background: #E8FFEA; border-radius: 6px; color: #00B42A; font-size: 13px;">
           {successMessage}
         </div>
       {/if}

package/dist/components/pages/LiteRegisterPage.svelte

@@ -17,11 +17,11 @@
   }: Props = $props();
 </script>
 
-<div style="min-height: 100vh; display: flex; align-items: center; justify-content: center; background: #f8fafc; padding: 20px;">
+<div style="min-height: 100vh; display: flex; align-items: center; justify-content: center; background: #F7F8FA; padding: 20px;">
   <div class="lite-card" style="width: 100%; max-width: 400px; padding: 32px;">
     <div style="text-align: center; margin-bottom: 24px;">
-      <h1 style="font-size: 24px; font-weight: 600; color: #0f172a; margin: 0 0 8px;">{title}</h1>
-      <p style="font-size: 14px; color: #64748b; margin: 0;">{description}</p>
+      <h1 style="font-size: 24px; font-weight: 600; color: #1D2129; margin: 0 0 8px;">{title}</h1>
+      <p style="font-size: 14px; color: #4E5969; margin: 0;">{description}</p>
     </div>
 
     <form method="POST" {action} class="lite-stack-lg">
@@ -41,7 +41,7 @@
       </div>
 
       {#if errors.length > 0}
-        <div style="padding: 12px; background: #fef2f2; border-radius: 6px; color: #ef4444; font-size: 13px;">
+        <div style="padding: 12px; background: #FFECE8; border-radius: 6px; color: #F53F3F; font-size: 13px;">
           <ul style="margin: 0; padding-left: 20px;">
             {#each errors as err, _i (_i)}
               <li>{err}</li>
@@ -54,8 +54,8 @@
         Register
       </button>
 
-      <div style="text-align: center; font-size: 13px; color: #64748b; margin-top: 8px;">
-        Already have an account? <a href={loginUrl} style="color: #2563eb; text-decoration: none;">Login</a>
+      <div style="text-align: center; font-size: 13px; color: #4E5969; margin-top: 8px;">
+        Already have an account? <a href={loginUrl} style="color: #165DFF; text-decoration: none;">Login</a>
       </div>
     </form>
   </div>

package/dist/components/pages/LiteShowPage.svelte

@@ -13,6 +13,8 @@
     basePath?: string;
     canEdit?: boolean;
     canDelete?: boolean;
+    /** Caller class merged with the built-in class list. */
+    class?: string;
   }
 
   let {
@@ -21,6 +23,7 @@
     basePath = "/lite",
     canEdit,
     canDelete,
+    class: className = '',
   }: Props = $props();
 
   let pk = $derived(resource.primaryKey ?? "id");
@@ -33,7 +36,7 @@
   );
 </script>
 
-<div class="lite-page">
+<div class="lite-page {className}">
   <LiteBreadcrumbs
     items={[
       { label: t("common.dashboard") || "Dashboard", href: basePath },
@@ -59,10 +62,10 @@
     <div class="lite-stack-lg">
       {#each showFields as field, _i (_i)}
         <div>
-          <div style="display: block; font-size: 13px; font-weight: 500; color: #64748b; margin-bottom: 8px;">
+          <div style="display: block; font-size: 13px; font-weight: 500; color: #4E5969; margin-bottom: 8px;">
             {field.label}
           </div>
-          <div style="color: #0f172a; font-size: 14px;">
+          <div style="color: #1D2129; font-size: 14px;">
             <LiteShowField {field} value={record[field.key]} {basePath} />
           </div>
         </div>

package/dist/components/pages/LiteShowPage.svelte.d.ts

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

package/dist/components/pages/LiteUpdatePasswordPage.svelte

@@ -14,11 +14,11 @@
   }: Props = $props();
 </script>
 
-<div style="min-height: 100vh; display: flex; align-items: center; justify-content: center; background: #f8fafc; padding: 20px;">
+<div style="min-height: 100vh; display: flex; align-items: center; justify-content: center; background: #F7F8FA; padding: 20px;">
   <div class="lite-card" style="width: 100%; max-width: 400px; padding: 32px;">
     <div style="text-align: center; margin-bottom: 24px;">
-      <h1 style="font-size: 24px; font-weight: 600; color: #0f172a; margin: 0 0 8px;">{title}</h1>
-      <p style="font-size: 14px; color: #64748b; margin: 0;">{description}</p>
+      <h1 style="font-size: 24px; font-weight: 600; color: #1D2129; margin: 0 0 8px;">{title}</h1>
+      <p style="font-size: 14px; color: #4E5969; margin: 0;">{description}</p>
     </div>
 
     <form method="POST" {action} class="lite-stack-lg">
@@ -33,7 +33,7 @@
       </div>
 
       {#if errors.length > 0}
-        <div style="padding: 12px; background: #fef2f2; border-radius: 6px; color: #ef4444; font-size: 13px;">
+        <div style="padding: 12px; background: #FFECE8; border-radius: 6px; color: #F53F3F; font-size: 13px;">
           <ul style="margin: 0; padding-left: 20px;">
             {#each errors as err, _i (_i)}
               <li>{err}</li>