@svadmin/lite 0.17.0 → 0.22.0

package/dist/components/LiteGrid.svelte

@@ -0,0 +1,34 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+
+  interface Props {
+    columns?: number;
+    gap?: 'sm' | 'md' | 'lg';
+    /** Caller class merged with the built-in class list. */
+    class?: string;
+    children: Snippet;
+  }
+
+  let { columns = 3, gap = 'md', class: className = '', children }: Props = $props();
+  const safeColumns = $derived(columns >= 4 ? 4 : columns === 2 ? 2 : 3);
+</script>
+
+<div class="lite-grid {className}" data-columns={safeColumns} data-gap={gap}>
+  {@render children()}
+</div>
+
+<style>
+  .lite-grid { display: flex; flex-wrap: wrap; margin: -6px; }
+  .lite-grid > * { box-sizing: border-box; width: calc(33.333% - 12px); margin: 6px; }
+  .lite-grid[data-columns='2'] > * { width: calc(50% - 12px); }
+  .lite-grid[data-columns='4'] > * { width: calc(25% - 12px); }
+  .lite-grid[data-gap='sm'] { margin: -2px; }
+  .lite-grid[data-gap='sm'] > * { width: calc(33.333% - 4px); margin: 2px; }
+  .lite-grid[data-gap='sm'][data-columns='2'] > * { width: calc(50% - 4px); }
+  .lite-grid[data-gap='sm'][data-columns='4'] > * { width: calc(25% - 4px); }
+  .lite-grid[data-gap='lg'] { margin: -10px; }
+  .lite-grid[data-gap='lg'] > * { width: calc(33.333% - 20px); margin: 10px; }
+  .lite-grid[data-gap='lg'][data-columns='2'] > * { width: calc(50% - 20px); }
+  .lite-grid[data-gap='lg'][data-columns='4'] > * { width: calc(25% - 20px); }
+  @media (max-width: 720px) { .lite-grid > * { width: calc(100% - 12px) !important; } }
+</style>

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

@@ -0,0 +1,11 @@
+import type { Snippet } from 'svelte';
+interface Props {
+    columns?: number;
+    gap?: 'sm' | 'md' | 'lg';
+    /** Caller class merged with the built-in class list. */
+    class?: string;
+    children: Snippet;
+}
+declare const LiteGrid: import("svelte").Component<Props, {}, "">;
+type LiteGrid = ReturnType<typeof LiteGrid>;
+export default LiteGrid;

package/dist/components/LiteImage.svelte

