svelte-multiselect 11.1.0 → 11.2.0

package/dist/MultiSelect.svelte

@@ -1,15 +1,13 @@
-<script lang="ts">import { browser } from '$app/environment';
+<script lang="ts">import { Icon, Wiggle } from './';
 import { tick } from 'svelte';
 import { flip } from 'svelte/animate';
 import CircleSpinner from './CircleSpinner.svelte';
-import Wiggle from './Wiggle.svelte';
-import { CrossIcon, DisabledIcon, ExpandIcon } from './icons';
 import { get_label, get_style, highlight_matching_nodes } from './utils';
 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, key = (opt) => `${get_label(opt)}`.toLowerCase(), filterFunc = (opt, searchText) => {
     if (!searchText)
         return true;
     return `${get_label(opt)}`.toLowerCase().includes(searchText.toLowerCase());
-}, closeDropdownOnSelect = `desktop`, form_input = $bindable(null), highlightMatches = true, id = null, input = $bindable(null), inputClass = ``, inputStyle = null, inputmode = null, invalid = $bindable(false), liActiveOptionClass = ``, liActiveUserMsgClass = ``, liOptionClass = ``, liOptionStyle = null, liSelectedClass = ``, liSelectedStyle = null, liUserMsgClass = ``, loading = false, matchingOptions = $bindable([]), maxOptions = undefined, maxSelect = null, maxSelectMsg = (current, max) => (max > 1 ? `${current}/${max}` : ``), maxSelectMsgClass = ``, name = null, noMatchingOptionsMsg = `No matching options`, open = $bindable(false), options = $bindable(), outerDiv = $bindable(null), outerDivClass = ``, parseLabelsAsHtml = false, pattern = null, placeholder = null, removeAllTitle = `Remove all`, removeBtnTitle = `Remove`, minSelect = null, required = false, resetFilterOnAdd = true, searchText = $bindable(``), selected = $bindable(options
+}, closeDropdownOnSelect = `if-mobile`, form_input = $bindable(null), highlightMatches = true, id = null, input = $bindable(null), inputClass = ``, inputStyle = null, inputmode = null, invalid = $bindable(false), liActiveOptionClass = ``, liActiveUserMsgClass = ``, liOptionClass = ``, liOptionStyle = null, liSelectedClass = ``, liSelectedStyle = null, liUserMsgClass = ``, loading = false, matchingOptions = $bindable([]), maxOptions = undefined, maxSelect = null, maxSelectMsg = (current, max) => (max > 1 ? `${current}/${max}` : ``), maxSelectMsgClass = ``, name = null, noMatchingOptionsMsg = `No matching options`, open = $bindable(false), options = $bindable(), outerDiv = $bindable(null), outerDivClass = ``, parseLabelsAsHtml = false, pattern = null, placeholder = null, removeAllTitle = `Remove all`, removeBtnTitle = `Remove`, minSelect = null, required = false, resetFilterOnAdd = true, searchText = $bindable(``), selected = $bindable(options
     ?.filter((opt) => opt instanceof Object && opt?.preselected)
     .slice(0, maxSelect ?? undefined) ?? []), sortSelected = false, selectedOptionsDraggable = !sortSelected, style = null, ulOptionsClass = ``, ulSelectedClass = ``, ulSelectedStyle = null, ulOptionsStyle = null, value = $bindable(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, portal: portal_params = {}, ...rest } = $props();
 $effect.pre(() => {
@@ -106,8 +104,9 @@ function add(option_to_add, event) {
                 else {
                     option_to_add = searchText; // else create custom option as string
                 }
-                oncreate?.({ option: option_to_add });
             }
+            // Fire oncreate event for all user-created options, regardless of type
+            oncreate?.({ option: option_to_add });
             if (allowUserOptions === `append`)
                 options = [...options, option_to_add];
         }
@@ -136,9 +135,12 @@ function add(option_to_add, event) {
         }
         const reached_max_select = selected.length === maxSelect;
         const dropdown_should_close = closeDropdownOnSelect === true ||
-            (closeDropdownOnSelect === `desktop` && window_width && window_width < breakpoint);
+            closeDropdownOnSelect === `retain-focus` ||
+            (closeDropdownOnSelect === `if-mobile` && window_width &&
+                window_width < breakpoint);
+        const should_retain_focus = closeDropdownOnSelect === `retain-focus`;
         if (reached_max_select || dropdown_should_close) {
-            close_dropdown(event);
+            close_dropdown(event, should_retain_focus);
         }
         else if (!dropdown_should_close) {
             input?.focus();
@@ -183,9 +185,10 @@ function open_dropdown(event) {
     }
     onopen?.({ event });
 }
-function close_dropdown(event) {
+function close_dropdown(event, retain_focus = false) {
     open = false;
-    input?.blur();
+    if (!retain_focus)
+        input?.blur();
     activeIndex = null;
     onclose?.({ event });
 }
@@ -196,8 +199,7 @@ async function handle_keydown(event) {
         event.stopPropagation();
         close_dropdown(event);
         searchText = ``;
-    }
-    // on enter key: toggle active option and reset search text
+    } // on enter key: toggle active option and reset search text
     else if (event.key === `Enter`) {
         event.stopPropagation();
         event.preventDefault(); // prevent enter key from triggering form submission
@@ -217,8 +219,7 @@ async function handle_keydown(event) {
             // in which case enter means open it
             open_dropdown(event);
         }
-    }
-    // on up/down arrow keys: update active option
+    } // on up/down arrow keys: update active option
     else if ([`ArrowDown`, `ArrowUp`].includes(event.key)) {
         event.stopPropagation();
         // if no option is active yet, but there are matching options, make first one active
@@ -253,14 +254,12 @@ async function handle_keydown(event) {
             if (li)
                 li.scrollIntoViewIfNeeded?.();
         }
-    }
-    // on backspace key: remove last selected option
+    } // on backspace key: remove last selected option
     else if (event.key === `Backspace` && selected.length > 0 && !searchText) {
         event.stopPropagation();
         // Don't prevent default, allow normal backspace behavior if not removing
         remove(selected.at(-1), event);
-    }
-    // make first matching option active on any keypress (if none of the above special cases match)
+    } // make first matching option active on any keypress (if none of the above special cases match)
     else if (matchingOptions.length > 0 && activeIndex === null) {
         // Don't stop propagation or prevent default here, allow normal character input
         activeIndex = 0;
@@ -268,10 +267,11 @@ async function handle_keydown(event) {
 }
 function remove_all(event) {
     event.stopPropagation();
+    selected = []; // Set selected first
+    searchText = ``;
+    // Now trigger change events
     onremoveAll?.({ options: selected });
     onchange?.({ options: selected, type: `removeAll` });
-    selected = [];
-    searchText = ``;
 }
 let is_selected = $derived((label) => selected.map(get_label).includes(label));
 const if_enter_or_space = (handler) => (event) => {
@@ -329,10 +329,38 @@ const handle_input_keydown = (event) => {
     onkeydown?.(event);
 };
 const handle_input_focus = (event) => {
-    open_dropdown(event); // Internal logic
-    // Call original forwarded handler
+    open_dropdown(event);
     onfocus?.(event);
 };
+// Override input's focus method to ensure dropdown opens on programmatic focus
+// https://github.com/janosh/svelte-multiselect/issues/289
+$effect(() => {
+    if (!input)
+        return;
+    const orig_focus = input.focus.bind(input);
+    input.focus = (options) => {
+        orig_focus(options);
+        if (!disabled && !open) {
+            open_dropdown(new FocusEvent(`focus`, { bubbles: true }));
+        }
+    };
+    return () => {
+        if (input)
+            input.focus = orig_focus;
+    };
+});
+const handle_input_blur = (event) => {
+    // For portalled dropdowns, don't close on blur since clicks on portalled elements
+    // will cause blur but we want to allow the click to register first
+    if (portal_params?.active) {
+        onblur?.(event); // Let the click handler manage closing for portalled dropdowns
+        return;
+    }
+    // For non-portalled dropdowns, close when focus moves outside the component
+    if (!outerDiv?.contains(event.relatedTarget))
+        close_dropdown(event);
+    onblur?.(event); // Call original handler (if any passed as component prop)
+};
 // reset form validation when required prop changes
 // https://github.com/janosh/svelte-multiselect/issues/285
 $effect.pre(() => {
@@ -343,7 +371,8 @@ function portal(node, params) {
     let { target_node, active } = params;
     if (!active)
         return;
-    let render_in_place = !browser || !document.body.contains(node);
+    let render_in_place = typeof window === `undefined` ||
+        !document.body.contains(node);
     if (!render_in_place) {
         document.body.appendChild(node);
         node.style.position = `fixed`;
@@ -369,7 +398,8 @@ function portal(node, params) {
         return {
             update(params) {
                 target_node = params.target_node;
-                render_in_place = !browser || !document.body.contains(node);
+                render_in_place = typeof window === `undefined` ||
+                    !document.body.contains(node);
                 if (open && !render_in_place && target_node)
                     tick().then(update_position);
                 else if (!open || !target_node)
@@ -433,7 +463,11 @@ function portal(node, params) {
   {#if expandIcon}
     {@render expandIcon({ open })}
   {:else}
-    <ExpandIcon width="15px" style="min-width: 1em; padding: 0 1pt; cursor: pointer;" />
+    <Icon
+      icon="ChevronExpand"
+      width="15px"
+      style="min-width: 1em; padding: 0 1pt; cursor: pointer"
+    />
   {/if}
   <ul
     class="selected {ulSelectedClass}"
@@ -442,7 +476,9 @@ function portal(node, params) {
   >
     {#each selected as option, idx (duplicates ? [key(option), idx] : key(option))}
       {@const selectedOptionStyle =
-        [get_style(option, `selected`), liSelectedStyle].filter(Boolean).join(` `) ||
+        [get_style(option, `selected`), liSelectedStyle].filter(Boolean).join(
+          ` `,
+        ) ||
         null}
       <li
         class={liSelectedClass}
@@ -461,14 +497,14 @@ function portal(node, params) {
       >
         {#if selectedItem}
           {@render selectedItem({
-            option,
-            idx,
-          })}
+          option,
+          idx,
+        })}
         {:else if children}
           {@render children({
-            option,
-            idx,
-          })}
+          option,
+          idx,
+        })}
         {:else if parseLabelsAsHtml}
           {@html get_label(option)}
         {:else}
@@ -485,7 +521,7 @@ function portal(node, params) {
             {#if removeIcon}
               {@render removeIcon()}
             {:else}
-              <CrossIcon width="15px" />
+              <Icon icon="Cross" width="15px" />
             {/if}
           </button>
         {/if}
@@ -508,7 +544,7 @@ function portal(node, params) {
       onkeydown={handle_input_keydown}
       onfocus={handle_input_focus}
       oninput={highlight_matching_options}
-      {onblur}
+      onblur={handle_input_blur}
       {onclick}
       {onkeyup}
       {onmousedown}
@@ -520,16 +556,15 @@ function portal(node, params) {
       {ontouchstart}
       {...rest}
     />
-    <!-- the above on:* lines forward potentially useful DOM events -->
     {@render afterInput?.({
-      selected,
-      disabled,
-      invalid,
-      id,
-      placeholder,
-      open,
-      required,
-    })}
+        selected,
+        disabled,
+        invalid,
+        id,
+        placeholder,
+        open,
+        required,
+      })}
   </ul>
   {#if loading}
     {#if spinner}
@@ -542,7 +577,12 @@ function portal(node, params) {
     {#if disabledIcon}
       {@render disabledIcon()}
     {:else}
-      <DisabledIcon width="14pt" style="margin: 0 2pt;" data-name="disabled-icon" />
+      <Icon
+        icon="Disabled"
+        width="14pt"
+        style="margin: 0 2pt"
+        data-name="disabled-icon"
+      />
     {/if}
   {:else if selected.length > 0}
     {#if maxSelect && (maxSelect > 1 || maxSelectMsg)}
@@ -563,7 +603,7 @@ function portal(node, params) {
         {#if removeIcon}
           {@render removeIcon()}
         {:else}
-          <CrossIcon width="15px" />
+          <Icon icon="Cross" width="15px" />
         {/if}
       </button>
     {/if}
@@ -582,25 +622,29 @@ function portal(node, params) {
       bind:this={ul_options}
       style={ulOptionsStyle}
     >
-      {#each matchingOptions.slice(0, Math.max(0, maxOptions ?? 0) || Infinity) as optionItem, idx (duplicates ? [key(optionItem), idx] : key(optionItem))}
+      {#each matchingOptions.slice(0, Math.max(0, maxOptions ?? 0) || Infinity) as
+        optionItem,
+        idx
+        (duplicates ? [key(optionItem), idx] : key(optionItem))
+      }
         {@const {
-          label,
-          disabled = null,
-          title = null,
-          selectedTitle = null,
-          disabledTitle = defaultDisabledTitle,
-        } = optionItem instanceof Object ? optionItem : { label: optionItem }}
+        label,
+        disabled = null,
+        title = null,
+        selectedTitle = null,
+        disabledTitle = defaultDisabledTitle,
+      } = optionItem instanceof Object ? optionItem : { label: optionItem }}
         {@const active = activeIndex === idx}
         {@const optionStyle =
-          [get_style(optionItem, `option`), liOptionStyle].filter(Boolean).join(` `) ||
-          null}
+        [get_style(optionItem, `option`), liOptionStyle].filter(Boolean).join(
+          ` `,
+        ) ||
+        null}
         <li
           onclick={(event) => {
             if (!disabled) add(optionItem, event)
           }}
-          title={disabled
-            ? disabledTitle
-            : (is_selected(label) && selectedTitle) || title}
+          title={disabled ? disabledTitle : (is_selected(label) && selectedTitle) || title}
           class:selected={is_selected(label)}
           class:active
           class:disabled
@@ -623,14 +667,14 @@ function portal(node, params) {
         >
           {#if option}
             {@render option({
-              option: optionItem,
-              idx,
-            })}
+          option: optionItem,
+          idx,
+        })}
           {:else if children}
             {@render children({
-              option: optionItem,
-              idx,
-            })}
+          option: optionItem,
+          idx,
+        })}
           {:else if parseLabelsAsHtml}
             {@html get_label(optionItem)}
           {:else}
@@ -642,15 +686,15 @@ function portal(node, params) {
         {@const text_input_is_duplicate = selected.map(get_label).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) && `no-match`}
+        {@const no_match = Boolean(matchingOptions?.length == 0 && noMatchingOptionsMsg) &&
+        `no-match`}
         {@const msgType = is_dupe || can_create || no_match}
         {#if msgType}
           {@const msg = {
-            dupe: duplicateOptionMsg,
-            create: createOptionMsg,
-            'no-match': noMatchingOptionsMsg,
-          }[msgType]}
+        dupe: duplicateOptionMsg,
+        create: createOptionMsg,
+        'no-match': noMatchingOptionsMsg,
+      }[msgType]}
           <li
             onclick={(event) => {
               if (msgType === `create` && allowUserOptions) {
@@ -668,10 +712,10 @@ function portal(node, params) {
               }
             }}
             title={msgType === `create`
-              ? createOptionMsg
-              : msgType === `dupe`
-                ? duplicateOptionMsg
-                : ``}
+            ? createOptionMsg
+            : msgType === `dupe`
+            ? duplicateOptionMsg
+            : ``}
             class:active={option_msg_is_active}
             onmouseover={() => (option_msg_is_active = true)}
             onfocus={() => (option_msg_is_active = true)}
@@ -679,9 +723,11 @@ function portal(node, params) {
             onblur={() => (option_msg_is_active = false)}
             role="option"
             aria-selected="false"
-            class="user-msg {liUserMsgClass} {option_msg_is_active
+            class="
+              user-msg {liUserMsgClass} {option_msg_is_active
               ? liActiveUserMsgClass
-              : ``}"
+              : ``}
+            "
             style:cursor={{
               dupe: `not-allowed`,
               create: `pointer`,
@@ -792,6 +838,12 @@ function portal(node, params) {
     cursor: inherit; /* needed for disabled state */
     border-radius: 0; /* reset ul.selected > li */
   }
+
+  /* When options are selected, placeholder is hidden in which case we minimize input width to avoid adding unnecessary width to div.multiselect */
+  :is(div.multiselect > ul.selected > input:not(:placeholder-shown)) {
+    min-width: 1px; /* Minimal width to remain interactive */
+  }
+
   /* don't wrap ::placeholder rules in :is() as it seems to be overpowered by browser defaults i.t.o. specificity */
   div.multiselect > ul.selected > input::placeholder {
     padding-left: 5pt;
@@ -821,7 +873,8 @@ function portal(node, params) {
     z-index: var(--sms-options-z-index, 3);
 
     overflow: auto;
-    transition: all 0.2s; /* Consider if this transition is desirable with portal positioning */
+    transition: all
+      0.2s; /* Consider if this transition is desirable with portal positioning */
     box-sizing: border-box;
     background: var(--sms-options-bg, white);
     max-height: var(--sms-options-max-height, 50vh);

package/dist/MultiSelect.svelte.d.ts

@@ -1,10 +1,9 @@
-import type { MultiSelectProps } from './props';
-import type { Option as T } from './types';
+import type { MultiSelectProps, Option as T } from './types';
 declare class __sveltets_Render<Option extends T> {
     props(): MultiSelectProps<T>;
     events(): {};
     slots(): {};
-    bindings(): "value" | "selected" | "invalid" | "open" | "activeIndex" | "activeOption" | "form_input" | "input" | "matchingOptions" | "options" | "outerDiv" | "searchText";
+    bindings(): "open" | "input" | "value" | "selected" | "invalid" | "activeIndex" | "activeOption" | "form_input" | "matchingOptions" | "options" | "outerDiv" | "searchText";
     exports(): {};
 }
 interface $$IsomorphicComponent {

package/dist/PrevNext.svelte

@@ -0,0 +1,100 @@
+<script lang="ts">let { items = [], node = `nav`, current = ``, log = `errors`, nav_options = { replace_state: true, no_scroll: true }, titles = { prev: `&larr; Previous`, next: `Next &rarr;` }, onkeyup = ({ prev, next }) => ({
+    ArrowLeft: prev[0],
+    ArrowRight: next[0],
+}), prev_snippet, children, between, next_snippet, ...rest } = $props();
+// Convert items to consistent [key, value] format
+let items_arr = $derived((items ?? []).map((itm) => (typeof itm === `string` ? [itm, itm] : itm)));
+// Calculate prev/next items with wraparound
+let idx = $derived(items_arr.findIndex(([key]) => key === current));
+let prev = $derived(items_arr[idx - 1] ?? items_arr[items_arr.length - 1]);
+let next = $derived(items_arr[idx + 1] ?? items_arr[0]);
+// Validation and logging
+$effect.pre(() => {
+    if (log !== `silent`) {
+        if (items_arr.length < 2 && log === `verbose`) {
+            console.warn(`PrevNext received ${items_arr.length} items - minimum of 2 expected`);
+        }
+        if (idx < 0 && log === `errors`) {
+            const valid = items_arr.map(([key]) => key);
+            console.error(`PrevNext received invalid current=${current}, expected one of ${valid}`);
+        }
+    }
+});
+function handle_keyup(event) {
+    if (!onkeyup)
+        return;
+    const key_map = onkeyup({ prev, next });
+    const to = key_map[event.key];
+    if (to) {
+        const { replace_state, no_scroll } = nav_options;
+        const [scroll_x, scroll_y] = no_scroll
+            ? [window.scrollX, window.scrollY]
+            : [0, 0];
+        const goto = window.history[replace_state ? `replaceState` : `pushState`];
+        goto.call(window.history, {}, ``, to); // Navigate using appropriate history method
+        if (no_scroll)
+            window.scrollTo(scroll_x, scroll_y); // Restore scroll position if needed
+    }
+}
+export {};
+</script>
+
+<svelte:window onkeyup={handle_keyup} />
+
+{#if items_arr.length > 2}
+  <svelte:element this={node} class="prev-next" {...rest}>
+    <!-- ensures `prev` is a defined [key, value] tuple.
+      Due to prior normalization of the `items` prop, any defined `prev` item
+      is guaranteed to be a 2-element array except if `prev` is null.
+    -->
+    {#if prev?.length >= 2}
+      {#if prev_snippet}
+        {@render prev_snippet({ item: prev })}
+      {:else if children}
+        {@render children({ kind: `prev`, item: prev })}
+      {:else}
+        <div>
+          {#if titles.prev}<span>{@html titles.prev}</span>{/if}
+          <a href={prev[0]}>{prev[0]}</a>
+        </div>
+      {/if}
+    {/if}
+    {@render between?.()}
+    {#if next?.length >= 2}
+      {#if next_snippet}
+        {@render next_snippet({ item: next })}
+      {:else if children}
+        {@render children({ kind: `next`, item: next })}
+      {:else}
+        <div>
+          {#if titles.next}<span>{@html titles.next}</span>{/if}
+          <a href={next[0]}>{next[0]}</a>
+        </div>
+      {/if}
+    {/if}
+  </svelte:element>
+{/if}
+
+<style>
+  .prev-next {
+    display: flex;
+    list-style: none;
+    place-content: space-between;
+    gap: var(--prev-next-gap, 2em);
+    padding: var(--prev-next-padding, 0);
+    margin: var(--prev-next-margin, 3em auto);
+  }
+  .prev-next a {
+    color: var(--prev-next-color);
+    background: var(--prev-next-link-bg);
+    padding: var(--prev-next-link-padding);
+    border-radius: var(--prev-next-link-border-radius);
+  }
+  .prev-next span {
+    display: block;
+    margin: var(--prev-next-label-margin, 0 auto 1ex);
+  }
+  .prev-next > div:nth-child(2) {
+    text-align: right;
+  }
+</style>

package/dist/PrevNext.svelte.d.ts

@@ -0,0 +1,48 @@
+import type { Snippet } from 'svelte';
+export type Item = string | [string, unknown];
+declare class __sveltets_Render<T extends Item> {
+    props(): {
+        [key: string]: unknown;
+        items?: T[] | undefined;
+        node?: string;
+        current?: string;
+        log?: `verbose` | `errors` | `silent`;
+        nav_options?: {
+            replace_state: boolean;
+            no_scroll: boolean;
+        } | undefined;
+        titles?: {
+            prev: string;
+            next: string;
+        } | undefined;
+        onkeyup?: ((obj: {
+            prev: Item;
+            next: Item;
+        }) => Record<string, string>) | null | undefined;
+        prev_snippet?: Snippet<[{
+            item: Item;
+        }]> | undefined;
+        children?: Snippet<[{
+            kind: `prev` | `next`;
+            item: Item;
+        }]> | undefined;
+        between?: Snippet<[]>;
+        next_snippet?: Snippet<[{
+            item: Item;
+        }]> | undefined;
+    };
+    events(): {};
+    slots(): {};
+    bindings(): "";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <T extends Item>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T>['props']>, ReturnType<__sveltets_Render<T>['events']>, ReturnType<__sveltets_Render<T>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<T>['bindings']>;
+    } & ReturnType<__sveltets_Render<T>['exports']>;
+    <T extends Item>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const PrevNext: $$IsomorphicComponent;
+type PrevNext<T extends Item> = InstanceType<typeof PrevNext<T>>;
+export default PrevNext;

package/dist/RadioButtons.svelte

@@ -0,0 +1,67 @@
+<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>