@svadmin/lite 0.16.11 → 0.22.0

package/dist/components/LiteMasterDetailView.svelte

@@ -7,6 +7,8 @@
     idKey?: string;
     titleKey?: string;
     detailSnippet?: Snippet<[Record<string, unknown>]>;
+    /** Caller class merged with the built-in class list. */
+    class?: string;
   }
 
   let {
@@ -15,6 +17,7 @@
     idKey = 'id',
     titleKey = 'title',
     detailSnippet,
+    class: className = '',
   }: Props = $props();
 
   const activeItem = $derived(
@@ -22,7 +25,7 @@
   );
 </script>
 
-<div class="lite-master-detail-card">
+<div class="lite-master-detail-card {className}">
   <!-- Left Master List -->
   <div class="lite-master-list">
     <div class="lite-master-header">
@@ -52,7 +55,7 @@
             <tbody>
               {#each Object.entries(activeItem) as [k, v] (k)}
                 <tr>
-                  <th style="width: 30%; text-align: left; background: #f8fafc;">{k}</th>
+                  <th style="width: 30%; text-align: left; background: #F7F8FA;">{k}</th>
                   <td>{typeof v === 'object' ? JSON.stringify(v) : String(v ?? '—')}</td>
                 </tr>
               {/each}
@@ -61,7 +64,7 @@
         </div>
       {/if}
     {:else}
-      <div style="color: #94a3b8; padding: 24px; text-align: center;">
+      <div style="color: #86909C; padding: 24px; text-align: center;">
         Select an item to view details
       </div>
     {/if}
@@ -72,19 +75,19 @@
   .lite-master-detail-card {
     display: flex;
     background: #ffffff;
-    border: 1px solid #cbd5e1;
+    border: 1px solid #E5E6EB;
     border-radius: 6px;
     margin-bottom: 16px;
     min-height: 320px;
   }
   .lite-master-list {
     flex: 0 0 240px;
-    border-right: 1px solid #e2e8f0;
-    background: #f8fafc;
+    border-right: 1px solid #E5E6EB;
+    background: #F7F8FA;
   }
   .lite-master-header {
     padding: 10px 12px;
-    border-bottom: 1px solid #e2e8f0;
+    border-bottom: 1px solid #E5E6EB;
     font-size: 12px;
   }
   .lite-master-items {
@@ -93,16 +96,16 @@
     margin: 0;
   }
   .lite-master-item {
-    border-bottom: 1px solid #f1f5f9;
+    border-bottom: 1px solid #F2F3F5;
   }
   .lite-master-item-active {
-    background: #e0e7ff;
+    background: #E8F3FF;
     font-weight: bold;
   }
   .lite-master-link {
     display: block;
     padding: 8px 12px;
-    color: #1e293b;
+    color: #1D2129;
     text-decoration: none;
     font-size: 12px;
   }

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

@@ -5,6 +5,8 @@ interface Props {
     idKey?: string;
     titleKey?: string;
     detailSnippet?: Snippet<[Record<string, unknown>]>;
+    /** Caller class merged with the built-in class list. */
+    class?: string;
 }
 declare const LiteMasterDetailView: import("svelte").Component<Props, {}, "">;
 type LiteMasterDetailView = ReturnType<typeof LiteMasterDetailView>;

package/dist/components/LiteMediaLibraryModal.svelte

@@ -16,6 +16,8 @@
     mediaItems?: LiteMediaItem[];
     action?: string;
     method?: 'get' | 'post' | 'dialog' | 'GET' | 'POST' | 'DIALOG' | null;
+    /** Caller class merged with the built-in class list. */
+    class?: string;
   }
 
   let {
@@ -24,10 +26,11 @@
     mediaItems = [],
     action = '',
     method = 'POST',
+    class: className = '',
   }: Props = $props();
 </script>
 
-<div class="lite-media-library-card">
+<div class="lite-media-library-card {className}">
   <div class="lite-media-header">
     <strong>{title}</strong>
   </div>
