@svadmin/lite 0.12.0 → 0.14.0

package/README.md

@@ -13,7 +13,7 @@ The main `@svadmin/ui` package delivers a premium SPA experience using Svelte 5,
 **What Lite is:**
 - A **Zero-JS SSR-first admin component suite** designed with an IE11-safe CSS baseline.
 - 100% interoperable with `@svadmin/core` — sharing the same `DataProvider`, `AuthProvider`, `Resource`, and `FieldDefinition` contracts.
-- An architectural companion to `@svadmin/ui` achieving **100% component parity (103/103 components)** through 1:1 server-rendered matches, deliberate semantic fallbacks, or explicit SPA-only classification.
+- An architectural companion to `@svadmin/ui` with tracked server-rendered mappings, semantic fallbacks, and explicit SPA-only classifications in `PARITY.md`. Coverage measures the listed mappings, not a complete public-export inventory or verified behavioral equivalence.
 - **Not** a generic Tailwind-to-IE11 compiler or a full client-side port of shadcn-svelte (which depends on modern browser JS runtimes and CSS custom properties).
 
 `@svadmin/lite` provides a server-rendered fallback that **shares the same DataProvider, AuthProvider, and Resource definitions** — only the rendering layer is different.

package/dist/components/LiteErrorSummary.svelte

