@svadmin/ui 0.78.2 → 0.79.0

package/dist/app.css

@@ -9551,6 +9551,191 @@ details.svadmin-collapsible:not([open]) > :not(summary) {
   max-width: 32rem;
 }
 
+/* --- Auditable content primitives --- */
+.svadmin-filter-bottom-sheet[data-slot="sheet"] {
+  inset-block-start: auto;
+  inset-block-end: 0;
+  inset-inline: 0;
+  width: 100%;
+  max-width: none;
+  height: auto;
+  max-height: 85dvh;
+  overflow-y: auto;
+  padding: 1rem 1rem max(1rem, env(safe-area-inset-bottom));
+  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
+}
+.svadmin-filter-bottom-sheet .svadmin-sheet-close { min-width: 44px; min-height: 44px; }
+.svadmin-filter-bottom-sheet [data-slot="sheet-content"] { display: grid; gap: 1rem; }
+.layout-clean-flat [data-svadmin-audit-section],
+.layout-clean-flat [data-svadmin-chart-container],
+.layout-clean-flat [data-svadmin-evidence-card],
+.layout-clean-flat [data-svadmin-coverage-matrix] {
+  min-width: 0;
+}
+
+.layout-clean-flat [data-svadmin-audit-section] {
+  position: relative;
+  border-block: 1px solid var(--svadmin-border, var(--border));
+  background: var(--svadmin-surface, var(--card));
+}
+
+.layout-clean-flat [data-svadmin-audit-section]::before,
+.layout-clean-flat [data-svadmin-evidence-card]::before {
+  position: absolute;
+  inset-block: 0;
+  inset-inline-start: 0;
+  width: 4px;
+  background: var(--svadmin-accent-color, var(--primary));
+  content: "";
+}
+
+.layout-clean-flat [data-svadmin-audit-section][data-accent="info"],
+.layout-clean-flat [data-svadmin-coverage-matrix] [data-accent="info"],
+.layout-clean-flat [data-svadmin-evidence-card][data-accent="info"] {
+  --svadmin-accent-color: var(--info);
+}
+
+.layout-clean-flat [data-svadmin-audit-section][data-accent="success"],
+.layout-clean-flat [data-svadmin-coverage-matrix] [data-accent="success"],
+.layout-clean-flat [data-svadmin-evidence-card][data-accent="success"] {
+  --svadmin-accent-color: var(--success);
+}
+
+.layout-clean-flat [data-svadmin-audit-section][data-accent="warning"],
+.layout-clean-flat [data-svadmin-coverage-matrix] [data-accent="warning"],
+.layout-clean-flat [data-svadmin-evidence-card][data-accent="warning"] {
+  --svadmin-accent-color: var(--warning);
+}
+
+.layout-clean-flat [data-svadmin-audit-section][data-accent="danger"],
+.layout-clean-flat [data-svadmin-coverage-matrix] [data-accent="danger"],
+.layout-clean-flat [data-svadmin-evidence-card][data-accent="danger"] {
+  --svadmin-accent-color: var(--destructive);
+}
+
+.layout-clean-flat [data-svadmin-audit-section][data-accent="neutral"],
+.layout-clean-flat [data-svadmin-coverage-matrix] [data-accent="neutral"],
+.layout-clean-flat [data-svadmin-evidence-card][data-accent="neutral"] {
+  --svadmin-accent-color: var(--muted-foreground);
+}
+
+.svadmin-audit-section__header,
+.svadmin-chart-container__header,
+.svadmin-evidence-card__header {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 1rem;
+}
+
+.svadmin-audit-section__header {
+  padding: 1rem 1.25rem;
+  border-block-end: 1px solid var(--svadmin-border, var(--border));
+}
+
+.svadmin-audit-section__heading,
+.svadmin-chart-container__header > div {
+  min-width: 0;
+}
+
+.svadmin-audit-section__eyebrow {
+  margin: 0 0 0.25rem;
+  color: var(--svadmin-text-muted, var(--muted-foreground));
+  font-size: 0.6875rem;
+  font-weight: 600;
+  letter-spacing: 0;
+}
+
+.svadmin-audit-section__header h2,
+.svadmin-chart-container__header h3,
+.svadmin-evidence-card__header h3 {
+  margin: 0;
+  color: var(--svadmin-text, var(--foreground));
+  font-size: 0.9375rem;
+  font-weight: 600;
+  line-height: 1.3;
+}
+
+.svadmin-audit-section__description,
+.svadmin-chart-container__header p,
+.svadmin-evidence-card__description,
+.svadmin-evidence-card__source {
+  margin: 0.25rem 0 0;
+  color: var(--svadmin-text-muted, var(--muted-foreground));
+  font-size: 0.75rem;
+  line-height: 1.45;
+}
+
+.svadmin-audit-section__body {
+  min-width: 0;
+}
+
+.svadmin-audit-section__header,
+.svadmin-audit-section__body,
+.svadmin-evidence-card__header,
+.svadmin-evidence-card__description,
+.svadmin-evidence-card__source {
+  overflow-wrap: anywhere;
+}
+.svadmin-audit-section__actions { flex-shrink: 0; max-width: 100%; }
+.svadmin-audit-notice {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.75rem;
+  padding: 0.75rem 1rem;
+  border-inline-start: 4px solid var(--warning);
+  background: var(--muted);
+  font-size: 0.8125rem;
+}
+.svadmin-audit-notice[data-state="readonly"] { border-inline-start-color: var(--muted-foreground); }
+.svadmin-status-pill[data-slot="badge"] { border-radius: 999px; white-space: normal; overflow-wrap: anywhere; max-width: 100%; }
+.layout-clean-flat [data-svadmin-coverage-matrix]:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
+.layout-clean-flat [data-svadmin-coverage-matrix] table { width: 100%; border-collapse: collapse; font-size: 0.8125rem; }
+.layout-clean-flat [data-svadmin-coverage-matrix] caption { padding: 0.75rem; text-align: start; font-weight: 600; }
+.layout-clean-flat [data-svadmin-coverage-matrix] :is(th, td) { padding: 0.75rem; text-align: start; min-width: 9rem; overflow-wrap: anywhere; border-bottom: 1px solid var(--border); }
+.layout-clean-flat [data-svadmin-coverage-matrix] thead { color: var(--muted-foreground); background: var(--muted); }
+.layout-clean-flat [data-svadmin-coverage-matrix] tbody th { border-inline-start: 4px solid var(--svadmin-accent-color, var(--border)); }
+.svadmin-evidence-card__header { flex-wrap: wrap; }
+@media (max-width: 767px) {
+  .svadmin-audit-section__header { flex-wrap: wrap; }
+  .svadmin-audit-section__actions a { display: inline-flex; align-items: center; min-height: 44px; }
+}
+
+.svadmin-chart-container__body {
+  min-width: 0;
+  padding: 1rem;
+}
+
+.layout-clean-flat [data-svadmin-evidence-card] {
+  position: relative;
+  min-width: 0;
+  border: 1px solid var(--svadmin-border, var(--border));
+  background: var(--svadmin-surface, var(--card));
+  padding: 1rem 1rem 1rem 1.25rem;
+}
+
+.svadmin-evidence-card__body {
+  margin-top: 0.75rem;
+  color: var(--svadmin-text, var(--foreground));
+  font-size: 0.8125rem;
+  line-height: 1.5;
+}
+
+.svadmin-evidence-card__source {
+  margin-top: 1rem;
+  color: var(--primary);
+  font-weight: 600;
+}
+
+.layout-clean-flat [data-svadmin-coverage-matrix] {
+  overflow-x: auto;
+  border: 1px solid var(--svadmin-border, var(--border));
+  background: var(--svadmin-surface, var(--card));
+}
+
+
 @media (min-width: 768px) {
   .layout-clean-flat [data-svadmin-form-settings] [data-svadmin-field] {
     display: grid;
@@ -10108,7 +10293,8 @@ details.svadmin-collapsible:not([open]) > :not(summary) {
 }
 
 .layout-clean-flat[data-theme="stripe"] .sidebar-menu-item-active::before {
-  content: none;
+  width: 4px;
+  content: "";
 }
 
 .layout-clean-flat[data-theme="stripe"] .sidebar-menu-item-active svg {

package/dist/app.theme.css

@@ -9551,6 +9551,191 @@ details.svadmin-collapsible:not([open]) > :not(summary) {
   max-width: 32rem;
 }
 
+/* --- Auditable content primitives --- */
+.svadmin-filter-bottom-sheet[data-slot="sheet"] {
+  inset-block-start: auto;
+  inset-block-end: 0;
+  inset-inline: 0;
+  width: 100%;
+  max-width: none;
+  height: auto;
+  max-height: 85dvh;
+  overflow-y: auto;
+  padding: 1rem 1rem max(1rem, env(safe-area-inset-bottom));
+  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
+}
+.svadmin-filter-bottom-sheet .svadmin-sheet-close { min-width: 44px; min-height: 44px; }
+.svadmin-filter-bottom-sheet [data-slot="sheet-content"] { display: grid; gap: 1rem; }
+.layout-clean-flat [data-svadmin-audit-section],
+.layout-clean-flat [data-svadmin-chart-container],
+.layout-clean-flat [data-svadmin-evidence-card],
+.layout-clean-flat [data-svadmin-coverage-matrix] {
+  min-width: 0;
+}
+
+.layout-clean-flat [data-svadmin-audit-section] {
+  position: relative;
+  border-block: 1px solid var(--svadmin-border, var(--border));
+  background: var(--svadmin-surface, var(--card));
+}
+
+.layout-clean-flat [data-svadmin-audit-section]::before,
+.layout-clean-flat [data-svadmin-evidence-card]::before {
+  position: absolute;
+  inset-block: 0;
+  inset-inline-start: 0;
+  width: 4px;
+  background: var(--svadmin-accent-color, var(--primary));
+  content: "";
+}
+
+.layout-clean-flat [data-svadmin-audit-section][data-accent="info"],
+.layout-clean-flat [data-svadmin-coverage-matrix] [data-accent="info"],
+.layout-clean-flat [data-svadmin-evidence-card][data-accent="info"] {
+  --svadmin-accent-color: var(--info);
+}
+
+.layout-clean-flat [data-svadmin-audit-section][data-accent="success"],
+.layout-clean-flat [data-svadmin-coverage-matrix] [data-accent="success"],
+.layout-clean-flat [data-svadmin-evidence-card][data-accent="success"] {
+  --svadmin-accent-color: var(--success);
+}
+
+.layout-clean-flat [data-svadmin-audit-section][data-accent="warning"],
+.layout-clean-flat [data-svadmin-coverage-matrix] [data-accent="warning"],
+.layout-clean-flat [data-svadmin-evidence-card][data-accent="warning"] {
+  --svadmin-accent-color: var(--warning);
+}
+
+.layout-clean-flat [data-svadmin-audit-section][data-accent="danger"],
+.layout-clean-flat [data-svadmin-coverage-matrix] [data-accent="danger"],
+.layout-clean-flat [data-svadmin-evidence-card][data-accent="danger"] {
+  --svadmin-accent-color: var(--destructive);
+}
+
+.layout-clean-flat [data-svadmin-audit-section][data-accent="neutral"],
+.layout-clean-flat [data-svadmin-coverage-matrix] [data-accent="neutral"],
+.layout-clean-flat [data-svadmin-evidence-card][data-accent="neutral"] {
+  --svadmin-accent-color: var(--muted-foreground);
+}
+
+.svadmin-audit-section__header,
+.svadmin-chart-container__header,
+.svadmin-evidence-card__header {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 1rem;
+}
+
+.svadmin-audit-section__header {
+  padding: 1rem 1.25rem;
+  border-block-end: 1px solid var(--svadmin-border, var(--border));
+}
+
+.svadmin-audit-section__heading,
+.svadmin-chart-container__header > div {
+  min-width: 0;
+}
+
+.svadmin-audit-section__eyebrow {
+  margin: 0 0 0.25rem;
+  color: var(--svadmin-text-muted, var(--muted-foreground));
+  font-size: 0.6875rem;
+  font-weight: 600;
+  letter-spacing: 0;
+}
+
+.svadmin-audit-section__header h2,
+.svadmin-chart-container__header h3,
+.svadmin-evidence-card__header h3 {
+  margin: 0;
+  color: var(--svadmin-text, var(--foreground));
+  font-size: 0.9375rem;
+  font-weight: 600;
+  line-height: 1.3;
+}
+
+.svadmin-audit-section__description,
+.svadmin-chart-container__header p,
+.svadmin-evidence-card__description,
+.svadmin-evidence-card__source {
+  margin: 0.25rem 0 0;
+  color: var(--svadmin-text-muted, var(--muted-foreground));
+  font-size: 0.75rem;
+  line-height: 1.45;
+}
+
+.svadmin-audit-section__body {
+  min-width: 0;
+}
+
+.svadmin-audit-section__header,
+.svadmin-audit-section__body,
+.svadmin-evidence-card__header,
+.svadmin-evidence-card__description,
+.svadmin-evidence-card__source {
+  overflow-wrap: anywhere;
+}
+.svadmin-audit-section__actions { flex-shrink: 0; max-width: 100%; }
+.svadmin-audit-notice {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.75rem;
+  padding: 0.75rem 1rem;
+  border-inline-start: 4px solid var(--warning);
+  background: var(--muted);
+  font-size: 0.8125rem;
+}
+.svadmin-audit-notice[data-state="readonly"] { border-inline-start-color: var(--muted-foreground); }
+.svadmin-status-pill[data-slot="badge"] { border-radius: 999px; white-space: normal; overflow-wrap: anywhere; max-width: 100%; }
+.layout-clean-flat [data-svadmin-coverage-matrix]:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
+.layout-clean-flat [data-svadmin-coverage-matrix] table { width: 100%; border-collapse: collapse; font-size: 0.8125rem; }
+.layout-clean-flat [data-svadmin-coverage-matrix] caption { padding: 0.75rem; text-align: start; font-weight: 600; }
+.layout-clean-flat [data-svadmin-coverage-matrix] :is(th, td) { padding: 0.75rem; text-align: start; min-width: 9rem; overflow-wrap: anywhere; border-bottom: 1px solid var(--border); }
+.layout-clean-flat [data-svadmin-coverage-matrix] thead { color: var(--muted-foreground); background: var(--muted); }
+.layout-clean-flat [data-svadmin-coverage-matrix] tbody th { border-inline-start: 4px solid var(--svadmin-accent-color, var(--border)); }
+.svadmin-evidence-card__header { flex-wrap: wrap; }
+@media (max-width: 767px) {
+  .svadmin-audit-section__header { flex-wrap: wrap; }
+  .svadmin-audit-section__actions a { display: inline-flex; align-items: center; min-height: 44px; }
+}
+
+.svadmin-chart-container__body {
+  min-width: 0;
+  padding: 1rem;
+}
+
+.layout-clean-flat [data-svadmin-evidence-card] {
+  position: relative;
+  min-width: 0;
+  border: 1px solid var(--svadmin-border, var(--border));
+  background: var(--svadmin-surface, var(--card));
+  padding: 1rem 1rem 1rem 1.25rem;
+}
+
+.svadmin-evidence-card__body {
+  margin-top: 0.75rem;
+  color: var(--svadmin-text, var(--foreground));
+  font-size: 0.8125rem;
+  line-height: 1.5;
+}
+
+.svadmin-evidence-card__source {
+  margin-top: 1rem;
+  color: var(--primary);
+  font-weight: 600;
+}
+
+.layout-clean-flat [data-svadmin-coverage-matrix] {
+  overflow-x: auto;
+  border: 1px solid var(--svadmin-border, var(--border));
+  background: var(--svadmin-surface, var(--card));
+}
+
+
 @media (min-width: 768px) {
   .layout-clean-flat [data-svadmin-form-settings] [data-svadmin-field] {
     display: grid;
@@ -10108,7 +10293,8 @@ details.svadmin-collapsible:not([open]) > :not(summary) {
 }
 
 .layout-clean-flat[data-theme="stripe"] .sidebar-menu-item-active::before {
-  content: none;
+  width: 4px;
+  content: "";
 }
 
 .layout-clean-flat[data-theme="stripe"] .sidebar-menu-item-active svg {

package/dist/components/content/AuditContent.svelte

@@ -0,0 +1,33 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import { definedOptions } from '@svadmin/core/options';
+  import { useTranslation } from '@svadmin/core/i18n';
+  import DataState from './DataState.svelte';
+  import { Button } from '../ui/button/index.js';
+  import { RefreshCw } from '@lucide/svelte';
+  import type { AuditDataState } from './audit-state.js';
+
+  let { state = 'ready', message, retry, children }: {
+    state?: AuditDataState;
+    message?: string | undefined;
+    retry?: (() => void) | undefined;
+    children?: Snippet | undefined;
+  } = $props();
+  const i18n = useTranslation();
+</script>
+
+{#if state === 'loading' || state === 'empty' || state === 'error' || state === 'forbidden'}
+  <DataState {state} {...definedOptions({ title: message, retry: state === 'error' ? retry : undefined })} />
+{:else}
+  {#if state === 'partial' || state === 'readonly'}
+    <div class="svadmin-audit-notice" data-state={state} role="status">
+      <span>{message ?? (state === 'partial'
+        ? (i18n.locale === 'zh-CN' ? '部分数据暂不可用' : 'Some data is unavailable')
+        : (i18n.locale === 'zh-CN' ? '只读' : 'Read only'))}</span>
+      {#if state === 'partial' && retry}
+        <Button variant="outline" size="sm" onclick={retry}><RefreshCw size={16} aria-hidden="true" />{i18n.t('common.retry')}</Button>
+      {/if}
+    </div>
+  {/if}
+  {@render children?.()}
+{/if}

package/dist/components/content/AuditContent.svelte.d.ts

@@ -0,0 +1,11 @@
+import type { Snippet } from 'svelte';
+import type { AuditDataState } from './audit-state.js';
+type $$ComponentProps = {
+    state?: AuditDataState;
+    message?: string | undefined;
+    retry?: (() => void) | undefined;
+    children?: Snippet | undefined;
+};
+declare const AuditContent: import("svelte").Component<$$ComponentProps, {}, "">;
+type AuditContent = ReturnType<typeof AuditContent>;
+export default AuditContent;

package/dist/components/content/AuditSection.svelte

@@ -0,0 +1,46 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import { cn } from '../../utils.js';
+  import AuditContent from './AuditContent.svelte';
+  import type { AuditDataState } from './audit-state.js';
+
+  export type AuditAccent = 'primary' | 'info' | 'success' | 'warning' | 'danger' | 'neutral';
+
+  interface Props {
+    title: string;
+    description?: string | undefined;
+    eyebrow?: string;
+    accent?: AuditAccent;
+    actions?: Snippet | undefined;
+    children?: Snippet;
+    class?: string;
+    state?: AuditDataState;
+    message?: string | undefined;
+    retry?: (() => void) | undefined;
+  }
+
+  let {
+    title,
+    description,
+    eyebrow,
+    accent = 'primary',
+    actions,
+    children,
+    class: className = '',
+    state = 'ready',
+    message,
+    retry,
+  }: Props = $props();
+</script>
+
+<section aria-label={title} class={cn('svadmin-audit-section', className)} data-svadmin-audit-section data-accent={accent} data-state={state}>
+  <header class="svadmin-audit-section__header">
+    <div class="svadmin-audit-section__heading">
+      {#if eyebrow}<p class="svadmin-audit-section__eyebrow">{eyebrow}</p>{/if}
+      <h2>{title}</h2>
+      {#if description}<p class="svadmin-audit-section__description">{description}</p>{/if}
+    </div>
+    {#if actions && state !== 'forbidden'}<div class="svadmin-audit-section__actions">{@render actions()}</div>{/if}
+  </header>
+  <div class="svadmin-audit-section__body"><AuditContent {state} {message} {retry} {children} /></div>
+</section>

package/dist/components/content/AuditSection.svelte.d.ts

@@ -0,0 +1,18 @@
+import type { Snippet } from 'svelte';
+import type { AuditDataState } from './audit-state.js';
+export type AuditAccent = 'primary' | 'info' | 'success' | 'warning' | 'danger' | 'neutral';
+interface Props {
+    title: string;
+    description?: string | undefined;
+    eyebrow?: string;
+    accent?: AuditAccent;
+    actions?: Snippet | undefined;
+    children?: Snippet;
+    class?: string;
+    state?: AuditDataState;
+    message?: string | undefined;
+    retry?: (() => void) | undefined;
+}
+declare const AuditSection: import("svelte").Component<Props, {}, "">;
+type AuditSection = ReturnType<typeof AuditSection>;
+export default AuditSection;

package/dist/components/content/ChartContainer.svelte

@@ -0,0 +1,32 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import { cn } from '../../utils.js';
+  import AuditSection from './AuditSection.svelte';
+  import type { AuditDataState } from './audit-state.js';
+
+  interface Props {
+    title: string;
+    description?: string;
+    actions?: Snippet;
+    children?: Snippet;
+    class?: string;
+    state?: AuditDataState;
+    message?: string | undefined;
+    retry?: (() => void) | undefined;
+  }
+
+  let {
+    title,
+    description,
+    actions,
+    children,
+    class: className = '',
+    state = 'ready',
+    message,
+    retry,
+  }: Props = $props();
+</script>
+
+<AuditSection {title} {description} {actions} {state} {message} {retry} accent="info" class={cn('svadmin-chart-container', className)}>
+  <div class="svadmin-chart-container__body">{@render children?.()}</div>
+</AuditSection>

package/dist/components/content/ChartContainer.svelte.d.ts

@@ -0,0 +1,15 @@
+import type { Snippet } from 'svelte';
+import type { AuditDataState } from './audit-state.js';
+interface Props {
+    title: string;
+    description?: string;
+    actions?: Snippet;
+    children?: Snippet;
+    class?: string;
+    state?: AuditDataState;
+    message?: string | undefined;
+    retry?: (() => void) | undefined;
+}
+declare const ChartContainer: import("svelte").Component<Props, {}, "">;
+type ChartContainer = ReturnType<typeof ChartContainer>;
+export default ChartContainer;

package/dist/components/content/CoverageMatrix.svelte

@@ -0,0 +1,49 @@
+<script lang="ts">
+  import { cn } from '../../utils.js';
+  import type { AuditAccent } from './AuditSection.svelte';
+  import AuditContent from './AuditContent.svelte';
+  import type { AuditDataState } from './audit-state.js';
+
+  export interface CoverageMatrixColumn {
+    key: string;
+    label: string;
+  }
+
+  export interface CoverageMatrixRow {
+    id: string;
+    title: string;
+    cells: Readonly<Record<string, string | undefined>>;
+    accent?: AuditAccent;
+  }
+
+  interface Props {
+    columns: readonly CoverageMatrixColumn[];
+    rows: readonly CoverageMatrixRow[];
+    class?: string;
+    caption: string;
+    rowLabel?: string;
+    state?: AuditDataState;
+    message?: string | undefined;
+    retry?: (() => void) | undefined;
+  }
+
+  let { columns, rows, caption, rowLabel = '', state = 'ready', message, retry, class: className = '' }: Props = $props();
+</script>
+
+<AuditContent state={state === 'ready' && rows.length === 0 ? 'empty' : state} {message} {retry}>
+  <!-- svelte-ignore a11y_no_noninteractive_tabindex (命名滚动区域需要键盘访问。) -->
+  <div class={cn('svadmin-coverage-matrix', className)} data-svadmin-coverage-matrix role="region" aria-label={caption} tabindex="0">
+    <table>
+      <caption>{caption}</caption>
+      <thead><tr><th scope="col">{rowLabel}</th>{#each columns as column (column.key)}<th scope="col">{column.label}</th>{/each}</tr></thead>
+      <tbody>
+        {#each rows as row (row.id)}
+          <tr data-accent={row.accent ?? 'neutral'}>
+            <th scope="row">{row.title}</th>
+            {#each columns as column (column.key)}<td>{row.cells[column.key] ?? '—'}</td>{/each}
+          </tr>
+        {/each}
+      </tbody>
+    </table>
+  </div>
+</AuditContent>

package/dist/components/content/CoverageMatrix.svelte.d.ts

@@ -0,0 +1,25 @@
+import type { AuditAccent } from './AuditSection.svelte';
+import type { AuditDataState } from './audit-state.js';
+export interface CoverageMatrixColumn {
+    key: string;
+    label: string;
+}
+export interface CoverageMatrixRow {
+    id: string;
+    title: string;
+    cells: Readonly<Record<string, string | undefined>>;
+    accent?: AuditAccent;
+}
+interface Props {
+    columns: readonly CoverageMatrixColumn[];
+    rows: readonly CoverageMatrixRow[];
+    class?: string;
+    caption: string;
+    rowLabel?: string;
+    state?: AuditDataState;
+    message?: string | undefined;
+    retry?: (() => void) | undefined;
+}
+declare const CoverageMatrix: import("svelte").Component<Props, {}, "">;
+type CoverageMatrix = ReturnType<typeof CoverageMatrix>;
+export default CoverageMatrix;

package/dist/components/content/EvidenceCard.svelte

@@ -0,0 +1,35 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import { cn } from '../../utils.js';
+  import StatusPill, { type StatusPillTone } from './StatusPill.svelte';
+
+  interface Props {
+    title: string;
+    status: string;
+    statusTone?: StatusPillTone;
+    description?: string;
+    source?: string;
+    children?: Snippet;
+    class?: string;
+  }
+
+  let {
+    title,
+    status,
+    statusTone = 'neutral',
+    description,
+    source,
+    children,
+    class: className = '',
+  }: Props = $props();
+</script>
+
+<article aria-label={title} class={cn('svadmin-evidence-card', className)} data-svadmin-evidence-card data-accent={statusTone}>
+  <div class="svadmin-evidence-card__header">
+    <h3>{title}</h3>
+    <StatusPill label={status} tone={statusTone} />
+  </div>
+  {#if description}<p class="svadmin-evidence-card__description">{description}</p>{/if}
+  {#if children}<div class="svadmin-evidence-card__body">{@render children()}</div>{/if}
+  {#if source}<p class="svadmin-evidence-card__source">{source}</p>{/if}
+</article>

package/dist/components/content/EvidenceCard.svelte.d.ts

@@ -0,0 +1,14 @@
+import type { Snippet } from 'svelte';
+import { type StatusPillTone } from './StatusPill.svelte';
+interface Props {
+    title: string;
+    status: string;
+    statusTone?: StatusPillTone;
+    description?: string;
+    source?: string;
+    children?: Snippet;
+    class?: string;
+}
+declare const EvidenceCard: import("svelte").Component<Props, {}, "">;
+type EvidenceCard = ReturnType<typeof EvidenceCard>;
+export default EvidenceCard;

package/dist/components/content/FilterToolbar.svelte

@@ -1,5 +1,7 @@
 <script lang="ts">
-  import type { Snippet } from 'svelte';
+  import { onMount, type Snippet } from 'svelte';
+  import { useTranslation } from '@svadmin/core/i18n';
+  import * as Sheet from '../ui/sheet/index.js';
   import { Search, X, SlidersHorizontal, ChevronDown, ChevronUp } from '@lucide/svelte';
   import { Button } from '../ui/button/index.js';
   import { Input } from '../ui/input/index.js';
@@ -40,6 +42,15 @@
 
   const isCompact = $derived(density === 'compact');
   const advancedPanelId = `svadmin-filter-toolbar-advanced-${uid}`;
+  const i18n = useTranslation();
+  let mobile = $state(false);
+  onMount(() => {
+    const media = window.matchMedia('(max-width: 767px)');
+    const update = () => { mobile = media.matches; };
+    update();
+    media.addEventListener('change', update);
+    return () => media.removeEventListener('change', update);
+  });
 </script>
 
 <div class={cn('svadmin-filter-toolbar', className)} data-density={density} data-svadmin-filter-toolbar data-advanced-open={advanced && advancedOpen ? 'true' : 'false'}>
@@ -67,12 +78,12 @@
         {/if}
       </div>
     {/if}
-    {#if filters}
+    {#if filters && !mobile}
       <div class="svadmin-filter-toolbar__filters">
         {@render filters()}
       </div>
     {/if}
-    {#if advanced}
+    {#if advanced || (mobile && filters)}
       <Button
         variant={advancedOpen ? 'secondary' : 'outline'}
         size={isCompact ? 'sm' : 'default'}
@@ -101,7 +112,16 @@
       </div>
     {/if}
   </div>
-  {#if advanced && advancedOpen}
+  {#if mobile && (advanced || filters)}
+    <Sheet.Root bind:open={advancedOpen} class="svadmin-filter-bottom-sheet" role="dialog" aria-modal="true"
+      aria-label={advancedLabel} id={advancedPanelId} closeLabel={i18n.t('common.close')}>
+      <Sheet.Header><Sheet.Title>{advancedLabel}</Sheet.Title></Sheet.Header>
+      <Sheet.Content>
+        {@render filters?.()}
+        {@render advanced?.()}
+      </Sheet.Content>
+    </Sheet.Root>
+  {:else if advanced && advancedOpen}
     <div id={advancedPanelId} role="region" aria-label={advancedLabel} class="svadmin-filter-toolbar-advanced" aria-hidden="false">
       {@render advanced()}
     </div>

package/dist/components/content/FilterToolbar.svelte.d.ts

@@ -1,4 +1,4 @@
-import type { Snippet } from 'svelte';
+import { type Snippet } from 'svelte';
 interface Props {
     query?: string;
     placeholder?: string;

package/dist/components/content/StatusPill.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+  import { cn } from '../../utils.js';
+  import StatusBadge from './StatusBadge.svelte';
+
+  export type StatusPillTone = 'success' | 'warning' | 'danger' | 'info' | 'neutral';
+
+  interface Props {
+    label: string;
+    tone?: StatusPillTone;
+    class?: string;
+  }
+
+  let { label, tone = 'neutral', class: className = '' }: Props = $props();
+</script>
+
+<StatusBadge status={tone} {label} class={cn('svadmin-status-pill', className)} />

package/dist/components/content/StatusPill.svelte.d.ts

@@ -0,0 +1,9 @@
+export type StatusPillTone = 'success' | 'warning' | 'danger' | 'info' | 'neutral';
+interface Props {
+    label: string;
+    tone?: StatusPillTone;
+    class?: string;
+}
+declare const StatusPill: import("svelte").Component<Props, {}, "">;
+type StatusPill = ReturnType<typeof StatusPill>;
+export default StatusPill;

package/dist/components/content/audit-state.d.ts

@@ -0,0 +1 @@
+export type AuditDataState = 'ready' | 'loading' | 'empty' | 'partial' | 'error' | 'forbidden' | 'readonly';

package/dist/components/content/audit-state.js

@@ -0,0 +1 @@
+export {};

package/dist/components/content/index.d.ts

@@ -48,5 +48,14 @@ export { default as FeedbackNotice } from './FeedbackNotice.svelte';
 export type { FeedbackNoticeTone, FeedbackNoticePriority } from './FeedbackNotice.svelte';
 export { default as AuditTimeline } from './AuditTimeline.svelte';
 export type { TimelineItem } from './AuditTimeline.svelte';
+export { default as AuditSection } from './AuditSection.svelte';
+export type { AuditAccent } from './AuditSection.svelte';
+export type { AuditDataState } from './audit-state.js';
+export { default as ChartContainer } from './ChartContainer.svelte';
+export { default as CoverageMatrix } from './CoverageMatrix.svelte';
+export type { CoverageMatrixColumn, CoverageMatrixRow } from './CoverageMatrix.svelte';
+export { default as EvidenceCard } from './EvidenceCard.svelte';
+export { default as StatusPill } from './StatusPill.svelte';
+export type { StatusPillTone } from './StatusPill.svelte';
 export { default as MediaThumbnail } from './MediaThumbnail.svelte';
 export type { MediaThumbnailSize, MediaThumbnailFit } from './MediaThumbnail.svelte';

package/dist/components/content/index.js

@@ -33,4 +33,9 @@ export { default as TwoFactorStepper } from './TwoFactorStepper.svelte';
 export { default as SystemErrorState } from './SystemErrorState.svelte';
 export { default as FeedbackNotice } from './FeedbackNotice.svelte';
 export { default as AuditTimeline } from './AuditTimeline.svelte';
+export { default as AuditSection } from './AuditSection.svelte';
+export { default as ChartContainer } from './ChartContainer.svelte';
+export { default as CoverageMatrix } from './CoverageMatrix.svelte';
+export { default as EvidenceCard } from './EvidenceCard.svelte';
+export { default as StatusPill } from './StatusPill.svelte';
 export { default as MediaThumbnail } from './MediaThumbnail.svelte';

package/dist/index.d.ts

@@ -330,6 +330,15 @@ export type { RowActionItem } from './components/RowActions.svelte';
 export { default as DetailDrawer } from './components/DetailDrawer.svelte';
 export { default as AuditTimeline } from './components/content/AuditTimeline.svelte';
 export type { TimelineItem } from './components/content/AuditTimeline.svelte';
+export { default as AuditSection } from './components/content/AuditSection.svelte';
+export type { AuditAccent } from './components/content/AuditSection.svelte';
+export type { AuditDataState } from './components/content/audit-state.js';
+export { default as ChartContainer } from './components/content/ChartContainer.svelte';
+export { default as CoverageMatrix } from './components/content/CoverageMatrix.svelte';
+export type { CoverageMatrixColumn, CoverageMatrixRow } from './components/content/CoverageMatrix.svelte';
+export { default as EvidenceCard } from './components/content/EvidenceCard.svelte';
+export { default as StatusPill } from './components/content/StatusPill.svelte';
+export type { StatusPillTone } from './components/content/StatusPill.svelte';
 export type { TagTone } from './components/fields/TagField.svelte';
 export type { BooleanTone } from './components/fields/BooleanField.svelte';
 export type { DateFieldFormat } from './components/fields/DateField.svelte';

package/dist/index.js

@@ -279,6 +279,11 @@ export { referenceDemoData } from './reference-data.js';
 export { default as RowActions } from './components/RowActions.svelte';
 export { default as DetailDrawer } from './components/DetailDrawer.svelte';
 export { default as AuditTimeline } from './components/content/AuditTimeline.svelte';
+export { default as AuditSection } from './components/content/AuditSection.svelte';
+export { default as ChartContainer } from './components/content/ChartContainer.svelte';
+export { default as CoverageMatrix } from './components/content/CoverageMatrix.svelte';
+export { default as EvidenceCard } from './components/content/EvidenceCard.svelte';
+export { default as StatusPill } from './components/content/StatusPill.svelte';
 export { default as FilterDropdown } from './components/FilterDropdown.svelte';
 export { default as BatchActionBar } from './components/BatchActionBar.svelte';
 export { default as MediaThumbnail } from './components/content/MediaThumbnail.svelte';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@svadmin/ui",
-  "version": "0.78.2",
+  "version": "0.79.0",
   "description": "Pre-built admin UI components — AdminApp, AutoTable, AutoForm, Sidebar, Layout",
   "type": "module",
   "sideEffects": [