svelte-multiselect 11.4.0 → 11.5.1

package/dist/MultiSelect.svelte

@@ -1,10 +1,11 @@
 <!-- eslint-disable-next-line @stylistic/quotes -- TS generics require string literals -->
 <script lang="ts" generics="Option extends import('./types').Option">import { tick, untrack } from 'svelte';
 import { flip } from 'svelte/animate';
+import { SvelteMap, SvelteSet } from 'svelte/reactivity';
 import { highlight_matches } from './attachments';
 import CircleSpinner from './CircleSpinner.svelte';
 import Icon from './Icon.svelte';
-import { fuzzy_match, get_label, get_style, is_object } from './utils';
+import { fuzzy_match, get_label, get_style, has_group, is_object } from './utils';
 import Wiggle from './Wiggle.svelte';
 let { activeIndex = $bindable(null), activeOption = $bindable(null), createOptionMsg = `Create this option...`, allowUserOptions = false, allowEmpty = false, autocomplete = `off`, autoScroll = true, breakpoint = 800, defaultDisabledTitle = `This option is disabled`, disabled = false, disabledInputTitle = `This input is disabled`, duplicateOptionMsg = `This option is already selected`, duplicates = false, keepSelectedInDropdown = false, key = (opt) => `${get_label(opt)}`.toLowerCase(), filterFunc = (opt, searchText) => {
     if (!searchText)
@@ -17,32 +18,81 @@ let { activeIndex = $bindable(null), activeOption = $bindable(null), createOptio
     ? (Array.isArray(value) ? value : [value])
     : (options
         ?.filter((opt) => typeof opt === `object` && opt !== null && opt?.preselected)
-        .slice(0, maxSelect ?? undefined) ?? [])), sortSelected = false, selectedOptionsDraggable = !sortSelected, style = null, ulOptionsClass = ``, ulSelectedClass = ``, ulSelectedStyle = null, ulOptionsStyle = null, expandIcon, selectedItem, children, removeIcon, afterInput, spinner, disabledIcon, option, userMsg, onblur, onclick, onfocus, onkeydown, onkeyup, onmousedown, onmouseenter, onmouseleave, ontouchcancel, ontouchend, ontouchmove, ontouchstart, onadd, oncreate, onremove, onremoveAll, onchange, onopen, onclose, onselectAll, portal: portal_params = {}, 
+        .slice(0, maxSelect ?? undefined) ?? [])), sortSelected = false, selectedOptionsDraggable = !sortSelected, style = null, ulOptionsClass = ``, ulSelectedClass = ``, ulSelectedStyle = null, ulOptionsStyle = null, expandIcon, selectedItem, children, removeIcon, afterInput, spinner, disabledIcon, option, userMsg, onblur, onclick, onfocus, onkeydown, onkeyup, onmousedown, onmouseenter, onmouseleave, ontouchcancel, ontouchend, ontouchmove, ontouchstart, onadd, oncreate, onremove, onremoveAll, onchange, onopen, onclose, onselectAll, onreorder, portal: portal_params = {}, 
 // Select all feature
 selectAllOption = false, liSelectAllClass = ``, 
 // Dynamic options loading
 loadOptions, 
 // Animation parameters for selected options flip animation
-selectedFlipParams = { duration: 100 }, ...rest } = $props();
-// Extract loadOptions function and config (supports both simple function and config object)
-const load_options_fn = $derived(loadOptions
-    ? (typeof loadOptions === `function` ? loadOptions : loadOptions.fetch)
-    : null);
-const load_options_debounce_ms = $derived(loadOptions && typeof loadOptions === `object`
-    ? (loadOptions.debounceMs ?? 300)
-    : 300);
-const load_options_batch_size = $derived(loadOptions && typeof loadOptions === `object`
-    ? (loadOptions.batchSize ?? 50)
-    : 50);
-const load_options_on_open = $derived(loadOptions && typeof loadOptions === `object`
-    ? (loadOptions.onOpen ?? true)
-    : true);
-// Helper to compare arrays/values for equality to avoid unnecessary updates
+selectedFlipParams = { duration: 100 }, 
+// Option grouping feature
+collapsibleGroups = false, collapsedGroups = $bindable(new Set()), groupSelectAll = false, ungroupedPosition = `first`, groupSortOrder = `none`, searchExpandsCollapsedGroups = false, searchMatchesGroups = false, keyboardExpandsCollapsedGroups = false, stickyGroupHeaders = false, liGroupHeaderClass = ``, liGroupHeaderStyle = null, groupHeader, ongroupToggle, oncollapseAll, onexpandAll, collapseAllGroups = $bindable(), expandAllGroups = $bindable(), 
+// Keyboard shortcuts for common actions
+shortcuts = {}, ...rest } = $props();
+// Generate unique IDs for ARIA associations (combobox pattern)
+// Uses provided id prop or generates a random one using crypto API
+const internal_id = $derived(id ?? `sms-${crypto.randomUUID().slice(0, 8)}`);
+const listbox_id = $derived(`${internal_id}-listbox`);
+// Parse shortcut string into modifier+key parts
+function parse_shortcut(shortcut) {
+    const parts = shortcut.toLowerCase().split(`+`).map((part) => part.trim());
+    const key = parts.pop() ?? ``;
+    return {
+        key,
+        ctrl: parts.includes(`ctrl`),
+        shift: parts.includes(`shift`),
+        alt: parts.includes(`alt`),
+        meta: parts.includes(`meta`) || parts.includes(`cmd`),
+    };
+}
+function matches_shortcut(event, shortcut) {
+    if (!shortcut)
+        return false;
+    const parsed = parse_shortcut(shortcut);
+    // Require non-empty key to prevent "ctrl+" from matching any key with ctrl pressed
+    if (!parsed.key)
+        return false;
+    const key_matches = event.key.toLowerCase() === parsed.key;
+    const ctrl_matches = event.ctrlKey === parsed.ctrl;
+    const shift_matches = event.shiftKey === parsed.shift;
+    const alt_matches = event.altKey === parsed.alt;
+    const meta_matches = event.metaKey === parsed.meta;
+    return (key_matches && ctrl_matches && shift_matches && alt_matches && meta_matches);
+}
+// Default shortcuts
+const default_shortcuts = {
+    select_all: `ctrl+a`,
+    clear_all: `ctrl+shift+a`,
+    open: null,
+    close: null,
+};
+const effective_shortcuts = $derived({
+    ...default_shortcuts,
+    ...shortcuts,
+});
+// Extract loadOptions config into single derived object (supports both simple function and config object)
+const load_options_config = $derived.by(() => {
+    if (!loadOptions)
+        return null;
+    const is_fn = typeof loadOptions === `function`;
+    return {
+        fetch: is_fn ? loadOptions : loadOptions.fetch,
+        debounce_ms: is_fn ? 300 : (loadOptions.debounceMs ?? 300),
+        batch_size: is_fn ? 50 : (loadOptions.batchSize ?? 50),
+        on_open: is_fn ? true : (loadOptions.onOpen ?? true),
+    };
+});
+// Helper to compare arrays/values for equality to avoid unnecessary updates.
 // Prevents infinite loops when value/selected are bound to reactive wrappers
 // that clone arrays on assignment (e.g. Superforms, Svelte stores). See issue #309.
