@svadmin/ui 0.72.0 → 0.73.0

package/dist/components/TreeSelect.svelte

@@ -2,7 +2,8 @@
   import { definedOptions } from '@svadmin/core/options';
 
   import { SvelteSet } from 'svelte/reactivity';
-  import { ChevronRight, ChevronDown, Check, X, Search, ChevronsUpDown } from '@lucide/svelte';
+  import { onDestroy } from 'svelte';
+  import { ChevronRight, ChevronDown, Check, X, Search, ChevronsUpDown, Loader2, Minus, RotateCw } from '@lucide/svelte';
   import { cn } from '../utils.js';
   import * as Popover from './ui/popover/index.js';
   import { Input } from './ui/input/index.js';
@@ -13,6 +14,7 @@
     value: string | number;
     label: string;
     children?: TreeSelectOption[];
+    hasChildren?: boolean;
     disabled?: boolean;
     expanded?: boolean;
   }
@@ -28,12 +30,13 @@
     onlyLeafSelectable?: boolean;
     disabled?: boolean;
     allowClear?: boolean;
+    loadChildren?: (node: TreeSelectOption) => Promise<TreeSelectOption[]>;
     class?: string;
     onchange?: (value: string | number | (string | number)[] | undefined) => void;
   }
 
   let {
-    options = [],
+    options = $bindable([]),
     value = $bindable(undefined),
     multiple = false,
     placeholder,
@@ -41,13 +44,22 @@
     onlyLeafSelectable = false,
     disabled = false,
     allowClear = true,
+    loadChildren,
     class: className,
     onchange,
   }: Props = $props();
 
   let open = $state(false);
   let searchQuery = $state('');
+  let loadingValues = new SvelteSet<string | number>();
+  let loadErrors = new SvelteSet<string | number>();
   let expandedNodes = new SvelteSet<string | number>();
+  let mounted = true;
+  const loads = new Map<string | number, {
+    node: TreeSelectOption;
+    loader: NonNullable<Props['loadChildren']>;
+  }>();
+  onDestroy(() => { mounted = false; loads.clear(); });
 
   // Map to quickly look up option info by value
   const optionMap = $derived.by(() => {
@@ -72,6 +84,19 @@
     return selectedValues.map((v) => optionMap.get(v)?.label ?? String(v));
   });
 
+  $effect.pre(() => {
+    const nodes = optionMap;
+    const loader = loadChildren;
+    const unavailable = disabled;
+    for (const [key, request] of loads) {
+      if (unavailable || nodes.get(key) !== request.node || loader !== request.loader) {
+        loads.delete(key);
+        loadingValues.delete(key);
+        loadErrors.delete(key);
+      }
+    }
+  });
+
   function toggleExpand(nodeValue: string | number, event?: MouseEvent) {
     event?.stopPropagation();
     if (expandedNodes.has(nodeValue)) {
@@ -81,32 +106,121 @@
     }
   }
 
+  function hasChildren(node: TreeSelectOption): boolean {
+    return Boolean(node.hasChildren ?? (node.children && node.children.length > 0));
+  }
+
   function isNodeExpanded(node: TreeSelectOption): boolean {
     if (searchQuery.trim()) return true; // Auto expand all on search
     return expandedNodes.has(node.value) || !!node.expanded;
   }
 
+  function selectableLeaves(node: TreeSelectOption): TreeSelectOption[] {
+    if (!hasChildren(node)) return node.disabled ? [] : [node];
+    if (!node.children) return [];
+    return (node.children ?? []).flatMap(selectableLeaves);
+  }
+
   function isSelected(val: string | number): boolean {
     return selectedValues.includes(val);
   }
 
