@svgrid/grid 1.2.34 → 2.0.0

package/src/GridFooter.svelte

@@ -1,178 +1,178 @@
-<script lang="ts" generics="TFeatures extends TableFeatures = TableFeatures, TData extends RowData = RowData">
-  import {
-      getGridCellA11yProps,
-      getGridCellDomId,
-      getGridHeaderA11yProps,
-      getGridRootA11yProps,
-      getGridRowA11yProps,
-      type EditorContext,
-      type CellEditorOption,
-      type Column,
-      type Row,
-      type RowData,
-      type TableFeatures,
-    } from "./index";
-  import "./sv-grid-scrollbar";
-  import type { Snippet } from "svelte";
-  import {
-      RenderSnippetConfig,
-      RenderComponentConfig,
-    } from "./render-component";
-  import {
-      buildSparkline,
-      toSparklineValues,
-    } from "./sparkline";
-  import SvGridDropdown from "./SvGridDropdown.svelte";
-  import type {
-      Props,
-      SelectionPoint,
-      SelectionRange,
-      CellEditState,
-      FilterOperator,
-      FilterOption,
-      MenuPosition,
-    } from "./SvGrid.types";
-  import {
-      cfTextStyle,
-      fmtStat,
-      getEditableInputValue,
-      getEditorInputType,
-      toValueArray,
-      getOptionLabel,
-      getOptionColor,
-      colorfulChipStyle,
-      getEditorClass,
-    } from "./SvGrid.helpers";
-  import {
-    } from "./SvGrid.controller.svelte";
-  import type { SvGridController } from "./SvGrid.controller.svelte";
-
-  let {
-    ctrl,
-    pager = true,
-    showStatus = true,
-    top = false,
-    pageSizeOptions,
-  }: {
-    ctrl: SvGridController<TFeatures, TData>;
-    /** Render the pagination controls in this instance. */
-    pager?: boolean;
-    /** Render the status bar in this instance. */
-    showStatus?: boolean;
-    /** This is a top-positioned footer (styling only). */
-    top?: boolean;
-    /** Page-size choices for the selector. Defaults to `[10, 25, 50, 100]`. */
-    pageSizeOptions?: number[];
-  } = $props();
-
-  // View facade: re-bind the controller's reactive members so the markup
-  // (moved verbatim from SvGrid.svelte) stays identical.
-  const paginationEnabled = $derived(ctrl.paginationEnabled);
-  const grid = $derived(ctrl.grid);
-  const paginationState = $derived(ctrl.paginationState);
-  const allRowsBeforePagination = $derived(ctrl.allRowsBeforePagination);
-  const statusBarEnabled = $derived(ctrl.statusBarEnabled);
-  const statusBarAggregates = $derived(ctrl.statusBarAggregates);
-  const statusBarStats = $derived(ctrl.statusBarStats);
-  const changePage = $derived(ctrl.changePage);
-  const goToPage = $derived(ctrl.goToPage);
-  const setPageSize = $derived(ctrl.setPageSize);
-</script>
-
-    {#if showStatus && statusBarEnabled && statusBarStats}
-      {@const s = statusBarStats}
-      <div class="sv-grid-status-bar" role="status" aria-live="polite">
-        {#each statusBarAggregates as agg (agg)}
-          {#if agg === "count"}
-            <span class="sv-grid-status-item"
-              ><span class="sv-grid-status-label">Count</span>{fmtStat(s.count)}</span
-            >
-          {:else if agg === "numericCount"}
-            <span class="sv-grid-status-item"
-              ><span class="sv-grid-status-label">Numeric</span>{fmtStat(s.numericCount)}</span
-            >
-          {:else if s.numericCount > 0 && agg === "sum"}
-            <span class="sv-grid-status-item"
-              ><span class="sv-grid-status-label">Sum</span>{fmtStat(s.sum)}</span
-            >
-          {:else if s.numericCount > 0 && agg === "avg"}
-            <span class="sv-grid-status-item"
-              ><span class="sv-grid-status-label">Avg</span>{fmtStat(s.avg)}</span
-            >
-          {:else if s.numericCount > 0 && agg === "min"}
-            <span class="sv-grid-status-item"
-              ><span class="sv-grid-status-label">Min</span>{fmtStat(s.min)}</span
-            >
-          {:else if s.numericCount > 0 && agg === "max"}
-            <span class="sv-grid-status-item"
-              ><span class="sv-grid-status-label">Max</span>{fmtStat(s.max)}</span
-            >
-          {/if}
-        {/each}
-      </div>
-    {/if}
-
-    {#if pager && paginationEnabled}
-      {@const totalRows = ctrl.paginationTotalRows}
-      {@const pageSize = ctrl.paginationPageSize}
-      {@const pageCount = Math.max(1, Math.ceil(totalRows / pageSize))}
-      {@const currentPage = Math.min(ctrl.paginationPageIndex + 1, pageCount)}
-      {@const rangeStart =
-        totalRows === 0 ? 0 : (currentPage - 1) * pageSize + 1}
-      {@const rangeEnd = Math.min(totalRows, currentPage * pageSize)}
-      {@const onFirst = currentPage <= 1}
-      {@const onLast = currentPage >= pageCount}
-      {@const sizes = pageSizeOptions && pageSizeOptions.length ? pageSizeOptions : [10, 25, 50, 100]}
-      <div class="sv-grid-pagination" class:sv-grid-pagination-top={top} role="navigation" aria-label="Pagination">
-        <div class="sv-grid-pagination-pagesize">
-          <span>Page Size:</span>
-          <div class="sv-grid-pagination-pagesize-dd">
-            <SvGridDropdown
-              options={sizes.map((n) => ({ value: n, label: String(n) }))}
-              value={pageSize}
-              autoOpen={false}
-              onChange={(v) => setPageSize(Number(v))}
-            />
-          </div>
-        </div>
-        <span class="sv-grid-pagination-range">
-          <strong>{rangeStart.toLocaleString()}</strong> to
-          <strong>{rangeEnd.toLocaleString()}</strong> of
-          <strong>{totalRows.toLocaleString()}</strong>
-        </span>
-        <div class="sv-grid-pagination-nav">
-          <button
-            type="button"
-            class="sv-grid-pagination-btn"
-            disabled={onFirst}
-            onclick={() => goToPage(0)}
-            aria-label="First page">⇤</button
-          >
-          <button
-            type="button"
-            class="sv-grid-pagination-btn"
-            disabled={onFirst}
-            onclick={() => changePage(-1)}
-            aria-label="Previous page">‹</button
-          >
-          <span class="sv-grid-pagination-label">
-            Page <strong>{currentPage.toLocaleString()}</strong> of
-            <strong>{pageCount.toLocaleString()}</strong>
-          </span>
-          <button
-            type="button"
-            class="sv-grid-pagination-btn"
-            disabled={onLast}
-            onclick={() => changePage(1)}
-            aria-label="Next page">›</button
-          >
-          <button
-            type="button"
-            class="sv-grid-pagination-btn"
-            disabled={onLast}
-            onclick={() => goToPage(pageCount - 1)}
-            aria-label="Last page">⇥</button
-          >
-        </div>
-      </div>
-    {/if}
+<script lang="ts" generics="TFeatures extends TableFeatures = TableFeatures, TData extends RowData = RowData">
+  import {
+      getGridCellA11yProps,
+      getGridCellDomId,
+      getGridHeaderA11yProps,
+      getGridRootA11yProps,
+      getGridRowA11yProps,
+      type EditorContext,
+      type CellEditorOption,
+      type Column,
+      type Row,
+      type RowData,
+      type TableFeatures,
+    } from "./index";
+  import "./sv-grid-scrollbar";
+  import type { Snippet } from "svelte";
+  import {
+      RenderSnippetConfig,
+      RenderComponentConfig,
+    } from "./render-component";
+  import {
+      buildSparkline,
+      toSparklineValues,
+    } from "./sparkline";
+  import SvGridDropdown from "./SvGridDropdown.svelte";
+  import type {
+      Props,
+      SelectionPoint,
+      SelectionRange,
+      CellEditState,
+      FilterOperator,
+      FilterOption,
+      MenuPosition,
+    } from "./SvGrid.types";
+  import {
+      cfTextStyle,
+      fmtStat,
+      getEditableInputValue,
+      getEditorInputType,
+      toValueArray,
+      getOptionLabel,
+      getOptionColor,
+      colorfulChipStyle,
+      getEditorClass,
+    } from "./SvGrid.helpers";
+  import {
+    } from "./SvGrid.controller.svelte";
+  import type { SvGridController } from "./SvGrid.controller.svelte";
+
+  let {
+    ctrl,
+    pager = true,
+    showStatus = true,
+    top = false,
+    pageSizeOptions,
+  }: {
+    ctrl: SvGridController<TFeatures, TData>;
+    /** Render the pagination controls in this instance. */
+    pager?: boolean;
+    /** Render the status bar in this instance. */
+    showStatus?: boolean;
+    /** This is a top-positioned footer (styling only). */
+    top?: boolean;
+    /** Page-size choices for the selector. Defaults to `[10, 25, 50, 100]`. */
+    pageSizeOptions?: number[];
+  } = $props();
+
+  // View facade: re-bind the controller's reactive members so the markup
+  // (moved verbatim from SvGrid.svelte) stays identical.
+  const paginationEnabled = $derived(ctrl.paginationEnabled);
+  const grid = $derived(ctrl.grid);
+  const paginationState = $derived(ctrl.paginationState);
+  const allRowsBeforePagination = $derived(ctrl.allRowsBeforePagination);
+  const statusBarEnabled = $derived(ctrl.statusBarEnabled);
+  const statusBarAggregates = $derived(ctrl.statusBarAggregates);
+  const statusBarStats = $derived(ctrl.statusBarStats);
+  const changePage = $derived(ctrl.changePage);
+  const goToPage = $derived(ctrl.goToPage);
+  const setPageSize = $derived(ctrl.setPageSize);
+</script>
+
+    {#if showStatus && statusBarEnabled && statusBarStats}
+      {@const s = statusBarStats}
+      <div class="sv-grid-status-bar" role="status" aria-live="polite">
+        {#each statusBarAggregates as agg (agg)}
+          {#if agg === "count"}
+            <span class="sv-grid-status-item"
+              ><span class="sv-grid-status-label">Count</span>{fmtStat(s.count)}</span
+            >
+          {:else if agg === "numericCount"}
+            <span class="sv-grid-status-item"
+              ><span class="sv-grid-status-label">Numeric</span>{fmtStat(s.numericCount)}</span
+            >
+          {:else if s.numericCount > 0 && agg === "sum"}
+            <span class="sv-grid-status-item"
+              ><span class="sv-grid-status-label">Sum</span>{fmtStat(s.sum)}</span
+            >
+          {:else if s.numericCount > 0 && agg === "avg"}
+            <span class="sv-grid-status-item"
+              ><span class="sv-grid-status-label">Avg</span>{fmtStat(s.avg)}</span
+            >
+          {:else if s.numericCount > 0 && agg === "min"}
+            <span class="sv-grid-status-item"
+              ><span class="sv-grid-status-label">Min</span>{fmtStat(s.min)}</span
+            >
+          {:else if s.numericCount > 0 && agg === "max"}
+            <span class="sv-grid-status-item"
+              ><span class="sv-grid-status-label">Max</span>{fmtStat(s.max)}</span
+            >
+          {/if}
+        {/each}
+      </div>
+    {/if}
+
+    {#if pager && paginationEnabled}
+      {@const totalRows = ctrl.paginationTotalRows}
+      {@const pageSize = ctrl.paginationPageSize}
+      {@const pageCount = Math.max(1, Math.ceil(totalRows / pageSize))}
+      {@const currentPage = Math.min(ctrl.paginationPageIndex + 1, pageCount)}
+      {@const rangeStart =
+        totalRows === 0 ? 0 : (currentPage - 1) * pageSize + 1}
+      {@const rangeEnd = Math.min(totalRows, currentPage * pageSize)}
+      {@const onFirst = currentPage <= 1}
+      {@const onLast = currentPage >= pageCount}
+      {@const sizes = pageSizeOptions && pageSizeOptions.length ? pageSizeOptions : [10, 25, 50, 100]}
+      <div class="sv-grid-pagination" class:sv-grid-pagination-top={top} role="navigation" aria-label="Pagination">
+        <div class="sv-grid-pagination-pagesize">
+          <span>Page Size:</span>
+          <div class="sv-grid-pagination-pagesize-dd">
+            <SvGridDropdown
+              options={sizes.map((n) => ({ value: n, label: String(n) }))}
+              value={pageSize}
+              autoOpen={false}
+              onChange={(v) => setPageSize(Number(v))}
+            />
+          </div>
+        </div>
+        <span class="sv-grid-pagination-range">
+          <strong>{rangeStart.toLocaleString()}</strong> to
+          <strong>{rangeEnd.toLocaleString()}</strong> of
+          <strong>{totalRows.toLocaleString()}</strong>
+        </span>
+        <div class="sv-grid-pagination-nav">
+          <button
+            type="button"
+            class="sv-grid-pagination-btn"
+            disabled={onFirst}
+            onclick={() => goToPage(0)}
+            aria-label="First page">⇤</button
+          >
+          <button
+            type="button"
+            class="sv-grid-pagination-btn"
+            disabled={onFirst}
+            onclick={() => changePage(-1)}
+            aria-label="Previous page">‹</button
+          >
+          <span class="sv-grid-pagination-label">
+            Page <strong>{currentPage.toLocaleString()}</strong> of
+            <strong>{pageCount.toLocaleString()}</strong>
+          </span>
+          <button
+            type="button"
+            class="sv-grid-pagination-btn"
+            disabled={onLast}
+            onclick={() => changePage(1)}
+            aria-label="Next page">›</button
+          >
+          <button
+            type="button"
+            class="sv-grid-pagination-btn"
+            disabled={onLast}
+            onclick={() => goToPage(pageCount - 1)}
+            aria-label="Last page">⇥</button
+          >
+        </div>
+      </div>
+    {/if}

package/src/SvAccordion.svelte

@@ -0,0 +1,109 @@
+<script lang="ts" module>
+  export type { AccordionItem, AccordionExpandMode } from './createAccordion.svelte'
+</script>
+
+<script lang="ts">
+  /**
+   * SvAccordion - a WAI-ARIA accordion (collapsible sections) with single- or
+   * multiple-expand and roving header focus (Up/Down/Home/End). Parity: Smart
+   * `smart-accordion`. Controlled via `expanded` + `onChange`; each panel's body
+   * is rendered through the `panel` snippet (receives the item).
+   *
+   * Behavior (expand state, keyboard, ARIA) lives in the headless `createAccordion`
+   * core; this component is one styled renderer over it.
+   */
+  import type { Snippet } from 'svelte'
+  import { type EditorDir } from './editor-contract'
+  import { createAccordion, type AccordionItem, type AccordionExpandMode } from './createAccordion.svelte'
+
+  type Props = {
+    items: ReadonlyArray<AccordionItem>
+    /** Expanded item ids (controlled). */
+    expanded?: string[]
+    onChange?: (expandedIds: string[]) => void
+    /** 'single' (at most one open) or 'multiple'. Default single. */
+    expandMode?: AccordionExpandMode
+    disabled?: boolean
+    dir?: EditorDir
+    /** Panel body for an item. */
+    panel?: Snippet<[AccordionItem]>
+  }
+
+  let {
+    items,
+    expanded = $bindable([]),
+    onChange,
+    expandMode = 'single',
+    disabled = false,
+    dir,
+    panel,
+  }: Props = $props()
+
+  const resolvedDir = $derived(dir === 'ltr' || dir === 'rtl' ? dir : undefined)
+
+  const acc = createAccordion({
+    items: () => items,
+    expanded: () => expanded,
+    onChange: (ids) => { expanded = ids; onChange?.(ids) },
+    expandMode: () => expandMode,
+    disabled: () => disabled,
+    dir: () => dir,
+  })
+
+  // DOM focus movement is a render concern: follow the core's roving focus header.
+  let rootEl: HTMLDivElement | null = null
+  let lastFocusTick = 0
+  $effect(() => {
+    if (acc.focusTick !== lastFocusTick) {
+      lastFocusTick = acc.focusTick
+      const i = acc.focusIndex
+      queueMicrotask(() => rootEl?.querySelector<HTMLElement>(`[data-idx="${i}"]`)?.focus())
+    }
+  })
+</script>
+
+<div bind:this={rootEl} class="sv-acc" class:is-disabled={disabled} dir={resolvedDir} {...acc.rootProps()}>
+  {#each items as item, i (item.id)}
+    {@const open = acc.isExpanded(item.id)}
+    <div class="sv-acc__item" class:is-open={open}>
+      <h3 class="sv-acc__heading">
+        <button class="sv-acc__header" {...acc.headerProps(i)}>
+          <svg class="sv-acc__chevron" viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m9 18 6-6-6-6" /></svg>
+          <span class="sv-acc__label">{item.label}</span>
+        </button>
+      </h3>
+      {#if open}
+        <div class="sv-acc__panel" {...acc.panelProps(i)}>
+          <div class="sv-acc__body">{#if panel}{@render panel(item)}{/if}</div>
+        </div>
+      {/if}
+    </div>
+  {/each}
+</div>
+
+<style>
+  .sv-acc {
+    --_accent: var(--sg-accent, #2563eb);
+    --_border: var(--sg-border, #e2e8f0);
+    --_radius: var(--sg-radius, 8px);
+    display: flex; flex-direction: column; width: 100%;
+    background: var(--sg-bg, #fff); color: var(--sg-fg, #0f172a);
+    border: 1px solid var(--_border); border-radius: var(--_radius); overflow: hidden;
+  }
+  .sv-acc.is-disabled { opacity: 0.6; }
+  .sv-acc__item + .sv-acc__item { border-top: 1px solid var(--_border); }
+  .sv-acc__heading { margin: 0; font: inherit; }
+  .sv-acc__header {
+    display: flex; align-items: center; gap: 8px; width: 100%;
+    padding: 12px 14px; background: none; border: 0; font: inherit; font-size: 14px; font-weight: 600;
+    color: inherit; cursor: pointer; text-align: start;
+  }
+  .sv-acc__header:hover:not(:disabled) { background: var(--sg-row-hover-bg, #f1f5f9); }
+  .sv-acc__header:disabled { opacity: 0.5; cursor: not-allowed; }
+  .sv-acc__header:focus-visible { outline: 2px solid var(--sg-focus-ring, var(--_accent)); outline-offset: -2px; }
+  .sv-acc__chevron { flex: none; color: var(--sg-muted, #64748b); transition: transform 0.16s; }
+  .sv-acc__item.is-open .sv-acc__chevron { transform: rotate(90deg); }
+  .sv-acc[dir='rtl'] .sv-acc__item:not(.is-open) .sv-acc__chevron { transform: scaleX(-1); }
+  .sv-acc__label { flex: 1; }
+  .sv-acc__body { padding: 4px 14px 16px; font-size: 13.5px; line-height: 1.6; color: var(--sg-fg, #0f172a); }
+</style>

package/src/SvAccordion.test.ts

@@ -0,0 +1,66 @@
+/**
+ * Component tests for SvAccordion: single vs multiple expand, ARIA wiring
+ * (aria-expanded / aria-controls / region), and toggle behavior.
+ */
+import { describe, expect, it } from 'vitest'
+import { mount, unmount, flushSync } from 'svelte'
+import { createRawSnippet } from 'svelte'
+import SvAccordion from './SvAccordion.svelte'
+
+const items = [
+  { id: 'a', label: 'First' },
+  { id: 'b', label: 'Second' },
+  { id: 'c', label: 'Third' },
+]
+
+// A trivial panel snippet so the body renders.
+const panel = createRawSnippet((item: () => { id: string; label: string }) => ({
+  render: () => `<p>body-${item().id}</p>`,
+}))
+
+function mountAcc(props: Record<string, unknown>) {
+  const target = document.createElement('div')
+  document.body.appendChild(target)
+  const app = mount(SvAccordion, { target, props: { panel, ...props } as any })
+  flushSync()
+  return { target, destroy: () => { unmount(app); target.remove() } }
+}
+
+describe('SvAccordion', () => {
+  it('renders headers with aria-expanded + aria-controls and shows only the open panel', () => {
+    const { target, destroy } = mountAcc({ items, expanded: ['a'] })
+    try {
+      const headers = [...target.querySelectorAll<HTMLButtonElement>('.sv-acc__header')]
+      expect(headers).toHaveLength(3)
+      expect(headers[0].getAttribute('aria-expanded')).toBe('true')
+      expect(headers[1].getAttribute('aria-expanded')).toBe('false')
+      const region = target.querySelector<HTMLElement>('.sv-acc__panel')!
+      expect(region.getAttribute('role')).toBe('region')
+      expect(region.getAttribute('aria-labelledby')).toBe(headers[0].id)
+      // Only one panel region is rendered (the open one).
+      expect(target.querySelectorAll('.sv-acc__panel')).toHaveLength(1)
+    } finally { destroy() }
+  })
+
+  it('single mode: opening one closes the previous', () => {
+    let got: string[] | undefined
+    const { target, destroy } = mountAcc({ items, expanded: ['a'], expandMode: 'single', onChange: (ids: string[]) => (got = ids) })
+    try {
+      const headers = target.querySelectorAll<HTMLButtonElement>('.sv-acc__header')
+      headers[1].click()
+      flushSync()
+      expect(got).toEqual(['b'])
+    } finally { destroy() }
+  })
+
+  it('multiple mode: toggling accumulates open panels', () => {
+    let got: string[] | undefined
+    const { target, destroy } = mountAcc({ items, expanded: ['a'], expandMode: 'multiple', onChange: (ids: string[]) => (got = ids) })
+    try {
+      const headers = target.querySelectorAll<HTMLButtonElement>('.sv-acc__header')
+      headers[2].click()
+      flushSync()
+      expect(got).toEqual(['a', 'c'])
+    } finally { destroy() }
+  })
+})

package/src/SvAlert.svelte

@@ -0,0 +1,92 @@
+<script lang="ts">
+  /**
+   * SvAlert - an inline, persistent contextual message (info / success / warning
+   * / danger / neutral) with an icon, optional title, dismiss button and trailing
+   * actions. Unlike SvToast (transient, floating), an alert stays in the layout.
+   * Theme-driven via `--sg-*` semantic tokens. Parity: Smart alert / message.
+   */
+  import type { Snippet } from 'svelte'
+
+  type Variant = 'info' | 'success' | 'warning' | 'danger' | 'neutral'
+
+  type Props = {
+    variant?: Variant
+    title?: string
+    /** Show a close (x) button. */
+    dismissible?: boolean
+    onDismiss?: () => void
+    /** Hide the leading status icon. */
+    hideIcon?: boolean
+    /** Softer, borderless tint vs the default bordered card. */
+    soft?: boolean
+    children?: Snippet
+    /** Trailing action buttons / links. */
+    actions?: Snippet
+    /** Custom leading icon (overrides the default glyph). */
+    icon?: Snippet
+  }
+
+  let {
+    variant = 'info',
+    title,
+    dismissible = false,
+    onDismiss,
+    hideIcon = false,
+    soft = false,
+    children,
+    actions,
+    icon,
+  }: Props = $props()
+
+  let open = $state(true)
+  function dismiss() { open = false; onDismiss?.() }
+  const glyph = (v: Variant) =>
+    v === 'success' ? '✓' : v === 'warning' ? '⚠' : v === 'danger' ? '✕' : v === 'neutral' ? '•' : 'ℹ'
+</script>
+
+{#if open}
+  <div
+    class="sv-alert sv-alert--{variant}"
+    class:is-soft={soft}
+    role={variant === 'danger' || variant === 'warning' ? 'alert' : 'status'}
+  >
+    {#if !hideIcon}
+      <span class="sv-alert__icon" aria-hidden="true">{#if icon}{@render icon()}{:else}{glyph(variant)}{/if}</span>
+    {/if}
+    <div class="sv-alert__body">
+      {#if title}<div class="sv-alert__title">{title}</div>{/if}
+      {#if children}<div class="sv-alert__msg">{@render children()}</div>{/if}
+      {#if actions}<div class="sv-alert__actions">{@render actions()}</div>{/if}
+    </div>
+    {#if dismissible}
+      <button type="button" class="sv-alert__x" aria-label="Dismiss" onclick={dismiss}>&times;</button>
+    {/if}
+  </div>
+{/if}
+
+<style>
+  .sv-alert {
+    --_c: var(--sg-info, #0891b2);
+    display: flex; align-items: flex-start; gap: 10px; box-sizing: border-box;
+    padding: 11px 12px; border-radius: 10px; font-size: 13px; line-height: 1.5;
+    background: var(--sg-bg, #fff); color: var(--sg-fg, #0f172a);
+    border: 1px solid color-mix(in srgb, var(--_c) 30%, var(--sg-border, #e2e8f0));
+    border-inline-start: 3px solid var(--_c);
+  }
+  .sv-alert.is-soft { border: 0; background: color-mix(in srgb, var(--_c) 12%, transparent); }
+  .sv-alert--info { --_c: var(--sg-info, #0891b2); }
+  .sv-alert--success { --_c: var(--sg-success, #16a34a); }
+  .sv-alert--warning { --_c: var(--sg-warning, #d97706); }
+  .sv-alert--danger { --_c: var(--sg-danger, #dc2626); }
+  .sv-alert--neutral { --_c: var(--sg-muted, #64748b); }
+  .sv-alert__icon { flex: none; width: 18px; height: 18px; display: grid; place-items: center; color: var(--_c); font-weight: 700; }
+  .sv-alert__body { flex: 1; min-width: 0; }
+  .sv-alert__title { font-weight: 650; margin-bottom: 1px; }
+  .sv-alert__msg { color: var(--sg-fg, #0f172a); overflow-wrap: anywhere; }
+  .sv-alert__actions { display: flex; gap: 8px; margin-top: 8px; }
+  .sv-alert__x {
+    flex: none; width: 22px; height: 22px; display: grid; place-items: center; margin: -2px -2px 0 0;
+    background: none; border: 0; color: var(--sg-muted, #64748b); cursor: pointer; border-radius: 5px; font-size: 17px; line-height: 1;
+  }
+  .sv-alert__x:hover { background: var(--sg-row-hover-bg, #f1f5f9); color: var(--sg-fg, #0f172a); }
+</style>