svelte-multiselect 11.2.3 → 11.3.0

package/dist/CircleSpinner.svelte.d.ts

@@ -1,8 +1,8 @@
-interface Props {
+type $$ComponentProps = {
     color?: string;
     duration?: string;
     size?: string;
-}
-declare const CircleSpinner: import("svelte").Component<Props, {}, "">;
+};
+declare const CircleSpinner: import("svelte").Component<$$ComponentProps, {}, "">;
 type CircleSpinner = ReturnType<typeof CircleSpinner>;
 export default CircleSpinner;

package/dist/CmdPalette.svelte

@@ -1,27 +1,33 @@
-<script lang="ts">import { MultiSelect } from './';
-import { fade } from 'svelte/transition';
-let { actions, triggers = [`k`], close_keys = [`Escape`], fade_duration = 200, dialog_style = ``, open = $bindable(false), dialog = $bindable(null), input = $bindable(null), placeholder = `Filter actions...`, ...rest } = $props();
+<script
+  lang="ts"
+  generics="Action extends { label: string; action: (label: string) => void } & Record<string, unknown> = { label: string; action: (label: string) => void }"
+>import { fade } from 'svelte/transition';
+import MultiSelect from './MultiSelect.svelte';
+let { actions, triggers = [`k`], close_keys = [`Escape`], fade_duration = 200, dialog_style = ``, open = $bindable(false), dialog = $bindable(null), input = $bindable(null), placeholder = `Filter actions...`, dialog_props, ...rest } = $props();
 $effect(() => {
-    if (open && input && document.activeElement !== input) {
+    if (open && input && document.activeElement !== input)
         input.focus();
-    }
 });
 async function toggle(event) {
-    if (triggers.includes(event.key) && event.metaKey && !open) {
+    const is_trigger = triggers.includes(event.key) &&
+        (event.metaKey || event.ctrlKey);
+    if (is_trigger && !open)
         open = true;
-    }
-    else if (close_keys.includes(event.key) && open) {
+    else if (close_keys.includes(event.key) && open)
         open = false;
-    }
 }
 function close_if_outside(event) {
-    if (open && !dialog?.contains(event.target)) {
+    const target = event.target;
+    if (!target || !(target instanceof HTMLElement))
+        return;
+    if (open && !dialog?.contains(target) && !target.closest(`ul.options`)) {
         open = false;
     }
 }
-function trigger_action_and_close(data) {
-    const { action, label } = data.option;
-    action(label);
+function trigger_action_and_close({ option }) {
+    if (!option?.action)
+        return;
+    option.action(option.label);
     open = false;
 }
 </script>
@@ -34,6 +40,7 @@ function trigger_action_and_close(data) {
     bind:this={dialog}
     transition:fade={{ duration: fade_duration }}
     style={dialog_style}
+    {...dialog_props}
   >
     <MultiSelect
       options={actions}

package/dist/CmdPalette.svelte.d.ts

@@ -1,19 +1,66 @@
-import type { MultiSelectProps, ObjectOption } from './types';
-interface Action extends ObjectOption {
+import type { HTMLAttributes } from 'svelte/elements';
+declare function $$render<Action extends {
     label: string;
     action: (label: string) => void;
+} & Record<string, unknown> = {
+    label: string;
+    action: (label: string) => void;
+}>(): {
+    props: Omit<import("./types").MultiSelectProps<Action>, "options"> & {
+        actions: Action[];
+        triggers?: string[];
+        close_keys?: string[];
+        fade_duration?: number;
+        dialog_style?: string;
+        open?: boolean;
+        dialog?: HTMLDialogElement | null;
+        input?: HTMLInputElement | null;
+        placeholder?: string;
+        dialog_props?: HTMLAttributes<HTMLDialogElement>;
+    };
+    exports: {};
+    bindings: "dialog" | "input" | "open";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<Action extends {
+    label: string;
+    action: (label: string) => void;
+} & Record<string, unknown> = {
+    label: string;
+    action: (label: string) => void;
+}> {
+    props(): ReturnType<typeof $$render<Action>>['props'];
+    events(): ReturnType<typeof $$render<Action>>['events'];
+    slots(): ReturnType<typeof $$render<Action>>['slots'];
+    bindings(): "dialog" | "input" | "open";
+    exports(): {};
 }
-interface Props extends Omit<MultiSelectProps<Action>, `options`> {
-    actions: Action[];
-    triggers?: string[];
-    close_keys?: string[];
-    fade_duration?: number;
-    dialog_style?: string;
-    open?: boolean;
-    dialog?: HTMLDialogElement | null;
-    input?: HTMLInputElement | null;
-    placeholder?: string;
+interface $$IsomorphicComponent {
+    new <Action extends {
+        label: string;
+        action: (label: string) => void;
+    } & Record<string, unknown> = {
+        label: string;
+        action: (label: string) => void;
+    }>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<Action>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<Action>['props']>, ReturnType<__sveltets_Render<Action>['events']>, ReturnType<__sveltets_Render<Action>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<Action>['bindings']>;
+    } & ReturnType<__sveltets_Render<Action>['exports']>;
+    <Action extends {
+        label: string;
+        action: (label: string) => void;
+    } & Record<string, unknown> = {
+        label: string;
+        action: (label: string) => void;
+    }>(internal: unknown, props: ReturnType<__sveltets_Render<Action>['props']> & {}): ReturnType<__sveltets_Render<Action>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
 }
-declare const CmdPalette: import("svelte").Component<Props, {}, "open" | "input" | "dialog">;
-type CmdPalette = ReturnType<typeof CmdPalette>;
+declare const CmdPalette: $$IsomorphicComponent;
+type CmdPalette<Action extends {
+    label: string;
+    action: (label: string) => void;
+} & Record<string, unknown> = {
+    label: string;
+    action: (label: string) => void;
+}> = InstanceType<typeof CmdPalette<Action>>;
 export default CmdPalette;

package/dist/CodeExample.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">// see svelte.config.js where this component is passed to mdsvexamples
 import { Icon } from './';
-let { src = ``, meta = {}, open = $bindable(!meta.collapsible), title, example, code, } = $props();
+let { src = ``, meta = {}, open = $bindable(!meta.collapsible), title, example, code, link_props, // Applied after computed attributes (href, title, etc.), allowing override
+button_props, } = $props();
 let { id, collapsible, code_above, repl, github, repo, file } = $derived(meta);
 const links = { target: `_blank`, rel: `noreferrer` };
 </script>
@@ -17,13 +18,19 @@ const links = { target: `_blank`, rel: `noreferrer` };
     { cond, href, icon }
     (icon)
   }
-    <a {href} {...links} title={icon} style:display={cond ? `inline-block` : `none`}>
+    <a
+      {href}
+      {...links}
+      title={icon}
+      style:display={cond ? `inline-block` : `none`}
+      {...link_props}
+    >
       <Icon {icon} />
     </a>
   {/each}
   {#if collapsible}
     {@render title?.()}
-    <button onclick={() => (open = !open)}>
+    <button onclick={() => (open = !open)} {...button_props}>
       <Icon icon={open ? `Collapse` : `Expand`} />
       {open ? `Close` : `View code`}
     </button>

package/dist/CodeExample.svelte.d.ts

@@ -1,5 +1,6 @@
 import type { Snippet } from 'svelte';
-interface Props {
+import type { HTMLAttributes } from 'svelte/elements';
+type $$ComponentProps = {
     src?: string;
     meta?: {
         collapsible?: boolean;
@@ -16,7 +17,9 @@ interface Props {
     title?: Snippet<[]>;
     example?: Snippet<[]>;
     code?: Snippet<[]>;
-}
-declare const CodeExample: import("svelte").Component<Props, {}, "open">;
+    link_props?: HTMLAttributes<HTMLAnchorElement>;
+    button_props?: HTMLAttributes<HTMLButtonElement>;
+};
+declare const CodeExample: import("svelte").Component<$$ComponentProps, {}, "open">;
 type CodeExample = ReturnType<typeof CodeExample>;
 export default CodeExample;

package/dist/CopyButton.svelte

@@ -9,14 +9,23 @@ $effect(() => {
     if (!global && !global_selector)
         return;
     const apply_copy_buttons = () => {
-        const btn_style = `position: absolute; top: 9pt; right: 9pt; ${rest.style ?? ``}`;
+        const btn_style = `position: absolute; top: 6pt; right: 6pt; ${rest.style ?? ``}`;
+        const skip_sel = skip_selector ?? as;
         for (const code of document.querySelectorAll(global_selector ?? `pre > code`)) {
             const pre = code.parentElement;
             const content = code.textContent ?? ``;
-            if (pre && !(skip_selector && pre.querySelector(skip_selector))) {
+            if (pre && !pre.querySelector(`[data-sms-copy]`) &&
+                !(skip_sel && pre.querySelector(skip_sel))) {
                 mount(CopyButton, {
                     target: pre,
-                    props: { content, as, labels, ...rest, style: btn_style },
+                    props: {
+                        content,
+                        as,
+                        labels,
+                        ...rest,
+                        style: btn_style,
+                        'data-sms-copy': ``,
+                    },
                 });
             }
         }
@@ -41,7 +50,20 @@ async function copy() {
 
 {#if !(global || global_selector)}
   {@const { text, icon } = labels[state]}
-  <svelte:element this={as} onclick={copy} role="button" tabindex={0} {...rest}>
+  <svelte:element
+    this={as}
+    onclick={copy}
+    onkeydown={(event) => {
+      if (event.key === `Enter` || event.key === ` `) {
+        event.preventDefault()
+        copy()
+      }
+    }}
+    role="button"
+    tabindex={0}
+    data-sms-copy=""
+    {...rest}
+  >
     {#if children}
       {@render children({ state, icon, text })}
     {:else}

package/dist/CopyButton.svelte.d.ts

@@ -1,8 +1,9 @@
 import { CopyButton } from './';
 import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
 import type { IconName } from './icons';
 type State = `ready` | `success` | `error`;
-interface Props {
+type $$ComponentProps = Omit<HTMLAttributes<HTMLButtonElement>, `children`> & {
     content?: string;
     state?: State;
     global_selector?: string | null;
@@ -18,8 +19,7 @@ interface Props {
         icon: IconName;
         text: string;
     }]>;
-    [key: string]: unknown;
-}
-declare const CopyButton: import("svelte").Component<Props, {}, "state">;
+};
+declare const CopyButton: import("svelte").Component<$$ComponentProps, {}, "state">;
 type CopyButton = ReturnType<typeof CopyButton>;
 export default CopyButton;

package/dist/FileDetails.svelte

@@ -1,4 +1,4 @@
-<script lang="ts">let { files = $bindable([]), toggle_all_btn_title = `Toggle all`, default_lang = `typescript`, as = `ol`, style = null, title_snippet, } = $props();
+<script lang="ts">let { files = $bindable([]), toggle_all_btn_title = `Toggle all`, default_lang = `typescript`, as = `ol`, style = null, title_snippet, button_props, details_props, } = $props();
 function toggle_all() {
     const any_open = files.some((file) => file.node?.open);
     for (const file of files) {
@@ -11,7 +11,7 @@ export {};
 </script>
 
 {#if files?.length > 1}
-  <button onclick={toggle_all} title={toggle_all_btn_title}>
+  <button onclick={toggle_all} title={toggle_all_btn_title} {...button_props}>
     {files.some((file) => file.node?.open) ? `Close` : `Open`} all
   </button>
 {/if}
@@ -21,7 +21,7 @@ export {};
     {@const { title, content, language = default_lang } = file ?? {}}
     <li>
       <!-- https://github.com/sveltejs/svelte/issues/12721#issuecomment-2269544690 -->
-      <details bind:this={file.node}>
+      <details bind:this={file.node} {...details_props}>
         {#if title || title_snippet}
           <summary>
             {#if title_snippet}

package/dist/FileDetails.svelte.d.ts

@@ -1,11 +1,12 @@
 import type { Snippet } from 'svelte';
+import type { HTMLAttributes, HTMLDetailsAttributes } from 'svelte/elements';
 type File = {
     title: string;
     content: string;
     language?: string;
     node?: HTMLDetailsElement | null;
 };
-interface Props {
+type $$ComponentProps = {
     files?: File[];
     toggle_all_btn_title?: string;
     default_lang?: string;
@@ -14,7 +15,9 @@ interface Props {
     title_snippet?: Snippet<[{
         idx: number;
     } & File]>;
-}
-declare const FileDetails: import("svelte").Component<Props, {}, "files">;
+    button_props?: HTMLAttributes<HTMLButtonElement>;
+    details_props?: HTMLDetailsAttributes;
+};
+declare const FileDetails: import("svelte").Component<$$ComponentProps, {}, "files">;
 type FileDetails = ReturnType<typeof FileDetails>;
 export default FileDetails;

package/dist/GitHubCorner.svelte.d.ts

@@ -1,4 +1,4 @@
-interface Props {
+type $$ComponentProps = {
     href: string;
     title?: string;
     aria_label?: string;
@@ -7,7 +7,7 @@ interface Props {
     fill?: string | null;
     corner?: `top-left` | `top-right` | `bottom-left` | `bottom-right`;
     style?: string;
-}
-declare const GitHubCorner: import("svelte").Component<Props, {}, "">;
+};
+declare const GitHubCorner: import("svelte").Component<$$ComponentProps, {}, "">;
 type GitHubCorner = ReturnType<typeof GitHubCorner>;
 export default GitHubCorner;

package/dist/Icon.svelte.d.ts

@@ -1,8 +1,8 @@
+import type { HTMLAttributes } from 'svelte/elements';
 import { type IconName } from './icons';
-interface Props {
+type $$ComponentProps = HTMLAttributes<SVGSVGElement> & {
     icon: IconName;
-    [key: string]: unknown;
-}
-declare const Icon: import("svelte").Component<Props, {}, "">;
+};
+declare const Icon: import("svelte").Component<$$ComponentProps, {}, "">;
 type Icon = ReturnType<typeof Icon>;
 export default Icon;