-  function handleSelect(node: TreeSelectOption) {
+  function isNodeSelected(node: TreeSelectOption): boolean {
+    if (!multiple || !hasChildren(node)) return isSelected(node.value);
+    const leaves = selectableLeaves(node);
+    return leaves.length > 0 && leaves.every((leaf) => isSelected(leaf.value));
+  }
+
+  function isPartiallySelected(node: TreeSelectOption): boolean {
+    if (!multiple || !hasChildren(node)) return false;
+    const leaves = selectableLeaves(node);
+    const count = leaves.filter((leaf) => isSelected(leaf.value)).length;
+    return count > 0 && count < leaves.length;
+  }
+
+  function updateOptionsChildren(nodes: TreeSelectOption[], target: string | number, children: TreeSelectOption[]): TreeSelectOption[] {
+    let changed = false;
+    const next = nodes.map((node) => {
+      if (node.value === target) {
+        changed = true;
+        return { ...node, children, hasChildren: children.length > 0 };
+      }
+      if (!node.children) return node;
+      const updated = updateOptionsChildren(node.children, target, children);
+      if (updated === node.children) return node;
+      changed = true;
+      return { ...node, children: updated };
+    });
+    return changed ? next : nodes;
+  }
+
+  async function ensureChildren(node: TreeSelectOption): Promise<boolean> {
+    if (!mounted || disabled || loadingValues.has(node.value)) return false;
+    if (!node.hasChildren || node.children) return true;
+    const currentNode = optionMap.get(node.value);
+    if (!loadChildren || !currentNode) return false;
+    const request = { node: currentNode, loader: loadChildren };
+    loads.set(node.value, request);
+    const current = () => mounted && !disabled && loads.get(node.value) === request
+      && optionMap.get(node.value) === request.node && loadChildren === request.loader;
+    loadingValues.add(node.value);
+    loadErrors.delete(node.value);
+    try {
+      const children = await request.loader(request.node);
+      if (!current()) return false;
+      options = updateOptionsChildren(options, node.value, children);
+      return true;
+    } catch {
+      if (current()) loadErrors.add(node.value);
+      return false;
+    } finally {
+      if (mounted && loads.get(node.value) === request) {
+        loads.delete(node.value);
+        loadingValues.delete(node.value);
+      }
+    }
+  }
+
+  async function toggleExpandAsync(node: TreeSelectOption, event?: MouseEvent): Promise<void> {
+    event?.stopPropagation();
+    if (!await ensureChildren(node)) return;
+    if (!mounted || disabled) return;
+    toggleExpand(node.value);
+  }
+
+  function retryChildren(node: TreeSelectOption, event: MouseEvent): void {
+    event.stopPropagation();
+    void toggleExpandAsync(node);
+  }
+
+  function setMultipleSelection(node: TreeSelectOption): void {
+    const leaves = selectableLeaves(node);
+    const leafValues = new Set(leaves.map((leaf) => leaf.value));
+    const shouldRemove = leaves.length > 0 && leaves.every((leaf) => isSelected(leaf.value));
+    const next = shouldRemove
+      ? selectedValues.filter((value) => !leafValues.has(value))
+      : [...selectedValues, ...leaves.map((leaf) => leaf.value).filter((value) => !isSelected(value))];
+    value = next;
+    onchange?.(next);
+  }
+
+  async function handleSelect(node: TreeSelectOption): Promise<void> {
     if (node.disabled) return;
-    const hasChildren = node.children && node.children.length > 0;
-    if (onlyLeafSelectable && hasChildren) {
-      toggleExpand(node.value);
+    const nodeHasChildren = hasChildren(node);
+    if (onlyLeafSelectable && nodeHasChildren) {
+      await toggleExpandAsync(node);
       return;
     }
 
     if (multiple) {
-      let next: (string | number)[];
-      if (isSelected(node.value)) {
-        next = selectedValues.filter((v) => v !== node.value);
-      } else {
-        next = [...selectedValues, node.value];
+      if (nodeHasChildren) setMultipleSelection(node);
+      else {
+        const next = isSelected(node.value)
+          ? selectedValues.filter((selected) => selected !== node.value)
+          : [...selectedValues, node.value];
+        value = next;
+        onchange?.(next);
       }
-      value = next;
-      onchange?.(next);
     } else {
       const next = node.value;
       value = next;
@@ -115,6 +229,59 @@
     }
   }
 
+  function findParent(nodes: TreeSelectOption[], target: string | number, parent?: TreeSelectOption): TreeSelectOption | undefined {
+    for (const node of nodes) {
+      if (node.value === target) return parent;
+      const match = node.children ? findParent(node.children, target, node) : undefined;
+      if (match) return match;
+    }
+    return undefined;
+  }
+
+  function focusTreeNode(valueToFocus: string | number): void {
+    const element = document.querySelector<HTMLElement>(`[data-tree-value="${CSS.escape(String(valueToFocus))}"]`);
+    element?.focus();
+  }
+
+  function focusSibling(nodeValue: string | number, offset: number): void {
+    const nodes = Array.from(document.querySelectorAll<HTMLElement>('[data-tree-value]'));
+    const index = nodes.findIndex((node) => node.dataset['treeValue'] === String(nodeValue));
+    const target = nodes[index + offset];
+    target?.focus();
+  }
+
+  function handleTreeKeydown(event: KeyboardEvent, node: TreeSelectOption, expanded: boolean): void {
+    const nodeHasChildren = hasChildren(node);
+    if (event.key === 'Enter' || event.key === ' ') {
+      event.preventDefault();
+      void handleSelect(node);
+    } else if (event.key === 'ArrowDown') {
+      event.preventDefault();
+      focusSibling(node.value, 1);
+    } else if (event.key === 'ArrowUp') {
+      event.preventDefault();
+      focusSibling(node.value, -1);
+    } else if (event.key === 'Home') {
+      event.preventDefault();
+      document.querySelector<HTMLElement>('[data-tree-value]')?.focus();
+    } else if (event.key === 'End') {
+      event.preventDefault();
+      const nodes = document.querySelectorAll<HTMLElement>('[data-tree-value]');
+      nodes[nodes.length - 1]?.focus();
+    } else if (event.key === 'ArrowRight' && nodeHasChildren) {
+      event.preventDefault();
+      if (!expanded) void toggleExpandAsync(node);
+      else focusTreeNode(node.children?.[0]?.value ?? node.value);
+    } else if (event.key === 'ArrowLeft') {
+      event.preventDefault();
+      if (nodeHasChildren && expanded) toggleExpand(node.value);
+      else {
+        const parent = findParent(options, node.value);
+        if (parent) focusTreeNode(parent.value);
+      }
+    }
+  }
+
   function clearAll(event?: MouseEvent) {
     event?.stopPropagation();
     const next = multiple ? [] : undefined;
@@ -155,17 +322,21 @@
 </script>
 
 {#snippet treeNode(node: TreeSelectOption, level: number)}
-  {@const hasChildren = Boolean(node.children && node.children.length > 0)}
+  {@const nodeHasChildren = hasChildren(node)}
   {@const expanded = isNodeExpanded(node)}
-  {@const selected = isSelected(node.value)}
-  {@const selectable = !node.disabled && (!onlyLeafSelectable || !hasChildren)}
+  {@const selected = isNodeSelected(node)}
+  {@const partial = isPartiallySelected(node)}
+  {@const selectable = !node.disabled && (!onlyLeafSelectable || !nodeHasChildren)}
 
   <div class="svadmin-u-60fbb7713999 svadmin-u-8dddea0773ed">
     <div
       role="treeitem"
       tabindex="0"
       aria-selected={selected}
-      aria-expanded={hasChildren ? expanded : undefined}
+      aria-checked={multiple ? (partial ? 'mixed' : selected) : undefined}
+      aria-level={level + 1}
+      aria-expanded={nodeHasChildren ? expanded : undefined}
+      data-tree-value={String(node.value)}
       class={cn(
         'group svadmin-u-60fbb7713999 svadmin-u-3960ffc248d9 svadmin-u-8ef2268efbbc svadmin-u-58284b4ea568 svadmin-u-421ac2be5045 svadmin-u-d5eab218aa34 svadmin-u-ec0091ee009b svadmin-u-359090c2d529 svadmin-u-ceb69a6b0e5f svadmin-u-34516836730d svadmin-u-7f6912283f11',
         selected ? 'svadmin-u-375dc44df6e9 svadmin-u-20aaf08a7ed1 svadmin-u-2689f3958069' : 'svadmin-u-68646cdcc246 svadmin-u-d4108abe6359',
@@ -175,21 +346,20 @@
       onclick={() => {
         if (selectable) handleSelect(node);
       }}
-      onkeydown={(e) => {
-        if (e.key === 'Enter' || e.key === ' ') {
-          e.preventDefault();
-          if (selectable) handleSelect(node);
-        }
-      }}
+      onkeydown={(e) => handleTreeKeydown(e, node, expanded)}
     >
       <div class="svadmin-u-60fbb7713999 svadmin-u-7e0b7cdf1a94 svadmin-u-3960ffc248d9 svadmin-u-58284b4ea568">
-        {#if hasChildren}
+        {#if nodeHasChildren}
           <button
             type="button"
+            aria-label={`${node.label}: ${i18n.t('tree.toggleChildren')}`}
+            aria-busy={loadingValues.has(node.value)}
             class="svadmin-u-60fbb7713999 svadmin-u-11e59c6d5f6b svadmin-u-dc7972ebf3f3 svadmin-u-012fbd121f37 svadmin-u-3960ffc248d9 svadmin-u-86843cf1e227 svadmin-u-07389a777c1f svadmin-u-bfa603190748 svadmin-u-8e551981c8d7"
-            onclick={(e) => toggleExpand(node.value, e)}
+            onclick={(e) => void toggleExpandAsync(node, e)}
           >
-            {#if expanded}
+            {#if loadingValues.has(node.value)}
+              <Loader2 class="svadmin-u-7fc7f732bf7e svadmin-u-bf600f8e029c svadmin-u-afbdd13a380e" />
+            {:else if expanded}
               <ChevronDown class="svadmin-u-7fc7f732bf7e svadmin-u-bf600f8e029c" />
             {:else}
               <ChevronRight class="svadmin-u-7fc7f732bf7e svadmin-u-bf600f8e029c" />
@@ -202,12 +372,22 @@
         <span class="svadmin-u-f283ea9bea0e">{node.label}</span>
       </div>
 
-      {#if selected}
+      {#if loadErrors.has(node.value)}
+        <span role="alert" class="svadmin-u-bfa603190748">{i18n.t('tree.loadFailed')}</span>
+        <button type="button" aria-label={`${node.label}: ${i18n.t('common.retry')}`}
+          title={i18n.t('common.retry')} onclick={(e) => retryChildren(node, e)}>
+          <RotateCw class="svadmin-u-7fc7f732bf7e svadmin-u-bf600f8e029c" />
+        </button>
+      {/if}
+
+      {#if partial}
+        <Minus class="svadmin-u-7fc7f732bf7e svadmin-u-bf600f8e029c svadmin-u-012fbd121f37 svadmin-u-20aaf08a7ed1" />
+      {:else if selected}
         <Check class="svadmin-u-7fc7f732bf7e svadmin-u-bf600f8e029c svadmin-u-012fbd121f37 svadmin-u-20aaf08a7ed1" />
       {/if}
     </div>
 
-    {#if hasChildren && expanded && node.children}
+    {#if nodeHasChildren && expanded && node.children}
       <div role="group" class="svadmin-u-60fbb7713999 svadmin-u-8dddea0773ed">
         {#each node.children as child (child.value)}
           {@render treeNode(child, level + 1)}

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

@@ -2,6 +2,7 @@ export interface TreeSelectOption {
     value: string | number;
     label: string;
     children?: TreeSelectOption[];
+    hasChildren?: boolean;
     disabled?: boolean;
     expanded?: boolean;
 }
@@ -14,9 +15,10 @@ interface Props {
     onlyLeafSelectable?: boolean;
     disabled?: boolean;
     allowClear?: boolean;
+    loadChildren?: (node: TreeSelectOption) => Promise<TreeSelectOption[]>;
     class?: string;
     onchange?: (value: string | number | (string | number)[] | undefined) => void;
 }
-declare const TreeSelect: import("svelte").Component<Props, {}, "value">;
+declare const TreeSelect: import("svelte").Component<Props, {}, "value" | "options">;
 type TreeSelect = ReturnType<typeof TreeSelect>;
 export default TreeSelect;

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

@@ -0,0 +1,26 @@
+import type { Snippet } from 'svelte';
+import type { Sort } from '@svadmin/core';
+/** 可信宿主的渲染扩展；资源查询、权限、操作和偏好状态仍由 AutoTable 持有。 */
+export interface AutoTableGridState {
+    readonly records: readonly Record<string, unknown>[];
+    readonly columns: readonly {
+        key: string;
+        label: string;
+        width: number;
+        sortable: boolean;
+    }[];
+    readonly primaryKey: string;
+    readonly sorters: readonly Sort[];
+    readonly density: 'compact' | 'comfortable';
+    readonly locale: string;
+    readonly label: string;
+    readonly scopeKey: string;
+    readonly disabled: boolean;
+    readonly onSortChange: (sorters: readonly Sort[]) => void;
+    readonly cell: Snippet<[{
+        id: string | number;
+        field: string;
+    }]>;
+    readonly controls: Snippet;
+    readonly after: Snippet;
+}

package/dist/components/auto-table-grid.js

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

package/dist/components/content/ContentPageHeader.svelte

@@ -1,5 +1,7 @@
 <script lang="ts">
   import type { Snippet } from 'svelte';
+  import { contentHeader } from '../../styled-system/recipes/index.js';
+
   interface Props {
     title: string;
     eyebrow?: string;
@@ -9,23 +11,24 @@
     class?: string;
   }
   let { title, eyebrow, description, breadcrumbs = [], actions, class: className = '' }: Props = $props();
+  const styles = contentHeader();
 </script>
 
-<header class={'svadmin-u-6ed543e2fbbb ' + className} data-svadmin-page-header>
+<header class={styles.root + ' ' + className} data-svadmin-page-header>
   {#if breadcrumbs.length > 0}
-    <nav aria-label="Breadcrumb" class="svadmin-u-60fbb7713999 svadmin-u-3960ffc248d9 svadmin-u-77a2a20e90d4 svadmin-u-359090c2d529 svadmin-u-bfa603190748">
+    <nav aria-label="Breadcrumb" class={styles.breadcrumbs}>
       {#each breadcrumbs as crumb, index (crumb)}
         {#if index > 0}<span aria-hidden="true">/</span>{/if}
-        <span class={index === breadcrumbs.length - 1 ? 'svadmin-u-d4108abe6359' : ''}>{crumb}</span>
+        <span class={index === breadcrumbs.length - 1 ? styles.currentCrumb : ''}>{crumb}</span>
       {/each}
     </nav>
   {/if}
-  <div class="svadmin-u-60fbb7713999 svadmin-u-8dddea0773ed svadmin-u-0c3bc98565dd svadmin-u-020ba687fa12 svadmin-u-64cac80d2e9a svadmin-u-3b9871a0bf93">
-    <div class="svadmin-u-7e0b7cdf1a94 svadmin-u-da7c36cd8867">
-      {#if eyebrow}<p class="svadmin-u-359090c2d529 svadmin-u-2689f3958069 svadmin-u-bfa603190748">{eyebrow}</p>{/if}
-      <h1 class="svadmin-u-d5c9b0001e7e svadmin-u-e83a7042bc91 svadmin-u-e9fadafbd4a2 svadmin-u-d9256981a032 svadmin-u-d4108abe6359">{title}</h1>
-      {#if description}<p class="svadmin-u-2cc8041eca99 svadmin-u-fc7473ca09eb svadmin-u-18550d5945ae svadmin-u-bfa603190748">{description}</p>{/if}
+  <div class={styles.row}>
+    <div class={styles.heading}>
+      {#if eyebrow}<p class={styles.eyebrow}>{eyebrow}</p>{/if}
+      <h1 class={styles.title}>{title}</h1>
+      {#if description}<p class={styles.description}>{description}</p>{/if}
     </div>
-    {#if actions}<div class="svadmin-u-60fbb7713999 svadmin-u-012fbd121f37 svadmin-u-1eb5c6df38c1 svadmin-u-3960ffc248d9 svadmin-u-77a2a20e90d4">{@render actions()}</div>{/if}
+    {#if actions}<div class={styles.actions}>{@render actions()}</div>{/if}
   </div>
 </header>

package/dist/components/content/ContentPageShell.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import { definedOptions } from '@svadmin/core/options';
-
   import type { Snippet } from 'svelte';
+  import { contentPage } from '../../styled-system/recipes/index.js';
   import ContentPageHeader from './ContentPageHeader.svelte';
 
   interface Props {
@@ -26,16 +26,13 @@
     class: className = '',
   }: Props = $props();
 
-  const widthClass = $derived(
-    width === 'narrow'
-      ? 'svadmin-u-fa3f7111e53b'
-      : width === 'wide'
-        ? 'max-w-[92rem]'
-        : 'max-w-[74rem]',
-  );
+  // 保留旧组件对非窄屏/宽屏输入的默认宽度回退。
+  const styles = $derived(contentPage({
+    width: width === 'narrow' || width === 'wide' ? width : 'default',
+  }));
 </script>
 
-<div data-svadmin-content-page={pageId} class={'svadmin-u-0e12dc7de920 svadmin-u-6da6a3c3f741 ' + widthClass + ' svadmin-u-b3542e058833 ' + className}>
+<div data-svadmin-content-page={pageId} class={styles.root + ' ' + className}>
   {#if title}<ContentPageHeader {title} {...definedOptions({ "eyebrow": eyebrow })} {...definedOptions({ "description": description })} {...definedOptions({ "actions": actions })} />{/if}
   {@render children()}
 </div>

package/dist/components/content/FileBrowser.svelte

@@ -0,0 +1,35 @@
+<script module lang="ts">
+  import type { ComponentProps } from 'svelte';
+  import { Filemanager, Willow } from '@svar-ui/svelte-filemanager';
+  import { Locale } from '@svar-ui/svelte-core';
+
+  export type FileBrowserData = ComponentProps<typeof Filemanager>['data'];
+  export type FileBrowserInit = ComponentProps<typeof Filemanager>['init'];
+  export type FileBrowserMenuOptions = ComponentProps<typeof Filemanager>['menuOptions'];
+  export type FileBrowserProps = ComponentProps<typeof Filemanager> & {
+    words?: ComponentProps<typeof Locale>['words'];
+    fonts?: boolean;
+    class?: string;
+  };
+</script>
+
+<script lang="ts">
+  let {
+    words, fonts = false, class: className = '',
+    mode = 'table', icons = 'simple', readonly = true,
+    ...managerProps
+  }: FileBrowserProps = $props();
+</script>
+
+<div class={'svadmin-file-browser ' + className} data-slot="file-browser">
+  <Willow {fonts}>
+    <Locale words={words ?? {}}>
+      <Filemanager {...managerProps} {mode} {icons} {readonly} />
+    </Locale>
+  </Willow>
+</div>
+
+<style>
+  .svadmin-file-browser { height: 32rem; min-width: 0; max-width: 100%; overflow: hidden; }
+  .svadmin-file-browser :global(.wx-willow-theme) { --wx-font-family: inherit; --wx-fm-box-shadow: none; }
+</style>

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

@@ -0,0 +1,14 @@
+import type { ComponentProps } from 'svelte';
+import { Filemanager } from '@svar-ui/svelte-filemanager';
+import { Locale } from '@svar-ui/svelte-core';
+export type FileBrowserData = ComponentProps<typeof Filemanager>['data'];
+export type FileBrowserInit = ComponentProps<typeof Filemanager>['init'];
+export type FileBrowserMenuOptions = ComponentProps<typeof Filemanager>['menuOptions'];
+export type FileBrowserProps = ComponentProps<typeof Filemanager> & {
+    words?: ComponentProps<typeof Locale>['words'];
+    fonts?: boolean;
+    class?: string;
+};
+declare const FileBrowser: import("svelte").Component<FileBrowserProps, {}, "">;
+type FileBrowser = ReturnType<typeof FileBrowser>;
+export default FileBrowser;

package/dist/components/content/MetricBlock.svelte

@@ -1,6 +1,8 @@
 <script lang="ts">
   import type { Snippet } from 'svelte';
+  import { metricBlock } from '../../styled-system/recipes/index.js';
   import { Skeleton } from '../ui/skeleton/index.js';
+
   export type MetricTrendTone = 'positive' | 'negative' | 'warning' | 'neutral';
   interface Props {
     label: string;
@@ -22,23 +24,18 @@
     loading = false,
     class: className = '',
   }: Props = $props();
-  const trendClass: Record<MetricTrendTone, string> = {
-    positive: 'text-success',
-    negative: 'text-destructive',
-    warning: 'text-warning-foreground',
-    neutral: 'text-muted-foreground',
-  };
+  const styles = $derived(metricBlock({ trendTone }));
 </script>
 
-<div data-svadmin-metric-card role="region" aria-label={label} class={'svadmin-u-7e0b7cdf1a94 svadmin-u-5f22e64f2282 svadmin-u-ca6bcd4b6f3f svadmin-u-18049387f0af svadmin-u-cd0ad9a56558 svadmin-u-8e63407b5ceb svadmin-u-438b2237b8d6 ' + className}>
-  <div class="svadmin-u-60fbb7713999 svadmin-u-60541e1e26f8 svadmin-u-8ef2268efbbc svadmin-u-1004c0c3954c">
-    <p class="svadmin-u-fc7473ca09eb svadmin-u-bfa603190748">{label}</p>
-    {#if icon}<span class="svadmin-u-bfa603190748" aria-hidden="true">{@render icon()}</span>{/if}
+<div data-svadmin-metric-card role="region" aria-label={label} class={styles.root + ' ' + className}>
+  <div class={styles.header}>
+    <p class={styles.label}>{label}</p>
+    {#if icon}<span class={styles.icon} aria-hidden="true">{@render icon()}</span>{/if}
   </div>
   {#if loading}
-    <Skeleton class="svadmin-u-eccd13ef4f2f svadmin-u-ed8a5df7b2fb svadmin-u-69da7e4ff95d" />
+    <Skeleton class={styles.skeleton} />
   {:else}
-    <p class="svadmin-u-50d0d216a2f8 svadmin-u-f283ea9bea0e svadmin-u-3febee094e85 svadmin-u-e83a7042bc91 svadmin-u-d9256981a032 svadmin-u-d4108abe6359 svadmin-u-3032cae0badb">{value}</p>
-    {#if detail || trend}<div class="svadmin-u-50d0d216a2f8 svadmin-u-60fbb7713999 svadmin-u-1eb5c6df38c1 svadmin-u-77a2a20e90d4 svadmin-u-359090c2d529">{#if trend}<span class={'svadmin-u-2689f3958069 svadmin-u-3032cae0badb ' + trendClass[trendTone]}>{trend}</span>{/if}{#if detail}<span class="svadmin-u-bfa603190748">{detail}</span>{/if}</div>{/if}
+    <p class={styles.value}>{value}</p>
+    {#if detail || trend}<div class={styles.meta}>{#if trend}<span class={styles.trend}>{trend}</span>{/if}{#if detail}<span class={styles.detail}>{detail}</span>{/if}</div>{/if}
   {/if}
 </div>

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; }
-  let { rows = [], columns, row, state, stateTitle, stateDescription, emptyTitle, emptyDescription, retry, retryLabel, loadingLabel, class: className = '' }: 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; density?: 'comfortable' | 'compact'; }
+  let { rows = [], columns, row, state, stateTitle, stateDescription, emptyTitle, emptyDescription, retry, retryLabel, loadingLabel, class: className = '', density = 'comfortable' }: 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 data-svadmin-datatable>
+  <Table.Root {density} 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,6 +15,7 @@ declare function $$render<T extends object>(): {
         retryLabel?: string;
         loadingLabel?: string;
         class?: string;
+        density?: "comfortable" | "compact";
     };
     exports: {};
     bindings: "";

package/dist/components/content/PageToolbar.svelte

@@ -1,18 +1,14 @@
 <script lang="ts">
   import type { Snippet } from 'svelte';
-  interface Props {
-    leading?: Snippet;
-    trailing?: Snippet;
-    children?: Snippet;
-    class?: string;
-  }
+  import { productToolbar } from '../../styled-system/recipes/index.js';
+  interface Props { leading?: Snippet; trailing?: Snippet; children?: Snippet; class?: string; }
   let { leading, trailing, children, class: className = '' }: Props = $props();
+  const styles = productToolbar();
 </script>
-
-<div data-svadmin-table-toolbar class={'svadmin-u-60fbb7713999 svadmin-u-8dddea0773ed svadmin-u-1004c0c3954c svadmin-u-5f22e64f2282 svadmin-u-ca6bcd4b6f3f svadmin-u-18049387f0af svadmin-u-cd0ad9a56558 svadmin-u-eb6e8b881acd svadmin-u-438b2237b8d6 svadmin-u-020ba687fa12 svadmin-u-9f76a62f4f44 svadmin-u-3b9871a0bf93 ' + className}>
-  <div class="svadmin-u-60fbb7713999 svadmin-u-7e0b7cdf1a94 svadmin-u-36e579c0b41c svadmin-u-1eb5c6df38c1 svadmin-u-3960ffc248d9 svadmin-u-77a2a20e90d4">
+<div data-svadmin-table-toolbar class={styles.root + ' ' + className}>
+  <div class={styles.leading}>
     {#if leading}{@render leading()}{/if}
     {#if children}{@render children()}{/if}
   </div>
-  {#if trailing}<div class="svadmin-u-60fbb7713999 svadmin-u-012fbd121f37 svadmin-u-1eb5c6df38c1 svadmin-u-3960ffc248d9 svadmin-u-77a2a20e90d4">{@render trailing()}</div>{/if}
+  {#if trailing}<div class={styles.trailing}>{@render trailing()}</div>{/if}
 </div>

package/dist/components/content/SectionHeader.svelte

@@ -1,19 +1,14 @@
 <script lang="ts">
   import type { Snippet } from 'svelte';
-  interface Props {
-    title: string;
-    description?: string;
-    actions?: Snippet;
-    id?: string;
-    class?: string;
-  }
+  import { productSection } from '../../styled-system/recipes/index.js';
+  interface Props { title: string; description?: string; actions?: Snippet; id?: string; class?: string; }
   let { title, description, actions, id, class: className = '' }: Props = $props();
+  const styles = productSection();
 </script>
-
-<div class={'svadmin-u-60fbb7713999 svadmin-u-8dddea0773ed svadmin-u-1004c0c3954c svadmin-u-020ba687fa12 svadmin-u-64cac80d2e9a svadmin-u-3b9871a0bf93 ' + className}>
-  <div class="svadmin-u-7e0b7cdf1a94 svadmin-u-da7c36cd8867">
-    <h2 {id} class="svadmin-u-4ee734926ff6 svadmin-u-e83a7042bc91 svadmin-u-d4108abe6359">{title}</h2>
-    {#if description}<p class="svadmin-u-fc7473ca09eb svadmin-u-bfa603190748">{description}</p>{/if}
+<div class={styles.root + ' ' + className} data-svadmin-section-header>
+  <div class={styles.heading}>
+    <h2 {id} class={styles.title}>{title}</h2>
+    {#if description}<p class={styles.description}>{description}</p>{/if}
   </div>
-  {#if actions}<div class="svadmin-u-60fbb7713999 svadmin-u-012fbd121f37 svadmin-u-1eb5c6df38c1 svadmin-u-3960ffc248d9 svadmin-u-77a2a20e90d4">{@render actions()}</div>{/if}
+  {#if actions}<div class={styles.actions}>{@render actions()}</div>{/if}
 </div>