@@ -0,0 +1,34 @@
+<script lang="ts">
+  export interface LiteFormErrorEntry {
+    fieldKey: string;
+    label: string;
+    message: string;
+    /** 可选的表单控件 id；提供后错误项会链接到该控件。 */
+    fieldId?: string;
+  }
+
+  let {
+    errors = [],
+    title = 'Please fix the following errors',
+  }: {
+    errors?: LiteFormErrorEntry[];
+    title?: string;
+  } = $props();
+</script>
+
+{#if errors.length > 0}
+  <section class="lite-error-summary" aria-labelledby="lite-error-summary-title">
+    <h2 id="lite-error-summary-title">{title}</h2>
+    <ul>
+      {#each errors as error (error.fieldKey)}
+        <li>
+          {#if error.fieldId}
+            <a href={`#${error.fieldId}`}>{error.label}: {error.message}</a>
+          {:else}
+            <span>{error.label}: {error.message}</span>
+          {/if}
+        </li>
+      {/each}
+    </ul>
+  </section>
+{/if}

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

@@ -0,0 +1,14 @@
+export interface LiteFormErrorEntry {
+    fieldKey: string;
+    label: string;
+    message: string;
+    /** 可选的表单控件 id；提供后错误项会链接到该控件。 */
+    fieldId?: string;
+}
+type $$ComponentProps = {
+    errors?: LiteFormErrorEntry[];
+    title?: string;
+};
+declare const LiteErrorSummary: import("svelte").Component<$$ComponentProps, {}, "">;
+type LiteErrorSummary = ReturnType<typeof LiteErrorSummary>;
+export default LiteErrorSummary;

package/dist/components/LiteFileUpload.svelte

@@ -0,0 +1,53 @@
+<script lang="ts">
+  interface Props {
+    name: string;
+    label: string;
+    id?: string;
+    form?: string;
+    accept?: string;
+    multiple?: boolean;
+    required?: boolean;
+    disabled?: boolean;
+    /** Explicit undefined clears a previously displayed server error. */
+    error?: string | undefined;
+    class?: string;
+  }
+
+  let {
+    name,
+    label,
+    id,
+    form,
+    accept,
+    multiple = false,
+    required = false,
+    disabled = false,
+    error,
+    class: className = '',
+  }: Props = $props();
+
+  const generatedId = $props.id();
+  const controlId = $derived(id ?? generatedId);
+</script>
+
+<div class={`lite-form-group ${className}`}>
+  <label for={controlId}>{label}</label>
+  <!-- 保留可见原生控件，无客户端脚本时仍可显示浏览器选择状态。 -->
+  <input
+    type="file"
+    id={controlId}
+    {name}
+    {form}
+    {accept}
+    {multiple}
+    {required}
+    {disabled}
+    class:lite-input-error={!!error}
+    class="lite-input"
+    aria-invalid={error ? 'true' : undefined}
+    aria-describedby={error ? `${controlId}-error` : undefined}
+  />
+  {#if error}
+    <p id={`${controlId}-error`} class="lite-error-text" role="alert">{error}</p>
+  {/if}
+</div>

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

@@ -0,0 +1,16 @@
+interface Props {
+    name: string;
+    label: string;
+    id?: string;
+    form?: string;
+    accept?: string;
+    multiple?: boolean;
+    required?: boolean;
+    disabled?: boolean;
+    /** Explicit undefined clears a previously displayed server error. */
+    error?: string | undefined;
+    class?: string;
+}
+declare const LiteFileUpload: import("svelte").Component<Props, {}, "">;
+type LiteFileUpload = ReturnType<typeof LiteFileUpload>;
+export default LiteFileUpload;

package/dist/components/LiteFilterBuilder.svelte

@@ -1,6 +1,9 @@
 <script lang="ts">
   import type { CrudOperator, FieldDefinition, Filter } from '@svadmin/core';
+  import { filterOperatorsForField as operatorsForField, isNumericFilterField as isNumericField,
+    isCollectionFilterOperator, isFilterCollectionValue } from '@svadmin/core';
   import { t } from '@svadmin/core/i18n';
+  import { readFilterForm } from '../filter-form.js';
 
   export interface FilterRuleItem {
     id: string;
@@ -9,10 +12,13 @@
     value: unknown;
   }
 
+  type FilterNode =
+    | { kind: 'group'; id: string; operator: 'and' | 'or'; children: FilterNode[] }
+    | { kind: 'rule'; id: string; field: string; operator: CrudOperator; value: unknown; readonly?: boolean };
+
   interface Props {
     fields?: FieldDefinition[];
     filters?: Filter[];
-    logicalOperator?: 'and' | 'or';
     action?: string;
     method?: 'GET' | 'POST';
     disabled?: boolean;
@@ -22,184 +28,191 @@
   let {
     fields = [],
     filters = [],
-    logicalOperator = 'and',
     action = '',
+    method = 'GET',
     disabled = false,
+    onApply,
   }: Props = $props();
+  let validationError = $state<string | undefined>();
 
-  const operatorOptions: { value: CrudOperator; label: string }[] = [
+  const instanceId = $props.id();
+  const formId = `${instanceId}-filter-form`;
+  const operatorOptions = $derived<{ value: CrudOperator; label: string }[]>([
     { value: 'eq', label: '= 等于' },
     { value: 'ne', label: '!= 不等于' },
     { value: 'contains', label: '包含' },
     { value: 'ncontains', label: '不包含' },
+    { value: 'startswith', label: '开头为' },
+    { value: 'endswith', label: '结尾为' },
     { value: 'gt', label: '> 大于' },
     { value: 'gte', label: '>= 大于等于' },
     { value: 'lt', label: '< 小于' },
     { value: 'lte', label: '<= 小于等于' },
-    { value: 'null', label: '为空 (null)' },
+    { value: 'in', label: t('filter.in') },
+    { value: 'nin', label: t('filter.nin') },
+    { value: 'between', label: t('filter.between') },
+    { value: 'nbetween', label: t('filter.nbetween') },
+    { value: 'null', label: '为空' },
     { value: 'nnull', label: '不为空' },
-  ];
+  ]);
 
-  // Flatten initial filters or fallback to 1 empty rule
-  const initialRules = $derived.by(() => {
-    if (filters.length > 0) {
-      return filters.map((f, i) => ({
-        id: `rule_${i}`,
-        field: 'field' in f ? String(f.field) : (fields[0]?.key ?? ''),
-        operator: ('operator' in f ? f.operator : 'eq') as CrudOperator,
-        value: 'value' in f ? f.value : '',
-      }));
-    }
-    return [
-      {
-        id: 'rule_0',
-        field: fields[0]?.key ?? '',
-        operator: 'eq' as CrudOperator,
-        value: '',
-      },
-    ];
-  });
-</script>
+  const availableFields = $derived(fields.filter(field => field.filterable !== false));
 
-<div class="lite-filter-builder lite-form-group">
-  <div class="lite-filter-header">
-    <div class="lite-filter-title">
-      <strong>{t('common.filters') || '高级多条件筛选'}</strong>
-      <select
-        name="logical_op"
-        class="lite-select lite-select-sm"
-        style="width: 120px; display: inline-block; margin-left: 8px;"
-        value={logicalOperator}
-        {disabled}
-      >
-        <option value="and">符合全部 (AND)</option>
-        <option value="or">符合任一 (OR)</option>
-      </select>
-    </div>
-    <div>
-      <button type="submit" name="_action" value="add_filter_rule" class="lite-btn lite-btn-sm" {disabled}>
-        + 添加条件
-      </button>
-    </div>
-  </div>
+  function nodeFromFilter(filter: Filter, path: string): FilterNode {
+    if ('field' in filter) {
+      const field = availableFields.find(candidate => candidate.key === filter.field);
+      const editable = field !== undefined
+        && operatorsForField(field).includes(filter.operator)
+        && (filter.operator === 'null' || filter.operator === 'nnull'
+          ? filter.value === null
+          : isCollectionFilterOperator(filter.operator)
+            ? isFilterCollectionValue(field, filter.operator, filter.value)
+          : isNumericField(field)
+            ? typeof filter.value === 'number' && Number.isFinite(filter.value)
+            : field.type === 'boolean'
+              ? typeof filter.value === 'boolean'
+              : field.type === 'select'
+                ? field.options?.some(option => Object.is(option.value, filter.value)) === true
+                : typeof filter.value === 'string');
+      return { kind: 'rule', id: `rule-${path}`, field: filter.field, operator: filter.operator, value: filter.value, readonly: !editable };
+    }
+    return {
+      kind: 'group',
+      id: `group-${path}`,
+      operator: filter.operator,
+      children: filter.value.map((child, index) => nodeFromFilter(child, `${path}-${index}`)),
+    };
+  }
 
-  <div class="lite-filter-rules">
-    {#each initialRules as rule, idx (rule.id)}
-      <div class="lite-filter-row">
-        <!-- Field select -->
-        <select
-          name="filter_field_{idx}"
-          class="lite-select lite-filter-field"
-          value={rule.field}
-          {disabled}
-        >
-          {#each fields as fld (fld.key)}
-            <option value={fld.key}>{fld.label || fld.key}</option>
-          {/each}
-        </select>
+  const nodes = $derived(filters.map((filter, index) => nodeFromFilter(filter, String(index))));
 
-        <!-- Operator select -->
-        <select
-          name="filter_op_{idx}"
-          class="lite-select lite-filter-op"
-          value={rule.operator}
-          {disabled}
-        >
-          {#each operatorOptions as op (op.value)}
-            <option value={op.value}>{op.label}</option>
-          {/each}
-        </select>
+  function readValue(node: FilterNode): unknown {
+    return node.kind === 'rule' ? node.value : undefined;
+  }
 
-        <!-- Value input -->
-        {#if rule.operator !== 'null' && rule.operator !== 'nnull'}
-          <input
-            type="text"
-            name="filter_val_{idx}"
-            class="lite-input lite-filter-val"
-            value={String(rule.value ?? '')}
-            placeholder="输入筛选值..."
-            {disabled}
-          />
-        {/if}
+  function handleSubmit(event: SubmitEvent): void {
+    if (!onApply) return;
+    const submitter = event.submitter;
+    if (submitter instanceof HTMLButtonElement && submitter.name === '_action') return;
+    event.preventDefault();
+    try {
+      validationError = undefined;
+      onApply(readFilterForm(filters, fields, new FormData(event.currentTarget as HTMLFormElement)));
+    } catch (error) {
+      validationError = error instanceof Error ? error.message : 'Invalid filters';
+    }
+  }
 
-        <!-- Remove row button -->
-        <button
-          type="submit"
-          name="_action"
-          value="remove_filter_rule_{idx}"
-          class="lite-btn lite-btn-sm lite-btn-danger"
-          {disabled}
-          title="删除此行条件"
-        >
-          ✕
-        </button>
-      </div>
-    {/each}
-  </div>
+</script>
 
-  <div class="lite-filter-footer">
-    <button type="submit" class="lite-btn lite-btn-primary">
+<div class="lite-filter-builder lite-form-group">
+  <div class="lite-filter-header">
+    <strong>{t('common.filters') || '高级多条件筛选'}</strong>
+    <button type="submit" form={formId} class="lite-btn lite-btn-primary lite-btn-sm" disabled={disabled}>
       应用筛选
     </button>
-    <a href={action || '?'} class="lite-btn" style="margin-left: 8px;">
-      重置
-    </a>
   </div>
+
+  <form id={formId} {action} {method} class="lite-filter-form" onsubmit={handleSubmit}>
+    {#if validationError}<p role="alert" class="lite-error">{validationError}</p>{/if}
+    {#snippet renderNode(node: FilterNode, path: string, isRoot = false)}
+      {#if node.kind === 'group'}
+        <fieldset class="lite-filter-group" data-testid={isRoot ? 'lite-filter-root' : 'lite-filter-group'}>
+          <legend>
+            <label>
+              逻辑组
+              <select name={`filters[${path}][operator]`} value={node.operator} {disabled}>
+                <option value="and">AND (且)</option>
+                <option value="or">OR (或)</option>
+              </select>
+            </label>
+          </legend>
+          {#each node.children as child, index (child.id)}
+            {@render renderNode(child, `${path}.value.${index}`)}
+          {:else}
+            <p class="lite-hint">暂无筛选条件</p>
+          {/each}
+          <button type="submit" name="_action" value={`add_filter_rule:${path}`} class="lite-btn lite-btn-sm" {disabled}>添加条件</button>
+          <button type="submit" name="_action" value={`add_filter_group:${path}`} class="lite-btn lite-btn-sm" {disabled}>添加条件组</button>
+        </fieldset>
+      {:else}
+        <div class="lite-filter-row" data-testid="lite-filter-rule">
+          {#if node.readonly}
+            <output aria-label={t('filter.readonly')}>{node.field} {node.operator} {JSON.stringify(node.value)}</output>
+            <!-- 严格解析器拒绝非协议属性，防止原生文本传输改变历史条件类型。 -->
+            <input type="hidden" name={`filters[${path}][invalid]`} value="true" {disabled} />
+            <input type="hidden" name={`filters[${path}][field]`} value={node.field} {disabled} />
+            <input type="hidden" name={`filters[${path}][operator]`} value={node.operator} {disabled} />
+            {#if node.operator !== 'null' && node.operator !== 'nnull'}
+              <input type="hidden" name={`filters[${path}][value]`} value={typeof node.value === 'string' ? node.value : JSON.stringify(node.value)} {disabled} />
+            {/if}
+          {:else}
+            <select name={`filters[${path}][field]`} value={node.field} {disabled}>
+              {#each availableFields as field (field.key)}<option value={field.key}>{field.label || field.key}</option>{/each}
+            </select>
+            <select name={`filters[${path}][operator]`} value={node.operator} {disabled}>
+              {#each operatorOptions.filter(operator => operatorsForField(availableFields.find(field => field.key === node.field)).includes(operator.value)) as operator (operator.value)}<option value={operator.value}>{operator.label}</option>{/each}
+            </select>
+            {#if node.operator !== 'null' && node.operator !== 'nnull'}
+              {#if isCollectionFilterOperator(node.operator) && Array.isArray(node.value)}
+                {@const field = availableFields.find(field => field.key === node.field)}
+                <div class="lite-filter-values">
+                  {#each node.value as item, index (index)}
+                    {@const label = node.operator === 'between' || node.operator === 'nbetween'
+                      ? t(index === 0 ? 'filter.rangeStart' : 'filter.rangeEnd')
+                      : t('filter.collectionItem', { number: String(index + 1) })}
+                    {#if field?.type === 'select'}
+                      <select aria-label={label} name={`filters[${path}][values.${index}]`} value={JSON.stringify(item)} {disabled}>
+                        {#each field.options ?? [] as option, optionIndex (optionIndex)}
+                          <option value={JSON.stringify(option.value)} disabled={option.disabled}>{option.label}</option>
+                        {/each}
+                      </select>
+                    {:else if field?.type === 'boolean'}
+                      <select aria-label={label} name={`filters[${path}][values.${index}]`} value={String(item)} {disabled}>
+                        <option value="true">{t('common.yes')}</option>
+                        <option value="false">{t('common.no')}</option>
+                      </select>
+                    {:else}
+                      <input aria-label={label} name={`filters[${path}][values.${index}]`}
+                        type={isNumericField(field) ? 'number' : 'text'} step="any" value={String(item)} {disabled} />
+                    {/if}
+                  {/each}
+                </div>
+              {:else if availableFields.find(field => field.key === node.field)?.type === 'boolean'}
+                <select name={`filters[${path}][value]`} value={String(readValue(node) ?? '')} {disabled}>
+                  <option value="">请选择</option><option value="true">是</option><option value="false">否</option>
+                </select>
+              {:else}
+                <input name={`filters[${path}][value]`} type={isNumericField(availableFields.find(field => field.key === node.field)) ? 'number' : 'text'} value={String(readValue(node) ?? '')} {disabled} />
+              {/if}
+            {/if}
+          {/if}
+          <button type="submit" name="_action" value={`remove_filter_rule:${path}`} class="lite-btn lite-btn-sm lite-btn-danger" {disabled} title="删除此行条件">删除</button>
+        </div>
+      {/if}
+    {/snippet}
+
+    {#if nodes.length === 0}
+      <p class="lite-hint">暂无筛选条件，请先添加规则。</p>
+      <button type="submit" name="_action" value="add_filter_rule:root" class="lite-btn lite-btn-sm" {disabled}>添加条件</button>
+    {:else}
+      {#each nodes as node, index (node.id)}
+        {@render renderNode(node, String(index), node.kind === 'group' && nodes.length === 1)}
+      {/each}
+    {/if}
+  </form>
 </div>
 
 <style>
-  .lite-filter-builder {
-    border: 1px solid #cbd5e1;
-    border-radius: 6px;
-    padding: 14px;
-    background: #f8fafc;
-    margin-bottom: 16px;
-  }
-  .lite-filter-header {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    margin-bottom: 12px;
-  }
-  .lite-filter-rules {
-    display: flex;
-    flex-direction: column;
-    margin-bottom: 12px;
-  }
-  .lite-filter-row {
-    display: flex;
-    align-items: center;
-    background: #ffffff;
-    padding: 8px;
-    border: 1px solid #e2e8f0;
-    border-radius: 4px;
-    margin-bottom: 8px;
-  }
-  .lite-filter-row:last-child {
-    margin-bottom: 0;
-  }
-  .lite-filter-row > * {
-    margin-right: 8px;
-  }
-  .lite-filter-row > *:last-child {
-    margin-right: 0;
-  }
-  .lite-filter-field {
-    flex: 2;
-    min-width: 130px;
-  }
-  .lite-filter-op {
-    flex: 2;
-    min-width: 120px;
-  }
-  .lite-filter-val {
-    flex: 3;
-    min-width: 140px;
-  }
-  .lite-filter-footer {
-    display: flex;
-    align-items: center;
-    border-top: 1px solid #e2e8f0;
-    padding-top: 10px;
-  }
+  .lite-filter-builder { border: 1px solid #cbd5e1; border-radius: 6px; padding: 14px; background: #f8fafc; margin-bottom: 16px; }
+  .lite-filter-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
+  .lite-filter-group { border: 1px solid #e2e8f0; border-radius: 4px; padding: 10px; margin-bottom: 8px; background: #fff; }
+  .lite-filter-row { display: flex; align-items: center; padding: 8px; border: 1px solid #e2e8f0; border-radius: 4px; margin-bottom: 8px; background: #fff; }
+  .lite-filter-row > * { min-width: 120px; flex: 1; }
+  .lite-filter-row > * + * { margin-left: 8px; }
+  .lite-filter-row .lite-btn { flex: 0 0 auto; }
+  .lite-filter-values { display: flex; flex-wrap: wrap; min-width: 0; }
+  .lite-filter-values > * { width: 160px; max-width: 100%; box-sizing: border-box; margin: 0 8px 8px 0; }
+  .lite-hint { color: #64748b; font-size: 12px; }
+  .lite-btn { margin-right: 6px; }
 </style>

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

@@ -8,7 +8,6 @@ export interface FilterRuleItem {
 interface Props {
     fields?: FieldDefinition[];
     filters?: Filter[];
-    logicalOperator?: 'and' | 'or';
     action?: string;
     method?: 'GET' | 'POST';
     disabled?: boolean;

package/dist/components/LiteGanttChart.svelte

@@ -1,4 +1,6 @@
 <script lang="ts">
+  import { useTranslation } from '@svadmin/core/i18n';
+  import { GANTT_LIMITS, validateGantt } from '@svadmin/core/gantt';
   export interface GanttTask {
     id: string;
     title: string;
@@ -6,12 +8,18 @@
     durationDays: number;
     progress?: number;
     status?: 'planned' | 'in_progress' | 'completed' | 'delayed';
+    dependencies?: string[];
+    milestone?: boolean;
   }
 
   interface Props {
     tasks?: GanttTask[];
     totalDays?: number;
     dayLabelPrefix?: string;
+    loading?: boolean;
+    error?: string | undefined;
+    retryHref?: string;
+    ariaLabel?: string;
     class?: string;
   }
 
@@ -19,48 +27,73 @@
     tasks = [],
     totalDays = 14,
     dayLabelPrefix = 'D',
+    loading = false,
+    error,
+    retryHref,
+    ariaLabel,
     class: className = '',
   }: Props = $props();
 
   const days = $derived(
-    Array.from({ length: totalDays }, (_, i) => `${dayLabelPrefix}${i + 1}`)
+    Array.from({ length: Number.isSafeInteger(totalDays) && totalDays > 0 && totalDays <= GANTT_LIMITS.days ? totalDays : 0 }, (_, i) => `${dayLabelPrefix}${i + 1}`)
   );
+  const i18n = useTranslation();
+  const validationError = $derived(validateGantt(loading || error ? [] : tasks, totalDays));
+  const displayError = $derived(error || (validationError ? i18n.t(`gantt.${validationError}`) : ''));
+  const safeRetryHref = $derived(retryHref?.startsWith('/') && !/^\/[\\/]/.test(retryHref)
+    && !retryHref.includes('\\')
+    && ![...retryHref].some(char => char.charCodeAt(0) <= 32 || char.charCodeAt(0) === 127) ? retryHref : undefined);
 </script>
 
-<div class="sv-lite-gantt-container {className}">
+<div class="sv-lite-gantt-container {className}" aria-busy={loading}>
   <div class="sv-lite-gantt-title">
-    <strong>Project Schedule</strong> ({tasks.length} tasks / {totalDays} days)
+    <strong>{i18n.t('gantt.title')}</strong> ({i18n.t('gantt.summary', { tasks: tasks.length, days: totalDays })})
   </div>
 
-  <table class="sv-lite-gantt-table">
+  {#if loading}
+    <div role="status">{i18n.t('common.loading')}</div>
+  {:else if displayError}
+    <div role="alert">{displayError}</div>
+    {#if error && safeRetryHref}<a href={safeRetryHref}>{i18n.t('common.retry')}</a>{/if}
+  {:else if tasks.length === 0}
+    <div role="status">{i18n.t('gantt.noData')}</div>
+  {:else}
+  <table class="sv-lite-gantt-table" aria-label={ariaLabel ?? i18n.t('gantt.title')}>
     <thead>
       <tr>
-        <th class="sv-lite-th-task">Task</th>
-        <th class="sv-lite-th-status">Status</th>
+        <th scope="col" class="sv-lite-th-task">{i18n.t('gantt.task')}</th>
+        <th scope="col" class="sv-lite-th-status">{i18n.t('gantt.status')}</th>
         {#each days as day (day)}
-          <th class="sv-lite-th-day">{day}</th>
+          <th scope="col" class="sv-lite-th-day">{day}</th>
         {/each}
       </tr>
     </thead>
     <tbody>
       {#each tasks as task (task.id)}
         <tr>
-          <td class="sv-lite-td-task">{task.title}</td>
+          <th scope="row" class="sv-lite-td-task" aria-label={`${task.title}, ${task.milestone
+            ? i18n.t('gantt.milestone', { day: task.startDay + 1 })
+            : i18n.t('gantt.range', { start: task.startDay + 1, end: task.startDay + task.durationDays })}`}>{task.title}</th>
           <td class="sv-lite-td-status">
-            <span class="sv-lite-gantt-badge sv-lite-{task.status ?? 'planned'}">{task.status ?? 'planned'}</span>
+            <span class="sv-lite-gantt-badge sv-lite-{task.status ?? 'planned'}">{i18n.t(`gantt.${task.status ?? 'planned'}`)}</span>
           </td>
           {#each days as _, dIdx (dIdx)}
             {@const isCovered = dIdx >= task.startDay && dIdx < task.startDay + task.durationDays}
-            <td class="sv-lite-td-cell {isCovered ? 'sv-lite-cell-active sv-lite-bg-' + (task.status ?? 'planned') : ''}">
+            {@const isMilestone = task.milestone && dIdx === task.startDay}
+            <td aria-label={isMilestone ? `${task.title}, ${i18n.t('gantt.milestone', { day: dIdx + 1 })}`
+              : isCovered ? `${task.title}, ${days[dIdx]}, ${i18n.t(`gantt.${task.status ?? 'planned'}`)}` : undefined}
+              class="sv-lite-td-cell {isCovered ? 'sv-lite-cell-active sv-lite-bg-' + (task.status ?? 'planned') : ''}">
               {#if isCovered && dIdx === task.startDay && task.progress !== undefined}
                 <span class="sv-lite-cell-progress">{task.progress}%</span>
               {/if}
+              {#if isMilestone}<span aria-hidden="true">◆</span>{/if}
             </td>
           {/each}
         </tr>
       {/each}
     </tbody>
   </table>
+  {/if}
 </div>
 
 <style>

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

@@ -5,11 +5,17 @@ export interface GanttTask {
     durationDays: number;
     progress?: number;
     status?: 'planned' | 'in_progress' | 'completed' | 'delayed';
+    dependencies?: string[];
+    milestone?: boolean;
 }
 interface Props {
     tasks?: GanttTask[];
     totalDays?: number;
     dayLabelPrefix?: string;
+    loading?: boolean;
+    error?: string | undefined;
+    retryHref?: string;
+    ariaLabel?: string;
     class?: string;
 }
 declare const LiteGanttChart: import("svelte").Component<Props, {}, "">;