+// Treats null/undefined/[] as equivalent empty states to prevent extra updates on init (#369).
 function values_equal(val1, val2) {
     if (val1 === val2)
         return true;
+    const empty1 = val1 == null || (Array.isArray(val1) && val1.length === 0);
+    const empty2 = val2 == null || (Array.isArray(val2) && val2.length === 0);
+    if (empty1 && empty2)
+        return true;
     if (Array.isArray(val1) && Array.isArray(val2)) {
         return val1.length === val2.length &&
             val1.every((item, idx) => item === val2[idx]);
@@ -66,6 +116,15 @@ $effect.pre(() => {
 });
 let wiggle = $state(false); // controls wiggle animation when user tries to exceed maxSelect
 let ignore_hover = $state(false); // ignore mouseover during keyboard navigation to prevent scroll-triggered hover
+// Track last selection action for aria-live announcements
+let last_action = $state(null);
+// Clear last_action after announcement so option counts can be announced again
+$effect(() => {
+    if (last_action) {
+        const timer = setTimeout(() => (last_action = null), 1000);
+        return () => clearTimeout(timer);
+    }
+});
 // Internal state for loadOptions feature (null = never loaded)
 let loaded_options = $state([]);
 let load_options_has_more = $state(true);
@@ -76,6 +135,130 @@ let effective_options = $derived(loadOptions ? loaded_options : (options ?? []))
 // Cache selected keys and labels to avoid repeated .map() calls
 let selected_keys = $derived(selected.map(key));
 let selected_labels = $derived(selected.map(get_label));
+// Sets for O(1) lookups (used in template, has_user_msg, group_header_state, batch operations)
+let selected_keys_set = $derived(new Set(selected_keys));
+let selected_labels_set = $derived(new Set(selected_labels));
+// Memoized Set of disabled option keys for O(1) lookups in large option sets
+let disabled_option_keys = $derived(new Set(effective_options
+    .filter((opt) => is_object(opt) && opt.disabled)
+    .map(key)));
+// Check if an option is disabled (uses memoized Set for O(1) lookup)
+const is_disabled = (opt) => disabled_option_keys.has(key(opt));
+// Group matching options by their `group` key
+// Note: SvelteMap used here to satisfy eslint svelte/prefer-svelte-reactivity rule,
+// though a plain Map would work since this is recreated fresh on each derivation
+let grouped_options = $derived.by(() => {
+    const groups_map = new SvelteMap();
+    const ungrouped = [];
+    for (const opt of matchingOptions) {
+        if (has_group(opt)) {
+            const existing = groups_map.get(opt.group);
+            if (existing)
+                existing.push(opt);
+            else
+                groups_map.set(opt.group, [opt]);
+        }
+        else {
+            ungrouped.push(opt);
+        }
+    }
+    let grouped = [...groups_map.entries()].map(([group, options]) => ({
+        group,
+        options,
+        collapsed: collapsedGroups.has(group),
+    }));
+    // Apply group sorting if specified
+    if (groupSortOrder && groupSortOrder !== `none`) {
+        grouped = grouped.toSorted((group_a, group_b) => {
+            if (typeof groupSortOrder === `function`) {
+                return groupSortOrder(group_a.group, group_b.group);
+            }
+            const cmp = group_a.group.localeCompare(group_b.group);
+            return groupSortOrder === `desc` ? -cmp : cmp;
+        });
+    }
+    if (ungrouped.length === 0)
+        return grouped;
+    const ungrouped_entry = { group: null, options: ungrouped, collapsed: false };
+    return ungroupedPosition === `first`
+        ? [ungrouped_entry, ...grouped]
+        : [...grouped, ungrouped_entry];
+});
+// Flattened options for navigation (excludes options in collapsed groups)
+let navigable_options = $derived(grouped_options.flatMap(({ options: group_opts, collapsed }) => collapsed && collapsibleGroups ? [] : group_opts));
+// Pre-computed Map for O(1) index lookups (avoids O(n²) in template)
+let navigable_index_map = $derived(new Map(navigable_options.map((opt, idx) => [opt, idx])));
+let group_header_state = $derived.by(() => {
+    const state = new SvelteMap();
+    for (const { group, options: opts, collapsed } of grouped_options) {
+        if (group === null)
+            continue;
+        const selectable = get_selectable_opts(opts, collapsed);
+        const all_selected = selectable.length > 0 &&
+            selectable.every((opt) => selected_keys_set.has(key(opt)));
+        // Count selected options (only needed when keepSelectedInDropdown is enabled)
+        let selected_count = 0;
+        if (keepSelectedInDropdown) {
+            for (const opt of opts) {
+                if (selected_keys_set.has(key(opt)))
+                    selected_count++;
+            }
+        }
+        state.set(group, { all_selected, selected_count });
+    }
+    return state;
+});
+// Update collapsedGroups state: 'add' adds groups, 'delete' removes groups, 'set' replaces all
+function update_collapsed_groups(action, groups) {
+    const items = typeof groups === `string` ? [groups] : [...groups];
+    if (action === `set`)
+        collapsedGroups = new SvelteSet(items);
+    else {
+        const updated = new SvelteSet(collapsedGroups);
+        for (const group of items)
+            updated[action](group);
+        collapsedGroups = updated;
+    }
+}
+// Toggle group collapsed state
+function toggle_group_collapsed(group_name) {
+    const was_collapsed = collapsedGroups.has(group_name);
+    update_collapsed_groups(was_collapsed ? `delete` : `add`, group_name);
+    ongroupToggle?.({ group: group_name, collapsed: !was_collapsed });
+}
+// Collapse/expand all groups (exposed via bindable props)
+collapseAllGroups = () => {
+    const groups = grouped_options
+        .map((entry) => entry.group)
+        .filter((group_name) => group_name !== null);
+    if (groups.length === 0)
+        return;
+    update_collapsed_groups(`set`, groups);
+    oncollapseAll?.({ groups });
+};
+expandAllGroups = () => {
+    const groups = [...collapsedGroups];
+    if (groups.length === 0)
+        return;
+    update_collapsed_groups(`set`, []);
+    onexpandAll?.({ groups });
+};
+// Expand specified groups and fire ongroupToggle for each
+function expand_groups(groups_to_expand) {
+    if (groups_to_expand.length === 0)
+        return;
+    update_collapsed_groups(`delete`, groups_to_expand);
+    for (const group of groups_to_expand)
+        ongroupToggle?.({ group, collapsed: false });
+}
+// Get names of collapsed groups that have matching options
+const get_collapsed_with_matches = () => grouped_options.flatMap(({ group, collapsed, options: opts }) => group && collapsed && opts.length > 0 ? [group] : []);
+// Auto-expand collapsed groups when search matches their options
+$effect(() => {
+    if (searchExpandsCollapsedGroups && searchText && collapsibleGroups) {
+        expand_groups(get_collapsed_with_matches());
+    }
+});
 // Normalize placeholder prop (supports string or { text, persistent } object)
 const placeholder_text = $derived(typeof placeholder === `string` ? placeholder : placeholder?.text ?? null);
 const placeholder_persistent = $derived(typeof placeholder === `object` && placeholder?.persistent === true);
@@ -125,30 +308,49 @@ if (maxOptions &&
 }
 let option_msg_is_active = $state(false); // controls active state of <li>{createOptionMsg}</li>
 let window_width = $state(0);
-// options matching the current search text
+// Check if option matches search text (label or optionally group name)
+const matches_search = (opt, search) => {
+    if (filterFunc(opt, search))
+        return true;
+    if (searchMatchesGroups && search && has_group(opt)) {
+        return fuzzy
+            ? fuzzy_match(search, opt.group)
+            : opt.group.toLowerCase().includes(search.toLowerCase());
+    }
+    return false;
+};
 $effect.pre(() => {
     // When using loadOptions, server handles filtering, so skip client-side filterFunc
-    const opts_to_filter = effective_options;
-    matchingOptions = opts_to_filter.filter((opt) => (loadOptions || filterFunc(opt, searchText)) &&
-        // remove already selected options from dropdown list unless duplicate selections are allowed
-        // or keepSelectedInDropdown is enabled
-        (!selected_keys.includes(key(opt)) || duplicates || keepSelectedInDropdown));
+    matchingOptions = effective_options.filter((opt) => {
+        // Check if option is already selected and should be excluded
+        const keep_in_list = !selected_keys_set.has(key(opt)) ||
+            duplicates ||
+            keepSelectedInDropdown;
+        if (!keep_in_list)
+            return false;
+        // When using loadOptions, server handles filtering; otherwise check search match
+        return loadOptions || matches_search(opt, searchText);
+    });
 });
 // reset activeIndex if out of bounds (can happen when options change while dropdown is open)
 $effect(() => {
-    if (activeIndex !== null && !matchingOptions[activeIndex]) {
+    if (activeIndex !== null && !navigable_options[activeIndex]) {
         activeIndex = null;
     }
 });
 // update activeOption when activeIndex changes
 $effect(() => {
-    activeOption = matchingOptions[activeIndex ?? -1] ?? null;
+    activeOption = navigable_options[activeIndex ?? -1] ?? null;
 });
+// Compute the ID of the currently active option for aria-activedescendant
+const active_option_id = $derived(activeIndex !== null && activeIndex < navigable_options.length
+    ? `${internal_id}-opt-${activeIndex}`
+    : undefined);
 // Helper to check if removing an option would violate minSelect constraint
 const can_remove = $derived(minSelect === null || selected.length > minSelect);
 // toggle an option between selected and unselected states (for keepSelectedInDropdown mode)
 function toggle_option(option_to_toggle, event) {
-    const is_currently_selected = selected_keys.includes(key(option_to_toggle));
+    const is_currently_selected = selected_keys_set.has(key(option_to_toggle));
     if (is_currently_selected) {
         if (can_remove)
             remove(option_to_toggle, event);
@@ -164,7 +366,7 @@ function add(option_to_add, event) {
     if (!isNaN(Number(option_to_add)) && typeof selected_labels[0] === `number`) {
         option_to_add = Number(option_to_add); // convert to number if possible
     }
-    const is_duplicate = selected_keys.includes(key(option_to_add));
+    const is_duplicate = selected_keys_set.has(key(option_to_add));
     if ((maxSelect === null || maxSelect === 1 || selected.length < maxSelect) &&
         (duplicates || !is_duplicate)) {
         if (!effective_options.includes(option_to_add) && // first check if we find option in the options list
@@ -213,6 +415,7 @@ function add(option_to_add, event) {
         }
         clear_validity();
         handle_dropdown_after_select(event);
+        last_action = { type: `add`, label: `${get_label(option_to_add)}` };
         onadd?.({ option: option_to_add });
         onchange?.({ option: option_to_add, type: `add` });
     }
@@ -223,7 +426,7 @@ function remove(option_to_drop, event) {
     if (selected.length === 0)
         return;
     const idx = selected.findIndex((opt) => key(opt) === key(option_to_drop));
-    let [option_removed] = selected.splice(idx, 1); // remove option from selected list
+    let option_removed = selected[idx];
     if (option_removed === undefined && allowUserOptions) {
         // if option with label could not be found but allowUserOptions is truthy,
         // assume it was created by user and create corresponding option object
@@ -235,8 +438,9 @@ function remove(option_to_drop, event) {
         console.error(`MultiSelect: can't remove option ${JSON.stringify(option_to_drop)}, not found in selected list`);
         return;
     }
-    selected = [...selected]; // trigger Svelte rerender
+    selected = selected.filter((_, remove_idx) => remove_idx !== idx);
     clear_validity();
+    last_action = { type: `remove`, label: `${get_label(option_removed)}` };
     onremove?.({ option: option_removed });
     onchange?.({ option: option_removed, type: `remove` });
 }
@@ -276,29 +480,36 @@ function handle_dropdown_after_select(event) {
 }
 // Check if a user message (create option, duplicate warning, no match) is visible
 const has_user_msg = $derived(searchText.length > 0 && Boolean((allowUserOptions && createOptionMsg) ||
-    (!duplicates && selected_labels.includes(searchText)) ||
-    (matchingOptions.length === 0 && noMatchingOptionsMsg)));
-// Handle arrow key navigation through options (uses module-scope `has_user_msg`)
+    (!duplicates && selected_labels_set.has(searchText)) ||
+    (navigable_options.length === 0 && noMatchingOptionsMsg)));
+// Handle arrow key navigation through options (uses navigable_options to skip collapsed groups)
 async function handle_arrow_navigation(direction) {
     ignore_hover = true;
+    // Auto-expand collapsed groups when keyboard navigating
+    if (keyboardExpandsCollapsedGroups && collapsibleGroups && collapsedGroups.size > 0) {
+        expand_groups(get_collapsed_with_matches());
+        await tick();
+    }
     // toggle user message when no options match but user can create
-    if (allowUserOptions && !matchingOptions.length && searchText.length > 0) {
+    if (allowUserOptions && !navigable_options.length && searchText.length > 0) {
         option_msg_is_active = !option_msg_is_active;
         return;
     }
-    if (activeIndex === null && !matchingOptions.length)
+    if (activeIndex === null && !navigable_options.length)
         return; // nothing to navigate
     // activate first option or navigate with wrap-around
     if (activeIndex === null) {
         activeIndex = 0;
     }
     else {
-        const total = matchingOptions.length + (has_user_msg ? 1 : 0);
+        const total = navigable_options.length + (has_user_msg ? 1 : 0);
         activeIndex = (activeIndex + direction + total) % total; // +total handles negative mod
     }
     // update active state based on new index
-    option_msg_is_active = has_user_msg && activeIndex === matchingOptions.length;
-    activeOption = option_msg_is_active ? null : matchingOptions[activeIndex] ?? null;
+    option_msg_is_active = has_user_msg && activeIndex === navigable_options.length;
+    activeOption = option_msg_is_active
+        ? null
+        : navigable_options[activeIndex] ?? null;
     if (autoScroll) {
         await tick();
         document.querySelector(`ul.options > li.active`)?.scrollIntoViewIfNeeded?.();
@@ -306,6 +517,42 @@ async function handle_arrow_navigation(direction) {
 }
 // handle all keyboard events this component receives
 async function handle_keydown(event) {
+    if (disabled)
+        return; // Block all keyboard handling when disabled
+    // Check keyboard shortcuts first (before other key handling)
+    const shortcut_actions = [
+        {
+            key: `select_all`,
+            condition: () => !!selectAllOption && navigable_options.length > 0 && maxSelect !== 1,
+            action: () => select_all(event),
+        },
+        {
+            key: `clear_all`,
+            condition: () => selected.length > 0,
+            action: () => remove_all(event),
+        },
+        {
+            key: `open`,
+            condition: () => !open,
+            action: () => open_dropdown(event),
+        },
+        {
+            key: `close`,
+            condition: () => open,
+            action: () => {
+                close_dropdown(event);
+                searchText = ``;
+            },
+        },
+    ];
+    for (const { key, condition, action } of shortcut_actions) {
+        if (matches_shortcut(event, effective_shortcuts[key]) && condition()) {
+            event.preventDefault();
+            event.stopPropagation();
+            action();
+            return;
+        }
+    }
     // on escape or tab out of input: close options dropdown and reset search text
     if (event.key === `Escape` || event.key === `Tab`) {
         event.stopPropagation();
@@ -316,7 +563,7 @@ async function handle_keydown(event) {
         event.stopPropagation();
         event.preventDefault(); // prevent enter key from triggering form submission
         if (activeOption) {
-            if (selected_keys.includes(key(activeOption))) {
+            if (selected_keys_set.has(key(activeOption))) {
                 if (can_remove)
                     remove(activeOption, event);
             }
@@ -347,7 +594,7 @@ async function handle_keydown(event) {
         }
         // Don't prevent default, allow normal backspace behavior if not removing
     } // make first matching option active on any keypress (if none of the above special cases match)
-    else if (matchingOptions.length > 0 && activeIndex === null) {
+    else if (navigable_options.length > 0 && activeIndex === null) {
         // Don't stop propagation or prevent default here, allow normal character input
         activeIndex = 0;
     }
@@ -360,45 +607,90 @@ function remove_all(event) {
         // If no minSelect constraint, remove all
         removed_options = selected;
         selected = [];
-        searchText = ``; // always clear on remove all (resetFilterOnAdd only applies to add operations)
     }
     else if (selected.length > minSelect) {
         // Keep the first minSelect items
         removed_options = selected.slice(minSelect);
         selected = selected.slice(0, minSelect);
-        searchText = ``; // always clear on remove all (resetFilterOnAdd only applies to add operations)
     }
     // Only fire events if something was actually removed
     if (removed_options.length > 0) {
+        searchText = ``; // always clear on remove all (resetFilterOnAdd only applies to add operations)
+        last_action = { type: `removeAll`, label: `${removed_options.length} options` };
         onremoveAll?.({ options: removed_options });
         onchange?.({ options: selected, type: `removeAll` });
     }
 }
+// Check if option index is within maxOptions visibility limit
+const is_option_visible = (idx) => idx >= 0 && (maxOptions == null || idx < maxOptions);
+// Get non-disabled, selectable options from a list
+// For collapsed groups: returns all non-disabled options (user explicitly wants this group)
+// For expanded groups/top-level: respects maxOptions rendering limit
+const get_selectable_opts = (opts, skip_visibility_check = false) => opts.filter((opt) => {
+    if (is_disabled(opt))
+        return false;
+    if (skip_visibility_check)
+        return true;
+    return is_option_visible(navigable_index_map.get(opt) ?? -1);
+});
+// Batch-add options to selection with all side effects (used by select_all and group select)
+function batch_add_options(options_to_add, event) {
+    const remaining = Math.max(0, (maxSelect ?? Infinity) - selected.length);
+    const to_add = options_to_add
+        .filter((opt) => !selected_keys_set.has(key(opt)))
+        .slice(0, remaining);
+    if (to_add.length === 0)
+        return;
+    selected = sort_selected([...selected, ...to_add]);
+    if (resetFilterOnAdd)
+        searchText = ``;
+    clear_validity();
+    handle_dropdown_after_select(event);
+    onselectAll?.({ options: to_add });
+    onchange?.({ options: selected, type: `selectAll` });
+}
+// Batch-add options for top-level "Select all" (only visible/navigable options)
 function select_all(event) {
     event.stopPropagation();
-    const limit = maxSelect ?? Infinity;
-    // Use matchingOptions for "select all visible" semantics
-    const options_to_add = matchingOptions.filter((opt) => {
-        const is_disabled = is_object(opt) && opt.disabled;
-        return !is_disabled && !selected_keys.includes(key(opt));
-    }).slice(0, limit - selected.length);
-    if (options_to_add.length > 0) {
-        selected = sort_selected([...selected, ...options_to_add]);
-        if (resetFilterOnAdd)
-            searchText = ``;
-        clear_validity();
-        handle_dropdown_after_select(event);
-        onselectAll?.({ options: options_to_add });
-        onchange?.({ options: selected, type: `selectAll` });
+    batch_add_options(get_selectable_opts(navigable_options), event);
+}
+// Toggle group selection: works even when group is collapsed
+// If all selectable options are selected, deselect them; otherwise select all
+function toggle_group_selection(group_opts, group_collapsed, all_selected, event) {
+    event.stopPropagation();
+    const selectable = get_selectable_opts(group_opts, group_collapsed);
+    if (all_selected) {
+        // Deselect all options in this group
+        const keys_to_remove = new Set(selectable.map(key));
+        const removed = selected.filter((opt) => keys_to_remove.has(key(opt)));
+        selected = selected.filter((opt) => !keys_to_remove.has(key(opt)));
+        if (removed.length > 0) {
+            onremoveAll?.({ options: removed });
+            onchange?.({ options: selected, type: `removeAll` });
+        }
+    }
+    else {
+        // Select all non-disabled, non-selected options in this group
+        batch_add_options(selectable, event);
     }
 }
-let is_selected = $derived((label) => selected_labels.includes(label));
+// O(1) lookup using pre-computed Set instead of O(n) array.includes()
+const is_selected = (label) => selected_labels_set.has(label);
 const if_enter_or_space = (handler) => (event) => {
     if (event.key === `Enter` || event.code === `Space`) {
         event.preventDefault();
         handler(event);
     }
 };
+// Handle option interaction (click or keyboard) - DRY helper for template
+const handle_option_interact = (opt, opt_disabled, event) => {
+    if (opt_disabled)
+        return;
+    if (keepSelectedInDropdown)
+        toggle_option(opt, event);
+    else
+        add(opt, event);
+};
 function on_click_outside(event) {
     if (!outerDiv)
         return;
@@ -430,6 +722,8 @@ const drop = (target_idx) => (event) => {
     }
     selected = new_selected;
     drag_idx = null;
+    onreorder?.({ options: new_selected });
+    onchange?.({ options: new_selected, type: `reorder` });
 };
 const dragstart = (idx) => (event) => {
     if (!event.dataTransfer)
@@ -534,7 +828,8 @@ function portal(node, params) {
 }
 // Dynamic options loading - captures search at call time to avoid race conditions
 async function load_dynamic_options(reset) {
-    if (!load_options_fn || load_options_loading || (!reset && !load_options_has_more)) {
+    if (!load_options_config || load_options_loading ||
+        (!reset && !load_options_has_more)) {
         return;
     }
     // Capture search term at call time to avoid race with user typing during fetch
@@ -542,8 +837,8 @@ async function load_dynamic_options(reset) {
     const offset = reset ? 0 : loaded_options.length;
     load_options_loading = true;
     try {
-        const limit = load_options_batch_size;
-        const result = await load_options_fn({ search, offset, limit });
+        const limit = load_options_config.batch_size;
+        const result = await load_options_config.fetch({ search, offset, limit });
         loaded_options = reset ? result.options : [...loaded_options, ...result.options];
         load_options_has_more = result.hasMore;
         load_options_last_search = search;
@@ -557,7 +852,7 @@ async function load_dynamic_options(reset) {
 }
 // Single effect handles initial load + search changes
 $effect(() => {
-    if (!load_options_fn)
+    if (!load_options_config)
         return;
     // Reset state when dropdown closes so next open triggers fresh load
     if (!open) {
@@ -571,13 +866,13 @@ $effect(() => {
     const search = searchText;
     const is_first_load = load_options_last_search === null;
     if (is_first_load) {
-        if (load_options_on_open) {
+        if (load_options_config.on_open) {
             // Load immediately on dropdown open
             load_dynamic_options(true);
         }
         else if (search) {
             // onOpen=false but user typed - debounce and load
-            debounce_timer = setTimeout(() => load_dynamic_options(true), load_options_debounce_ms);
+            debounce_timer = setTimeout(() => load_dynamic_options(true), load_options_config.debounce_ms);
         }
         // If onOpen=false and no search text, do nothing (wait for user to type)
     }
@@ -586,7 +881,7 @@ $effect(() => {
         // Clear stale results immediately so UI doesn't show wrong results while loading
         loaded_options = [];
         load_options_has_more = true;
-        debounce_timer = setTimeout(() => load_dynamic_options(true), load_options_debounce_ms);
+        debounce_timer = setTimeout(() => load_dynamic_options(true), load_options_config.debounce_ms);
     }
     return () => {
         if (debounce_timer)
@@ -594,7 +889,7 @@ $effect(() => {
     };
 });
 function handle_options_scroll(event) {
-    if (!load_options_fn || load_options_loading || !load_options_has_more)
+    if (!load_options_config || load_options_loading || !load_options_has_more)
         return;
     const { scrollTop, scrollHeight, clientHeight } = event.target;
     if (scrollHeight - scrollTop - clientHeight <= 100)
@@ -646,14 +941,16 @@ function handle_options_scroll(event) {
       form_input?.setCustomValidity(msg)
     }}
   />
-  {#if expandIcon}
-    {@render expandIcon({ open })}
-  {:else}
-    <Icon
-      icon="ChevronExpand"
-      style="width: 15px; min-width: 1em; padding: 0 1pt; cursor: pointer"
-    />
-  {/if}
+  <span class="expand-icon">
+    {#if expandIcon}
+      {@render expandIcon({ open })}
+    {:else}
+      <Icon
+        icon="ChevronExpand"
+        style="width: 15px; min-width: 1em; padding: 0 1pt; cursor: pointer"
+      />
+    {/if}
+  </span>
   <ul
     class="selected {ulSelectedClass}"
     aria-label="selected options"
@@ -724,6 +1021,12 @@ function handle_options_scroll(event) {
       {inputmode}
       {pattern}
       placeholder={selected.length === 0 || placeholder_persistent ? placeholder_text : null}
+      role="combobox"
+      aria-haspopup="listbox"
+      aria-expanded={open}
+      aria-controls={listbox_id}
+      aria-activedescendant={active_option_id}
+      aria-busy={loading || load_options_loading || null}
       aria-invalid={invalid ? `true` : null}
       ondrop={() => false}
       onmouseup={open_dropdown}
@@ -810,6 +1113,7 @@ function handle_options_scroll(event) {
             ? NodeFilter.FILTER_REJECT
             : NodeFilter.FILTER_ACCEPT,
       })}
+      id={listbox_id}
       class:hidden={!open}
       class="options {ulOptionsClass}"
       role="listbox"
@@ -835,87 +1139,144 @@ function handle_options_scroll(event) {
           {label}
         </li>
       {/if}
-      {#each matchingOptions.slice(
-        0,
-        maxOptions == null ? Infinity : Math.max(0, maxOptions),
-      ) as
-        option_item,
-        idx
-        (duplicates ? `${key(option_item)}-${idx}` : key(option_item))
+      {#each grouped_options as
+        { group: group_name, options: group_opts, collapsed },
+        group_idx
+        (group_name ?? `ungrouped-${group_idx}`)
       }
-        {@const {
+        {#if group_name !== null}
+          {@const { all_selected, selected_count } = group_header_state.get(group_name) ??
+        { all_selected: false, selected_count: 0 }}
+          {@const handle_toggle = () =>
+        collapsibleGroups && toggle_group_collapsed(group_name)}
+          {@const handle_group_select = (event: Event) =>
+        toggle_group_selection(group_opts, collapsed, all_selected, event)}
+          <!-- svelte-ignore a11y_no_noninteractive_tabindex -->
+          <li
+            class="group-header {liGroupHeaderClass}"
+            class:collapsible={collapsibleGroups}
+            class:sticky={stickyGroupHeaders}
+            role={collapsibleGroups ? `button` : `presentation`}
+            aria-expanded={collapsibleGroups ? !collapsed : undefined}
+            aria-label="Group: {group_name}"
+            style={liGroupHeaderStyle}
+            onclick={handle_toggle}
+            onkeydown={if_enter_or_space(handle_toggle)}
+            tabindex={collapsibleGroups ? 0 : -1}
+          >
+            {#if groupHeader}
+              {@render groupHeader({ group: group_name, options: group_opts, collapsed })}
+            {:else}
+              <span class="group-label">{group_name}</span>
+              <span class="group-count">
+                {#if keepSelectedInDropdown && selected_count > 0}
+                  ({selected_count}/{group_opts.length})
+                {:else}
+                  ({group_opts.length})
+                {/if}
+              </span>
+              {#if groupSelectAll && (maxSelect === null || maxSelect > 1)}
+                <button
+                  type="button"
+                  class="group-select-all"
+                  class:deselect={all_selected}
+                  onclick={handle_group_select}
+                  onkeydown={if_enter_or_space(handle_group_select)}
+                >
+                  {all_selected ? `Deselect all` : `Select all`}
+                </button>
+              {/if}
+              {#if collapsibleGroups}
+                <Icon
+                  icon={collapsed ? `ChevronRight` : `ChevronDown`}
+                  style="width: 12px; margin-left: auto"
+                />
+              {/if}
+            {/if}
+          </li>
+        {/if}
+        {#if !collapsed || !collapsibleGroups}
+          {#each group_opts as
+            option_item,
+            local_idx
+            (duplicates
+        ? `${key(option_item)}-${group_idx}-${local_idx}`
+        : key(option_item))
+          }
+            {@const flat_idx = navigable_index_map.get(option_item) ?? -1}
+            {@const {
         label,
         disabled = null,
         title = null,
         selectedTitle = null,
         disabledTitle = defaultDisabledTitle,
       } = is_object(option_item) ? option_item : { label: option_item }}
-        {@const active = activeIndex === idx}
-        {@const selected = is_selected(label)}
-        {@const optionStyle =
+            {@const active = activeIndex === flat_idx && flat_idx >= 0}
+            {@const selected = is_selected(label)}
+            {@const optionStyle =
         [get_style(option_item, `option`), liOptionStyle].filter(Boolean).join(
           ` `,
         ) ||
         null}
-        <li
-          onclick={(event) => {
-            if (disabled) return
-            if (keepSelectedInDropdown) toggle_option(option_item, event)
-            else add(option_item, event)
-          }}
-          title={disabled ? disabledTitle : (selected && selectedTitle) || title}
-          class:selected
-          class:active
-          class:disabled
-          class="{liOptionClass} {active ? liActiveOptionClass : ``}"
-          onmouseover={() => {
-            if (!disabled && !ignore_hover) activeIndex = idx
-          }}
-          onfocus={() => {
-            if (!disabled) activeIndex = idx
-          }}
-          role="option"
-          aria-selected={selected ? `true` : `false`}
-          style={optionStyle}
-          onkeydown={(event) => {
-            if (!disabled && (event.key === `Enter` || event.code === `Space`)) {
-              event.preventDefault()
-              if (keepSelectedInDropdown) toggle_option(option_item, event)
-              else add(option_item, event)
-            }
-          }}
-        >
-          {#if keepSelectedInDropdown === `checkboxes`}
-            <input
-              type="checkbox"
-              class="option-checkbox"
-              checked={selected}
-              aria-label="Toggle {get_label(option_item)}"
-              tabindex="-1"
-            />
-          {/if}
-          {#if option}
-            {@render option({
+            {#if is_option_visible(flat_idx)}
+              <li
+                id="{internal_id}-opt-{flat_idx}"
+                onclick={(event) => handle_option_interact(option_item, disabled, event)}
+                title={disabled ? disabledTitle : (selected && selectedTitle) || title}
+                class:selected
+                class:active
+                class:disabled
+                class="{liOptionClass} {active ? liActiveOptionClass : ``}"
+                onmouseover={() => {
+                  if (!disabled && !ignore_hover) activeIndex = flat_idx
+                }}
+                onfocus={() => {
+                  if (!disabled) activeIndex = flat_idx
+                }}
+                role="option"
+                aria-selected={selected ? `true` : `false`}
+                aria-posinset={flat_idx + 1}
+                aria-setsize={navigable_options.length}
+                style={optionStyle}
+                onkeydown={if_enter_or_space((event) =>
+                  handle_option_interact(option_item, disabled, event)
+                )}
+              >
+                {#if keepSelectedInDropdown === `checkboxes`}
+                  <input
+                    type="checkbox"
+                    class="option-checkbox"
+                    checked={selected}
+                    aria-label="Toggle {get_label(option_item)}"
+                    tabindex="-1"
+                  />
+                {/if}
+                {#if option}
+                  {@render option({
           option: option_item,
-          idx,
+          idx: flat_idx,
         })}
-          {:else if children}
-            {@render children({
+                {:else if children}
+                  {@render children({
           option: option_item,
-          idx,
+          idx: flat_idx,
         })}
-          {:else if parseLabelsAsHtml}
-            {@html get_label(option_item)}
-          {:else}
-            {get_label(option_item)}
-          {/if}
-        </li>
+                {:else if parseLabelsAsHtml}
+                  {@html get_label(option_item)}
+                {:else}
+                  {get_label(option_item)}
+                {/if}
+              </li>
+            {/if}
+          {/each}
+        {/if}
       {/each}
       {#if searchText}
         {@const text_input_is_duplicate = selected_labels.includes(searchText)}
         {@const is_dupe = !duplicates && text_input_is_duplicate && `dupe`}
         {@const can_create = Boolean(allowUserOptions && createOptionMsg) && `create`}
-        {@const no_match = Boolean(matchingOptions?.length === 0 && noMatchingOptionsMsg) &&
+        {@const no_match =
+        Boolean(navigable_options?.length === 0 && noMatchingOptionsMsg) &&
         `no-match`}
         {@const msgType = is_dupe || can_create || no_match}
         {@const msg = msgType && {
@@ -923,23 +1284,13 @@ function handle_options_scroll(event) {
         create: createOptionMsg,
         'no-match': noMatchingOptionsMsg,
       }[msgType]}
+        {@const can_add_user_option = msgType === `create` && allowUserOptions}
+        {@const handle_create = (event: Event) =>
+        can_add_user_option && add(searchText as Option, event)}
         {#if msg}
           <li
-            onclick={(event) => {
-              if (msgType === `create` && allowUserOptions) {
-                add(searchText as Option, event)
-              }
-            }}
-            onkeydown={(event) => {
-              if (
-                msgType === `create` &&
-                allowUserOptions &&
-                (event.key === `Enter` || event.code === `Space`)
-              ) {
-                event.preventDefault()
-                add(searchText as Option, event)
-              }
-            }}
+            onclick={handle_create}
+            onkeydown={can_add_user_option ? if_enter_or_space(handle_create) : undefined}
             title={msgType === `create`
             ? createOptionMsg
             : msgType === `dupe`
@@ -978,18 +1329,45 @@ function handle_options_scroll(event) {
       {/if}
     </ul>
   {/if}
+  <!-- Screen reader announcements for dropdown state, option count, and selection changes -->
+  <div class="sr-only" aria-live="polite" aria-atomic="true">
+    {#if last_action}
+      {#if last_action.type === `add`}
+        {last_action.label} selected
+      {:else if last_action.type === `remove`}
+        {last_action.label} removed
+      {:else if last_action.type === `removeAll`}
+        {last_action.label} removed
+      {/if}
+    {:else if open}
+      {matchingOptions.length} option{matchingOptions.length === 1 ? `` : `s`} available
+    {/if}
+  </div>
 </div>
 
 <style>
+  /* Screen reader only - visually hidden but accessible to assistive technology */
+  .sr-only {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border: 0;
+  }
+
   :is(div.multiselect) {
     position: relative;
     align-items: center;
     display: flex;
     cursor: text;
     box-sizing: border-box;
-    border: var(--sms-border, 1pt solid lightgray);
+    border: var(--sms-border, 1pt solid light-dark(lightgray, #555));
     border-radius: var(--sms-border-radius, 3pt);
-    background: var(--sms-bg);
+    background: var(--sms-bg, light-dark(white, #1a1a1a));
     width: var(--sms-width);
     max-width: var(--sms-max-width);
     padding: var(--sms-padding, 0 3pt);
@@ -1007,7 +1385,7 @@ function handle_options_scroll(event) {
     border: var(--sms-focus-border, 1pt solid var(--sms-active-color, cornflowerblue));
   }
   :is(div.multiselect.disabled) {
-    background: var(--sms-disabled-bg, lightgray);
+    background: var(--sms-disabled-bg, light-dark(lightgray, #444));
     cursor: not-allowed;
   }
 
@@ -1026,7 +1404,10 @@ function handle_options_scroll(event) {
     line-height: normal;
     transition: 0.3s;
     white-space: nowrap;
-    background: var(--sms-selected-bg, rgba(0, 0, 0, 0.15));
+    background: var(
+      --sms-selected-bg,
+      light-dark(rgba(0, 0, 0, 0.15), rgba(255, 255, 255, 0.15))
+    );
     padding: var(--sms-selected-li-padding, 1pt 5pt);
     color: var(--sms-selected-text-color, var(--sms-text-color));
   }
@@ -1034,10 +1415,14 @@ function handle_options_scroll(event) {
     cursor: grab;
   }
   :is(div.multiselect > ul.selected > li.active) {
-    background: var(--sms-li-active-bg, var(--sms-active-color, rgba(0, 0, 0, 0.15)));
+    background: var(
+      --sms-li-active-bg,
+      var(--sms-active-color, light-dark(rgba(0, 0, 0, 0.15), rgba(255, 255, 255, 0.15)))
+    );
   }
   :is(div.multiselect button) {
     border-radius: 50%;
+    aspect-ratio: 1; /* ensure circle, not ellipse */
     display: flex;
     transition: 0.2s;
     color: inherit;
@@ -1052,8 +1437,11 @@ function handle_options_scroll(event) {
     margin: 0 3pt;
   }
   :is(ul.selected > li button:hover, button.remove-all:hover, button:focus) {
-    color: var(--sms-remove-btn-hover-color, lightskyblue);
-    background: var(--sms-remove-btn-hover-bg, rgba(0, 0, 0, 0.2));
+    color: var(--sms-remove-btn-hover-color, light-dark(#0088cc, lightskyblue));
+    background: var(
+      --sms-remove-btn-hover-bg,
+      light-dark(rgba(0, 0, 0, 0.2), rgba(255, 255, 255, 0.2))
+    );
   }
 
   :is(div.multiselect input) {
@@ -1110,15 +1498,18 @@ function handle_options_scroll(event) {
     transition: all
       0.2s; /* Consider if this transition is desirable with portal positioning */
     box-sizing: border-box;
-    background: var(--sms-options-bg, white);
+    background: var(--sms-options-bg, light-dark(#fafafa, #1a1a1a));
     max-height: var(--sms-options-max-height, 50vh);
     overscroll-behavior: var(--sms-options-overscroll, none);
-    box-shadow: var(--sms-options-shadow, 0 0 14pt -8pt black);
+    box-shadow: var(
+      --sms-options-shadow,
+      light-dark(0 0 14pt -8pt black, 0 0 14pt -4pt rgba(0, 0, 0, 0.8))
+    );
     border: var(--sms-options-border);
     border-width: var(--sms-options-border-width);
     border-radius: var(--sms-options-border-radius, 1ex);
     padding: var(--sms-options-padding);
-    margin: var(--sms-options-margin, inherit);
+    margin: var(--sms-options-margin, 6pt 0 0 0);
   }
   ul.options.hidden {
     visibility: hidden;
@@ -1138,19 +1529,25 @@ function handle_options_scroll(event) {
     padding: 3pt 2ex;
   }
   ul.options > li.selected {
-    background: var(--sms-li-selected-plain-bg, rgba(0, 123, 255, 0.1));
+    background: var(
+      --sms-li-selected-plain-bg,
+      light-dark(rgba(0, 123, 255, 0.1), rgba(100, 180, 255, 0.2))
+    );
     border-left: var(
       --sms-li-selected-plain-border,
       3px solid var(--sms-active-color, cornflowerblue)
     );
   }
   ul.options > li.active {
-    background: var(--sms-li-active-bg, var(--sms-active-color, rgba(0, 0, 0, 0.15)));
+    background: var(
+      --sms-li-active-bg,
+      var(--sms-active-color, light-dark(rgba(0, 0, 0, 0.15), rgba(255, 255, 255, 0.15)))
+    );
   }
   ul.options > li.disabled {
     cursor: not-allowed;
-    background: var(--sms-li-disabled-bg, #f5f5f6);
-    color: var(--sms-li-disabled-text, #b8b8b8);
+    background: var(--sms-li-disabled-bg, light-dark(#f5f5f6, #2a2a2a));
+    color: var(--sms-li-disabled-text, light-dark(#b8b8b8, #666));
   }
   /* Checkbox styling for keepSelectedInDropdown='checkboxes' mode */
   ul.options > li > input.option-checkbox {
@@ -1161,7 +1558,10 @@ function handle_options_scroll(event) {
   }
   /* Select all option styling */
   ul.options > li.select-all {
-    border-bottom: var(--sms-select-all-border-bottom, 1px solid lightgray);
+    border-bottom: var(
+      --sms-select-all-border-bottom,
+      1px solid light-dark(lightgray, #555)
+    );
     font-weight: var(--sms-select-all-font-weight, 500);
     color: var(--sms-select-all-color, inherit);
     background: var(--sms-select-all-bg, transparent);
@@ -1170,14 +1570,99 @@ function handle_options_scroll(event) {
   ul.options > li.select-all:hover {
     background: var(
       --sms-select-all-hover-bg,
-      var(--sms-li-active-bg, var(--sms-active-color, rgba(0, 0, 0, 0.15)))
+      var(
+        --sms-li-active-bg,
+        var(
+          --sms-active-color,
+          light-dark(rgba(0, 0, 0, 0.15), rgba(255, 255, 255, 0.15))
+        )
+      )
+    );
+  }
+  /* Group header styling */
+  ul.options > li.group-header {
+    display: flex;
+    align-items: center;
+    font-weight: var(--sms-group-header-font-weight, 600);
+    font-size: var(--sms-group-header-font-size, 0.85em);
+    color: var(--sms-group-header-color, light-dark(#666, #aaa));
+    background: var(--sms-group-header-bg, transparent);
+    padding: var(--sms-group-header-padding, 6pt 1ex 3pt);
+    cursor: default;
+    border-left: none;
+    text-transform: var(--sms-group-header-text-transform, uppercase);
+    letter-spacing: var(--sms-group-header-letter-spacing, 0.5px);
+  }
+  ul.options > li.group-header:not(:first-child) {
+    margin-top: var(--sms-group-header-margin-top, 4pt);
+    border-top: var(--sms-group-header-border-top, 1px solid light-dark(#eee, #333));
+  }
+  ul.options > li.group-header.collapsible {
+    cursor: pointer;
+  }
+  ul.options > li.group-header.collapsible:hover {
+    background: var(
+      --sms-group-header-hover-bg,
+      light-dark(rgba(0, 0, 0, 0.05), rgba(255, 255, 255, 0.05))
+    );
+  }
+  ul.options > li.group-header .group-label {
+    flex: 1;
+  }
+  ul.options > li.group-header .group-count {
+    opacity: 0.6;
+    font-size: 0.9em;
+    font-weight: normal;
+    margin-left: 4pt;
+  }
+  /* Sticky group headers when enabled */
+  ul.options > li.group-header.sticky {
+    position: sticky;
+    top: 0;
+    z-index: 1;
+    background: var(
+      --sms-group-header-sticky-bg,
+      var(--sms-options-bg, light-dark(#fafafa, #1a1a1a))
     );
   }
+  /* Indent grouped options for visual hierarchy */
+  ul.options > li:not(.group-header):not(.select-all):not(.user-msg):not(.loading-more) {
+    padding-left: var(
+      --sms-group-item-padding-left,
+      var(--sms-group-option-indent, 1.5ex)
+    );
+  }
+  /* Collapse/expand animation for group chevron icon */
+  ul.options > li.group-header :global(svg) {
+    transition: transform var(--sms-group-collapse-duration, 0.15s) ease-out;
+  }
+  ul.options > li.group-header button.group-select-all {
+    font-size: 0.9em;
+    font-weight: normal;
+    text-transform: none;
+    color: var(--sms-active-color, cornflowerblue);
+    background: transparent;
+    border: none;
+    cursor: pointer;
+    padding: 2pt 4pt;
+    margin-left: 8pt;
+    border-radius: 3pt;
+    aspect-ratio: auto; /* override global button aspect-ratio: 1 */
+  }
+  ul.options > li.group-header button.group-select-all:hover {
+    background: var(
+      --sms-group-select-all-hover-bg,
+      light-dark(rgba(0, 0, 0, 0.1), rgba(255, 255, 255, 0.1))
+    );
+  }
+  ul.options > li.group-header button.group-select-all.deselect {
+    color: var(--sms-group-deselect-color, light-dark(#c44, #f77));
+  }
   :is(span.max-select-msg) {
     padding: 0 3pt;
   }
   ::highlight(sms-search-matches) {
-    color: mediumaquamarine;
+    color: light-dark(#1a8870, mediumaquamarine);
   }
   /* Loading more indicator for infinite scrolling */
   ul.options > li.loading-more {