@svadmin/ui 0.85.0 → 0.86.0

package/dist/components/PagePattern.svelte

@@ -3,8 +3,10 @@
   import { definedOptions } from '@svadmin/core/options';
   import ContentPageShell from './content/ContentPageShell.svelte';
   import WorkspaceLayout from './content/WorkspaceLayout.svelte';
+  import DataState from './content/DataState.svelte';
 
   export type PagePatternKind = 'list' | 'form' | 'detail' | 'workspace' | 'dashboard';
+  export type PagePatternState = 'ready' | 'loading' | 'empty' | 'error' | 'forbidden';
 
   interface Props {
     kind: PagePatternKind;
@@ -18,8 +20,14 @@
     children: Snippet;
     footer?: Snippet;
     width?: 'narrow' | 'default' | 'wide';
+    /** @deprecated Accepted for compatibility; the product baseline is shared. */
     density?: 'compact' | 'comfortable';
     pageId?: string;
+    state?: PagePatternState;
+    stateTitle?: string;
+    stateDescription?: string;
+    retry?: () => void;
+    stateAction?: Snippet;
     class?: string;
   }
 
@@ -35,24 +43,41 @@
     children,
     footer,
     width,
-    density,
+    density = 'comfortable',
     pageId,
+    state = 'ready',
+    stateTitle,
+    stateDescription,
+    retry,
+    stateAction,
     class: className = '',
   }: Props = $props();
 
   const resolvedPageId = $derived(pageId ?? `pattern-${kind}`);
   const resolvedWidth = $derived(width ?? (kind === 'form' ? 'narrow' : kind === 'detail' ? 'default' : 'wide'));
-  const resolvedDensity = $derived(density ?? 'comfortable');
+  const showState = $derived(state !== 'ready');
 </script>
 
 <ContentPageShell
   {title}
   {...definedOptions({ description, eyebrow, actions })}
-  density={resolvedDensity}
   width={resolvedWidth}
+  {density}
   pageId={resolvedPageId}
   class={className}
 >
