svelte-multiselect 11.2.3 → 11.3.0

package/dist/Nav.svelte

@@ -0,0 +1,447 @@
+<script
+  lang="ts"
+  generics="Route extends string | [string, string] | [string, string[]] = string | [string, string] | [string, string[]]"
+>import { Icon } from './';
+import { click_outside } from './';
+let { routes = [], children, link, menu_props, link_props, page, labels, ...rest } = $props();
+let is_open = $state(false);
+let hovered_dropdown = $state(null);
+let focused_item_index = $state(-1);
+let is_touch_device = $state(false);
+const panel_id = `nav-menu-${crypto.randomUUID()}`;
+// Detect touch device
+$effect(() => {
+    if (typeof globalThis !== `undefined`) {
+        is_touch_device = `ontouchstart` in globalThis || navigator.maxTouchPoints > 0;
+    }
+});
+function close_menus() {
+    is_open = false;
+    hovered_dropdown = null;
+    focused_item_index = -1;
+}
+function toggle_dropdown(href, focus_first = false) {
+    const is_opening = hovered_dropdown !== href;
+    hovered_dropdown = hovered_dropdown === href ? null : href;
+    focused_item_index = is_opening && focus_first ? 0 : -1;
+    // Focus management for keyboard users
+    if (is_opening && focus_first) {
+        setTimeout(() => {
+            const dropdown = document.querySelector(`.dropdown-wrapper[data-href="${href}"]`);
+            const first_link = dropdown?.querySelector(`.dropdown a`);
+            if (first_link instanceof HTMLElement) {
+                first_link.focus();
+            }
+        }, 0);
+    }
+}
+function onkeydown(event) {
+    if (event.key === `Escape`)
+        close_menus();
+}
+function handle_dropdown_keydown(event, href, sub_routes) {
+    const { key } = event;
+    if (key === `Enter` || key === ` `) {
+        event.preventDefault();
+        toggle_dropdown(href, true);
+        return;
+    }
+    // Arrow key navigation within open dropdown
+    if (hovered_dropdown === href && (key === `ArrowDown` || key === `ArrowUp`)) {
+        event.preventDefault();
+        const direction = key === `ArrowDown` ? 1 : -1;
+        const new_index = Math.max(0, Math.min(sub_routes.length - 1, focused_item_index + direction));
+        focused_item_index = new_index;
+        const dropdown = document.querySelector(`.dropdown-wrapper[data-href="${href}"]`);
+        const links = dropdown?.querySelectorAll(`.dropdown a`);
+        if (links?.[new_index] instanceof HTMLElement) {
+            links[new_index].focus();
+        }
+    }
+    // Open dropdown with ArrowDown when closed
+    if (hovered_dropdown !== href && key === `ArrowDown`) {
+        event.preventDefault();
+        toggle_dropdown(href, true);
+    }
+}
+function handle_dropdown_item_keydown(event, href) {
+    if (event.key === `Escape`) {
+        event.preventDefault();
+        close_menus();
+        // Return focus to dropdown toggle button
+        document
+            .querySelector(`.dropdown-wrapper[data-href="${href}"]`)
+            ?.querySelector(`.dropdown-toggle`)
+            ?.focus();
+    }
+}
+function is_current(path) {
+    if (path === `/`)
+        return page?.url.pathname === `/` ? `page` : undefined;
+    // Match exact path or path followed by / to avoid partial matches
+    // e.g. /tc-periodic-v2 should not match /tc-periodic
+    const pathname = page?.url.pathname;
+    const exact_match = pathname === path;
+    const prefix_match = pathname?.startsWith(path + `/`);
+    return exact_match || prefix_match ? `page` : undefined;
+}
+const is_child_current = (sub_routes) => sub_routes.some((child_path) => is_current(child_path) === `page`);
+function format_label(text, remove_parent = false) {
+    const custom_label = labels?.[text];
+    if (custom_label)
+        return { label: custom_label, style: `` };
+    if (remove_parent)
+        text = text.split(`/`).filter(Boolean).pop() ?? text;
+    const label = text.replace(/^\//, ``).replaceAll(`-`, ` `);
+    return { label, style: `text-transform: capitalize` };
+}
+function parse_route(route) {
+    if (typeof route === `string`)
+        return { href: route, label: route };
+    const [first, second] = route;
+    return Array.isArray(second)
+        ? { href: first, label: first, children: second }
+        : { href: first, label: second };
+}
+</script>
+
+<svelte:window {onkeydown} />
+
+<nav
+  {...rest}
+  {@attach click_outside({ callback: close_menus })}
+  class="bleed-1400 {rest.class ?? ``}"
+>
+  <button
+    class="burger-button"
+    onclick={() => is_open = !is_open}
+    aria-label="Toggle navigation menu"
+    aria-expanded={is_open}
+    aria-controls={panel_id}
+  >
+    <span class="burger-line"></span>
+    <span class="burger-line"></span>
+    <span class="burger-line"></span>
+  </button>
+
+  <div
+    id={panel_id}
+    class="menu"
+    class:open={is_open}
+    tabindex="0"
+    role="menu"
+    {onkeydown}
+    {...menu_props}
+  >
+    {#each routes as route (JSON.stringify(route))}
+      {@const { href, label, children: sub_routes } = parse_route(route)}
+
+      {#if sub_routes}
+        <!-- Dropdown menu item -->
+        {@const parent = format_label(label)}
+        {@const child_is_active = is_child_current(sub_routes)}
+        {@const parent_page_exists = sub_routes.includes(href)}
+        {@const filtered_sub_routes = sub_routes.filter((route) => route !== href)}
+        <div
+          class="dropdown-wrapper"
+          class:active={child_is_active}
+          data-href={href}
+          role="group"
+          aria-current={child_is_active ? `true` : undefined}
+          onmouseenter={() => !is_touch_device && (hovered_dropdown = href)}
+          onmouseleave={() => !is_touch_device && (hovered_dropdown = null)}
+          onfocusin={() => (hovered_dropdown = href)}
+          onfocusout={(event) => {
+            const next = event.relatedTarget as Node | null
+            if (!next || !(event.currentTarget as HTMLElement).contains(next)) {
+              hovered_dropdown = null
+            }
+          }}
+        >
+          <div class="dropdown-trigger-wrapper">
+            <svelte:element
+              this={parent_page_exists ? `a` : `span`}
+              href={parent_page_exists ? href : undefined}
+              class="dropdown-trigger"
+              aria-current={is_current(href)}
+              onclick={close_menus}
+              role={parent_page_exists ? undefined : `button`}
+              style={parent.style}
+            >
+              {@html parent.label}
+            </svelte:element>
+            <button
+              class="dropdown-toggle"
+              aria-label="Toggle {parent.label} submenu"
+              aria-expanded={hovered_dropdown === href}
+              aria-haspopup="true"
+              onclick={() => toggle_dropdown(href, false)}
+              onkeydown={(event) => handle_dropdown_keydown(event, href, filtered_sub_routes)}
+            >
+              <Icon
+                icon="ChevronExpand"
+                style="width: 0.8em; height: 0.8em"
+              />
+            </button>
+          </div>
+          <div
+            class="dropdown"
+            class:visible={hovered_dropdown === href}
+            role="menu"
+            tabindex="-1"
+            onmouseenter={() => !is_touch_device && (hovered_dropdown = href)}
+            onmouseleave={() => !is_touch_device && (hovered_dropdown = null)}
+            onfocusin={() => (hovered_dropdown = href)}
+            onfocusout={(event) => {
+              const next = event.relatedTarget as Node | null
+              if (!next || !(event.currentTarget as HTMLElement).contains(next)) {
+                hovered_dropdown = null
+              }
+            }}
+          >
+            {#each filtered_sub_routes as child_href (child_href)}
+              {@const child = format_label(child_href, true)}
+              {#if link}
+                {@render link({ href: child_href, label: child.label })}
+              {:else}
+                <a
+                  href={child_href}
+                  role="menuitem"
+                  aria-current={is_current(child_href)}
+                  onclick={close_menus}
+                  onkeydown={(event) => handle_dropdown_item_keydown(event, href)}
+                  {...link_props}
+                  style={`${child.style}; ${link_props?.style ?? ``}`}
+                >
+                  {@html child.label}
+                </a>
+              {/if}
+            {/each}
+          </div>
+        </div>
+      {:else}
+        <!-- Regular link item -->
+        {@const regular = format_label(label)}
+        {#if link}
+          {@render link({ href, label })}
+        {:else}
+          <a
+            {href}
+            aria-current={is_current(href)}
+            onclick={close_menus}
+            {...link_props}
+            style={`${regular.style}; ${link_props?.style ?? ``}`}
+          >
+            {@html regular.label}
+          </a>
+        {/if}
+      {/if}
+    {/each}
+
+    {@render children?.({ is_open, panel_id, routes })}
+  </div>
+</nav>
+
+<style>
+  nav {
+    position: relative;
+    margin: -0.75em auto 1.25em;
+    --nav-border-radius: 6pt;
+    --nav-surface-bg: light-dark(#fff, #1a1a1a);
+    --nav-surface-border: light-dark(rgba(128, 128, 128, 0.25), rgba(200, 200, 200, 0.2));
+    --nav-surface-shadow: light-dark(
+      0 2px 8px rgba(0, 0, 0, 0.15),
+      0 4px 12px rgba(0, 0, 0, 0.5)
+    );
+  }
+  .menu {
+    display: flex;
+    gap: 1em;
+    place-content: center;
+    flex-wrap: wrap;
+    padding: 0.5em;
+  }
+  .menu > a {
+    line-height: 1.3;
+    padding: 1pt 5pt;
+    border-radius: var(--nav-border-radius);
+    text-decoration: none;
+    color: inherit;
+    transition: background-color 0.2s;
+  }
+  .menu > a:hover {
+    background-color: var(--nav-link-bg-hover);
+  }
+  .menu > a[aria-current='page'] {
+    color: var(--nav-link-active-color);
+  }
+
+  /* Dropdown styles */
+  .dropdown-wrapper {
+    position: relative;
+  }
+  .dropdown-wrapper.active .dropdown-trigger {
+    color: var(--nav-link-active-color);
+  }
+  .dropdown-wrapper::after {
+    content: '';
+    position: absolute;
+    top: 100%;
+    left: 0;
+    right: 0;
+    height: var(--nav-dropdown-margin, 3pt);
+  }
+  .dropdown-trigger-wrapper {
+    display: flex;
+    align-items: center;
+    gap: 0;
+    border-radius: var(--nav-border-radius);
+    transition: background-color 0.2s;
+  }
+  .dropdown-trigger-wrapper:hover {
+    background-color: var(--nav-link-bg-hover);
+  }
+  .dropdown-trigger {
+    line-height: 1.3;
+    padding: 1pt 5pt;
+    text-decoration: none;
+    color: inherit;
+    border-radius: var(--nav-border-radius) 0 0 var(--nav-border-radius);
+  }
+  .dropdown-trigger[aria-current='page'] {
+    color: var(--nav-link-active-color);
+  }
+  .dropdown-toggle {
+    padding: 1pt 3pt;
+    border: none;
+    background: transparent;
+    color: inherit;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 0 var(--nav-border-radius) var(--nav-border-radius) 0;
+  }
+  .dropdown {
+    position: absolute;
+    top: 100%;
+    left: 0;
+    margin: var(--nav-dropdown-margin, 3pt 0 0 0);
+    min-width: max-content;
+    background-color: var(--nav-dropdown-bg, var(--nav-surface-bg));
+    border: 1px solid var(--nav-dropdown-border-color, var(--nav-surface-border));
+    border-radius: var(--nav-border-radius, 6pt);
+    box-shadow: var(--nav-dropdown-shadow, var(--nav-surface-shadow));
+    padding: var(--nav-dropdown-padding, 2pt 3pt);
+    display: none;
+    flex-direction: column;
+    gap: var(--nav-dropdown-gap, 5pt);
+    z-index: var(--nav-dropdown-z-index, 100);
+  }
+  .dropdown.visible {
+    display: flex;
+  }
+  .dropdown a {
+    padding: var(--nav-dropdown-link-padding, 1pt 4pt);
+    border-radius: var(--nav-border-radius);
+    text-decoration: none;
+    color: inherit;
+    white-space: nowrap;
+    transition: background-color 0.2s;
+  }
+  .dropdown a:hover {
+    background-color: var(--nav-link-bg-hover);
+  }
+  .dropdown a[aria-current='page'] {
+    color: var(--nav-link-active-color);
+  }
+  /* Mobile burger button */
+  .burger-button {
+    display: none;
+    position: fixed;
+    top: 1rem;
+    left: 1rem;
+    flex-direction: column;
+    justify-content: space-around;
+    width: 1.4rem;
+    height: 1.4rem;
+    background: transparent;
+    padding: 0;
+    z-index: var(--nav-toggle-btn-z-index, 10);
+  }
+  .burger-line {
+    height: 0.18rem;
+    background-color: var(--text-color);
+    border-radius: 8px;
+    transition: all 0.2s linear;
+    transform-origin: 1px;
+  }
+  .burger-button[aria-expanded='true'] .burger-line:first-child {
+    transform: rotate(45deg);
+  }
+  .burger-button[aria-expanded='true'] .burger-line:nth-child(2) {
+    opacity: 0;
+  }
+  .burger-button[aria-expanded='true'] .burger-line:nth-child(3) {
+    transform: rotate(-45deg);
+  }
+  /* Mobile styles */
+  @media (max-width: 767px) {
+    .burger-button {
+      display: flex;
+    }
+    .menu {
+      position: fixed;
+      top: 3rem;
+      left: 1rem;
+      background-color: var(--nav-surface-bg);
+      border: 1px solid var(--nav-surface-border);
+      box-shadow: var(--nav-surface-shadow);
+      opacity: 0;
+      visibility: hidden;
+      transition: all 0.3s ease;
+      z-index: var(--nav-mobile-z-index, 2);
+      flex-direction: column;
+      align-items: stretch;
+      justify-content: flex-start;
+      gap: 0.2em;
+      max-width: 90vw;
+      border-radius: 6px;
+    }
+    .menu.open {
+      opacity: 1;
+      visibility: visible;
+    }
+    .menu > a,
+    .dropdown-wrapper {
+      padding: 2pt 8pt;
+    }
+
+    /* Mobile dropdown styles - show as expandable section */
+    .dropdown-wrapper {
+      flex-direction: column;
+      align-items: stretch;
+    }
+    .dropdown-trigger-wrapper {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+    }
+    .dropdown-trigger {
+      flex: 1;
+      border-radius: var(--nav-border-radius);
+    }
+    .dropdown-toggle {
+      padding: 4pt 8pt;
+      border-radius: var(--nav-border-radius);
+    }
+    .dropdown {
+      position: static;
+      border: none;
+      box-shadow: none;
+      margin-top: 0.25em;
+      padding: 0 0 0 1em;
+      background-color: transparent;
+    }
+  }
+</style>

package/dist/Nav.svelte.d.ts

@@ -0,0 +1,42 @@
+import type { Page } from '@sveltejs/kit';
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+declare function $$render<Route extends string | [string, string] | [string, string[]] = string | [string, string] | [string, string[]]>(): {
+    props: {
+        routes: Route[];
+        children?: Snippet<[{
+            is_open: boolean;
+            panel_id: string;
+            routes: Route[];
+        }]>;
+        link?: Snippet<[{
+            href: string;
+            label: string;
+        }]>;
+        menu_props?: HTMLAttributes<HTMLDivElement>;
+        link_props?: HTMLAttributes<HTMLAnchorElement>;
+        page?: Page;
+        labels?: Record<string, string>;
+    } & Omit<HTMLAttributes<HTMLElement>, "children">;
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<Route extends string | [string, string] | [string, string[]] = string | [string, string] | [string, string[]]> {
+    props(): ReturnType<typeof $$render<Route>>['props'];
+    events(): ReturnType<typeof $$render<Route>>['events'];
+    slots(): ReturnType<typeof $$render<Route>>['slots'];
+    bindings(): "";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <Route extends string | [string, string] | [string, string[]] = string | [string, string] | [string, string[]]>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<Route>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<Route>['props']>, ReturnType<__sveltets_Render<Route>['events']>, ReturnType<__sveltets_Render<Route>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<Route>['bindings']>;
+    } & ReturnType<__sveltets_Render<Route>['exports']>;
+    <Route extends string | [string, string] | [string, string[]] = string | [string, string] | [string, string[]]>(internal: unknown, props: ReturnType<__sveltets_Render<Route>['props']> & {}): ReturnType<__sveltets_Render<Route>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const Nav: $$IsomorphicComponent;
+type Nav<Route extends string | [string, string] | [string, string[]] = string | [string, string] | [string, string[]]> = InstanceType<typeof Nav<Route>>;
+export default Nav;

package/dist/PrevNext.svelte

@@ -1,7 +1,4 @@
-<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();
+<script lang="ts" generics="Item extends [string, unknown] = [string, unknown]">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, min_items = 3, link_props, ...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
@@ -11,8 +8,8 @@ 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 (items_arr.length < min_items && log === `verbose`) {
+            console.warn(`PrevNext received ${items_arr.length} items - minimum of ${min_items} expected`);
         }
         if (idx < 0 && log === `errors`) {
             const valid = items_arr.map(([key]) => key);
@@ -23,9 +20,13 @@ $effect.pre(() => {
 function handle_keyup(event) {
     if (!onkeyup)
         return;
+    if ((items_arr?.length ?? 0) < min_items)
+        return;
+    if (!prev || !next)
+        return;
     const key_map = onkeyup({ prev, next });
     const to = key_map[event.key];
-    if (to) {
+    if (to !== undefined) {
         const { replace_state, no_scroll } = nav_options;
         const [scroll_x, scroll_y] = no_scroll
             ? [window.scrollX, window.scrollY]
@@ -41,7 +42,7 @@ export {};
 
 <svelte:window onkeyup={handle_keyup} />
 
-{#if items_arr.length > 2}
+{#if items_arr.length >= min_items}
   <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
@@ -55,7 +56,7 @@ export {};
       {:else}
         <div>
           {#if titles.prev}<span>{@html titles.prev}</span>{/if}
-          <a href={prev[0]}>{prev[0]}</a>
+          <a {...link_props} href={prev[0]}>{prev[0]}</a>
         </div>
       {/if}
     {/if}
@@ -68,7 +69,7 @@ export {};
       {:else}
         <div>
           {#if titles.next}<span>{@html titles.next}</span>{/if}
-          <a href={next[0]}>{next[0]}</a>
+          <a {...link_props} href={next[0]}>{next[0]}</a>
         </div>
       {/if}
     {/if}

package/dist/PrevNext.svelte.d.ts

@@ -1,9 +1,8 @@
 import type { Snippet } from 'svelte';
-export type Item = string | [string, unknown];
-declare function $$render<T extends Item>(): {
-    props: {
-        [key: string]: unknown;
-        items?: T[];
+import type { HTMLAttributes } from 'svelte/elements';
+declare function $$render<Item extends [string, unknown] = [string, unknown]>(): {
+    props: Omit<HTMLAttributes<HTMLElement>, "children" | "onkeyup"> & {
+        items?: (string | Item)[];
         node?: string;
         current?: string;
         log?: `verbose` | `errors` | `silent`;
@@ -18,7 +17,7 @@ declare function $$render<T extends Item>(): {
         onkeyup?: ((obj: {
             prev: Item;
             next: Item;
-        }) => Record<string, string>) | null;
+        }) => Record<string, string | undefined>) | null;
         prev_snippet?: Snippet<[{
             item: Item;
         }]>;
@@ -30,26 +29,28 @@ declare function $$render<T extends Item>(): {
         next_snippet?: Snippet<[{
             item: Item;
         }]>;
+        min_items?: number;
+        link_props?: HTMLAttributes<HTMLAnchorElement>;
     };
     exports: {};
     bindings: "";
     slots: {};
     events: {};
 };
-declare class __sveltets_Render<T extends Item> {
-    props(): ReturnType<typeof $$render<T>>['props'];
-    events(): ReturnType<typeof $$render<T>>['events'];
-    slots(): ReturnType<typeof $$render<T>>['slots'];
+declare class __sveltets_Render<Item extends [string, unknown] = [string, unknown]> {
+    props(): ReturnType<typeof $$render<Item>>['props'];
+    events(): ReturnType<typeof $$render<Item>>['events'];
+    slots(): ReturnType<typeof $$render<Item>>['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']>;
+    new <Item extends [string, unknown] = [string, unknown]>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<Item>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<Item>['props']>, ReturnType<__sveltets_Render<Item>['events']>, ReturnType<__sveltets_Render<Item>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<Item>['bindings']>;
+    } & ReturnType<__sveltets_Render<Item>['exports']>;
+    <Item extends [string, unknown] = [string, unknown]>(internal: unknown, props: ReturnType<__sveltets_Render<Item>['props']> & {}): ReturnType<__sveltets_Render<Item>['exports']>;
     z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
 }
 declare const PrevNext: $$IsomorphicComponent;
-type PrevNext<T extends Item> = InstanceType<typeof PrevNext<T>>;
+type PrevNext<Item extends [string, unknown] = [string, unknown]> = InstanceType<typeof PrevNext<Item>>;
 export default PrevNext;

package/dist/Toggle.svelte

@@ -1,10 +1,11 @@
-<script lang="ts">let { checked = $bindable(false), required = false, input_style = ``, id = null, onclick, onchange, onblur, onkeydown, children, ...rest } = $props();
+<script lang="ts">let { checked = $bindable(false), onkeydown, children, input_props, ...rest } = $props();
 // normally input type=checkbox toggles on space bar, this handler also responds to enter
 function handle_keydown(event) {
     onkeydown?.(event);
     if (event.key === `Enter`) {
         event.preventDefault();
-        checked = !checked;
+        const target = event.target;
+        target.click(); // simulate real user toggle so 'change' is dispatched
     }
 }
 export {};
@@ -15,13 +16,8 @@ export {};
   <input
     type="checkbox"
     bind:checked
-    {id}
-    {required}
+    {...input_props}
     onkeydown={handle_keydown}
-    {onchange}
-    {onblur}
-    {onclick}
-    style={input_style}
   />
   <span></span>
 </label>

package/dist/Toggle.svelte.d.ts

@@ -1,16 +1,11 @@
 import type { Snippet } from 'svelte';
-interface Props {
+import type { HTMLAttributes } from 'svelte/elements';
+type $$ComponentProps = HTMLAttributes<HTMLLabelElement> & {
     checked?: boolean;
-    required?: boolean;
-    input_style?: string;
-    id?: string | null;
-    onclick?: (event: MouseEvent) => void;
-    onchange?: (event: Event) => void;
-    onblur?: (event: FocusEvent) => void;
     onkeydown?: (event: KeyboardEvent) => void;
     children?: Snippet<[]>;
-    [key: string]: unknown;
-}
-declare const Toggle: import("svelte").Component<Props, {}, "checked">;
+    input_props?: HTMLAttributes<HTMLInputElement>;
+};
+declare const Toggle: import("svelte").Component<$$ComponentProps, {}, "checked">;
 type Toggle = ReturnType<typeof Toggle>;
 export default Toggle;

package/dist/Wiggle.svelte.d.ts

@@ -1,5 +1,5 @@
 import type { Snippet } from 'svelte';
-interface Props {
+type $$ComponentProps = {
     wiggle?: boolean;
     angle?: number;
     scale?: number;
@@ -9,7 +9,7 @@ interface Props {
     stiffness?: number;
     damping?: number;
     children?: Snippet;
-}
-declare const Wiggle: import("svelte").Component<Props, {}, "wiggle">;
+};
+declare const Wiggle: import("svelte").Component<$$ComponentProps, {}, "wiggle">;
 type Wiggle = ReturnType<typeof Wiggle>;
 export default Wiggle;