svelte-multiselect 11.5.0 → 11.5.2

package/dist/CircleSpinner.svelte

@@ -0,0 +1,29 @@
+<script lang="ts">"use strict";
+let { color = `cornflowerblue`, duration = `1.5s`, size = `1em` } = $props();
+</script>
+
+<div
+  style="--duration: {duration}"
+  style:border-color="{color} transparent {color}
+  {color}"
+  style:width={size}
+  style:height={size}
+>
+</div>
+
+<style>
+  div {
+    display: inline-block;
+    vertical-align: middle;
+    margin: 0 3pt;
+    border-width: calc(1em / 5);
+    border-style: solid;
+    border-radius: 50%;
+    animation: var(--duration) infinite rotate;
+  }
+  @keyframes rotate {
+    100% {
+      transform: rotate(360deg);
+    }
+  }
+</style>

package/dist/CircleSpinner.svelte.d.ts

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

package/dist/CmdPalette.svelte

@@ -0,0 +1,74 @@
+<script
+  lang="ts"
+  generics="Action extends { label: string; action: (label: string) => void; group?: string } & Record<string, unknown> = { label: string; action: (label: string) => void; group?: string }"
+>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)
+        input.focus();
+});
+async function toggle(event) {
+    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)
+        open = false;
+}
+function close_if_outside(event) {
+    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({ option }) {
+    if (!option?.action)
+        return;
+    option.action(option.label);
+    open = false;
+}
+</script>
+
+<svelte:window onkeydown={toggle} onclick={close_if_outside} />
+
+{#if open}
+  <dialog
+    open
+    bind:this={dialog}
+    transition:fade={{ duration: fade_duration }}
+    style={dialog_style}
+    {...dialog_props}
+  >
+    <MultiSelect
+      options={actions}
+      bind:input
+      {placeholder}
+      onadd={trigger_action_and_close}
+      onkeydown={toggle}
+      {...rest}
+      --sms-bg="var(--sms-options-bg)"
+      --sms-width="min(20em, 90vw)"
+      --sms-max-width="none"
+      --sms-placeholder-color="lightgray"
+      --sms-options-margin="1px 0"
+      --sms-options-border-radius="0 0 1ex 1ex"
+    />
+  </dialog>
+{/if}
+
+<style>
+  :where(dialog) {
+    position: fixed;
+    top: 30%;
+    border: none;
+    padding: 0;
+    background-color: transparent;
+    display: flex;
+    color: light-dark(#222, #eee);
+    z-index: 10;
+    font-size: 2.4ex;
+  }
+</style>

package/dist/CmdPalette.svelte.d.ts

@@ -0,0 +1,76 @@
+import type { HTMLAttributes } from 'svelte/elements';
+declare function $$render<Action extends {
+    label: string;
+    action: (label: string) => void;
+    group?: string;
+} & Record<string, unknown> = {
+    label: string;
+    action: (label: string) => void;
+    group?: string;
+}>(): {
+    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;
+    group?: string;
+} & Record<string, unknown> = {
+    label: string;
+    action: (label: string) => void;
+    group?: string;
+}> {
+    props(): ReturnType<typeof $$render<Action>>['props'];
+    events(): ReturnType<typeof $$render<Action>>['events'];
+    slots(): ReturnType<typeof $$render<Action>>['slots'];
+    bindings(): "dialog" | "input" | "open";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <Action extends {
+        label: string;
+        action: (label: string) => void;
+        group?: string;
+    } & Record<string, unknown> = {
+        label: string;
+        action: (label: string) => void;
+        group?: string;
+    }>(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;
+        group?: string;
+    } & Record<string, unknown> = {
+        label: string;
+        action: (label: string) => void;
+        group?: string;
+    }>(internal: unknown, props: ReturnType<__sveltets_Render<Action>['props']> & {}): ReturnType<__sveltets_Render<Action>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const CmdPalette: $$IsomorphicComponent;
+type CmdPalette<Action extends {
+    label: string;
+    action: (label: string) => void;
+    group?: string;
+} & Record<string, unknown> = {
+    label: string;
+    action: (label: string) => void;
+    group?: string;
+}> = InstanceType<typeof CmdPalette<Action>>;
+export default CmdPalette;

package/dist/CodeExample.svelte

@@ -0,0 +1,85 @@
+<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>
+
+<nav>
+  {#each [
+      { cond: repl, href: repl, icon: `Svelte` },
+      {
+        cond: github && repo,
+        href: file ? `${repo}/blob/-/${github == true ? file : github}` : repo,
+        icon: `GitHub`,
+      },
+    ] as const as
+    { cond, href, icon }
+    (icon)
+  }
+    <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_props}>
+      <Icon icon={open ? `Collapse` : `Expand`} />
+      {open ? `Close` : `View code`}
+    </button>
+  {/if}
+</nav>
+<!-- wrap in div with id for precise CSS selectors in playwright E2E tests -->
+<div {id} class="code-example">
+  {#if !code_above}
+    {@render example?.()}
+  {/if}
+
+  <pre class:open><code>{#if code}{@render code()}{:else}{src}{/if}</code></pre>
+
+  {#if code_above}
+    {@render example?.()}
+  {/if}
+</div>
+
+<style>
+  div.code-example {
+    margin: var(--code-example-margin, 1em auto);
+    position: relative;
+  }
+  nav {
+    display: flex;
+    justify-content: end;
+    align-items: center;
+    margin: var(--code-example-nav-margin, initial);
+    gap: var(--code-example-nav-gap, 1ex);
+  }
+  pre code {
+    background-color: transparent;
+    display: inline-block;
+  }
+  pre {
+    position: relative;
+    overflow-x: auto;
+    visibility: hidden;
+    opacity: 0;
+    max-height: 0;
+    transition: max-height, opacity, visibility;
+    transition-duration: var(--code-example-pre-transition-duration, 0.3s);
+    border-radius: var(--code-example-pre-border-radius, 4pt);
+    background-color: var(--code-example-pre-bg, var(--pre-bg));
+    padding: var(--code-example-pre-padding, 1ex 1em);
+  }
+  pre.open {
+    visibility: visible;
+    opacity: 1;
+    max-height: 9999vh;
+    margin: var(--code-example-pre-margin, 1em 0 0 0);
+  }
+</style>

package/dist/CodeExample.svelte.d.ts

@@ -0,0 +1,25 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+type $$ComponentProps = {
+    src?: string;
+    meta?: {
+        collapsible?: boolean;
+        code_above?: boolean;
+        id?: string;
+        repl?: string;
+        github?: string | boolean;
+        repo?: string;
+        Wrapper?: string;
+        example?: boolean;
+        file?: string;
+    };
+    open?: boolean;
+    title?: Snippet<[]>;
+    example?: Snippet<[]>;
+    code?: Snippet<[]>;
+    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

@@ -0,0 +1,67 @@
+<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: `` },
+    error: { icon: `Alert`, text: `` },
+}, children, ...rest } = $props();
+$effect(() => {
+    if (!global && !global_selector)
+        return;
+    const apply_copy_buttons = () => {
+        const 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 && !pre.querySelector(`[data-sms-copy]`) &&
+                !(skip_sel && pre.querySelector(skip_sel))) {
+                mount(CopyButton, {
+                    target: pre,
+                    props: { content, as, labels, ...rest, style, 'data-sms-copy': `` },
+                });
+            }
+        }
+    };
+    apply_copy_buttons();
+    const observer = new MutationObserver(apply_copy_buttons);
+    observer.observe(document.body, { childList: true, subtree: true });
+    return () => observer.disconnect();
+});
+async function copy() {
+    try {
+        await navigator.clipboard.writeText(content);
+        state = `success`;
+    }
+    catch (err) {
+        console.error(err);
+        state = `error`;
+    }
+    setTimeout(() => (state = `ready`), 2000);
+}
+</script>
+
+{#if !(global || global_selector)}
+  {@const { text, icon } = labels[state]}
+  <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}
+      <Icon {icon} />{@html text}
+    {/if}
+  </svelte:element>
+{/if}

package/dist/CopyButton.svelte.d.ts

@@ -0,0 +1,25 @@
+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`;
+type $$ComponentProps = Omit<HTMLAttributes<HTMLButtonElement>, `children`> & {
+    content?: string;
+    state?: State;
+    global_selector?: string | null;
+    global?: boolean;
+    skip_selector?: string | null;
+    as?: string;
+    labels?: Record<State, {
+        icon: IconName;
+        text: string;
+    }>;
+    children?: Snippet<[{
+        state: State;
+        icon: IconName;
+        text: string;
+    }]>;
+};
+declare const CopyButton: import("svelte").Component<$$ComponentProps, {}, "state">;
+type CopyButton = ReturnType<typeof CopyButton>;
+export default CopyButton;

package/dist/FileDetails.svelte

@@ -0,0 +1,65 @@
+<script lang="ts">let { files = $bindable([]), toggle_all_btn_title = `Toggle all`, default_lang = `typescript`, as = `ol`, title_snippet, button_props, details_props, ...rest } = $props();
+// Use reactive state for node refs to avoid binding_property_non_reactive warning
+let node_refs = $state([]);
+// Trim stale refs when files shrink and sync node_refs back to files.node for external access
+$effect(() => {
+    // Trim stale references when files array shrinks to prevent memory leaks
+    if (node_refs.length > files.length) {
+        node_refs.splice(files.length);
+    }
+    for (const [idx, node] of node_refs.entries()) {
+        if (files[idx])
+            files[idx].node = node;
+    }
+});
+// Check if any nodes are open (for button text)
+const any_open = $derived(node_refs.some((node) => node?.open));
+function toggle_all() {
+    const should_close = node_refs.some((node) => node?.open);
+    for (const node of node_refs) {
+        if (!node)
+            continue;
+        node.open = !should_close;
+    }
+}
+export {};
+</script>
+
+{#if files?.length > 1}
+  <button onclick={toggle_all} title={toggle_all_btn_title} {...button_props}>
+    {any_open ? `Close` : `Open`} all
+  </button>
+{/if}
+
+<svelte:element this={as} {...rest}>
+  {#each files as file, idx (file.title)}
+    {@const { title, content, language = default_lang } = file ?? {}}
+    <li>
+      <details bind:this={node_refs[idx]} {...details_props}>
+        {#if title || title_snippet}
+          <summary>
+            {#if title_snippet}
+              {@render title_snippet({ idx, ...file })}
+            {:else}
+              {@html title}
+            {/if}
+          </summary>
+        {/if}
+
+        <pre class="language-{language}"><code>{content}</code></pre>
+      </details>
+    </li>
+  {/each}
+</svelte:element>
+
+<style>
+  button {
+    float: right;
+  }
+  ol {
+    padding: 0;
+  }
+  ol > li {
+    margin: 1ex 0;
+  }
+</style>

package/dist/FileDetails.svelte.d.ts

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

package/dist/GitHubCorner.svelte

@@ -0,0 +1,82 @@
+<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, target = `_self`, color = null, fill = null, corner = `top-right`, style = ``, } = $props();
+</script>
+
+<a
+  {href}
+  {target}
+  {title}
+  aria-label={aria_label ?? title}
+  {style}
+  class={corner}
+  style:color
+  style:fill
+>
+  <svg viewBox="0 0 250 250" aria-hidden="true">
+    <path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z" />
+    <path
+      d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2"
+      fill="currentColor"
+      style="transform-origin: 130px 106px"
+      class="octo-arm"
+    />
+    <path
+      d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z"
+      fill="currentColor"
+      class="octo-body"
+    />
+  </svg>
+</a>
+
+<style>
+  a {
+    position: fixed;
+    z-index: 1;
+    fill: var(--github-corner-bg, light-dark(#222, #eee));
+    color: var(--github-corner-color, light-dark(#fafafa, #1a1a1a));
+    width: var(--github-corner-size, 70px);
+  }
+  a.top-right {
+    top: 0;
+    right: 0;
+  }
+  a.top-left {
+    top: 0;
+    left: 0;
+    transform: rotate(-90deg);
+  }
+  a.bottom-left {
+    bottom: 0;
+    left: 0;
+    transform: rotate(180deg);
+  }
+  a.bottom-right {
+    bottom: 0;
+    right: 0;
+    transform: rotate(90deg);
+  }
+  a:hover .octo-arm {
+    animation: octocat-wave 0.5s ease-in-out;
+  }
+  @keyframes octocat-wave {
+    0%,
+    100% {
+      transform: rotate(0);
+    }
+    20%,
+    60% {
+      transform: rotate(-25deg);
+    }
+    40%,
+    80% {
+      transform: rotate(10deg);
+    }
+  }
+  /* hide this component by default when printing since it would show up on every page */
+  @media print {
+    a {
+      display: var(--github-corner-print-display, none);
+    }
+  }
+</style>

package/dist/GitHubCorner.svelte.d.ts

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

package/dist/Icon.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">import { icon_data } from './icons';
+let { icon, ...rest } = $props();
+const data = $derived.by(() => {
+    if (!(icon in icon_data)) {
+        console.error(`Icon '${icon}' not found`);
+        return icon_data.Alert; // fallback
+    }
+    return icon_data[icon];
+});
+</script>
+
+<svg viewBox={data.viewBox} fill="currentColor" {...rest}>
+  <path d={data.path} />
+</svg>
+
+<style>
+  svg {
+    width: 1em;
+    height: 1em;
+    display: inline-block;
+    vertical-align: middle;
+  }
+</style>

package/dist/Icon.svelte.d.ts

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