svelte-multiselect 11.2.4 → 11.4.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,6 +1,9 @@
-<script lang="ts">import { fade } from 'svelte/transition';
+<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...`, ...rest } = $props();
+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)
         input.focus();
@@ -22,10 +25,9 @@ function close_if_outside(event) {
     }
 }
 function trigger_action_and_close({ option }) {
-    const { action, label } = (option ?? {});
-    if (!action)
+    if (!option?.action)
         return;
-    action(label);
+    option.action(option.label);
     open = false;
 }
 </script>
@@ -38,6 +40,7 @@ function trigger_action_and_close({ option }) {
     bind:this={dialog}
     transition:fade={{ duration: fade_duration }}
     style={dialog_style}
+    {...dialog_props}
   >
     <MultiSelect
       options={actions}

package/dist/CmdPalette.svelte.d.ts

@@ -1,21 +1,66 @@
-import type { ComponentProps } from 'svelte';
-import MultiSelect from './MultiSelect.svelte';
-import type { 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<ComponentProps<typeof MultiSelect<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, {}, "dialog" | "input" | "open">;
-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,6 @@
-<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();
+<script lang="ts">import Icon from './Icon.svelte';
+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 +17,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>
@@ -35,8 +41,7 @@ const links = { target: `_blank`, rel: `noreferrer` };
     {@render example?.()}
   {/if}
 
-  <pre class:open>
-  <code>{#if code}{@render code()}{:else}{src}{/if}</code></pre>
+  <pre class:open><code>{#if code}{@render code()}{:else}{src}{/if}</code></pre>
 
   {#if code_above}
     {@render example?.()}

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

@@ -1,5 +1,6 @@
-<script lang="ts">import { CopyButton, Icon } from './';
-import { mount } from 'svelte';
+<script lang="ts">import { mount } from 'svelte';
+import CopyButton from './CopyButton.svelte';
+import Icon from './Icon.svelte';
 let { content = ``, state = $bindable(`ready`), global_selector = null, global = false, skip_selector = `button`, as = `button`, labels = {
     ready: { icon: `Copy`, text: `` },
     success: { icon: `Check`, text: `` },
@@ -9,7 +10,7 @@ $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;

package/dist/CopyButton.svelte.d.ts

@@ -1,9 +1,9 @@
-import { CopyButton } from './';
 import type { Snippet } from 'svelte';
 import type { HTMLAttributes } from 'svelte/elements';
+import CopyButton from './CopyButton.svelte';
 import type { IconName } from './icons';
 type State = `ready` | `success` | `error`;
-interface Props extends Omit<HTMLAttributes<HTMLButtonElement>, `children`> {
+type $$ComponentProps = Omit<HTMLAttributes<HTMLButtonElement>, `children`> & {
     content?: string;
     state?: State;
     global_selector?: string | null;
@@ -19,7 +19,7 @@ interface Props extends Omit<HTMLAttributes<HTMLButtonElement>, `children`> {
         icon: IconName;
         text: string;
     }]>;
-}
-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

@@ -1,13 +1,13 @@
 <script lang="ts">"use strict";
 // Display an animated Octocat in a corner of the screen to link to the GitHub repo.
-let { href, title = `View code on GitHub`, aria_label = title, target = `_self`, color = null, fill = null, corner = `top-right`, style = ``, } = $props();
+let { href, title = `View code on GitHub`, aria_label, target = `_self`, color = null, fill = null, corner = `top-right`, style = ``, } = $props();
 </script>
 
 <a
   {href}
   {target}
   {title}
-  aria-label={aria_label}
+  aria-label={aria_label ?? title}
   {style}
   class={corner}
   style:color

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 extends HTMLAttributes<SVGSVGElement> {
+type $$ComponentProps = HTMLAttributes<SVGSVGElement> & {
     icon: IconName;
-}
-declare const Icon: import("svelte").Component<Props, {}, "">;
+};
+declare const Icon: import("svelte").Component<$$ComponentProps, {}, "">;
 type Icon = ReturnType<typeof Icon>;
 export default Icon;