@@ -0,0 +1,54 @@
+<script lang="ts">
+  interface Props {
+    src?: string;
+    alt?: string;
+    width?: string | number;
+    height?: string | number;
+    fit?: 'cover' | 'contain' | 'fill' | 'none';
+    rounded?: boolean;
+    fallback?: string;
+    href?: string;
+    caption?: string;
+  }
+
+  let {
+    src,
+    alt = '',
+    width,
+    height,
+    fit = 'cover',
+    rounded = false,
+    fallback = 'Image unavailable',
+    href,
+    caption,
+  }: Props = $props();
+
+  const sizeStyle = $derived([
+    width === undefined ? undefined : `width:${typeof width === 'number' ? `${width}px` : width}`,
+    height === undefined ? undefined : `height:${typeof height === 'number' ? `${height}px` : height}`,
+  ].filter(Boolean).join(';'));
+</script>
+
+<figure class="lite-image" class:lite-image-rounded={rounded} style={sizeStyle || undefined}>
+  {#if src}
+    {#if href}
+      <a href={href} aria-label={alt ? `Open ${alt}` : 'Open image'}>
+        <img {src} {alt} loading="lazy" decoding="async" style={`object-fit:${fit}`} />
+      </a>
+    {:else}
+      <img {src} {alt} loading="lazy" decoding="async" style={`object-fit:${fit}`} />
+    {/if}
+  {:else}
+    <span class="lite-image-fallback" role="img" aria-label={fallback}>{fallback}</span>
+  {/if}
+  {#if caption}<figcaption>{caption}</figcaption>{/if}
+</figure>
+
+<style>
+  .lite-image { display: block; place-items: center; min-width: 0; max-width: 100%; margin: 0; overflow: hidden; border: 1px solid #E5E6EB; background: #F2F3F5; color: #4E5969; }
+  .lite-image-rounded { border-radius: 8px; }
+  .lite-image a { display: block; max-width: 100%; }
+  .lite-image img { display: block; max-width: 100%; height: auto; }
+  .lite-image-fallback { display: inline-block; padding: 24px 16px; font-size: 13px; text-align: center; }
+  .lite-image figcaption { width: 100%; padding: 8px 12px; border-top: 1px solid #E5E6EB; background: #fff; color: #4E5969; font-size: 12px; }
+</style>

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

@@ -0,0 +1,14 @@
+interface Props {
+    src?: string;
+    alt?: string;
+    width?: string | number;
+    height?: string | number;
+    fit?: 'cover' | 'contain' | 'fill' | 'none';
+    rounded?: boolean;
+    fallback?: string;
+    href?: string;
+    caption?: string;
+}
+declare const LiteImage: import("svelte").Component<Props, {}, "">;
+type LiteImage = ReturnType<typeof LiteImage>;
+export default LiteImage;

package/dist/components/LiteImageCropper.svelte

@@ -4,6 +4,8 @@
     aspectRatio?: number;
     action?: string;
     method?: 'get' | 'post' | 'dialog' | 'GET' | 'POST' | 'DIALOG' | null;
+    /** Caller class merged with the built-in class list. */
+    class?: string;
   }
 
   let {
@@ -11,10 +13,11 @@
     aspectRatio = 1,
     action = '',
     method = 'POST',
+    class: className = ''
   }: Props = $props();
 </script>
 
-<div class="lite-cropper-card">
+<div class="lite-cropper-card {className}">
   <div class="lite-cropper-header">
     <strong>Image Crop (Aspect Ratio: {aspectRatio}:1)</strong>
   </div>

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

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

package/dist/components/LiteImagePreview.svelte

@@ -0,0 +1,36 @@
+<script lang="ts">
+  interface PreviewImage {
+    src: string;
+    alt: string;
+  }
+
+  interface Props {
+    src: string;
+    alt?: string;
+    images?: PreviewImage[];
+    downloadLabel?: string;
+  }
+
+  let { src, alt = '', images = [], downloadLabel = 'Download image' }: Props = $props();
+  const gallery = $derived(images.length > 0 ? images : [{ src, alt }]);
+</script>
+
+<div class="lite-image-preview" role="group" aria-label="Image gallery">
+  {#each gallery as image, index (image.src)}
+    <a class="lite-image-preview__item" href={image.src} target="_blank" rel="noreferrer" aria-label={`Open ${image.alt || alt || `image ${index + 1}`}`}>
+      <img src={image.src} alt={image.alt || alt} loading="lazy" decoding="async" />
+      <span>{image.alt || alt || `Image ${index + 1}`}</span>
+    </a>
+  {/each}
+  <a class="lite-btn lite-btn-sm" href={src} download={alt || 'image'}>{downloadLabel}</a>
+</div>
+
+<style>
+  .lite-image-preview { display: flex; flex-wrap: wrap; align-items: flex-start; }
+  .lite-image-preview__item { display: block; width: 160px; max-width: 100%; overflow: hidden; border: 1px solid #E5E6EB; border-radius: 8px; background: #fff; color: #1D2129; text-decoration: none; }
+  .lite-image-preview__item:hover { border-color: #165DFF; text-decoration: none; }
+  .lite-image-preview__item img { display: block; width: 100%; height: 110px; object-fit: cover; }
+  .lite-image-preview__item span { display: block; padding: 6px 8px; overflow: hidden; color: #4E5969; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
+
+  .lite-image-preview > * { margin: 0 12px 12px 0; }
+</style>

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

@@ -0,0 +1,13 @@
+interface PreviewImage {
+    src: string;
+    alt: string;
+}
+interface Props {
+    src: string;
+    alt?: string;
+    images?: PreviewImage[];
+    downloadLabel?: string;
+}
+declare const LiteImagePreview: import("svelte").Component<Props, {}, "">;
+type LiteImagePreview = ReturnType<typeof LiteImagePreview>;
+export default LiteImagePreview;

package/dist/components/LiteItemList.svelte

@@ -0,0 +1,50 @@
+<script lang="ts">
+  interface ListItem {
+    id: string;
+    title: string;
+    description?: string;
+    href?: string;
+    meta?: string;
+  }
+
+  interface Props {
+    items: ListItem[];
+    title?: string;
+    emptyText?: string;
+  }
+
+  let { items, title, emptyText = 'No items' }: Props = $props();
+</script>
+
+<section class="lite-item-list lite-card">
+  {#if title}<h2>{title}</h2>{/if}
+  {#if items.length === 0}
+    <p class="lite-muted">{emptyText}</p>
+  {:else}
+    <ul>
+      {#each items as item (item.id)}
+        <li>
+          <div>
+            {#if item.href}<a href={item.href}>{item.title}</a>{:else}<strong>{item.title}</strong>{/if}
+            {#if item.description}<p>{item.description}</p>{/if}
+          </div>
+          {#if item.meta}<span>{item.meta}</span>{/if}
+        </li>
+      {/each}
+    </ul>
+  {/if}
+</section>
+
+<style>
+  .lite-item-list { padding: 0; overflow: hidden; }
+  .lite-item-list h2 { margin: 0; padding: 12px 16px; border-bottom: 1px solid #E5E6EB; color: #1D2129; font-size: 14px; }
+  .lite-item-list > p { margin: 0; padding: 16px; }
+  .lite-item-list ul { margin: 0; padding: 0; list-style: none; }
+  .lite-item-list li { display: flex; align-items: flex-start; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid #F2F3F5; }
+  .lite-item-list li:last-child { border-bottom: 0; }
+  .lite-item-list a, .lite-item-list strong { color: #1D2129; font-size: 13px; }
+  .lite-item-list p { margin: 4px 0 0; color: #4E5969; font-size: 12px; line-height: 1.5; }
+  .lite-item-list li > span { color: #86909C; font-size: 12px; white-space: nowrap; }
+
+  .lite-item-list li > * + * { margin-left: 12px; }
+</style>

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

@@ -0,0 +1,15 @@
+interface ListItem {
+    id: string;
+    title: string;
+    description?: string;
+    href?: string;
+    meta?: string;
+}
+interface Props {
+    items: ListItem[];
+    title?: string;
+    emptyText?: string;
+}
+declare const LiteItemList: import("svelte").Component<Props, {}, "">;
+type LiteItemList = ReturnType<typeof LiteItemList>;
+export default LiteItemList;

package/dist/components/LiteJsonSchemaForm.svelte

@@ -9,6 +9,8 @@
     action?: string;
     method?: 'get' | 'post' | 'dialog' | 'GET' | 'POST' | 'DIALOG' | null;
     submitText?: string;
+    /** Caller class merged with the built-in class list. */
+    class?: string;
   }
 
   let {
@@ -17,6 +19,7 @@
     action = '',
     method = 'POST',
     submitText = 'Submit Form',
+    class: className = ''
   }: Props = $props();
   const instanceId = $props.id();
   const i18n = useTranslation();
@@ -119,7 +122,7 @@
   }
 </script>
 
-<div class="lite-schema-form-card">
+<div class="lite-schema-form-card {className}">
   {#if schema.title}<div class="lite-schema-form-header"><strong>{schema.title}</strong></div>{/if}
   {#if schema.description}<p class="lite-schema-description">{schema.description}</p>{/if}
 

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

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

package/dist/components/LiteLayout.svelte

@@ -19,6 +19,14 @@
     /** Optional server-computed permission check for menu metadata. */
     canAccess?: (resource: string, action: string) => boolean;
     children: Snippet;
+    /** Caller class for the layout wrapper. */
+    class?: string;
+    /** Caller class for the desktop sidebar. */
+    classSidebar?: string;
+    /** Caller class for the mobile navigation. */
+    classMobileNav?: string;
+    /** Caller class for the main region. */
+    classMain?: string;
   }
 
   let {
@@ -30,6 +38,10 @@
     menu,
     canAccess,
     children,
+    class: className = '',
+    classSidebar = '',
+    classMobileNav = '',
+    classMain = '',
   }: Props = $props();
 
   const menuResources = $derived(filterVisibleResources(resources, canAccess));
@@ -63,9 +75,9 @@
   }
 </script>
 
-<div class="lite-wrapper">
+<div class={`lite-wrapper ${className}`.trim()}>
   <!-- Sidebar -->
-  <nav class="lite-sidebar">
+  <nav class={`lite-sidebar ${classSidebar}`.trim()}>
     <div class="lite-sidebar-brand">{brandName}</div>
     {#if hasCustomMenu}
       <LiteMenuList items={visibleMenu} {basePath} {currentResource} />
@@ -89,7 +101,7 @@
     {/if}
   </nav>
 
-  <nav class="lite-mobile-nav" aria-label="Mobile navigation">
+  <nav class={`lite-mobile-nav ${classMobileNav}`.trim()} aria-label="Mobile navigation">
     <div class="lite-mobile-nav-brand">{brandName}</div>
     <div class="lite-mobile-nav-links">
       {#each mobileItems as item (item.name)}
@@ -112,7 +124,7 @@
   </nav>
 
   <!-- Main Content -->
-  <main class="lite-main">
+  <main class={`lite-main ${classMain}`.trim()}>
     {@render children()}
   </main>
 </div>

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

@@ -15,6 +15,14 @@ interface Props {
     /** Optional server-computed permission check for menu metadata. */
     canAccess?: (resource: string, action: string) => boolean;
     children: Snippet;
+    /** Caller class for the layout wrapper. */
+    class?: string;
+    /** Caller class for the desktop sidebar. */
+    classSidebar?: string;
+    /** Caller class for the mobile navigation. */
+    classMobileNav?: string;
+    /** Caller class for the main region. */
+    classMain?: string;
 }
 declare const LiteLayout: import("svelte").Component<Props, {}, "">;
 type LiteLayout = ReturnType<typeof LiteLayout>;

package/dist/components/LiteLink.svelte

@@ -0,0 +1,32 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+
+  interface Props {
+    href: string;
+    external?: boolean;
+    underline?: boolean;
+    disabled?: boolean;
+    children: Snippet;
+  }
+
+  let { href, external = false, underline = false, disabled = false, children }: Props = $props();
+</script>
+
+{#if disabled}
+  <span class="lite-link" aria-disabled="true">{@render children()}</span>
+{:else}
+  <a
+    class="lite-link"
+    class:lite-link-underline={underline}
+    {href}
+    target={external ? '_blank' : undefined}
+    rel={external ? 'noreferrer' : undefined}
+  >{@render children()}</a>
+{/if}
+
+<style>
+  .lite-link { color: #165DFF; text-decoration: none; }
+  .lite-link:hover { text-decoration: underline; }
+  .lite-link-underline { text-decoration: underline; }
+  .lite-link[aria-disabled='true'] { color: #C9CDD4; cursor: not-allowed; }
+</style>

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

@@ -0,0 +1,11 @@
+import type { Snippet } from 'svelte';
+interface Props {
+    href: string;
+    external?: boolean;
+    underline?: boolean;
+    disabled?: boolean;
+    children: Snippet;
+}
+declare const LiteLink: import("svelte").Component<Props, {}, "">;
+type LiteLink = ReturnType<typeof LiteLink>;
+export default LiteLink;

package/dist/components/LiteLogin.svelte

@@ -9,12 +9,19 @@
     error?: string;
     brandName?: string;
     action?: string;
+    /** Caller class merged with the built-in class list. */
+    class?: string;
   }
 
-  let { error, brandName = 'Admin', action = '?/login' }: Props = $props();
+  let {
+    error,
+    brandName = 'Admin',
+    action = '?/login',
+    class: className = '',
+  }: Props = $props();
 </script>
 
-<div class="lite-login-wrapper">
+<div class="lite-login-wrapper {className}">
   <div class="lite-login-card">
     <div class="lite-card">
       <h2 style="text-align:center;margin:0 0 20px;font-size:20px;font-weight:600;">{brandName}</h2>

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

@@ -2,6 +2,8 @@ interface Props {
     error?: string;
     brandName?: string;
     action?: string;
+    /** Caller class merged with the built-in class list. */
+    class?: string;
 }
 declare const LiteLogin: import("svelte").Component<Props, {}, "">;
 type LiteLogin = ReturnType<typeof LiteLogin>;

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">

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>

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/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}