+  <div data-page-pattern-kind={kind} data-page-pattern-state={state}>
+  {#if showState}
+    {#if state === 'loading' || state === 'empty' || state === 'error' || state === 'forbidden'}
+      <DataState
+        {state}
+        {...definedOptions({ title: stateTitle })}
+        {...definedOptions({ description: stateDescription })}
+        {...definedOptions({ retry: state === 'error' ? retry : undefined })}
+        {...definedOptions({ action: stateAction })}
+      />
+    {/if}
+  {:else}
   {#if metrics}
     <div class="page-pattern__metrics" data-page-pattern-metrics>
       {@render metrics()}
@@ -68,7 +93,7 @@
   {#if secondary}
     <WorkspaceLayout primary={children} {...definedOptions({ secondary })} />
   {:else}
-    <div class="page-pattern__content" data-page-pattern-content={kind} data-density={resolvedDensity}>
+    <div class="page-pattern__content" data-page-pattern-content={kind}>
       {@render children()}
     </div>
   {/if}
@@ -78,13 +103,15 @@
       {@render footer()}
     </footer>
   {/if}
+  {/if}
+  </div>
 </ContentPageShell>
 
 <style>
   .page-pattern__metrics {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
-    gap: 16px;
+    gap: var(--svadmin-space-4);
   }
 
   .page-pattern__toolbar,
@@ -94,11 +121,7 @@
 
   .page-pattern__content {
     display: grid;
-    gap: 24px;
-  }
-
-  .page-pattern__content[data-density='compact'] {
-    gap: 16px;
+    gap: var(--svadmin-space-5);
   }
 
   .page-pattern__footer {
@@ -106,9 +129,9 @@
     flex-wrap: wrap;
     align-items: center;
     justify-content: flex-end;
-    gap: 8px;
-    margin-top: 24px;
-    padding-top: 12px;
+    gap: var(--svadmin-space-2);
+    margin-top: var(--svadmin-space-5);
+    padding-top: var(--svadmin-space-3);
     border-top: 1px solid var(--border);
   }
 </style>

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

@@ -1,5 +1,6 @@
 import type { Snippet } from 'svelte';
 export type PagePatternKind = 'list' | 'form' | 'detail' | 'workspace' | 'dashboard';
+export type PagePatternState = 'ready' | 'loading' | 'empty' | 'error' | 'forbidden';
 interface Props {
     kind: PagePatternKind;
     title: string;
@@ -12,8 +13,14 @@ interface Props {
     children: Snippet;
     footer?: Snippet;
     width?: 'narrow' | 'default' | 'wide';
+    /** @deprecated Accepted for compatibility; the product baseline is shared. */
     density?: 'compact' | 'comfortable';
     pageId?: string;
+    state?: PagePatternState;
+    stateTitle?: string;
+    stateDescription?: string;
+    retry?: () => void;
+    stateAction?: Snippet;
     class?: string;
 }
 declare const PagePattern: import("svelte").Component<Props, {}, "">;

package/dist/components/QuickEditDrawer.svelte

@@ -32,7 +32,6 @@
     {resourceName}
     id={recordId}
     mode="edit"
-    density="compact"
     showHeader={false}
     redirect={false}
     onSuccess={onClose}

package/dist/components/ShowPage.svelte

@@ -20,7 +20,6 @@
     resourceName: string;
     rendering?: ResourceRendering | undefined;
     id: string | number;
-    density?: 'compact' | 'comfortable';
     layout?: 'list' | 'grid';
     columns?: 1 | 2 | 3 | 4;
     bordered?: boolean;
@@ -36,7 +35,6 @@
     resourceName,
     rendering,
     id,
-    density = 'comfortable',
     layout = 'list',
     columns = 2,
     bordered = false,
@@ -58,7 +56,6 @@
     }
     navigation.list(resourceName);
   }
-  const isCompact = $derived(density === 'compact');
 
   const detail = useRecordDetail(() => ({ resourceName, id, rendering }));
   const activeRendering = $derived(detail.rendering);
@@ -76,10 +73,9 @@
   });
 </script>
 
-<div data-svadmin-rendering-resource={activeRendering?.resource.name} data-svadmin-rendering-kind={activeRendering ? 'show' : undefined} class="{isCompact ? 'svadmin-u-6ed543e2fbbb' : 'svadmin-u-3e7ce58d64fa'} {className}">
+<div data-svadmin-rendering-resource={activeRendering?.resource.name} data-svadmin-rendering-kind={activeRendering ? 'show' : undefined} class="svadmin-u-3e7ce58d64fa {className}">
   <PageHeader
     title="{resource.label} {i18n.t('common.detail')} #{id}"
-    {density}
     onBack={goBack}
     backLabel={i18n.t('common.back')}
   >
@@ -108,7 +104,7 @@
     <Card.Root class="svadmin-u-2cd02d11d1af svadmin-u-6ee2d41e2d2d svadmin-u-438b2237b8d6">
       <Card.Content class="svadmin-u-8a539c7fe216">
         {#each showFields.slice(0, 6) as _, i (i)}
-          <div class="svadmin-u-60fbb7713999 svadmin-u-8dddea0773ed svadmin-u-020ba687fa12 {isCompact ? 'svadmin-u-f0faeb26d656 svadmin-u-03b4dd7f172b' : 'svadmin-u-f0faeb26d656 svadmin-u-7a9aabfcd059 svadmin-u-1b2d54a3fd12 svadmin-u-b7daff9b9ddd'} {i % 2 === 1 ? 'svadmin-u-967d113a1451' : ''}">
+          <div class="svadmin-u-60fbb7713999 svadmin-u-8dddea0773ed svadmin-u-020ba687fa12 svadmin-u-f0faeb26d656 svadmin-u-7a9aabfcd059 svadmin-u-1b2d54a3fd12 svadmin-u-b7daff9b9ddd {i % 2 === 1 ? 'svadmin-u-967d113a1451' : ''}">
             <Skeleton class="svadmin-u-11e59c6d5f6b svadmin-u-b7ce0d2f6c04 svadmin-u-5a14cc9f9ed4" />
             <Skeleton class="svadmin-u-11e59c6d5f6b svadmin-u-1d9f2d98d149 svadmin-u-d2ffb24f3e1d svadmin-u-b6b02c0ebef6 svadmin-u-dfe9bd9e7001 svadmin-u-77533d414653" />
           </div>
@@ -153,9 +149,9 @@
         <Card.Content class="svadmin-u-8a539c7fe216 svadmin-u-fa6acbf81d74 svadmin-u-3533cbce9e93">
           {#each showFields as field, i (i)}
             {@const value = record[field.key]}
-            <div class="svadmin-u-60fbb7713999 svadmin-u-8dddea0773ed svadmin-u-020ba687fa12 {isCompact ? 'svadmin-u-f0faeb26d656 svadmin-u-03b4dd7f172b svadmin-u-cc06a6575385 svadmin-u-7209fd2a90e7' : 'svadmin-u-f0faeb26d656 svadmin-u-7a9aabfcd059 svadmin-u-1b2d54a3fd12 svadmin-u-4701b613ff95'} {i % 2 === 1 ? 'svadmin-u-8a25a995eb8e' : ''}">
-              <div class="svadmin-u-b03f3c253900 {isCompact ? 'svadmin-u-359090c2d529' : 'svadmin-u-359090c2d529 svadmin-u-e2327d142859'} svadmin-u-2689f3958069 svadmin-u-bfa603190748 svadmin-u-65281709dacf svadmin-u-84bdd56b0e81">{field.label}</div>
-              <div class="svadmin-u-6b3526212209 {isCompact ? 'svadmin-u-359090c2d529 svadmin-u-e2327d142859' : 'svadmin-u-fc7473ca09eb'} svadmin-u-d4108abe6359">
+            <div class="svadmin-u-60fbb7713999 svadmin-u-8dddea0773ed svadmin-u-020ba687fa12 svadmin-u-f0faeb26d656 svadmin-u-7a9aabfcd059 svadmin-u-1b2d54a3fd12 svadmin-u-4701b613ff95 {i % 2 === 1 ? 'svadmin-u-8a25a995eb8e' : ''}">
+              <div class="svadmin-u-b03f3c253900 svadmin-u-359090c2d529 svadmin-u-e2327d142859 svadmin-u-2689f3958069 svadmin-u-bfa603190748 svadmin-u-65281709dacf svadmin-u-84bdd56b0e81">{field.label}</div>
+              <div class="svadmin-u-6b3526212209 svadmin-u-fc7473ca09eb svadmin-u-d4108abe6359">
                 <FieldDisplay
                   type={field.type}
                   {value}

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

@@ -4,7 +4,6 @@ interface Props {
     resourceName: string;
     rendering?: ResourceRendering | undefined;
     id: string | number;
-    density?: 'compact' | 'comfortable';
     layout?: 'list' | 'grid';
     columns?: 1 | 2 | 3 | 4;
     bordered?: boolean;

package/dist/components/SvarAutoTable.svelte

@@ -26,8 +26,9 @@
       {#snippet gridBody(state)}
         <details><summary>{state.locale.startsWith('zh') ? '表格选择与列顺序' : 'Selection and column order'}</summary>{@render state.controls()}</details>
         <SvarDataGrid {Grid} {Theme} items={state.records} columns={state.columns} primaryKey={state.primaryKey}
+          density={state.density}
           {height} freezeLeft={Math.min(freezeLeft, state.columns.length - Math.min(freezeRight, state.columns.length - 1))}
-          freezeRight={Math.min(freezeRight, state.columns.length - 1)} density={state.density}
+          freezeRight={Math.min(freezeRight, state.columns.length - 1)}
           queryMode="server" sorters={state.sorters} onSortChange={state.onSortChange}
           disabled={state.disabled} scopeKey={state.scopeKey} locale={state.locale} label={state.label}>
           {#snippet cellContent({ id, field })}{@render state.cell({ id, field })}{/snippet}

package/dist/components/SvarDataGrid.svelte

@@ -18,7 +18,10 @@
     primaryKey?: string;
     childrenKey?: string;
     height?: number;
+    /** @deprecated Retained for compatibility; comfortable is the shared default. */
     density?: 'compact' | 'comfortable';
+    rowHeight?: number;
+    headerHeight?: number;
     freezeLeft?: number;
     /** 独立右侧面板，不使用上游 split.right。 */
     freezeRight?: number;
@@ -52,14 +55,15 @@
     disabledLabel?: string;
     fallbackLabel?: string;
   }
-  let { Grid, Theme, items = [], columns, primaryKey = 'id', childrenKey, height = 420, density = 'comfortable', freezeLeft = 0, freezeRight = 0, queryMode = 'local',
+  let { Grid, Theme, items = [], columns, primaryKey = 'id', childrenKey, height = 420, density = 'comfortable', rowHeight: rowHeightProp, headerHeight: headerHeightProp, freezeLeft = 0, freezeRight = 0, queryMode = 'local',
     sorters = [], filters = [], onSortChange, onFilterChange, onCellEdit, selectable = false, selectedIds = [], onSelectionChange, onRecordsChange, cellContent,
     windowSource, loadChildren, hasChildrenKey = 'hasChildren', onLoadMore, hasMore = false, scopeKey = 0,
     loading = false, error, disabled = false, locale = 'en-US', label = 'Data grid', emptyLabel = 'No records', loadingLabel = 'Loading',
     disabledLabel = 'Grid is disabled', fallbackLabel = 'Static preview (up to 20 rows)',
   }: SvarDataGridProps = $props();
   const treeKey = $derived(loadChildren ? childrenKey ?? 'children' : childrenKey);
-  const rowHeight = $derived(density === 'compact' ? 32 : 44);
+  const rowHeight = $derived(rowHeightProp ?? (density === 'compact' ? 32 : 44));
+  const headerHeight = $derived(headerHeightProp ?? (density === 'compact' ? 32 : 36));
   // 普通追加不重建引擎，否则无限加载会把滚动位置重置。懒树根替换必须清理分支缓存。
   const dataOwner = $derived({ scopeKey, items: loadChildren ? items : undefined, source: windowSource,
     loadChildren, onLoadMore, primaryKey, treeKey, hasChildrenKey, freezeRight, Grid });
@@ -304,12 +308,12 @@
         {#key dataOwner}<div class="grid-panes" inert={disabled}>
           <div class="grid-viewport center-pane" data-svar-pane="center" style:height="{height}px" role="region" aria-label="Scrollable columns" onkeydowncapture={event => navigatePane(event, 0)}>
             <Grid columns={model.center} data={activeError || isLoading ? [] : records.rows} tree={treeKey !== undefined}
-              split={{ left: freezeLeft }} sizes={{ rowHeight, headerHeight: 36, columnWidth: 160 }} select={selectable} multiselect={selectable} {selectedRows}
+              split={{ left: freezeLeft }} sizes={{ rowHeight, headerHeight, columnWidth: 160 }} select={selectable} multiselect={selectable} {selectedRows}
               reorder={false} draggableRows={false} undo={false} {...queryProps} {...dynamicProps} init={api => init(api, 0)} />
           </div>
           {#if freezeRight > 0}<div class="grid-viewport right-pane" data-svar-pane="right" style:height="{height}px" style:width="{model.rightWidth}px" role="region" aria-label="Frozen right columns" onkeydowncapture={event => navigatePane(event, 1)}>
             <Grid columns={model.right} data={activeError || isLoading ? [] : rightRows} tree={treeKey !== undefined}
-              split={{ left: 0 }} sizes={{ rowHeight, headerHeight: 36, columnWidth: 160 }} select={selectable} multiselect={selectable} {selectedRows}
+              split={{ left: 0 }} sizes={{ rowHeight, headerHeight, columnWidth: 160 }} select={selectable} multiselect={selectable} {selectedRows}
               reorder={false} draggableRows={false} undo={false} {...queryProps} {...dynamicProps} init={api => init(api, 1)} />
           </div>{/if}
         </div>{/key}

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

@@ -16,7 +16,10 @@ export interface SvarDataGridProps {
     primaryKey?: string;
     childrenKey?: string;
     height?: number;
+    /** @deprecated Retained for compatibility; comfortable is the shared default. */
     density?: 'compact' | 'comfortable';
+    rowHeight?: number;
+    headerHeight?: number;
     freezeLeft?: number;
     /** 独立右侧面板，不使用上游 split.right。 */
     freezeRight?: number;

package/dist/components/SvarResourceTable.svelte

@@ -20,7 +20,6 @@
     /** 高级读取仍使用资源契约、Provider 和核心查询缓存。 */
     loadingMode?: 'page' | 'window' | 'infinite';
     lazyTree?: SvarLazyTree;
-    density?: 'compact' | 'comfortable';
     childrenKey?: string;
     dataScopeKey?: string | number;
     disabled?: boolean;

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

@@ -16,7 +16,6 @@ export interface SvarResourceTableProps {
     /** 高级读取仍使用资源契约、Provider 和核心查询缓存。 */
     loadingMode?: 'page' | 'window' | 'infinite';
     lazyTree?: SvarLazyTree;
-    density?: 'compact' | 'comfortable';
     childrenKey?: string;
     dataScopeKey?: string | number;
     disabled?: boolean;

package/dist/components/SvarResourceTableView.svelte

@@ -15,7 +15,7 @@
   import type { SvarResourceTableProps } from './SvarResourceTable.svelte';
 
   let { Grid, Theme, resourceName, pageSize = 25, filters = [], initialSorters = [], height = 420,
-    freezeLeft = 0, freezeRight = 0, loadingMode = 'page', lazyTree, density = 'comfortable', childrenKey: providedChildrenKey, dataScopeKey = 0, disabled = false,
+    freezeLeft = 0, freezeRight = 0, loadingMode = 'page', lazyTree, childrenKey: providedChildrenKey, dataScopeKey = 0, disabled = false,
     editable = false, selectable = false, batchUpdate = false, batchDelete = false, exportable = false,
     savedViews = false, preferenceScopeKey, migrateAutoTableViews = false, deleteVariables, formats = {},
   }: SvarResourceTableProps = $props();
@@ -333,7 +333,7 @@
     </div>{/if}
     {#if feedback}<p role="alert">{feedback}</p>{/if}
     {#if result}<p role="status">{zh ? '成功 / 失败 / 未执行' : 'Succeeded / failed / skipped'}: {result.succeeded.length} / {result.failed.length} / {result.skipped.length}</p>{/if}
-    <SvarDataGrid {Grid} {Theme} items={gridItems} {columns} {primaryKey} {height} freezeRight={Math.min(freezeRight, Math.max(0, columns.length - 1))} freezeLeft={Math.min(freezeLeft, columns.length - Math.min(freezeRight, Math.max(0, columns.length - 1)))} {density}
+    <SvarDataGrid {Grid} {Theme} items={gridItems} {columns} {primaryKey} {height} freezeRight={Math.min(freezeRight, Math.max(0, columns.length - 1))} freezeLeft={Math.min(freezeLeft, columns.length - Math.min(freezeRight, Math.max(0, columns.length - 1)))}
       queryMode="server" {sorters} filters={textFilters} onSortChange={changeSort} onFilterChange={changeFilter}
       selectable={selectable || batchUpdate || batchDelete} {selectedIds} onSelectionChange={selection} {...advanced ? { onRecordsChange: loaded } : {}} scopeKey={gridScope}
       {...windowSource ? { windowSource } : {}}

package/dist/components/auto-table-grid.d.ts

@@ -11,6 +11,7 @@ export interface AutoTableGridState {
     }[];
     readonly primaryKey: string;
     readonly sorters: readonly Sort[];
+    /** @deprecated Retained for custom grid renderers during the baseline transition. */
     readonly density: 'compact' | 'comfortable';
     readonly locale: string;
     readonly label: string;

package/dist/components/content/ContentPageHeader.svelte

@@ -8,6 +8,7 @@
     description?: string;
     breadcrumbs?: string[];
     actions?: Snippet;
+    /** @deprecated Accepted for compatibility; the product baseline is shared. */
     density?: 'compact' | 'comfortable';
     headingLevel?: 'h1' | 'h2';
     class?: string;
@@ -22,7 +23,7 @@
     headingLevel = 'h1',
     class: className = '',
   }: Props = $props();
-  const styles = $derived(contentHeader({ density }));
+  const styles = $derived(contentHeader());
 </script>
 
 <header

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

@@ -5,6 +5,7 @@ interface Props {
     description?: string;
     breadcrumbs?: string[];
     actions?: Snippet;
+    /** @deprecated Accepted for compatibility; the product baseline is shared. */
     density?: 'compact' | 'comfortable';
     headingLevel?: 'h1' | 'h2';
     class?: string;

package/dist/components/content/ContentPageShell.svelte

@@ -12,6 +12,7 @@
     children: Snippet;
     pageId?: string;
     width?: 'narrow' | 'default' | 'wide';
+    /** @deprecated Accepted for compatibility; the product baseline is shared. */
     density?: 'compact' | 'comfortable';
     class?: string;
   }
@@ -32,7 +33,6 @@
   const resolvedWidth = $derived(width === 'narrow' || width === 'wide' ? width : 'default');
   const styles = $derived(contentPage({
     width: resolvedWidth,
-    density,
   }));
 </script>
 

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

@@ -7,6 +7,7 @@ interface Props {
     children: Snippet;
     pageId?: string;
     width?: 'narrow' | 'default' | 'wide';
+    /** @deprecated Accepted for compatibility; the product baseline is shared. */
     density?: 'compact' | 'comfortable';
     class?: string;
 }

package/dist/components/content/DataPanel.svelte

@@ -0,0 +1,58 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import { cn } from '../../utils.js';
+
+  interface Props {
+    /** Panel heading. Omit it for an untitled surface. */
+    title?: string;
+    description?: string;
+    actions?: Snippet;
+    children: Snippet;
+    footer?: Snippet;
+    /** `none` removes body padding so a table or list can meet the panel edge. */
+    padding?: 'default' | 'compact' | 'none';
+    headingLevel?: 'h2' | 'h3';
+    class?: string;
+  }
+
+  let {
+    title,
+    description,
+    actions,
+    children,
+    footer,
+    padding = 'default',
+    headingLevel = 'h2',
+    class: className = '',
+  }: Props = $props();
+
+  const uid = $props.id();
+  const headingId = `svadmin-data-panel-${uid}`;
+</script>
+
+<section
+  class={cn('svadmin-data-panel', className)}
+  data-svadmin-data-panel
+  data-padding={padding}
+  aria-labelledby={title ? headingId : undefined}
+>
+  {#if title}
+    <header class="svadmin-data-panel__header" data-slot="data-panel-header">
+      <div class="svadmin-data-panel__heading">
+        <svelte:element this={headingLevel} id={headingId} class="svadmin-data-panel__title">
+          {title}
+        </svelte:element>
+        {#if description}
+          <p class="svadmin-data-panel__description">{description}</p>
+        {/if}
+      </div>
+      {#if actions}
+        <div class="svadmin-data-panel__actions">{@render actions()}</div>
+      {/if}
+    </header>
+  {/if}
+  <div class="svadmin-data-panel__body" data-slot="data-panel-body">{@render children()}</div>
+  {#if footer}
+    <footer class="svadmin-data-panel__footer" data-slot="data-panel-footer">{@render footer()}</footer>
+  {/if}
+</section>

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

@@ -0,0 +1,16 @@
+import type { Snippet } from 'svelte';
+interface Props {
+    /** Panel heading. Omit it for an untitled surface. */
+    title?: string;
+    description?: string;
+    actions?: Snippet;
+    children: Snippet;
+    footer?: Snippet;
+    /** `none` removes body padding so a table or list can meet the panel edge. */
+    padding?: 'default' | 'compact' | 'none';
+    headingLevel?: 'h2' | 'h3';
+    class?: string;
+}
+declare const DataPanel: import("svelte").Component<Props, {}, "">;
+type DataPanel = ReturnType<typeof DataPanel>;
+export default DataPanel;

package/dist/components/content/DescriptionList.svelte

@@ -14,7 +14,6 @@
     columns?: 1 | 2 | 3 | 4;
     layout?: 'vertical' | 'horizontal';
     bordered?: boolean;
-    density?: 'compact' | 'comfortable';
     class?: string;
   }
 
@@ -23,11 +22,9 @@
     columns = 1,
     layout = 'vertical',
     bordered = false,
-    density = 'comfortable',
     class: className = '',
   }: Props = $props();
 
-  const isCompact = $derived(density === 'compact');
   const isHorizontal = $derived(layout === 'horizontal');
 
   function spanClass(span: number | undefined): string {
@@ -65,7 +62,7 @@
           <dt
             class={cn(
               'svadmin-u-2859c861d7de svadmin-u-2689f3958069 svadmin-u-bfa603190748 svadmin-u-012fbd121f37 svadmin-u-65fdbade2025 svadmin-u-a968a4123359 svadmin-u-27165ed73e86 svadmin-u-cdf6e054e5e0',
-              isCompact ? 'svadmin-u-0e17f2bd9074 svadmin-u-ec0091ee009b svadmin-u-359090c2d529' : 'svadmin-u-f0faeb26d656 svadmin-u-e7ee55ac7ffe svadmin-u-359090c2d529 svadmin-u-e2327d142859',
+              'svadmin-u-f0faeb26d656 svadmin-u-e7ee55ac7ffe svadmin-u-359090c2d529 svadmin-u-e2327d142859',
               isHorizontal ? 'svadmin-u-b03f3c253900' : '',
             )}
           >
@@ -74,7 +71,7 @@
           <dd
             class={cn(
               'svadmin-u-170cee3ff4e4 svadmin-u-2689f3958069 svadmin-u-d4108abe6359 svadmin-u-cd0ad9a56558 svadmin-u-36e579c0b41c svadmin-u-7e0b7cdf1a94',
-              isCompact ? 'svadmin-u-0e17f2bd9074 svadmin-u-ec0091ee009b svadmin-u-359090c2d529' : 'svadmin-u-f0faeb26d656 svadmin-u-e7ee55ac7ffe svadmin-u-359090c2d529 svadmin-u-e2327d142859',
+              'svadmin-u-f0faeb26d656 svadmin-u-e7ee55ac7ffe svadmin-u-359090c2d529 svadmin-u-e2327d142859',
             )}
           >
             {#if item.href}
@@ -95,7 +92,7 @@
     class={cn(
       'svadmin-u-f3c543ad5fe9',
       columnClass,
-      isCompact ? 'svadmin-u-513d5c30bf66 svadmin-u-bcf14a5a5472' : 'svadmin-u-706c16d853e6 svadmin-u-375f36f67650',
+      'svadmin-u-706c16d853e6 svadmin-u-375f36f67650',
       className,
     )}
   >
@@ -110,7 +107,7 @@
         <dt
           class={cn(
             'svadmin-u-2689f3958069 svadmin-u-bfa603190748',
-            isCompact ? 'svadmin-u-359090c2d529' : 'svadmin-u-359090c2d529',
+            'svadmin-u-359090c2d529',
             isHorizontal ? 'svadmin-u-012fbd121f37 svadmin-u-2e7a6d18a20d' : '',
           )}
         >
@@ -119,7 +116,7 @@
         <dd
           class={cn(
             'svadmin-u-170cee3ff4e4 svadmin-u-2689f3958069 svadmin-u-d4108abe6359 svadmin-u-7e0b7cdf1a94 svadmin-u-36e579c0b41c',
-            isHorizontal ? 'svadmin-u-359090c2d529 svadmin-u-e2327d142859' : isCompact ? 'svadmin-u-15e1b1f444fe svadmin-u-359090c2d529 svadmin-u-e2327d142859' : 'svadmin-u-b6b02c0ebef6 svadmin-u-fc7473ca09eb',
+            isHorizontal ? 'svadmin-u-359090c2d529 svadmin-u-e2327d142859' : 'svadmin-u-b6b02c0ebef6 svadmin-u-fc7473ca09eb',
           )}
         >
           {#if item.href}

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

@@ -10,7 +10,6 @@ interface Props {
     columns?: 1 | 2 | 3 | 4;
     layout?: 'vertical' | 'horizontal';
     bordered?: boolean;
-    density?: 'compact' | 'comfortable';
     class?: string;
 }
 declare const DescriptionList: import("svelte").Component<Props, {}, "">;

package/dist/components/content/FilterToolbar.svelte

@@ -16,7 +16,6 @@
     clearLabel?: string;
     advancedLabel?: string;
     showSearch?: boolean;
-    density?: 'compact' | 'comfortable';
     activeFilterCount?: number;
     advancedOpen?: boolean;
     filters?: Snippet;
@@ -31,7 +30,6 @@
     clearLabel = 'Clear search',
     advancedLabel = 'Filters',
     showSearch = true,
-    density = 'compact',
     activeFilterCount = 0,
     advancedOpen = $bindable(false),
     filters,
@@ -40,7 +38,6 @@
     class: className = '',
   }: Props = $props();
 
-  const isCompact = $derived(density === 'compact');
   const advancedPanelId = `svadmin-filter-toolbar-advanced-${uid}`;
   const i18n = useTranslation();
   let mobile = $state(false);
@@ -53,7 +50,7 @@
   });
 </script>
 
-<div class={cn('svadmin-filter-toolbar', className)} data-density={density} data-svadmin-filter-toolbar data-advanced-open={advanced && advancedOpen ? 'true' : 'false'}>
+<div class={cn('svadmin-filter-toolbar', className)} data-svadmin-filter-toolbar data-advanced-open={advanced && advancedOpen ? 'true' : 'false'}>
   <div class="svadmin-filter-toolbar__row">
     {#if showSearch}
       <div class="svadmin-filter-toolbar__search">
@@ -86,7 +83,7 @@
     {#if advanced || (mobile && filters)}
       <Button
         variant={advancedOpen ? 'secondary' : 'outline'}
-        size={isCompact ? 'sm' : 'default'}
+        size="default"
         class="svadmin-filter-toolbar__toggle"
         onclick={() => advancedOpen = !advancedOpen}
         aria-expanded={advancedOpen}

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

@@ -5,7 +5,6 @@ interface Props {
     clearLabel?: string;
     advancedLabel?: string;
     showSearch?: boolean;
-    density?: 'compact' | 'comfortable';
     activeFilterCount?: number;
     advancedOpen?: boolean;
     filters?: Snippet;

package/dist/components/content/NetworkTable.svelte

@@ -6,15 +6,15 @@
   import DataState from './DataState.svelte';
   import type { DataStateKind } from './DataState.svelte';
   import type { NetworkColumn } from './NetworkTable.types.js';
-  interface Props { rows?: T[]; columns: NetworkColumn<T>[]; row?: Snippet<[T]>; state?: DataStateKind; stateTitle?: string; stateDescription?: string; emptyTitle?: string; emptyDescription?: string; retry?: () => void; retryLabel?: string; loadingLabel?: string; class?: string; density?: 'comfortable' | 'compact'; }
-  let { rows = [], columns, row, state, stateTitle, stateDescription, emptyTitle, emptyDescription, retry, retryLabel, loadingLabel, class: className = '', density = 'comfortable' }: Props = $props();
+  interface Props { rows?: T[]; columns: NetworkColumn<T>[]; row?: Snippet<[T]>; state?: DataStateKind; stateTitle?: string; stateDescription?: string; emptyTitle?: string; emptyDescription?: string; retry?: () => void; retryLabel?: string; loadingLabel?: string; class?: string; }
+  let { rows = [], columns, row, state, stateTitle, stateDescription, emptyTitle, emptyDescription, retry, retryLabel, loadingLabel, class: className = '' }: Props = $props();
   const resolvedState = $derived(state ?? (rows.length === 0 ? 'empty' : undefined));
 </script>
 {#if resolvedState}
   <DataState state={resolvedState} {...definedOptions({ title: stateTitle ?? emptyTitle, description: stateDescription ?? emptyDescription, retry, retryLabel, loadingLabel })} class={className} />
 {:else}
 <div class={'svadmin-u-1384f66f41d0 svadmin-u-5f22e64f2282 svadmin-u-ca6bcd4b6f3f svadmin-u-18049387f0af svadmin-u-cd0ad9a56558 ' + className}>
-  <Table.Root {density} data-svadmin-datatable>
+  <Table.Root data-svadmin-datatable>
     <Table.Header data-svadmin-table-head><Table.Row>{#each columns as column (String(column.key))}<Table.Head>{column.label}</Table.Head>{/each}</Table.Row></Table.Header>
     <Table.Body>
       {#each rows as item, index (String('id' in item ? item.id : index))}

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

@@ -15,7 +15,6 @@ declare function $$render<T extends object>(): {
         retryLabel?: string;
         loadingLabel?: string;
         class?: string;
-        density?: "comfortable" | "compact";
     };
     exports: {};
     bindings: "";

package/dist/components/content/PageSection.svelte

@@ -22,7 +22,7 @@
     display: grid;
     grid-template-columns: minmax(0, 1fr);
     align-content: start;
-    gap: 1rem;
+    gap: var(--svadmin-space-4);
     min-width: 0;
   }
 </style>