@svgrid/grid 2.2.31 → 2.2.33

package/dist/SvGridDropdown.svelte.d.ts

@@ -38,6 +38,10 @@ type Props = {
     onCommit?: () => void;
     /** Called when the user dismisses (Escape, blur with no change). */
     onCancel?: () => void;
+    /** The option list is still being fetched (async `editorOptions`). Shows a
+     *  loading line instead of "No options", which would read as "nothing to
+     *  pick" when the truth is "not here yet". */
+    loading?: boolean;
 };
 declare const SvGridDropdown: import("svelte").Component<Props, {}, "">;
 type SvGridDropdown = ReturnType<typeof SvGridDropdown>;

package/dist/SvGridSelect.svelte

@@ -38,6 +38,12 @@
     loadOptions?: (query: string) => Promise<Row[]>
     debounceMs?: number
     loadingText?: string
+    /** Shown when the list is empty / a search matches nothing (localization). */
+    emptyText?: string
+    /** Placeholder in the panel's search box (localization). */
+    searchPlaceholder?: string
+    /** Accessible name for the panel's search box (localization). */
+    searchLabel?: string
   }
 
   let {
@@ -47,13 +53,14 @@
     labelField,
     value = $bindable<string | number | null>(null),
     onChange,
-    onCommit,
-    onCancel,
     placeholder = 'Select…',
     searchable = true,
     loadOptions,
     debounceMs = 250,
     loadingText = 'Loading…',
+    emptyText = 'No matches',
+    searchPlaceholder = 'Search…',
+    searchLabel = 'Search options',
     disabled = false,
     readonly = false,
     label,
@@ -168,8 +175,8 @@
         aria-expanded="true"
         aria-controls={gs.panelId}
         aria-activedescendant={gs.activeDescendant()}
-        aria-label="Search options"
-        placeholder="Search…"
+        aria-label={searchLabel}
+        placeholder={searchPlaceholder}
         value={search}
         oninput={(e) => { search = e.currentTarget.value; gs.active = 0; if (loadOptions) runLoad(search) }}
       />
@@ -205,7 +212,7 @@
             {/each}
           </div>
         {:else}
-          <div class="sv-gs__empty" role="row">{loading ? loadingText : 'No matches'}</div>
+          <div class="sv-gs__empty" role="row">{loading ? loadingText : emptyText}</div>
         {/each}
         {#if loading && filtered.length}
           <div class="sv-gs__empty" role="row" aria-live="polite">{loadingText}</div>

package/dist/SvGridSelect.svelte.d.ts

@@ -26,6 +26,12 @@ type Props = Pick<SvEditorProps, 'disabled' | 'readonly' | 'label' | 'hint' | 'e
     loadOptions?: (query: string) => Promise<Row[]>;
     debounceMs?: number;
     loadingText?: string;
+    /** Shown when the list is empty / a search matches nothing (localization). */
+    emptyText?: string;
+    /** Placeholder in the panel's search box (localization). */
+    searchPlaceholder?: string;
+    /** Accessible name for the panel's search box (localization). */
+    searchLabel?: string;
 };
 declare const SvGridSelect: import("svelte").Component<Props, {}, "value">;
 type SvGridSelect = ReturnType<typeof SvGridSelect>;

package/dist/SvGroupCell.svelte

@@ -39,7 +39,12 @@
     aria-label={meta.expanded ? 'Collapse group' : 'Expand group'}
     onclick={() => onToggle(row)}
   >
-    <span class="sv-group-chev" class:open={meta.expanded} aria-hidden="true">▸</span>
+    <!-- Same chevron the grid's own expanders and SvTree draw, so every
+         expander in the library looks identical. -->
+    <span class="sv-group-chev" class:open={meta.expanded} aria-hidden="true">
+      <svg viewBox="0 0 24 24" width="12" height="12" fill="none" stroke="currentColor"
+        stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-6-6-6" /></svg>
+    </span>
     <span class="sv-group-key">{meta.key}</span>
     {#if meta.loading}<span class="sv-group-load" aria-hidden="true">…</span>{/if}
   </button>
@@ -76,7 +81,9 @@
     cursor: pointer;
   }
   .sv-group-chev {
-    display: inline-block;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
     transition: transform 0.15s;
     color: var(--sg-muted, #64748b);
   }

package/dist/SvKbd.svelte

@@ -21,7 +21,7 @@
 
 {#if keys}
   <span class="sv-kbd-group sv-kbd--{size}">
-    {#each keys as k, i}
+    {#each keys as k, i (i)}
       {#if i > 0}<span class="sv-kbd__sep" aria-hidden="true">{separator}</span>{/if}
       <kbd class="sv-kbd">{k}</kbd>
     {/each}

package/dist/SvList.svelte

@@ -37,7 +37,7 @@
   {#if children}
     {@render children()}
   {:else if items}
-    {#each items as item}<li>{item}</li>{/each}
+    {#each items as item, i (i)}<li>{item}</li>{/each}
   {/if}
 </svelte:element>
 

package/dist/SvMenubar.svelte

@@ -41,7 +41,7 @@
   const resolvedDir = $derived(dir === 'ltr' || dir === 'rtl' ? dir : undefined)
   const rtl = $derived(resolvedDir === 'rtl')
 
-  let triggerEls = $state<(HTMLButtonElement | null)[]>([])
+  const triggerEls = $state<(HTMLButtonElement | null)[]>([])
   let panelEl = $state<HTMLDivElement | null>(null)
   let openIndex = $state(-1)
   let activeIndex = $state(0)

package/dist/SvMultiSelect.svelte

@@ -37,6 +37,12 @@
     /** Debounce for remote search. Default 250ms. */
     debounceMs?: number
     loadingText?: string
+    /** Shown when the list is empty / a search matches nothing (localization). */
+    emptyText?: string
+    /** Placeholder in the panel's search box (localization). */
+    searchPlaceholder?: string
+    /** Accessible name for the panel's search box (localization). */
+    searchLabel?: string
   }
 
   let {
@@ -44,7 +50,6 @@
     value = $bindable<ReadonlyArray<string | number>>([]),
     onChange,
     onCommit,
-    onCancel,
     placeholder = 'Select…',
     searchable = true,
     maxTagCount = 3,
@@ -52,6 +57,9 @@
     loadOptions,
     debounceMs = 250,
     loadingText = 'Loading…',
+    emptyText = 'No matches',
+    searchPlaceholder = 'Search…',
+    searchLabel = 'Search options',
     disabled = false,
     readonly = false,
     label,
@@ -193,8 +201,8 @@
         aria-expanded="true"
         aria-controls={ms.panelId}
         aria-activedescendant={ms.activeDescendant()}
-        aria-label="Search options"
-        placeholder="Search…"
+        aria-label={searchLabel}
+        placeholder={searchPlaceholder}
         value={search}
         oninput={(e) => { search = e.currentTarget.value; ms.active = 0; if (loadOptions) runLoad(search) }}
       />
@@ -224,7 +232,7 @@
           <span class="sv-ms__label">{opt.label}</span>
         </li>
       {:else}
-        <li class="sv-ms__empty" aria-disabled="true">{loading ? loadingText : 'No matches'}</li>
+        <li class="sv-ms__empty" aria-disabled="true">{loading ? loadingText : emptyText}</li>
       {/each}
       {#if loading && filtered.length}
         <li class="sv-ms__loading" aria-live="polite">{loadingText}</li>

package/dist/SvMultiSelect.svelte.d.ts

@@ -25,6 +25,12 @@ type Props = Pick<SvEditorProps, 'disabled' | 'readonly' | 'label' | 'hint' | 'e
     /** Debounce for remote search. Default 250ms. */
     debounceMs?: number;
     loadingText?: string;
+    /** Shown when the list is empty / a search matches nothing (localization). */
+    emptyText?: string;
+    /** Placeholder in the panel's search box (localization). */
+    searchPlaceholder?: string;
+    /** Accessible name for the panel's search box (localization). */
+    searchLabel?: string;
 };
 declare const SvMultiSelect: import("svelte").Component<Props, {}, "value">;
 type SvMultiSelect = ReturnType<typeof SvMultiSelect>;

package/dist/SvOtpInput.svelte

@@ -52,7 +52,7 @@
   const autoId = nextEditorId('sv-otp')
   const uid = $derived(id ?? autoId)
   const cells = $derived(otpCells(sanitizeOtp(value, length, numeric), length))
-  let inputs = $state<HTMLInputElement[]>([])
+  const inputs = $state<HTMLInputElement[]>([])
 
   function commit(next: string) {
     const clean = sanitizeOtp(next, length, numeric)

package/dist/SvPasswordInput.svelte

@@ -142,7 +142,7 @@
   .sv-pw__meter { display: flex; gap: 4px; }
   .sv-pw__bar { flex: 1; height: 4px; border-radius: 2px; background: var(--sg-border, #e2e8f0); transition: background 0.15s; }
   .sv-pw__bar.on.is-lvl1 { background: var(--sg-danger, #dc2626); }
-  .sv-pw__bar.on.is-lvl2 { background: var(--sg-warning, #f59e0b); }
+  .sv-pw__bar.on.is-lvl2 { background: var(--sg-warning, #d97706); }
   .sv-pw__bar.on.is-lvl3 { background: #eab308; }
   .sv-pw__bar.on.is-lvl4 { background: var(--sg-success, #16a34a); }
   .sv-pw__strength { font-size: 11px; font-weight: 600; color: var(--sg-muted, #64748b); }

package/dist/SvProgress.svelte

@@ -75,7 +75,7 @@
     display: flex; align-items: center; gap: 10px; width: 100%;
   }
   .sv-prog--success { --_c: var(--sg-success, #16a34a); }
-  .sv-prog--warning { --_c: var(--sg-warning, #f59e0b); }
+  .sv-prog--warning { --_c: var(--sg-warning, #d97706); }
   .sv-prog--danger { --_c: var(--sg-danger, #dc2626); }
   .sv-prog__track {
     position: relative; flex: 1; overflow: hidden;

package/dist/SvRating.svelte

@@ -96,7 +96,7 @@
 <style>
   .sv-rating {
     --_on: var(--sg-rating-on, #f59e0b);
-    --_off: var(--sg-rating-empty, #d1d5db);
+    --_off: var(--sg-rating-empty, #cbd5e1);
     --_sz: 22px;
     display: inline-flex; gap: 2px; align-items: center;
   }

package/dist/SvResult.svelte

@@ -59,7 +59,7 @@
   }
   .sv-result--success { --_c: var(--sg-success, #16a34a); }
   .sv-result--error { --_c: var(--sg-danger, #dc2626); }
-  .sv-result--warning { --_c: var(--sg-warning, #f59e0b); }
+  .sv-result--warning { --_c: var(--sg-warning, #d97706); }
   .sv-result--notfound { --_c: var(--sg-muted, #64748b); }
   .sv-result__icon {
     display: grid; place-items: center; width: 60px; height: 60px; border-radius: 50%; margin-bottom: 4px;

package/dist/SvRichText.svelte

@@ -19,7 +19,7 @@
    * <SvRichText bind:value={html} placeholder="Write something…" />
    * ```
    */
-  import { nextEditorId } from './editor-contract'
+  import { nextEditorId, resolveMessages } from './editor-contract'
 
   const DEFAULT_TOOLS: RichTextTool[] = [
     'bold', 'italic', 'underline', 'strike', '|',
@@ -29,16 +29,27 @@
     'link', 'clear', '|', 'undo', 'redo',
   ]
 
-  const META: Record<Exclude<RichTextTool, '|'>, { label: string; glyph: string }> = {
-    bold: { label: 'Bold', glyph: 'B' }, italic: { label: 'Italic', glyph: 'I' },
-    underline: { label: 'Underline', glyph: 'U' }, strike: { label: 'Strikethrough', glyph: 'S' },
-    h1: { label: 'Heading 1', glyph: 'H1' }, h2: { label: 'Heading 2', glyph: 'H2' },
-    h3: { label: 'Heading 3', glyph: 'H3' }, p: { label: 'Paragraph', glyph: '¶' },
-    ul: { label: 'Bullet list', glyph: '•' }, ol: { label: 'Numbered list', glyph: '1.' },
-    quote: { label: 'Quote', glyph: '❝' }, code: { label: 'Code block', glyph: '</>' },
-    alignLeft: { label: 'Align left', glyph: '≡' }, alignCenter: { label: 'Align center', glyph: '≣' },
-    alignRight: { label: 'Align right', glyph: '≡' }, link: { label: 'Link', glyph: '🔗' },
-    clear: { label: 'Clear formatting', glyph: '⌫' }, undo: { label: 'Undo', glyph: '↶' }, redo: { label: 'Redo', glyph: '↷' },
+  /** Toolbar glyphs. Mode-independent and not language-dependent, so they stay
+   *  fixed; the LABELS beside them are localizable via `messages`. */
+  const GLYPH: Record<Exclude<RichTextTool, '|'>, string> = {
+    bold: 'B', italic: 'I', underline: 'U', strike: 'S',
+    h1: 'H1', h2: 'H2', h3: 'H3', p: '¶',
+    ul: '•', ol: '1.', quote: '❝', code: '</>',
+    alignLeft: '≡', alignCenter: '≣', alignRight: '≡', link: '🔗',
+    clear: '⌫', undo: '↶', redo: '↷',
+  }
+
+  /** User-facing strings (localizable via `messages`). Every one is a tooltip +
+   *  accessible name on a toolbar button, so leaving them hard-coded made the
+   *  whole toolbar English-only for screen-reader users. */
+  type RichTextMessages = Record<Exclude<RichTextTool, '|'>, string> & { linkPrompt: string; toolbar: string }
+  const DEFAULT_MESSAGES: RichTextMessages = {
+    bold: 'Bold', italic: 'Italic', underline: 'Underline', strike: 'Strikethrough',
+    h1: 'Heading 1', h2: 'Heading 2', h3: 'Heading 3', p: 'Paragraph',
+    ul: 'Bullet list', ol: 'Numbered list', quote: 'Quote', code: 'Code block',
+    alignLeft: 'Align left', alignCenter: 'Align center', alignRight: 'Align right',
+    link: 'Link', clear: 'Clear formatting', undo: 'Undo', redo: 'Redo',
+    linkPrompt: 'Link URL', toolbar: 'Formatting',
   }
 
   type Props = {
@@ -52,6 +63,8 @@
     /** Toolbar tools + order; use '|' for a separator. */
     tools?: RichTextTool[]
     ariaLabel?: string
+    /** Override any toolbar label / prompt (localization). */
+    messages?: Partial<RichTextMessages>
   }
 
   let {
@@ -63,8 +76,10 @@
     minHeight = '160px',
     tools = DEFAULT_TOOLS,
     ariaLabel = 'Rich text editor',
+    messages,
   }: Props = $props()
 
+  const M = $derived(resolveMessages(DEFAULT_MESSAGES, messages))
   const uid = nextEditorId('sv-rt')
   let editorEl = $state<HTMLDivElement | null>(null)
   let focused = $state(false)
@@ -75,6 +90,10 @@
   // (writing innerHTML while focused would collapse the caret).
   $effect(() => {
     const v = value ?? ''
+    // A contenteditable owns its own DOM: letting Svelte re-render the body
+    // would wipe the caret mid-typing, so the value is pushed in by hand and
+    // only while the editor is unfocused.
+    // eslint-disable-next-line svelte/no-dom-manipulating
     if (editorEl && !focused && editorEl.innerHTML !== v) editorEl.innerHTML = v
     if (editorEl) empty = editorEl.textContent!.trim().length === 0
   })
@@ -109,14 +128,14 @@
     ul: () => exec('insertUnorderedList'), ol: () => exec('insertOrderedList'),
     quote: () => exec('formatBlock', 'BLOCKQUOTE'), code: () => exec('formatBlock', 'PRE'),
     alignLeft: () => exec('justifyLeft'), alignCenter: () => exec('justifyCenter'), alignRight: () => exec('justifyRight'),
-    link: () => { const url = typeof prompt === 'function' ? prompt('Link URL', 'https://') : null; if (url) exec('createLink', url) },
+    link: () => { const url = typeof prompt === 'function' ? prompt(M.linkPrompt, 'https://') : null; if (url) exec('createLink', url) },
     clear: () => exec('removeFormat'), undo: () => exec('undo'), redo: () => exec('redo'),
   }
 </script>
 
 <div class="sv-rt" class:is-disabled={disabled} class:is-readonly={readonly}>
   {#if !readonly}
-    <div class="sv-rt__toolbar" role="toolbar" aria-label="Formatting" aria-controls={uid}>
+    <div class="sv-rt__toolbar" role="toolbar" aria-label={M.toolbar} aria-controls={uid}>
       {#each tools as t, i (i)}
         {#if t === '|'}
           <span class="sv-rt__sep" aria-hidden="true"></span>
@@ -126,13 +145,13 @@
             class="sv-rt__btn"
             class:is-on={activeState[t]}
             data-tool={t}
-            title={META[t].label}
-            aria-label={META[t].label}
+            title={M[t]}
+            aria-label={M[t]}
             aria-pressed={activeState[t] ? true : undefined}
             {disabled}
             onmousedown={(e) => e.preventDefault()}
             onclick={run[t]}
-          >{META[t].glyph}</button>
+          >{GLYPH[t]}</button>
         {/if}
       {/each}
     </div>

package/dist/SvRichText.svelte.d.ts

@@ -1,4 +1,11 @@
 export type RichTextTool = 'bold' | 'italic' | 'underline' | 'strike' | 'h1' | 'h2' | 'h3' | 'p' | 'ul' | 'ol' | 'quote' | 'code' | 'alignLeft' | 'alignCenter' | 'alignRight' | 'link' | 'clear' | 'undo' | 'redo' | '|';
+/** User-facing strings (localizable via `messages`). Every one is a tooltip +
+ *  accessible name on a toolbar button, so leaving them hard-coded made the
+ *  whole toolbar English-only for screen-reader users. */
+type RichTextMessages = Record<Exclude<RichTextTool, '|'>, string> & {
+    linkPrompt: string;
+    toolbar: string;
+};
 type Props = {
     /** HTML string (bindable). */
     value?: string;
@@ -10,6 +17,8 @@ type Props = {
     /** Toolbar tools + order; use '|' for a separator. */
     tools?: RichTextTool[];
     ariaLabel?: string;
+    /** Override any toolbar label / prompt (localization). */
+    messages?: Partial<RichTextMessages>;
 };
 declare const SvRichText: import("svelte").Component<Props, {}, "value">;
 type SvRichText = ReturnType<typeof SvRichText>;

package/dist/SvSwitchButton.svelte

@@ -53,8 +53,9 @@
 </script>
 
 <SvField id={uid} {label} {hint} {error} {required} {dir}>
+  <!-- role="switch" arrives via switchProps(), which the a11y pass cannot see through -->
+  <!-- svelte-ignore a11y_role_supports_aria_props_implicit -->
   <button
-    role="switch"
     class="sv-switch sv-switch--{size}"
     class:is-on={checked}
     class:is-readonly={readonly}

package/dist/SvToaster.svelte

@@ -135,7 +135,7 @@
 
   :global(.sv-toast--success) { --_accent: var(--sg-success, #16a34a); }
   :global(.sv-toast--error) { --_accent: var(--sg-danger, #dc2626); }
-  :global(.sv-toast--warning) { --_accent: var(--sg-warning, #f59e0b); }
+  :global(.sv-toast--warning) { --_accent: var(--sg-warning, #d97706); }
   :global(.sv-toast--info) { --_accent: var(--sg-accent, #2563eb); }
 
   :global(.sv-toast__icon) { flex: none; width: 18px; height: 18px; display: grid; place-items: center; color: var(--_accent); font-weight: 700; }

package/dist/SvTour.svelte

@@ -156,6 +156,10 @@
     >
       {#if step.image}
         <div class="sv-tour__media">
+          <!-- A step's `image` is either a URL (rendered as an img above) or
+               inline SVG markup the app author wrote for its own tour - never
+               user input, so rendering it as markup is the intent. -->
+          <!-- eslint-disable-next-line svelte/no-at-html-tags -->
           {#if /^(https?:|data:|\/)/.test(step.image)}<img class="sv-tour__img" src={step.image} alt="" />{:else}{@html step.image}{/if}
         </div>
       {/if}

package/dist/SvTree.svelte

@@ -48,6 +48,11 @@
     /** Render a built-in search box that drives the filter. */
     searchable?: boolean
     searchPlaceholder?: string
+    /** Placeholder row shown under a lazy node while its children load
+     *  (localization). */
+    loadingText?: string
+    /** Accessible name for the search box's clear button (localization). */
+    clearSearchLabel?: string
     /** Sort siblings by label ('asc'/'desc') or a custom comparator. */
     sort?: 'asc' | 'desc' | ((a: TreeNode, b: TreeNode) => number)
     /** Allow inline rename (double-click or F2). Fires onRename. */
@@ -77,6 +82,8 @@
     filter,
     searchable = false,
     searchPlaceholder = 'Search...',
+    loadingText = 'Loading...',
+    clearSearchLabel = 'Clear search',
     sort,
     editable = false,
     onRename,
@@ -173,7 +180,7 @@
     if (!node?.lazy || loaded.has(id) || loadingIds.has(id)) return
     loadingIds = new Set(loadingIds).add(id)
     // A placeholder row shows immediately while the promise resolves.
-    loaded = new Map(loaded).set(id, [{ id: `${id}__loading`, label: 'Loading...', disabled: true }])
+    loaded = new Map(loaded).set(id, [{ id: `${id}__loading`, label: loadingText, disabled: true }])
     try {
       const kids = await loadChildren(node)
       loaded = new Map(loaded).set(id, kids)
@@ -268,7 +275,7 @@
   <div class="sv-tree__search">
     <svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true"><circle cx="11" cy="11" r="7" /><path d="m21 21-4.3-4.3" /></svg>
     <input class="sv-tree__search-input" type="text" placeholder={searchPlaceholder} bind:value={query} aria-label={searchPlaceholder} />
-    {#if query}<button type="button" class="sv-tree__search-clear" aria-label="Clear search" onclick={() => (query = '')}>&times;</button>{/if}
+    {#if query}<button type="button" class="sv-tree__search-clear" aria-label={clearSearchLabel} onclick={() => (query = '')}>&times;</button>{/if}
   </div>
 {/if}
 <!-- svelte-ignore a11y_no_static_element_interactions -->

package/dist/SvTree.svelte.d.ts

@@ -30,6 +30,11 @@ type Props = {
     /** Render a built-in search box that drives the filter. */
     searchable?: boolean;
     searchPlaceholder?: string;
+    /** Placeholder row shown under a lazy node while its children load
+     *  (localization). */
+    loadingText?: string;
+    /** Accessible name for the search box's clear button (localization). */
+    clearSearchLabel?: string;
     /** Sort siblings by label ('asc'/'desc') or a custom comparator. */
     sort?: 'asc' | 'desc' | ((a: TreeNode, b: TreeNode) => number);
     /** Allow inline rename (double-click or F2). Fires onRename. */

package/dist/SvTreeSelect.svelte

@@ -36,8 +36,6 @@
     nodes,
     value = $bindable<string | number | null>(null),
     onChange,
-    onCommit,
-    onCancel,
     placeholder = 'Select…',
     showPath = false,
     expandedIds = [],
@@ -186,7 +184,11 @@
           {...ts.itemProps(i)}
         >
           {#if row.hasChildren}
-            <span class="sv-ts__chev" class:is-open={row.expanded} aria-hidden="true">▸</span>
+            <!-- Same chevron as SvTree and the grid's expanders. -->
+            <span class="sv-ts__chev" class:is-open={row.expanded} aria-hidden="true">
+              <svg viewBox="0 0 24 24" width="12" height="12" fill="none" stroke="currentColor"
+                stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-6-6-6" /></svg>
+            </span>
           {:else}
             <span class="sv-ts__chev sv-ts__chev--leaf" aria-hidden="true"></span>
           {/if}
@@ -226,7 +228,7 @@
   :global(.sv-ts__row.is-active) { background: var(--sg-row-hover-bg, #f1f5f9); }
   :global(.sv-ts__row.is-selected) { color: var(--sg-accent, #2563eb); font-weight: 600; }
   :global(.sv-ts__row.is-disabled) { opacity: 0.5; cursor: not-allowed; }
-  :global(.sv-ts__chev) { width: 14px; flex: none; color: var(--sg-muted, #64748b); transition: transform 0.12s; font-size: 10px; }
+  :global(.sv-ts__chev) { width: 14px; flex: none; display: inline-flex; align-items: center; justify-content: center; color: var(--sg-muted, #64748b); transition: transform 0.12s; }
   :global(.sv-ts__chev.is-open) { transform: rotate(90deg); }
   :global(.sv-ts__chev--leaf) { visibility: hidden; }
   :global(.sv-ts__label) { flex: 1; white-space: nowrap; }

package/dist/build-api.js

@@ -315,6 +315,22 @@ export function createGridApi(ctx) {
             clearFilter(columnId) {
                 ctx.clearColumnFilter(columnId);
             },
+            refreshEditorOptions(columnId) {
+                // Async `editorOptions` are cached per column (or per column+row for a
+                // per-row source) so opening an editor twice does not refetch. This
+                // drops those entries, so the next render re-runs the source - use it
+                // when the underlying list changed server-side.
+                if (columnId == null) {
+                    ctx.asyncEditorOptions = {};
+                    return;
+                }
+                const next = { ...ctx.asyncEditorOptions };
+                for (const key of Object.keys(next)) {
+                    if (key === columnId || key.startsWith(`${columnId}::`))
+                        delete next[key];
+                }
+                ctx.asyncEditorOptions = next;
+            },
             clearAllFilters() {
                 // See `setFilter` for why the read-modify-write is untracked.
                 untrack(() => {