@@ -71,7 +74,7 @@
         {/each}
         {#if mediaItems.length === 0}
           <tr>
-            <td colspan="5" style="text-align: center; color: #94a3b8; padding: 24px;">No media files available</td>
+            <td colspan="5" style="text-align: center; color: #86909C; padding: 24px;">No media files available</td>
           </tr>
         {/if}
       </tbody>
@@ -88,21 +91,21 @@
 <style>
   .lite-media-library-card {
     background: #ffffff;
-    border: 1px solid #cbd5e1;
+    border: 1px solid #E5E6EB;
     border-radius: 6px;
     padding: 16px;
     margin-bottom: 16px;
   }
   .lite-media-header {
     padding-bottom: 10px;
-    border-bottom: 1px solid #e2e8f0;
+    border-bottom: 1px solid #E5E6EB;
     margin-bottom: 12px;
     font-size: 14px;
   }
   .lite-media-upload-row {
     margin-bottom: 12px;
     padding: 8px;
-    background: #f8fafc;
+    background: #F7F8FA;
     border-radius: 4px;
   }
   .lite-media-footer {

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

@@ -11,6 +11,8 @@ interface Props {
     mediaItems?: LiteMediaItem[];
     action?: string;
     method?: 'get' | 'post' | 'dialog' | 'GET' | 'POST' | 'DIALOG' | null;
+    /** Caller class merged with the built-in class list. */
+    class?: string;
 }
 declare const LiteMediaLibraryModal: import("svelte").Component<Props, {}, "">;
 type LiteMediaLibraryModal = ReturnType<typeof LiteMediaLibraryModal>;

package/dist/components/LiteMediaThumbnail.svelte

@@ -27,9 +27,9 @@
 {/if}
 
 <style>
-  .lite-media-thumbnail { position: relative; display: inline-flex; max-width: 300px; align-items: center; justify-content: center; overflow: hidden; border: 1px solid #e2e8f0; border-radius: 6px; background: #f8fafc; }
+  .lite-media-thumbnail { position: relative; display: inline-flex; max-width: 300px; align-items: center; justify-content: center; overflow: hidden; border: 1px solid #E5E6EB; border-radius: 6px; background: #F7F8FA; }
   .lite-media-thumbnail img { display: block; width: auto; max-width: 100%; height: 100%; object-fit: contain; }
   .lite-media-hidden { visibility: hidden; }
-  .lite-media-status { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 8px; color: #64748b; font-size: 12px; text-align: center; }
-  .lite-media-empty { color: #64748b; font-size: 12px; }
+  .lite-media-status { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 8px; color: #4E5969; font-size: 12px; text-align: center; }
+  .lite-media-empty { color: #4E5969; font-size: 12px; }
 </style>

package/dist/components/LiteMentionsInput.svelte

@@ -61,24 +61,24 @@
   .sv-lite-textarea {
     width: 100%;
     padding: 8px;
-    border: 1px solid #cbd5e1;
+    border: 1px solid #E5E6EB;
     border-radius: 4px;
     font-size: 12px;
     font-family: inherit;
     box-sizing: border-box;
     background-color: #ffffff;
-    color: #0f172a;
+    color: #1D2129;
   }
   .sv-lite-mentions-hints {
     margin-top: 6px;
     padding: 4px 6px;
-    background-color: #f8fafc;
-    border: 1px solid #e2e8f0;
+    background-color: #F7F8FA;
+    border: 1px solid #E5E6EB;
     border-radius: 4px;
   }
   .sv-lite-hints-title {
     font-weight: 600;
-    color: #64748b;
+    color: #4E5969;
     margin-right: 6px;
   }
   .sv-lite-mention-badge {
@@ -86,13 +86,13 @@
     padding: 2px 6px;
     margin-right: 4px;
     margin-bottom: 2px;
-    background-color: #e0e7ff;
-    color: #4338ca;
+    background-color: #E8F3FF;
+    color: #0E42D2;
     border-radius: 3px;
     font-size: 11px;
   }
   .sv-lite-tag {
-    background-color: #f1f5f9;
-    color: #475569;
+    background-color: #F2F3F5;
+    color: #4E5969;
   }
 </style>

package/dist/components/LiteMenu.svelte

@@ -0,0 +1,22 @@
+<script lang="ts">
+  import LiteMenuList, { type MenuEntry } from './LiteMenuList.svelte';
+
+  interface Props {
+    items: MenuEntry[];
+    mode?: 'vertical' | 'horizontal';
+    selected?: string;
+    label?: string;
+    /** Caller class merged with the built-in class list. */
+    class?: string;
+  }
+
+  let { items, mode = 'vertical', selected, label = 'Menu', class: className = '' }: Props = $props();
+</script>
+
+<nav class="lite-menu {className}" data-mode={mode} aria-label={label}>
+  <LiteMenuList {items} {selected} {mode} />
+</nav>
+
+<style>
+  .lite-menu { border: 1px solid #E5E6EB; border-radius: 8px; background: #fff; }
+</style>

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

@@ -0,0 +1,12 @@
+import { type MenuEntry } from './LiteMenuList.svelte';
+interface Props {
+    items: MenuEntry[];
+    mode?: 'vertical' | 'horizontal';
+    selected?: string;
+    label?: string;
+    /** Caller class merged with the built-in class list. */
+    class?: string;
+}
+declare const LiteMenu: import("svelte").Component<Props, {}, "">;
+type LiteMenu = ReturnType<typeof LiteMenu>;
+export default LiteMenu;

package/dist/components/LiteMenuList.svelte

@@ -0,0 +1,55 @@
+<script lang="ts">
+  export interface MenuEntry {
+    id: string;
+    label: string;
+    href?: string;
+    disabled?: boolean;
+    badge?: string | number;
+    children?: MenuEntry[];
+  }
+
+  interface Props {
+    items: MenuEntry[];
+    selected?: string;
+    depth?: number;
+    mode?: 'vertical' | 'horizontal';
+  }
+
+  let { items, selected, depth = 0, mode = 'vertical' }: Props = $props();
+
+</script>
+
+{#snippet branch(list: MenuEntry[], level: number, listMode: 'vertical' | 'horizontal')}
+  <ul class="lite-menu__list" data-mode={level === 0 ? listMode : 'vertical'} role={level === 0 ? 'menu' : 'group'}>
+    {#each list as item (item.id)}
+      <li role="none" class:active={selected === item.id} data-disabled={item.disabled || undefined}>
+        {#if item.href && !item.disabled}
+          <a role="menuitem" href={item.href} aria-current={selected === item.id ? 'page' : undefined}>
+            <span>{item.label}</span>
+            {#if item.badge !== undefined}<span class="lite-badge lite-badge-secondary">{item.badge}</span>{/if}
+          </a>
+        {:else}
+          <span role="menuitem" aria-disabled={item.disabled || undefined}>
+            <span>{item.label}</span>
+            {#if item.badge !== undefined}<span class="lite-badge lite-badge-secondary">{item.badge}</span>{/if}
+          </span>
+        {/if}
+        {#if item.children?.length}
+          {@render branch(item.children, level + 1, 'vertical')}
+        {/if}
+      </li>
+    {/each}
+  </ul>
+{/snippet}
+
+{@render branch(items, depth, mode)}
+
+<style>
+  .lite-menu__list { margin: 0; padding: 4px; list-style: none; }
+  .lite-menu__list[data-mode='horizontal'] { display: flex; flex-wrap: wrap; }
+  .lite-menu__list li > a, .lite-menu__list li > span { display: flex; align-items: center; justify-content: space-between; padding: 8px 12px; border-radius: 4px; color: #1D2129; font-size: 13px; text-decoration: none; }
+  .lite-menu__list li > a:hover, .lite-menu__list li.active > a { background: #E8F3FF; color: #165DFF; text-decoration: none; }
+  .lite-menu__list li[data-disabled] > span { color: #C9CDD4; }
+  .lite-menu__list li > a > span + span, .lite-menu__list li > span > span + span { margin-left: 8px; }
+  .lite-menu__list .lite-menu__list { padding-left: 16px; }
+</style>

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

@@ -0,0 +1,17 @@
+export interface MenuEntry {
+    id: string;
+    label: string;
+    href?: string;
+    disabled?: boolean;
+    badge?: string | number;
+    children?: MenuEntry[];
+}
+interface Props {
+    items: MenuEntry[];
+    selected?: string;
+    depth?: number;
+    mode?: 'vertical' | 'horizontal';
+}
+declare const LiteMenuList: import("svelte").Component<Props, {}, "">;
+type LiteMenuList = ReturnType<typeof LiteMenuList>;
+export default LiteMenuList;

package/dist/components/LiteModalForm.svelte

@@ -9,6 +9,8 @@
     submitText?: string;
     cancelText?: string;
     children?: Snippet;
+    /** Caller class merged with the built-in class list. */
+    class?: string;
   }
 
   let {
@@ -19,10 +21,11 @@
     submitText = 'Confirm',
     cancelText = 'Cancel',
     children,
+    class: className = '',
   }: Props = $props();
 </script>
 
-<div class="lite-modal-card">
+<div class="lite-modal-card {className}">
   <div class="lite-modal-header">
     <h3 class="lite-modal-title">{title}</h3>
     {#if description}
@@ -52,24 +55,24 @@
   .lite-modal-card {
     padding: 16px;
     background: #ffffff;
-    border: 1px solid #cbd5e1;
+    border: 1px solid #E5E6EB;
     border-radius: 6px;
     margin-bottom: 16px;
   }
   .lite-modal-header {
     padding-bottom: 10px;
-    border-bottom: 1px solid #e2e8f0;
+    border-bottom: 1px solid #E5E6EB;
     margin-bottom: 12px;
   }
   .lite-modal-title {
     margin: 0;
     font-size: 14px;
-    color: #1e293b;
+    color: #1D2129;
   }
   .lite-modal-desc {
     margin: 4px 0 0 0;
     font-size: 12px;
-    color: #64748b;
+    color: #4E5969;
   }
   .lite-modal-body {
     margin-bottom: 16px;
@@ -79,6 +82,6 @@
     display: flex;
     justify-content: flex-end;
     padding-top: 12px;
-    border-top: 1px solid #e2e8f0;
+    border-top: 1px solid #E5E6EB;
   }
 </style>

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

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

package/dist/components/LiteMultiTabKeepAlive.svelte

@@ -40,8 +40,8 @@
 <style>
   .sv-lite-tab-bar {
     display: block;
-    background-color: #f1f5f9;
-    border-bottom: 1px solid #cbd5e1;
+    background-color: #F2F3F5;
+    border-bottom: 1px solid #E5E6EB;
     padding: 4px 8px 0 8px;
     font-size: 12px;
   }
@@ -53,18 +53,18 @@
     display: inline-block;
     padding: 6px 12px;
     margin-right: 4px;
-    background-color: #e2e8f0;
-    color: #475569;
+    background-color: #E5E6EB;
+    color: #4E5969;
     text-decoration: none;
     border-top-left-radius: 4px;
     border-top-right-radius: 4px;
-    border: 1px solid #cbd5e1;
+    border: 1px solid #E5E6EB;
     border-bottom: none;
     font-weight: 500;
   }
   .sv-lite-tab-active {
     background-color: #ffffff;
-    color: #0f172a;
+    color: #1D2129;
     font-weight: 600;
     border-bottom: 1px solid #ffffff;
     margin-bottom: -1px;

package/dist/components/LiteNotificationCenter.svelte

@@ -0,0 +1,85 @@
+<script lang="ts">
+  import { renderRichContent, type MarkdownRenderOptions } from '../rich-content.js';
+
+  interface NotificationItem {
+    id: string;
+    title: string;
+    description?: string;
+    time?: string;
+    href?: string;
+    read?: boolean;
+    tone?: 'info' | 'success' | 'warning' | 'danger';
+  }
+
+  interface Props {
+    items: NotificationItem[];
+    title?: string;
+    emptyText?: string;
+    markAllHref?: string;
+    /** Render item descriptions as Markdown/allowlisted HTML. Defaults to plain text. */
+    richContent?: boolean;
+    richContentOptions?: MarkdownRenderOptions;
+  }
+
+  let {
+    items,
+    title = 'Notifications',
+    emptyText = 'No notifications',
+    markAllHref,
+    richContent = false,
+    richContentOptions,
+  }: Props = $props();
+
+  function body(value: string): string {
+    return renderRichContent(value, richContentOptions);
+  }
+</script>
+
+<section class="lite-notification-center lite-card" aria-label={title}>
+  <header>
+    <h2>{title}</h2>
+    {#if markAllHref}<a href={markAllHref}>Mark all read</a>{/if}
+  </header>
+  {#if items.length === 0}
+    <p class="lite-muted">{emptyText}</p>
+  {:else}
+    <ul>
+      {#each items as item (item.id)}
+        <li data-read={item.read || undefined} data-tone={item.tone ?? 'info'}>
+          <span class="lite-notification-center__dot" aria-hidden="true"></span>
+          {#if item.href}<a href={item.href}>{item.title}</a>{:else}<strong>{item.title}</strong>{/if}
+          {#if item.description}
+            {#if richContent}
+              <!-- eslint-disable-next-line svelte/no-at-html-tags -- 内容由 renderRichContent 转义或白名单过滤，高亮回调仅允许可信服务端实现。 -->
+              <div class="lite-notification-center__rich">{@html body(item.description)}</div>
+            {:else}
+              <p>{item.description}</p>
+            {/if}
+          {/if}
+          {#if item.time}<time>{item.time}</time>{/if}
+        </li>
+      {/each}
+    </ul>
+  {/if}
+</section>
+
+<style>
+  .lite-notification-center { padding: 0; overflow: hidden; }
+  .lite-notification-center header { display: flex; align-items: baseline; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid #E5E6EB; }
+  .lite-notification-center h2 { margin: 0; color: #1D2129; font-size: 14px; }
+  .lite-notification-center header a { color: #165DFF; font-size: 12px; }
+  .lite-notification-center ul { margin: 0; padding: 0; list-style: none; }
+  .lite-notification-center li { position: relative; display: block; padding: 12px 16px 12px 30px; border-bottom: 1px solid #F2F3F5; }
+  .lite-notification-center li:last-child { border-bottom: 0; }
+  .lite-notification-center li[data-read] { opacity: 0.65; }
+  .lite-notification-center__dot { position: absolute; top: 16px; left: 16px; width: 7px; height: 7px; border-radius: 999px; background: #165DFF; }
+  .lite-notification-center li[data-tone='success'] .lite-notification-center__dot { background: #00B42A; }
+  .lite-notification-center li[data-tone='warning'] .lite-notification-center__dot { background: #FF7D00; }
+  .lite-notification-center li[data-tone='danger'] .lite-notification-center__dot { background: #F53F3F; }
+  .lite-notification-center li a, .lite-notification-center li strong { color: #1D2129; font-size: 13px; }
+  .lite-notification-center li p { margin: 0; color: #4E5969; font-size: 12px; line-height: 1.5; }
+  .lite-notification-center li time { color: #86909C; font-size: 11px; }
+  .lite-notification-center__rich :global(p) { margin: 0; }
+  .lite-notification-center__rich :global(a) { color: #165DFF; }
+  .lite-notification-center__rich :global(code) { padding: 1px 4px; border-radius: 3px; background: #F2F3F5; font-family: monospace; font-size: 12px; }
+</style>

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

@@ -0,0 +1,22 @@
+import { type MarkdownRenderOptions } from '../rich-content.js';
+interface NotificationItem {
+    id: string;
+    title: string;
+    description?: string;
+    time?: string;
+    href?: string;
+    read?: boolean;
+    tone?: 'info' | 'success' | 'warning' | 'danger';
+}
+interface Props {
+    items: NotificationItem[];
+    title?: string;
+    emptyText?: string;
+    markAllHref?: string;
+    /** Render item descriptions as Markdown/allowlisted HTML. Defaults to plain text. */
+    richContent?: boolean;
+    richContentOptions?: MarkdownRenderOptions;
+}
+declare const LiteNotificationCenter: import("svelte").Component<Props, {}, "">;
+type LiteNotificationCenter = ReturnType<typeof LiteNotificationCenter>;
+export default LiteNotificationCenter;

package/dist/components/LiteOfflineSyncBanner.svelte

@@ -49,13 +49,13 @@
   }
   .sv-lite-sync-offline {
     background-color: #fef3c7;
-    border: 1px solid #fde68a;
-    color: #92400e;
+    border: 1px solid #FFE4BA;
+    color: #D25F00;
   }
   .sv-lite-sync-online {
-    background-color: #f1f5f9;
-    border: 1px solid #cbd5e1;
-    color: #334155;
+    background-color: #F2F3F5;
+    border: 1px solid #E5E6EB;
+    color: #1D2129;
   }
   .sv-lite-sync-title {
     display: inline-block;
@@ -66,7 +66,7 @@
   .sv-lite-sync-btn {
     padding: 3px 8px;
     font-size: 11px;
-    background-color: #4f46e5;
+    background-color: #165DFF;
     color: #ffffff;
     border: none;
     border-radius: 3px;

package/dist/components/LiteOtpInput.svelte

@@ -0,0 +1,50 @@
+<script lang="ts">
+  import type { HTMLInputAttributes } from 'svelte/elements';
+
+  interface Props {
+    /** Caller class merged with the built-in class list. */
+    class?: string;
+    name?: string;
+    label?: string;
+    length?: number;
+    value?: string;
+    disabled?: boolean;
+    required?: boolean;
+    autocomplete?: HTMLInputAttributes['autocomplete'];
+  }
+
+  let {
+    name = 'code',
+    label = 'Verification code',
+    length = 6,
+    value = '',
+    disabled = false,
+    required = true,
+    autocomplete = 'one-time-code',
+    class: className = '',
+  }: Props = $props();
+</script>
+
+<label class="lite-form-group lite-otp-input {className}">
+  <span>{label}</span>
+  <input
+    class="lite-input"
+    type="text"
+    {name}
+    {value}
+    {disabled}
+    {required}
+    {autocomplete}
+    inputmode="numeric"
+    pattern={`[0-9]{${length}}`}
+    maxlength={length}
+    placeholder={Array.from({ length }, () => '0').join('')}
+    aria-describedby={`${name}-hint`}
+  />
+  <small id={`${name}-hint`}>{length}-digit code</small>
+</label>
+
+<style>
+  .lite-otp-input input { max-width: 14rem; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 18px; letter-spacing: 0.35em; }
+  .lite-otp-input small { color: #86909C; font-size: 12px; }
+</style>

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

@@ -0,0 +1,15 @@
+import type { HTMLInputAttributes } from 'svelte/elements';
+interface Props {
+    /** Caller class merged with the built-in class list. */
+    class?: string;
+    name?: string;
+    label?: string;
+    length?: number;
+    value?: string;
+    disabled?: boolean;
+    required?: boolean;
+    autocomplete?: HTMLInputAttributes['autocomplete'];
+}
+declare const LiteOtpInput: import("svelte").Component<Props, {}, "">;
+type LiteOtpInput = ReturnType<typeof LiteOtpInput>;
+export default LiteOtpInput;

package/dist/components/LitePageHeader.svelte

@@ -0,0 +1,34 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+
+  interface Props {
+    title: string;
+    description?: string;
+    eyebrow?: string;
+    actions?: Snippet;
+    children?: Snippet;
+    /** Caller class merged with the built-in class list. */
+    class?: string;
+  }
+
+  let { title, description, eyebrow, actions, children, class: className = '' }: Props = $props();
+</script>
+
+<header class="lite-page-header lite-page-header-rich {className}">
+  <div>
+    {#if eyebrow}<p class="lite-page-header__eyebrow">{eyebrow}</p>{/if}
+    <h1 class="lite-page-title">{title}</h1>
+    {#if description}<p class="lite-page-header__description">{description}</p>{/if}
+    {@render children?.()}
+  </div>
+  {#if actions}<div class="lite-page-header__actions">{@render actions()}</div>{/if}
+</header>
+
+<style>
+  .lite-page-header-rich { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; }
+  .lite-page-header__eyebrow { margin: 0 0 4px; color: #86909C; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; }
+  .lite-page-header__description { margin: 6px 0 0; color: #4E5969; font-size: 13px; line-height: 1.6; }
+  .lite-page-header__actions { display: flex; flex-wrap: wrap; align-items: center; }
+
+  .lite-page-header__actions > * + * { margin-left: 8px; }
+</style>