@streamscloud/kit 0.2.42 → 0.9.0

package/dist/ui/select/cmp.multiselect.svelte.d.ts

@@ -0,0 +1,78 @@
+export type MultiselectInstance = {
+    open: () => void;
+    close: () => void;
+    focus: () => void;
+};
+import { type MultiselectBaseProps, type SelectOption } from './types';
+declare function $$render<T>(): {
+    props: Omit<MultiselectBaseProps<T>, "value" | "on" | "debounceMs" | "loadOptions" | "groupHeader" | "selectionMode" | "parentSource"> & {
+        /** Flat option list. Fuse filters in-memory on every keystroke — no debounce. */
+        options: SelectOption<T>[];
+        /** Current selection — array of values. Order is preserved (and editable when `reorderable`). */
+        value: T[];
+        on?: {
+            /** Fires when the user picks/unpicks/reorders. Emits the full new selection (array of values). */
+            change?: (value: T[]) => void;
+            /** Fires when the user activates "Create …". Return a Promise to keep the spinner up. */
+            create?: (query: string) => void | Promise<void>;
+        };
+    };
+    exports: {
+        open: () => void | undefined;
+        close: () => void | undefined;
+        focus: () => void | undefined;
+    };
+    bindings: "";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<T> {
+    props(): ReturnType<typeof $$render<T>>['props'];
+    events(): ReturnType<typeof $$render<T>>['events'];
+    slots(): ReturnType<typeof $$render<T>>['slots'];
+    bindings(): "";
+    exports(): {
+        open: () => void | undefined;
+        close: () => void | undefined;
+        focus: () => void | undefined;
+    };
+}
+interface $$IsomorphicComponent {
+    new <T>(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>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+/**
+ * Multiselect — sync, flat multi-value picker. Picking toggles membership; the popover stays
+ * open and the filter resets for chaining. Internally proxies to `multiselect-base` with a
+ * synchronous `Promise.resolve` `loadOptions` shim; visual behavior, accessibility, 600ms
+ * spinner gate and race-prevention are inherited verbatim. For grouped options with cascade
+ * or tri-state selection, use `MultiselectTree`. For server-side typeahead, use
+ * `MultiselectAsync`.
+ *
+ * ### CSS Custom Properties
+ *
+ * **Trigger:** `--sc-kit--select--trigger--{height, padding-inline, gap, background,
+ * background--disabled, border-color, border-color--hover, border-color--error, border-radius,
+ * underline-color, font-size, color, placeholder--color, icon--color, icon--size}`.
+ *
+ * **Popover panel:** `--sc-kit--select--panel--{background, border-color, border-radius,
+ * box-shadow, max-height, padding}`.
+ *
+ * **Option rows:** `--sc-kit--select--option--{color, color--selected, background--active,
+ * padding-block, padding-inline}`.
+ *
+ * **Empty text:** `--sc-kit--select--empty--color`.
+ *
+ * **Chip:** `--sc-kit--select--chip--{inline--background, inline--border-color,
+ * external--background, external--border-color, color, border-radius, padding-block,
+ * padding-inline, font-size, gap, max-width, remove-color, remove-color--hover}`.
+ *
+ * **Spinner** (rendered briefly when an async `onCreate` exceeds 600ms):
+ * `--sc-kit--spinner--{size, duration}`.
+ */
+declare const Cmp: $$IsomorphicComponent;
+type Cmp<T> = InstanceType<typeof Cmp<T>>;
+export default Cmp;

package/dist/ui/select/cmp.singleselect-async.svelte

@@ -0,0 +1,343 @@
+<script lang="ts" module>export {};
+</script>
+
+<script lang="ts" generics="T">import { InputClearButton } from '../_internal/input-clear-button';
+import { Spinner } from '../_internal/spinner';
+import { Icon, IconSlot } from '../icon';
+import { createSelectCore } from './select-core.svelte';
+import { defaultCompare } from './select-internals';
+import { default as SelectListbox } from './select-listbox.svelte';
+import { SingleselectLocalization } from './singleselect-localization';
+import IconChevronDown from '@fluentui/svg-icons/icons/chevron_down_16_regular.svg?raw';
+const { loadOptions, debounceMs = 400, size = 'md', placeholder = '', disabled = false, readonly = false, inert = false, error = false, borderless = false, groupHeader = 'static', compare = defaultCompare, canCreate, icon, chevronIcon, optionSnippet, selectionSnippet, listbox, id, name, autocomplete = 'off', 'aria-label': ariaLabel, 'aria-describedby': ariaDescribedby, 'aria-required': ariaRequired, ...mode } = $props();
+const localization = new SingleselectLocalization();
+const selectedOption = $derived(mode.value ?? null);
+const selectionLabel = $derived(selectedOption?.label ?? '');
+const hasValue = $derived(selectedOption !== null);
+const isInteractive = $derived(!disabled && !readonly && !inert);
+let inputEl = $state.raw(undefined);
+let rootEl = $state.raw(undefined);
+const core = createSelectCore({
+    picker: 'single',
+    loadOptions: (q) => loadOptions(q),
+    getDebounceMs: () => debounceMs,
+    getCompare: () => compare,
+    getCanCreate: () => canCreate,
+    getGroupHeader: () => groupHeader,
+    isPicked: (option) => selectedOption !== null && compare(option.value, selectedOption.value),
+    getSelectedOptions: () => (selectedOption ? [selectedOption] : []),
+    getInteractive: () => isInteractive,
+    getInputEl: () => inputEl,
+    onPickOption: (option) => {
+        if (mode.clearable) {
+            mode.on?.change?.(option);
+        }
+        else {
+            mode.on?.change?.(option);
+        }
+    },
+    onPickGroupValue: (group) => {
+        const synthetic = { label: group.label, value: group.value };
+        if (mode.clearable) {
+            mode.on?.change?.(synthetic);
+        }
+        else {
+            mode.on?.change?.(synthetic);
+        }
+    },
+    onPickGroupAll: () => undefined,
+    onClear: () => {
+        if (mode.clearable && hasValue) {
+            mode.on?.change?.(null);
+        }
+    },
+    onCreate: (payload) => mode.on?.create?.(payload.query)
+});
+const listboxId = `singleselect-async-${Math.random().toString(36).slice(2, 9)}`;
+export const open = () => core.openPopover();
+export const close = () => core.closePopover();
+export const focus = () => inputEl?.focus();
+export const refresh = () => core.refresh();
+const displayValue = $derived(core.isFiltering ? core.query : selectionLabel);
+const inputReadonly = $derived(readonly || !core.isFiltering);
+const inputPlaceholder = $derived(!selectedOption && !core.isFiltering ? placeholder : '');
+const showClear = $derived(mode.clearable && hasValue && isInteractive && !core.loading);
+</script>
+
+<div
+  bind:this={rootEl}
+  class="singleselect singleselect--{size}"
+  class:singleselect--open={core.isOpen}
+  class:singleselect--error={error}
+  class:singleselect--disabled={disabled}
+  class:singleselect--readonly={readonly}
+  class:singleselect--inert={inert}
+  class:singleselect--borderless={borderless}
+  onclick={core.handleClick}
+  onkeydown={() => undefined}
+  role="presentation">
+  {#if icon}
+    <span class="singleselect__icon singleselect__icon--leading"><IconSlot icon={icon} /></span>
+  {/if}
+
+  {#if selectionSnippet && selectedOption && !core.isOpen}
+    <span class="singleselect__selection">{@render selectionSnippet({ option: selectedOption })}</span>
+  {/if}
+
+  <input
+    bind:this={inputEl}
+    class="singleselect__input"
+    class:singleselect__input--hidden={selectionSnippet && selectedOption && !core.isOpen}
+    type="text"
+    role="combobox"
+    aria-haspopup="listbox"
+    aria-expanded={core.isOpen}
+    aria-controls={listboxId}
+    aria-activedescendant={core.isOpen ? `${listboxId}-row-${core.highlight}` : undefined}
+    aria-autocomplete="list"
+    aria-label={ariaLabel ?? name}
+    aria-describedby={ariaDescribedby}
+    aria-required={ariaRequired}
+    aria-invalid={error ? 'true' : undefined}
+    id={id}
+    name={name}
+    autocomplete={autocomplete}
+    placeholder={inputPlaceholder}
+    disabled={disabled}
+    readonly={inputReadonly}
+    inert={inert}
+    value={displayValue}
+    onfocus={core.handleFocus}
+    oninput={core.handleInput}
+    onkeydown={core.handleKeydown} />
+
+  {#if showClear}
+    <InputClearButton size={size} aria-label={localization.clearLabel} on={{ clear: () => mode.clearable && mode.on?.change?.(null) }} />
+  {/if}
+  {#if core.loading}
+    <span class="singleselect__icon singleselect__icon--trailing singleselect__spinner" aria-label={localization.loadingLabel}>
+      <Spinner />
+    </span>
+  {:else}
+    <span class="singleselect__icon singleselect__icon--trailing singleselect__chevron">
+      {#if chevronIcon}
+        <IconSlot icon={chevronIcon} />
+      {:else}
+        <Icon src={IconChevronDown} />
+      {/if}
+    </span>
+  {/if}
+
+  <SelectListbox
+    triggerEl={rootEl}
+    isOpen={core.isOpen}
+    rows={core.rows}
+    highlight={core.highlight}
+    loading={core.loading}
+    listboxId={listboxId}
+    optionSnippet={optionSnippet}
+    bodySnippet={listbox}
+    on={{ pickRow: core.pickRow, hoverRow: core.setHighlight, dismiss: core.closePopover }} />
+</div>
+
+<!--
+@component
+SingleselectAsync — single-value picker with server-side typeahead. Calls `loadOptions`
+with an empty query on open and — debounced — on every keystroke. Value is the pre-resolved
+`SelectOption<T>` so the selected label renders before the first fetch lands. Picked options
+not present in the current server page are surfaced at the top of the list when the query
+is empty. Spinner has a built-in 600ms gate; while it's visible the listbox is dimmed and
+pick events are ignored (race-prevention). `clearable` is a required discriminator driving
+value-nullability.
+
+### CSS Custom Properties
+
+**Trigger:** `--sc-kit--select--trigger--{height, padding-inline, gap, background,
+background--disabled, border-color, border-color--hover, border-color--error, border-radius,
+underline-color, font-size, color, placeholder--color, icon--color, icon--size}`.
+
+**Popover panel:** `--sc-kit--select--panel--{background, border-color, border-radius,
+box-shadow, max-height, padding}`.
+
+**Option rows:** `--sc-kit--select--option--{color, color--selected, background--active,
+padding-block, padding-inline}`.
+
+**Group header:** `--sc-kit--select--group-header--{color, font-size}`.
+
+**Empty / loading text:** `--sc-kit--select--empty--color`.
+
+**Clear button** (rendered when `clearable={true}` and a value is set):
+`--sc-kit--input-clear-button--{size, icon-size, border-radius, color, color--hover,
+background--hover}`.
+
+**Spinner** (rendered while loading): `--sc-kit--spinner--{size, duration}`.
+-->
+
+<style>.singleselect {
+  --_sel--height: var(--sc-kit--select--trigger--height, var(--sc-kit--field--height--md));
+  --_sel--padding-inline: var(--sc-kit--select--trigger--padding-inline, var(--sc-kit--field--padding-inline--md));
+  --_sel--gap: var(--sc-kit--select--trigger--gap, var(--sc-kit--space--2));
+  --_sel--background: var(--sc-kit--select--trigger--background, var(--sc-kit--color--bg--field));
+  --_sel--background-disabled: var(--sc-kit--select--trigger--background--disabled, var(--sc-kit--color--bg--field-alt));
+  --_sel--border-color: var(--sc-kit--select--trigger--border-color, var(--sc-kit--color--border--field));
+  --_sel--border-color-hover: var(--sc-kit--select--trigger--border-color--hover, var(--sc-kit--color--border--strong));
+  --_sel--border-color-error: var(--sc-kit--select--trigger--border-color--error, var(--sc-kit--color--danger));
+  --_sel--border-radius: var(--sc-kit--select--trigger--border-radius, var(--sc-kit--radius--sm));
+  --_sel--underline-color: var(--sc-kit--select--trigger--underline-color, transparent);
+  --_sel--font-size: var(--sc-kit--select--trigger--font-size, var(--sc-kit--font-size--md));
+  --_sel--color: var(--sc-kit--select--trigger--color, var(--sc-kit--color--text--primary));
+  --_sel--placeholder-color: var(--sc-kit--select--trigger--placeholder--color, var(--sc-kit--color--text--placeholder));
+  --_sel--icon-color: var(--sc-kit--select--trigger--icon--color, var(--sc-kit--color--text--muted));
+  --_sel--icon-size: var(--sc-kit--select--trigger--icon--size, var(--sc-kit--field--icon--size--md));
+  --_--input-affordance--opacity: 0;
+  --_--input-affordance--scale: 0;
+}
+.singleselect:where(:hover), .singleselect:where(:focus-within) {
+  --_--input-affordance--opacity: 1;
+  --_--input-affordance--scale: 1;
+}
+.singleselect {
+  box-sizing: border-box;
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  width: 100%;
+  max-width: 100%;
+  height: var(--_sel--height);
+  padding: 0 var(--_sel--padding-inline);
+  background: var(--_sel--background);
+  border: 1px solid var(--_sel--border-color);
+  border-radius: var(--_sel--border-radius);
+  color: var(--_sel--color);
+  font-size: var(--_sel--font-size);
+  line-height: var(--sc-kit--leading--tight);
+  cursor: pointer;
+  box-shadow: inset 0 -0.13em var(--_sel--underline-color);
+  transition: background-color var(--sc-kit--duration--base) var(--sc-kit--ease--default), border-color var(--sc-kit--duration--base) var(--sc-kit--ease--default), color var(--sc-kit--duration--base) var(--sc-kit--ease--default), box-shadow var(--sc-kit--duration--base) var(--sc-kit--ease--default);
+}
+.singleselect--sm {
+  --sc-kit--select--trigger--height: var(--sc-kit--field--height--sm);
+  --sc-kit--select--trigger--padding-inline: var(--sc-kit--field--padding-inline--sm);
+  --sc-kit--select--trigger--font-size: var(--sc-kit--font-size--sm);
+  --sc-kit--select--trigger--icon--size: var(--sc-kit--field--icon--size--sm);
+}
+.singleselect--md {
+  --sc-kit--select--trigger--height: var(--sc-kit--field--height--md);
+  --sc-kit--select--trigger--padding-inline: var(--sc-kit--field--padding-inline--md);
+  --sc-kit--select--trigger--font-size: var(--sc-kit--font-size--md);
+  --sc-kit--select--trigger--icon--size: var(--sc-kit--field--icon--size--md);
+}
+.singleselect--lg {
+  --sc-kit--select--trigger--height: var(--sc-kit--field--height--lg);
+  --sc-kit--select--trigger--padding-inline: var(--sc-kit--field--padding-inline--lg);
+  --sc-kit--select--trigger--font-size: var(--sc-kit--font-size--lg);
+  --sc-kit--select--trigger--icon--size: var(--sc-kit--field--icon--size--lg);
+}
+.singleselect:where(:hover) {
+  --sc-kit--select--trigger--border-color: var(--_sel--border-color-hover);
+}
+.singleselect:where(:focus-within), .singleselect--open {
+  --sc-kit--select--trigger--underline-color: var(--sc-kit--color--accent);
+}
+.singleselect--error {
+  --sc-kit--select--trigger--border-color: var(--_sel--border-color-error);
+  --sc-kit--select--trigger--underline-color: var(--sc-kit--color--danger);
+}
+.singleselect--disabled, .singleselect--readonly, .singleselect--inert {
+  --sc-kit--select--trigger--border-color: unset;
+  --sc-kit--select--trigger--underline-color: unset;
+  --_--input-affordance--opacity: 0;
+  --_--input-affordance--scale: 0;
+  cursor: default;
+}
+.singleselect--disabled {
+  --sc-kit--select--trigger--background: var(--_sel--background-disabled);
+  --sc-kit--select--trigger--color: var(--sc-kit--color--text--muted);
+}
+.singleselect--borderless {
+  --sc-kit--select--trigger--background: transparent;
+  --sc-kit--select--trigger--border-color: transparent;
+  --sc-kit--select--trigger--underline-color: transparent;
+  box-shadow: none;
+}
+.singleselect__input {
+  flex: 1;
+  min-width: 0;
+  height: 100%;
+  padding: 0;
+  margin: 0;
+  border: none;
+  outline: none;
+  background: transparent;
+  color: inherit;
+  font-family: inherit;
+  font-size: inherit;
+  line-height: inherit;
+  cursor: inherit;
+}
+.singleselect__input::placeholder {
+  color: var(--_sel--placeholder-color);
+}
+.singleselect__input:not([readonly]) {
+  cursor: text;
+}
+.singleselect__input--hidden {
+  opacity: 0;
+  width: 0;
+  flex: 0;
+}
+.singleselect__selection {
+  flex: 1;
+  min-width: 0;
+  text-overflow: ellipsis;
+  max-width: 100%;
+  white-space: nowrap;
+  overflow: hidden;
+}
+.singleselect__icon {
+  --sc-kit--icon--color: var(--_sel--icon-color);
+  --sc-kit--icon--size: var(--_sel--icon-size);
+  flex-shrink: 0;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  line-height: 0;
+}
+.singleselect__icon--leading {
+  margin-inline-end: var(--_sel--gap);
+}
+.singleselect__icon--trailing {
+  margin-inline-start: var(--_sel--gap);
+}
+.singleselect__chevron {
+  transition: transform var(--sc-kit--duration--fast) var(--sc-kit--ease--default);
+}
+.singleselect--open .singleselect__chevron {
+  transform: rotate(180deg);
+}
+.singleselect__spinner {
+  color: var(--_sel--icon-color);
+}
+.singleselect--multi {
+  height: auto;
+  min-height: var(--_sel--height);
+  flex-wrap: wrap;
+  padding-block: 0.25rem;
+  padding-inline-end: calc(var(--_sel--padding-inline) + var(--_sel--icon-size) + var(--_sel--gap));
+  gap: var(--sc-kit--space--1);
+}
+.singleselect--multi .singleselect__chevron {
+  position: absolute;
+  inset-block-start: calc(var(--_sel--height) / 2);
+  inset-inline-end: var(--_sel--padding-inline);
+  transform: translateY(-50%);
+  margin: 0;
+}
+.singleselect__more {
+  display: inline-flex;
+  align-items: center;
+  padding: 0 var(--sc-kit--space--2);
+  font-size: var(--sc-kit--font-size--sm);
+  color: var(--sc-kit--color--text--muted);
+  user-select: none;
+}</style>

package/dist/ui/select/cmp.singleselect-async.svelte.d.ts

@@ -0,0 +1,105 @@
+export type SingleselectAsyncInstance = {
+    open: () => void;
+    close: () => void;
+    focus: () => void;
+    /** Re-runs `loadOptions` with the current query while the popover is open. Used by the sync `Singleselect` proxy to react to `options` prop changes. */
+    refresh: () => void;
+};
+import type { SelectItem, SelectOption, SingleselectCommonProps } from './types';
+declare function $$render<T>(): {
+    props: (SingleselectCommonProps<T> & {
+        /** Server-side fetcher. Invoked with an empty query on open (initial page) and again — debounced — on every keystroke. */
+        loadOptions: (query: string) => Promise<SelectItem<T>[]>;
+        /** Debounce window for `loadOptions` while typing. @default 400 */
+        debounceMs?: number;
+    } & {
+        /** Discriminator — `true` enables the X clear button and allows `value` to be `null`. */
+        clearable: true;
+        /** Currently selected option (pre-resolved — labels render before the first fetch lands). `null` when nothing is picked. */
+        value: SelectOption<T> | null | undefined;
+        on?: {
+            /** Fires when the user picks an option or clears. */
+            change?: (value: SelectOption<T> | null) => void;
+            /** Fires when the user activates "Create …". Return a Promise to keep the spinner up until the consumer finishes; the popover closes on resolution. */
+            create?: (query: string) => void | Promise<void>;
+        };
+    }) | (SingleselectCommonProps<T> & {
+        /** Server-side fetcher. Invoked with an empty query on open (initial page) and again — debounced — on every keystroke. */
+        loadOptions: (query: string) => Promise<SelectItem<T>[]>;
+        /** Debounce window for `loadOptions` while typing. @default 400 */
+        debounceMs?: number;
+    } & {
+        /** Discriminator — `false` removes the X clear button; `value` must always be a non-null `SelectOption<T>`. */
+        clearable: false;
+        /** Currently selected option — non-null. */
+        value: SelectOption<T>;
+        on?: {
+            /** Fires when the user picks an option. */
+            change?: (value: SelectOption<T>) => void;
+            /** Fires when the user activates "Create …". Return a Promise to keep the spinner up until the consumer finishes. */
+            create?: (query: string) => void | Promise<void>;
+        };
+    });
+    exports: {
+        open: () => void;
+        close: () => void;
+        focus: () => void | undefined;
+        refresh: () => void;
+    };
+    bindings: "";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<T> {
+    props(): ReturnType<typeof $$render<T>>['props'];
+    events(): ReturnType<typeof $$render<T>>['events'];
+    slots(): ReturnType<typeof $$render<T>>['slots'];
+    bindings(): "";
+    exports(): {
+        open: () => void;
+        close: () => void;
+        focus: () => void | undefined;
+        refresh: () => void;
+    };
+}
+interface $$IsomorphicComponent {
+    new <T>(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>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+/**
+ * SingleselectAsync — single-value picker with server-side typeahead. Calls `loadOptions`
+ * with an empty query on open and — debounced — on every keystroke. Value is the pre-resolved
+ * `SelectOption<T>` so the selected label renders before the first fetch lands. Picked options
+ * not present in the current server page are surfaced at the top of the list when the query
+ * is empty. Spinner has a built-in 600ms gate; while it's visible the listbox is dimmed and
+ * pick events are ignored (race-prevention). `clearable` is a required discriminator driving
+ * value-nullability.
+ *
+ * ### CSS Custom Properties
+ *
+ * **Trigger:** `--sc-kit--select--trigger--{height, padding-inline, gap, background,
+ * background--disabled, border-color, border-color--hover, border-color--error, border-radius,
+ * underline-color, font-size, color, placeholder--color, icon--color, icon--size}`.
+ *
+ * **Popover panel:** `--sc-kit--select--panel--{background, border-color, border-radius,
+ * box-shadow, max-height, padding}`.
+ *
+ * **Option rows:** `--sc-kit--select--option--{color, color--selected, background--active,
+ * padding-block, padding-inline}`.
+ *
+ * **Group header:** `--sc-kit--select--group-header--{color, font-size}`.
+ *
+ * **Empty / loading text:** `--sc-kit--select--empty--color`.
+ *
+ * **Clear button** (rendered when `clearable={true}` and a value is set):
+ * `--sc-kit--input-clear-button--{size, icon-size, border-radius, color, color--hover,
+ * background--hover}`.
+ *
+ * **Spinner** (rendered while loading): `--sc-kit--spinner--{size, duration}`.
+ */
+declare const Cmp: $$IsomorphicComponent;
+type Cmp<T> = InstanceType<typeof Cmp<T>>;
+export default Cmp;

package/dist/ui/select/cmp.singleselect.svelte

@@ -0,0 +1,136 @@
+<script lang="ts" module>export {};
+</script>
+
+<script lang="ts" generics="T">import { default as SingleselectAsync } from './cmp.singleselect-async.svelte';
+import { buildFuseIndex, defaultCompare, runFuseSearch } from './select-internals';
+import { isSelectGroup } from './types';
+const { options, compare = defaultCompare, size = 'md', placeholder = '', disabled = false, readonly = false, inert = false, error = false, borderless = false, groupHeader = 'static', canCreate, icon, chevronIcon, optionSnippet, selectionSnippet, listbox, id, name, autocomplete = 'off', 'aria-label': ariaLabel, 'aria-describedby': ariaDescribedby, 'aria-required': ariaRequired, ...mode } = $props();
+const fuse = $derived(buildFuseIndex(options));
+const loadOptionsShim = (q) => Promise.resolve(runFuseSearch(fuse, q, options));
+const resolvedValue = $derived.by(() => {
+    const v = mode.value;
+    if (v === null || v === undefined) {
+        return null;
+    }
+    for (const item of options) {
+        if (isSelectGroup(item)) {
+            const found = item.options.find((o) => compare(o.value, v));
+            if (found) {
+                return found;
+            }
+        }
+        else if (compare(item.value, v)) {
+            return item;
+        }
+    }
+    return { label: String(v), value: v };
+});
+let asyncRef = $state.raw(undefined);
+export const open = () => asyncRef?.open();
+export const close = () => asyncRef?.close();
+export const focus = () => asyncRef?.focus();
+// Sync wrapper: when options change while the popover is open, ask the async impl to
+// re-run loadOptions (= our Fuse shim) so the listbox reflects the new prop.
+$effect(() => {
+    void options;
+    asyncRef?.refresh();
+});
+</script>
+
+{#if mode.clearable}
+  <SingleselectAsync
+    bind:this={asyncRef}
+    clearable
+    loadOptions={loadOptionsShim}
+    debounceMs={0}
+    value={resolvedValue}
+    compare={compare}
+    size={size}
+    placeholder={placeholder}
+    disabled={disabled}
+    readonly={readonly}
+    inert={inert}
+    error={error}
+    borderless={borderless}
+    groupHeader={groupHeader}
+    canCreate={canCreate}
+    icon={icon}
+    chevronIcon={chevronIcon}
+    optionSnippet={optionSnippet}
+    selectionSnippet={selectionSnippet}
+    listbox={listbox}
+    id={id}
+    name={name}
+    autocomplete={autocomplete}
+    aria-label={ariaLabel}
+    aria-describedby={ariaDescribedby}
+    aria-required={ariaRequired}
+    on={{
+      change: (opt) => mode.on?.change?.(opt?.value ?? null),
+      create: (q) => mode.on?.create?.(q)
+    }} />
+{:else}
+  <SingleselectAsync
+    bind:this={asyncRef}
+    clearable={false}
+    loadOptions={loadOptionsShim}
+    debounceMs={0}
+    value={resolvedValue ?? { label: String(mode.value), value: mode.value }}
+    compare={compare}
+    size={size}
+    placeholder={placeholder}
+    disabled={disabled}
+    readonly={readonly}
+    inert={inert}
+    error={error}
+    borderless={borderless}
+    groupHeader={groupHeader}
+    canCreate={canCreate}
+    icon={icon}
+    chevronIcon={chevronIcon}
+    optionSnippet={optionSnippet}
+    selectionSnippet={selectionSnippet}
+    listbox={listbox}
+    id={id}
+    name={name}
+    autocomplete={autocomplete}
+    aria-label={ariaLabel}
+    aria-describedby={ariaDescribedby}
+    aria-required={ariaRequired}
+    on={{
+      change: (opt) => mode.on?.change?.(opt.value),
+      create: (q) => mode.on?.create?.(q)
+    }} />
+{/if}
+
+<!--
+@component
+Singleselect — always-searchable single-value picker for static options. Click or type to
+open; typing filters via Fuse fuzzy match. Internally proxies to `SingleselectAsync` with a
+synchronous `Promise.resolve` `loadOptions` shim — visual behavior, accessibility, 600ms
+spinner gate and race-prevention are inherited verbatim. `clearable` is a required
+discriminator: `true` allows `null` and shows the X clear button; `false` requires non-null `T`.
+
+### CSS Custom Properties
+
+**Trigger:** `--sc-kit--select--trigger--{height, padding-inline, gap, background,
+background--disabled, border-color, border-color--hover, border-color--error, border-radius,
+underline-color, font-size, color, placeholder--color, icon--color, icon--size}`.
+
+**Popover panel:** `--sc-kit--select--panel--{background, border-color, border-radius,
+box-shadow, max-height, padding}`.
+
+**Option rows:** `--sc-kit--select--option--{color, color--selected, background--active,
+padding-block, padding-inline}`.
+
+**Group header:** `--sc-kit--select--group-header--{color, font-size}`.
+
+**Empty text:** `--sc-kit--select--empty--color`.
+
+**Clear button** (rendered when `clearable={true}` and a value is set):
+`--sc-kit--input-clear-button--{size, icon-size, border-radius, color, color--hover,
+background--hover}`.
+
+**Spinner** (rendered briefly when an async `onCreate` exceeds 600ms):
+`--sc-kit--spinner--{size, duration}`.
+-->