svelte-multiselect 11.2.3 → 11.3.0

package/dist/attachments.d.ts

@@ -25,22 +25,25 @@ export declare const sortable: ({ header_selector, asc_class, desc_class, sorted
         backgroundColor: string;
     } | undefined;
 }) => (node: HTMLElement) => () => void;
-type HighlightOptions = {
+export type HighlightOptions = {
     query?: string;
     disabled?: boolean;
+    fuzzy?: boolean;
     node_filter?: (node: Node) => number;
     css_class?: string;
 };
-export declare const highlight_matches: (ops: HighlightOptions) => (node: HTMLElement) => (() => void) | undefined;
-export declare const tooltip: (options?: {
+export declare const highlight_matches: (ops: HighlightOptions) => (node: HTMLElement) => (() => boolean) | undefined;
+export interface TooltipOptions {
     content?: string;
     placement?: `top` | `bottom` | `left` | `right`;
     delay?: number;
-}) => Attachment;
-type ClickOutsideConfig<T extends HTMLElement> = {
+    disabled?: boolean;
+    style?: string;
+}
+export declare const tooltip: (options?: TooltipOptions) => Attachment;
+export type ClickOutsideConfig<T extends HTMLElement> = {
     enabled?: boolean;
     exclude?: string[];
     callback?: (node: T, config: ClickOutsideConfig<T>) => void;
 };
 export declare const click_outside: <T extends HTMLElement>(config?: ClickOutsideConfig<T>) => (node: T) => () => void;
-export {};

package/dist/attachments.js

@@ -158,11 +158,15 @@ export const sortable = ({ header_selector = `thead th`, asc_class = `table-sort
     };
 };
 export const highlight_matches = (ops) => (node) => {
-    const { query = ``, disabled = false, node_filter = () => NodeFilter.FILTER_ACCEPT, css_class = `highlight-match`, } = ops;
-    // clear previous ranges from HighlightRegistry
-    CSS.highlights.clear();
-    if (!query || disabled || typeof CSS === `undefined` || !CSS.highlights)
-        return; // abort if CSS highlight API not supported
+    const { query = ``, disabled = false, fuzzy = false, node_filter = () => NodeFilter.FILTER_ACCEPT, css_class = `highlight-match`, } = ops;
+    // abort if CSS highlight API not supported
+    if (typeof CSS === `undefined` || !CSS.highlights)
+        return;
+    // always clear our own highlight first
+    CSS.highlights.delete(css_class);
+    // if disabled or empty query, stop after cleanup
+    if (!query || disabled)
+        return;
     const tree_walker = document.createTreeWalker(node, NodeFilter.SHOW_TEXT, {
         acceptNode: node_filter,
     });
@@ -175,28 +179,57 @@ export const highlight_matches = (ops) => (node) => {
     // iterate over all text nodes and find matches
     const ranges = text_nodes.map((el) => {
         const text = el.textContent?.toLowerCase();
-        const indices = [];
-        let start_pos = 0;
-        while (text && start_pos < text.length) {
-            const index = text.indexOf(query, start_pos);
-            if (index === -1)
-                break;
-            indices.push(index);
-            start_pos = index + query.length;
+        if (!text)
+            return [];
+        const search = query.toLowerCase();
+        if (fuzzy) {
+            // Fuzzy highlighting: highlight individual characters that match in order
+            const matching_indices = [];
+            let search_idx = 0;
+            let target_idx = 0;
+            // Find matching character indices
+            while (search_idx < search.length && target_idx < text.length) {
+                if (search[search_idx] === text[target_idx]) {
+                    matching_indices.push(target_idx);
+                    search_idx++;
+                }
+                target_idx++;
+            }
+            // Only create ranges if we found all characters in order
+            if (search_idx === search.length) {
+                return matching_indices.map((index) => {
+                    const range = new Range();
+                    range.setStart(el, index);
+                    range.setEnd(el, index + 1); // highlight single character
+                    return range;
+                });
+            }
+            return [];
+        }
+        else {
+            // Substring highlighting: highlight consecutive substrings
+            const indices = [];
+            let start_pos = 0;
+            while (start_pos < text.length) {
+                const index = text.indexOf(search, start_pos);
+                if (index === -1)
+                    break;
+                indices.push(index);
+                start_pos = index + search.length;
+            }
+            // create range object for each substring found in the text node
+            return indices.map((index) => {
+                const range = new Range();
+                range.setStart(el, index);
+                range.setEnd(el, index + search.length);
+                return range;
+            });
         }
-        // create range object for each str found in the text node
-        return indices.map((index) => {
-            const range = new Range();
-            range.setStart(el, index);
-            range.setEnd(el, index + query?.length);
-            return range;
-        });
     });
     // create Highlight object from ranges and add to registry
     CSS.highlights.set(css_class, new Highlight(...ranges.flat()));
-    return () => {
-        CSS.highlights.delete(css_class);
-    };
+    // Return cleanup function
+    return () => CSS.highlights.delete(css_class);
 };
 // Global tooltip state to ensure only one tooltip is shown at a time
 let current_tooltip = null;
@@ -220,7 +253,7 @@ export const tooltip = (options = {}) => (node) => {
     const safe_options = options || {};
     const cleanup_functions = [];
     function setup_tooltip(element) {
-        if (!element)
+        if (!element || safe_options.disabled)
             return;
         const content = safe_options.content || element.title ||
             element.getAttribute(`aria-label`) || element.getAttribute(`data-title`);
@@ -239,6 +272,7 @@ export const tooltip = (options = {}) => (node) => {
                 tooltip.className = `custom-tooltip`;
                 const placement = safe_options.placement || `bottom`;
                 tooltip.setAttribute(`data-placement`, placement);
+                // Apply base styles
                 tooltip.style.cssText = `
           position: absolute; z-index: 9999; opacity: 0;
           background: var(--tooltip-bg, #333); color: var(--text-color, white); border: var(--tooltip-border, none);
@@ -246,6 +280,16 @@ export const tooltip = (options = {}) => (node) => {
           max-width: var(--tooltip-max-width, 280px); word-wrap: break-word; pointer-events: none;
           filter: var(--tooltip-shadow, drop-shadow(0 2px 8px rgba(0,0,0,0.25))); transition: opacity 0.15s ease-out;
         `;
+                // Apply custom styles if provided (these will override base styles due to CSS specificity)
+                if (safe_options.style) {
+                    // Parse and apply custom styles as individual properties for better control
+                    const custom_styles = safe_options.style.split(`;`).filter((style) => style.trim());
+                    custom_styles.forEach((style) => {
+                        const [property, value] = style.split(`:`).map((s) => s.trim());
+                        if (property && value)
+                            tooltip.style.setProperty(property, value);
+                    });
+                }
                 tooltip.innerHTML = content?.replace(/\r/g, `<br/>`) ?? ``;
                 // Mirror CSS custom properties from the trigger node onto the tooltip element
                 const trigger_styles = getComputedStyle(element);
@@ -265,7 +309,10 @@ export const tooltip = (options = {}) => (node) => {
                     if (value)
                         tooltip.style.setProperty(name, value);
                 });
-                // Arrow element pointing to the trigger, oriented by placement
+                // Append early so we can read computed border styles for arrow border
+                document.body.appendChild(tooltip);
+                // Arrow elements: optional border triangle behind fill triangle
+                const tooltip_styles = getComputedStyle(tooltip);
                 const arrow = document.createElement(`div`);
                 arrow.className = `custom-tooltip-arrow`;
                 arrow.style.cssText =
@@ -274,6 +321,49 @@ export const tooltip = (options = {}) => (node) => {
                     .trim();
                 const arrow_size_num = Number.parseInt(arrow_size_raw || ``, 10);
                 const arrow_px = Number.isFinite(arrow_size_num) ? arrow_size_num : 6;
+                const border_color = tooltip_styles.borderTopColor;
+                const border_width_num = Number.parseFloat(tooltip_styles.borderTopWidth || `0`);
+                const has_border = !!border_color && border_color !== `rgba(0, 0, 0, 0)` &&
+                    border_width_num > 0;
+                const maybe_append_border_arrow = () => {
+                    if (!has_border)
+                        return;
+                    const border_arrow = document.createElement(`div`);
+                    border_arrow.className = `custom-tooltip-arrow-border`;
+                    border_arrow.style.cssText =
+                        `position: absolute; width: 0; height: 0; pointer-events: none;`;
+                    const border_size = arrow_px + (border_width_num * 1.4);
+                    if (placement === `top`) {
+                        border_arrow.style.left = `calc(50% - ${border_size}px)`;
+                        border_arrow.style.bottom = `-${border_size}px`;
+                        border_arrow.style.borderLeft = `${border_size}px solid transparent`;
+                        border_arrow.style.borderRight = `${border_size}px solid transparent`;
+                        border_arrow.style.borderTop = `${border_size}px solid ${border_color}`;
+                    }
+                    else if (placement === `left`) {
+                        border_arrow.style.top = `calc(50% - ${border_size}px)`;
+                        border_arrow.style.right = `-${border_size}px`;
+                        border_arrow.style.borderTop = `${border_size}px solid transparent`;
+                        border_arrow.style.borderBottom = `${border_size}px solid transparent`;
+                        border_arrow.style.borderLeft = `${border_size}px solid ${border_color}`;
+                    }
+                    else if (placement === `right`) {
+                        border_arrow.style.top = `calc(50% - ${border_size}px)`;
+                        border_arrow.style.left = `-${border_size}px`;
+                        border_arrow.style.borderTop = `${border_size}px solid transparent`;
+                        border_arrow.style.borderBottom = `${border_size}px solid transparent`;
+                        border_arrow.style.borderRight = `${border_size}px solid ${border_color}`;
+                    }
+                    else { // bottom
+                        border_arrow.style.left = `calc(50% - ${border_size}px)`;
+                        border_arrow.style.top = `-${border_size}px`;
+                        border_arrow.style.borderLeft = `${border_size}px solid transparent`;
+                        border_arrow.style.borderRight = `${border_size}px solid transparent`;
+                        border_arrow.style.borderBottom = `${border_size}px solid ${border_color}`;
+                    }
+                    tooltip.appendChild(border_arrow);
+                };
+                // Create the fill arrow on top
                 if (placement === `top`) {
                     arrow.style.left = `calc(50% - ${arrow_px}px)`;
                     arrow.style.bottom = `-${arrow_px}px`;
@@ -302,8 +392,8 @@ export const tooltip = (options = {}) => (node) => {
                     arrow.style.borderRight = `${arrow_px}px solid transparent`;
                     arrow.style.borderBottom = `${arrow_px}px solid var(--tooltip-bg, #333)`;
                 }
+                maybe_append_border_arrow();
                 tooltip.appendChild(arrow);
-                document.body.appendChild(tooltip);
                 // Position tooltip
                 const rect = element.getBoundingClientRect();
                 const tooltip_rect = tooltip.getBoundingClientRect();
@@ -337,23 +427,22 @@ export const tooltip = (options = {}) => (node) => {
         }
         function hide_tooltip() {
             clear_tooltip();
-            hide_timeout = setTimeout(() => {
+            if (current_tooltip) {
+                current_tooltip.style.opacity = `0`;
                 if (current_tooltip) {
-                    current_tooltip.style.opacity = `0`;
-                    setTimeout(() => {
-                        if (current_tooltip) {
-                            current_tooltip.remove();
-                            current_tooltip = null;
-                        }
-                    }, 150);
+                    current_tooltip.remove();
+                    current_tooltip = null;
                 }
-            }, 50);
+            }
         }
         const events = [`mouseenter`, `mouseleave`, `focus`, `blur`];
         const handlers = [show_tooltip, hide_tooltip, show_tooltip, hide_tooltip];
         events.forEach((event, idx) => element.addEventListener(event, handlers[idx]));
+        // Hide tooltip when user scrolls
+        globalThis.addEventListener(`scroll`, hide_tooltip, true);
         return () => {
             events.forEach((event, idx) => element.removeEventListener(event, handlers[idx]));
+            globalThis.removeEventListener(`scroll`, hide_tooltip, true);
             const original_title = element.getAttribute(`data-original-title`);
             if (original_title) {
                 element.setAttribute(`title`, original_title);

package/dist/index.d.ts

@@ -7,9 +7,10 @@ export { default as FileDetails } from './FileDetails.svelte';
 export { default as GitHubCorner } from './GitHubCorner.svelte';
 export { default as Icon } from './Icon.svelte';
 export { default, default as MultiSelect } from './MultiSelect.svelte';
+export { default as Nav } from './Nav.svelte';
 export { default as PrevNext } from './PrevNext.svelte';
-export { default as RadioButtons } from './RadioButtons.svelte';
 export { default as Toggle } from './Toggle.svelte';
 export * from './types';
+export * from './utils';
 export { default as Wiggle } from './Wiggle.svelte';
 export declare function scroll_into_view_if_needed_polyfill(element: Element, centerIfNeeded?: boolean): IntersectionObserver;

package/dist/index.js

@@ -7,10 +7,11 @@ export { default as FileDetails } from './FileDetails.svelte';
 export { default as GitHubCorner } from './GitHubCorner.svelte';
 export { default as Icon } from './Icon.svelte';
 export { default, default as MultiSelect } from './MultiSelect.svelte';
+export { default as Nav } from './Nav.svelte';
 export { default as PrevNext } from './PrevNext.svelte';
-export { default as RadioButtons } from './RadioButtons.svelte';
 export { default as Toggle } from './Toggle.svelte';
 export * from './types';
+export * from './utils';
 export { default as Wiggle } from './Wiggle.svelte';
 // Firefox lacks support for scrollIntoViewIfNeeded (https://caniuse.com/scrollintoviewifneeded).
 // See https://github.com/janosh/svelte-multiselect/issues/87

package/dist/types.d.ts

@@ -1,5 +1,5 @@
 import type { Snippet } from 'svelte';
-import type { FocusEventHandler, HTMLInputAttributes, KeyboardEventHandler, MouseEventHandler, TouchEventHandler } from 'svelte/elements';
+import type { HTMLAttributes, HTMLInputAttributes } from 'svelte/elements';
 export type Option = string | number | ObjectOption;
 export type OptionStyle = string | {
     option: string;
@@ -16,20 +16,6 @@ export type ObjectOption = {
     style?: OptionStyle;
     [key: string]: unknown;
 };
-export interface MultiSelectNativeEvents {
-    onblur?: FocusEventHandler<HTMLInputElement>;
-    onclick?: MouseEventHandler<HTMLInputElement>;
-    onfocus?: FocusEventHandler<HTMLInputElement>;
-    onkeydown?: KeyboardEventHandler<HTMLInputElement>;
-    onkeyup?: KeyboardEventHandler<HTMLInputElement>;
-    onmousedown?: MouseEventHandler<HTMLInputElement>;
-    onmouseenter?: MouseEventHandler<HTMLInputElement>;
-    onmouseleave?: MouseEventHandler<HTMLInputElement>;
-    ontouchcancel?: TouchEventHandler<HTMLInputElement>;
-    ontouchend?: TouchEventHandler<HTMLInputElement>;
-    ontouchmove?: TouchEventHandler<HTMLInputElement>;
-    ontouchstart?: TouchEventHandler<HTMLInputElement>;
-}
 export interface MultiSelectEvents<T extends Option = Option> {
     onadd?: (data: {
         option: T;
@@ -55,7 +41,7 @@ export interface MultiSelectEvents<T extends Option = Option> {
         event: Event;
     }) => unknown;
 }
-type AfterInputProps = Pick<MultiSelectParameters, `selected` | `disabled` | `invalid` | `id` | `placeholder` | `open` | `required`>;
+type AfterInputProps = Pick<MultiSelectProps, `selected` | `disabled` | `invalid` | `id` | `placeholder` | `open` | `required`>;
 type UserMsgProps = {
     searchText: string;
     msgType: false | `dupe` | `create` | `no-match`;
@@ -87,7 +73,7 @@ export interface PortalParams {
     target_node?: HTMLElement | null;
     active?: boolean;
 }
-export interface MultiSelectParameters<T extends Option = Option> {
+export interface MultiSelectProps<T extends Option = Option> extends MultiSelectEvents<T>, MultiSelectSnippets<T>, Omit<HTMLAttributes<HTMLDivElement>, `children` | `onchange` | `onclose`> {
     activeIndex?: number | null;
     activeOption?: T | null;
     createOptionMsg?: string | null;
@@ -104,6 +90,7 @@ export interface MultiSelectParameters<T extends Option = Option> {
     keepSelectedInDropdown?: false | `plain` | `checkboxes`;
     key?: (opt: T) => unknown;
     filterFunc?: (opt: T, searchText: string) => boolean;
+    fuzzy?: boolean;
     closeDropdownOnSelect?: boolean | `if-mobile` | `retain-focus`;
     form_input?: HTMLInputElement | null;
     highlightMatches?: boolean;
@@ -151,8 +138,5 @@ export interface MultiSelectParameters<T extends Option = Option> {
     ulOptionsStyle?: string | null;
     value?: T | T[] | null;
     portal?: PortalParams;
-    [key: string]: unknown;
-}
-export interface MultiSelectProps<T extends Option = Option> extends MultiSelectNativeEvents, MultiSelectEvents<T>, MultiSelectSnippets<T>, MultiSelectParameters<T> {
 }
 export {};

package/dist/utils.d.ts

@@ -1,9 +1,4 @@
-import type { Option, OptionStyle } from './types';
+import type { Option } from './types';
 export declare const get_label: (opt: Option) => string | number;
-export declare function get_style(option: {
-    style?: OptionStyle;
-    [key: string]: unknown;
-} | string | number, key?: `selected` | `option` | null): string;
-export declare function highlight_matching_nodes(element: HTMLElement, // parent element
-query?: string, // search query
-noMatchingOptionsMsg?: string): void;
+export declare function get_style(option: Option, key?: `selected` | `option` | null | undefined): string;
+export declare function fuzzy_match(search_text: string, target_text: string): boolean;

package/dist/utils.js

@@ -14,14 +14,15 @@ export const get_label = (opt) => {
 // object to be used in the style attribute of the option.
 // If the style is a string, it will be returned as is
 export function get_style(option, key = null) {
+    if (key === undefined)
+        key = null;
     let css_str = ``;
-    if (![`selected`, `option`, null].includes(key)) {
+    const valid_key = key === null || key === `selected` || key === `option`;
+    if (!valid_key)
         console.error(`MultiSelect: Invalid key=${key} for get_style`);
-    }
     if (typeof option === `object` && option.style) {
-        if (typeof option.style === `string`) {
+        if (typeof option.style === `string`)
             css_str = option.style;
-        }
         if (typeof option.style === `object`) {
             if (key && key in option.style)
                 return option.style[key] ?? ``;
@@ -35,49 +36,24 @@ export function get_style(option, key = null) {
         css_str += `;`;
     return css_str;
 }
-// Highlights text nodes that matching the string query
-export function highlight_matching_nodes(element, // parent element
-query, // search query
-noMatchingOptionsMsg) {
-    if (typeof CSS === `undefined` || !CSS.highlights || !query)
-        return; // abort if CSS highlight API not supported
-    // clear previous ranges from HighlightRegistry
-    CSS.highlights.clear();
-    const tree_walker = document.createTreeWalker(element, NodeFilter.SHOW_TEXT, {
-        acceptNode: (node) => {
-            // don't highlight text in the "no matching options" message
-            if (node?.textContent === noMatchingOptionsMsg) {
-                return NodeFilter.FILTER_REJECT;
-            }
-            return NodeFilter.FILTER_ACCEPT;
-        },
-    });
-    const text_nodes = [];
-    let current_node = tree_walker.nextNode();
-    while (current_node) {
-        text_nodes.push(current_node);
-        current_node = tree_walker.nextNode();
+// Fuzzy string matching function
+// Returns true if the search string can be found as a subsequence in the target string
+// e.g., "tageoo" matches "tasks/geo-opt" because t-a-g-e-o-o appears in order
+export function fuzzy_match(search_text, target_text) {
+    // Handle null/undefined inputs first
+    if (search_text === null || search_text === undefined || target_text === null ||
+        target_text === undefined)
+        return false;
+    if (!search_text)
+        return true;
+    if (!target_text)
+        return false;
+    const [search, target] = [search_text.toLowerCase(), target_text.toLowerCase()];
+    let [search_idx, target_idx] = [0, 0];
+    while (search_idx < search.length && target_idx < target.length) {
+        if (search[search_idx] === target[target_idx])
+            search_idx++;
+        target_idx++;
     }
-    // iterate over all text nodes and find matches
-    const ranges = text_nodes.map((el) => {
-        const text = el.textContent?.toLowerCase();
-        const indices = [];
-        let start_pos = 0;
-        while (text && start_pos < text.length) {
-            const index = text.indexOf(query, start_pos);
-            if (index === -1)
-                break;
-            indices.push(index);
-            start_pos = index + query.length;
-        }
-        // create range object for each str found in the text node
-        return indices.map((index) => {
-            const range = new Range();
-            range.setStart(el, index);
-            range.setEnd(el, index + query.length);
-            return range;
-        });
-    });
-    // create Highlight object from ranges and add to registry
-    CSS.highlights.set(`sms-search-matches`, new Highlight(...ranges.flat()));
+    return search_idx === search.length;
 }

package/package.json

@@ -5,7 +5,7 @@
   "homepage": "https://janosh.github.io/svelte-multiselect",
   "repository": "https://github.com/janosh/svelte-multiselect",
   "license": "MIT",
-  "version": "11.2.3",
+  "version": "11.3.0",
   "type": "module",
   "svelte": "./dist/index.js",
   "bugs": "https://github.com/janosh/svelte-multiselect/issues",
@@ -13,31 +13,31 @@
     "svelte": "^5.35.6"
   },
   "devDependencies": {
-    "@playwright/test": "^1.54.2",
-    "@stylistic/eslint-plugin": "^5.2.3",
-    "@sveltejs/adapter-static": "^3.0.9",
-    "@sveltejs/kit": "^2.28.0",
-    "@sveltejs/package": "2.4.1",
-    "@sveltejs/vite-plugin-svelte": "^6.1.1",
-    "@types/node": "^24.2.1",
-    "@vitest/coverage-v8": "^3.2.4",
-    "eslint": "^9.33.0",
-    "eslint-plugin-svelte": "^3.11.0",
-    "happy-dom": "^18.0.1",
+    "@playwright/test": "^1.56.1",
+    "@stylistic/eslint-plugin": "^5.5.0",
+    "@sveltejs/adapter-static": "^3.0.10",
+    "@sveltejs/kit": "^2.48.4",
+    "@sveltejs/package": "2.5.4",
+    "@sveltejs/vite-plugin-svelte": "^6.2.1",
+    "@types/node": "^24.10.0",
+    "@vitest/coverage-v8": "^4.0.8",
+    "eslint": "^9.39.1",
+    "eslint-plugin-svelte": "^3.13.0",
+    "happy-dom": "^20.0.10",
     "hastscript": "^9.0.1",
     "mdsvex": "^0.12.6",
     "mdsvexamples": "^0.5.0",
     "rehype-autolink-headings": "^7.1.0",
     "rehype-slug": "^6.0.0",
-    "svelte": "^5.38.1",
-    "svelte-check": "^4.3.1",
+    "svelte": "^5.43.5",
+    "svelte-check": "^4.3.3",
     "svelte-preprocess": "^6.0.3",
     "svelte-toc": "^0.6.2",
-    "svelte2tsx": "^0.7.42",
-    "typescript": "5.9.2",
-    "typescript-eslint": "^8.39.1",
-    "vite": "^7.1.2",
-    "vitest": "^3.2.4"
+    "svelte2tsx": "^0.7.45",
+    "typescript": "5.9.3",
+    "typescript-eslint": "^8.46.3",
+    "vite": "^7.2.2",
+    "vitest": "^4.0.8"
   },
   "keywords": [
     "svelte",

package/readme.md

@@ -32,8 +32,6 @@
 - **Single / multiple select:** pass `maxSelect={1, 2, 3, ...}` prop to restrict the number of selectable options
 - **Configurable:** see props
 
-<slot name="nav" />
-
 ## 🧪 &thinsp; Coverage
 
 | Statements                                                                                 | Branches                                                                          | Lines                                                                            |
@@ -643,10 +641,10 @@ For example, here's how you might annoy your users with an alert every time one
 
 ```svelte
 <MultiSelect
-  onchange={(e) => {
-    if (e.detail.type === 'add') alert(`You added ${e.detail.option}`)
-    if (e.detail.type === 'remove') alert(`You removed ${e.detail.option}`)
-    if (e.detail.type === 'removeAll') alert(`You removed ${e.detail.options}`)
+  onchange={(event) => {
+    if (event.detail.type === 'add') alert(`You added ${event.detail.option}`)
+    if (event.detail.type === 'remove') alert(`You removed ${event.detail.option}`)
+    if (event.detail.type === 'removeAll') alert(`You removed ${event.detail.options}`)
   }}
 />
 ```

package/dist/RadioButtons.svelte

@@ -1,67 +0,0 @@
-<script lang="ts">// get the label key from an option object or the option itself if it's a string or number
-const get_label = (op) => {
-    if (op instanceof Object) {
-        if (op.label === undefined) {
-            console.error(`RadioButton option ${JSON.stringify(op)} is an object but has no label key`);
-        }
-        return op.label;
-    }
-    return op;
-};
-let { options, selected = $bindable(), id = null, name = null, disabled = false, required = false, aria_label = null, onclick, onchange, oninput, option_snippet, children, ...rest } = $props();
-export {};
-</script>
-
-<div {id} {...rest}>
-  {#each options as option (JSON.stringify(option))}
-    {@const label = get_label(option)}
-    {@const active = selected && get_label(option) === get_label(selected)}
-    <label class:active aria-label={aria_label}>
-      <input
-        type="radio"
-        value={option}
-        {name}
-        {disabled}
-        {required}
-        bind:group={selected}
-        {onchange}
-        {oninput}
-        {onclick}
-      />
-      {#if option_snippet}
-        {@render option_snippet({ option, selected, active })}
-      {:else if children}
-        {@render children({ option, selected, active })}
-      {:else}<span>{label}</span>{/if}
-    </label>
-  {/each}
-</div>
-
-<style>
-  div {
-    max-width: max-content;
-    overflow: hidden;
-    height: fit-content;
-    display: var(--radio-btn-display, inline-flex);
-    border-radius: var(--radio-btn-border-radius, 0.5em);
-  }
-  input {
-    display: none;
-  }
-  span {
-    cursor: pointer;
-    display: inline-block;
-    color: var(--radio-btn-color, white);
-    padding: var(--radio-btn-padding, 2pt 5pt);
-    background: var(--radio-btn-bg, black);
-    transition: var(--radio-btn-transition, background 0.3s, transform 0.3s);
-  }
-  label:not(.active) span:hover {
-    background: var(--radio-btn-hover-bg, cornflowerblue);
-    color: var(--radio-btn-hover-color, white);
-  }
-  label.active span {
-    box-shadow: var(--radio-btn-checked-shadow, inset 0 0 1em -3pt black);
-    background: var(--radio-btn-checked-bg, darkcyan);
-  }
-</style>