@streamscloud/kit 0.31.0 → 0.32.0

package/dist/ui/select/_select-trigger.scss

@@ -6,7 +6,7 @@
 // Shared trigger shape for Singleselect / SingleselectAsync / (later) Multiselect.
 // Public CSS API lives under `--sc-kit--select--trigger--*` so consumers can override
 // once and have all select variants pick it up.
-@mixin select-trigger {
+@mixin select-trigger($chevron: true) {
   --_sel--height: var(--sc-kit--select--trigger--height, var(--_sel--size-height, var(--sc-kit--field--height--md)));
   --_sel--padding-inline: var(--sc-kit--select--trigger--padding-inline, var(--_sel--size-padding-inline, var(--sc-kit--field--padding-inline--md)));
   --_sel--gap: var(--sc-kit--select--trigger--gap, var(--sc-kit--space--2));
@@ -164,12 +164,14 @@
     }
   }
 
-  &__chevron {
-    transition: transform var(--sc-kit--duration--fast) var(--sc-kit--ease--default);
-  }
+  @if $chevron {
+    &__chevron {
+      transition: transform var(--sc-kit--duration--fast) var(--sc-kit--ease--default);
+    }
 
-  &--open &__chevron {
-    transform: rotate(180deg);
+    &--open &__chevron {
+      transform: rotate(180deg);
+    }
   }
 
   &__spinner {
@@ -193,12 +195,14 @@
   // reflow to additional rows below. (Spinner positioning lives in MultiselectAsync's
   // local style block — Svelte's per-component CSS-usage check otherwise flags this rule
   // as unused in Singleselect / sync Multiselect.)
-  &--multi &__chevron {
-    position: absolute;
-    inset-block-start: calc(var(--_sel--height) / 2);
-    inset-inline-end: var(--_sel--padding-inline);
-    transform: translateY(-50%);
-    margin: 0;
+  @if $chevron {
+    &--multi &__chevron {
+      position: absolute;
+      inset-block-start: calc(var(--_sel--height) / 2);
+      inset-inline-end: var(--_sel--padding-inline);
+      transform: translateY(-50%);
+      margin: 0;
+    }
   }
 
   // Inline-chip area visible inside the trigger when value is non-empty (inline mode).

package/dist/ui/select/cmp.input-suggest.svelte

@@ -0,0 +1,495 @@
+<script lang="ts" module>export {};
+</script>
+
+<script lang="ts">import { InputClearButton } from '../_internal/input-clear-button';
+import { IconSlot } from '../icon';
+import { default as SelectListbox } from './select-listbox.svelte';
+const { value, suggestions, size = 'md', placeholder = '', disabled = false, readonly = false, inert = false, error = false, borderless = false, clearable = false, icon, name, id, autocomplete = 'off', 'aria-label': ariaLabel, 'aria-describedby': ariaDescribedby, 'aria-required': ariaRequired, on } = $props();
+let inputEl = $state.raw(undefined);
+let rootEl = $state.raw(undefined);
+let isOpen = $state(false);
+let isFiltering = $state(false);
+let highlight = $state(-1);
+let lastCommitted = '';
+let isRestoringFocus = false;
+const listboxId = `input-suggest-${Math.random().toString(36).slice(2, 9)}`;
+const currentValue = $derived(value ?? '');
+const isInteractive = $derived(!disabled && !readonly && !inert);
+const matches = $derived.by(() => {
+    if (!isFiltering) {
+        return suggestions;
+    }
+    const needle = currentValue.trim().toLowerCase();
+    if (!needle) {
+        return suggestions;
+    }
+    return suggestions.filter((suggestion) => suggestion.value.toLowerCase().includes(needle));
+});
+const rows = $derived(matches.map((suggestion) => ({
+    kind: 'option',
+    option: { label: suggestion.value, value: suggestion },
+    indent: false,
+    selected: false
+})));
+const isPanelOpen = $derived(isOpen && rows.length > 0);
+const activeIndex = $derived(highlight >= 0 && highlight < rows.length ? highlight : -1);
+const showClear = $derived(clearable && isInteractive && !!currentValue);
+const openSuggestions = () => {
+    isOpen = true;
+    isFiltering = false;
+    highlight = -1;
+};
+const closeSuggestions = () => {
+    isOpen = false;
+    isFiltering = false;
+    highlight = -1;
+};
+// clearing the flag synchronously drops the guard when focus() dispatches late — handleFocus then reopens the popover after a pick
+const restoreFocus = () => {
+    isRestoringFocus = true;
+    inputEl?.focus();
+    queueMicrotask(() => {
+        isRestoringFocus = false;
+    });
+};
+export const focus = () => inputEl?.focus();
+export const select = () => inputEl?.select();
+export const open = () => {
+    if (isInteractive) {
+        inputEl?.focus();
+        openSuggestions();
+    }
+};
+export const close = () => closeSuggestions();
+const commitValue = (next) => {
+    lastCommitted = next;
+    on?.change?.(next);
+};
+const flushCommit = () => {
+    if (inputEl && inputEl.value !== lastCommitted) {
+        commitValue(inputEl.value);
+    }
+};
+const emitValue = (next) => {
+    if (inputEl) {
+        inputEl.value = next;
+    }
+    on?.input?.(next);
+    commitValue(next);
+};
+const applySuggestion = (suggestion) => {
+    closeSuggestions();
+    emitValue(suggestion.value);
+    on?.select?.(suggestion);
+    restoreFocus();
+};
+export const clear = () => {
+    if (!isInteractive) {
+        return;
+    }
+    emitValue('');
+    restoreFocus();
+    openSuggestions();
+};
+const handleRootClick = () => {
+    if (!isInteractive) {
+        return;
+    }
+    inputEl?.focus();
+    if (!isOpen) {
+        openSuggestions();
+    }
+};
+// calling openSuggestions() here expands the popover on Tab-focus
+const handleFocus = () => {
+    if (isRestoringFocus) {
+        return;
+    }
+    lastCommitted = inputEl?.value ?? currentValue;
+    on?.focus?.();
+};
+const handleBlur = (event) => {
+    const next = event.relatedTarget;
+    // Row clicks blur the input before the click lands — closing here would unmount the row first.
+    if (next instanceof Node && rootEl?.contains(next)) {
+        return;
+    }
+    closeSuggestions();
+    flushCommit();
+    if (inputEl) {
+        inputEl.value = currentValue;
+    }
+    on?.blur?.();
+};
+const handleRootMousedown = (event) => {
+    if (event.target !== inputEl) {
+        event.preventDefault();
+    }
+};
+const handleInput = () => {
+    if (!inputEl) {
+        return;
+    }
+    if (isInteractive) {
+        isOpen = true;
+        isFiltering = true;
+        highlight = -1;
+    }
+    on?.input?.(inputEl.value);
+};
+const handleKeydown = (event) => {
+    on?.keydown?.(event);
+    if (!isInteractive) {
+        return;
+    }
+    if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {
+        const step = event.key === 'ArrowDown' ? 1 : -1;
+        event.preventDefault();
+        // plain `isOpen` — openSuggestions() here would drop the active filter and offer unrelated rows to Enter
+        isOpen = true;
+        const count = rows.length;
+        if (count === 0) {
+            highlight = -1;
+        }
+        else if (activeIndex < 0) {
+            highlight = step === 1 ? 0 : count - 1;
+        }
+        else {
+            highlight = (activeIndex + step + count) % count;
+        }
+        return;
+    }
+    if (event.key === 'Enter') {
+        const row = isPanelOpen && activeIndex >= 0 ? rows[activeIndex] : undefined;
+        if (row?.kind === 'option') {
+            event.preventDefault();
+            applySuggestion(row.option.value);
+        }
+        else {
+            flushCommit();
+        }
+        return;
+    }
+    if (event.key === 'Escape' && isPanelOpen) {
+        event.preventDefault();
+        closeSuggestions();
+        return;
+    }
+    if (event.key === 'Tab') {
+        closeSuggestions();
+    }
+};
+const handlePickRow = (row) => {
+    if (row.kind === 'option') {
+        applySuggestion(row.option.value);
+    }
+};
+</script>
+
+{#snippet suggestionRow({ option }: { option: SelectOption<InputSuggestion> })}
+  <span class="input-suggest__suggestion">
+    <span class="input-suggest__suggestion-value">{option.label}</span>
+    {#if option.value.description}
+      <span class="input-suggest__suggestion-description">{option.value.description}</span>
+    {/if}
+  </span>
+{/snippet}
+
+<div
+  bind:this={rootEl}
+  class="input-suggest input-suggest--{size}"
+  class:input-suggest--open={isPanelOpen}
+  class:input-suggest--error={error}
+  class:input-suggest--disabled={disabled}
+  class:input-suggest--readonly={readonly}
+  class:input-suggest--inert={inert}
+  class:input-suggest--borderless={borderless}
+  onclick={handleRootClick}
+  onmousedown={handleRootMousedown}
+  onkeydown={() => undefined}
+  role="none">
+  {#if icon}
+    <span class="input-suggest__icon input-suggest__icon--leading" aria-hidden="true"><IconSlot icon={icon} /></span>
+  {/if}
+
+  <input
+    bind:this={inputEl}
+    class="input-suggest__input"
+    type="text"
+    role="combobox"
+    aria-haspopup="listbox"
+    aria-expanded={isPanelOpen}
+    aria-controls={listboxId}
+    aria-activedescendant={isPanelOpen && activeIndex >= 0 ? `${listboxId}-row-${activeIndex}` : undefined}
+    aria-autocomplete="list"
+    aria-label={ariaLabel}
+    aria-describedby={ariaDescribedby}
+    aria-required={ariaRequired ? 'true' : undefined}
+    aria-invalid={error ? 'true' : undefined}
+    id={id}
+    name={name}
+    autocomplete={autocomplete}
+    placeholder={placeholder}
+    disabled={disabled}
+    readonly={readonly}
+    inert={inert}
+    value={currentValue}
+    oninput={handleInput}
+    onfocus={handleFocus}
+    onblur={handleBlur}
+    onkeydown={handleKeydown} />
+
+  {#if showClear}
+    <InputClearButton size={size} on={{ clear }} />
+  {/if}
+
+  <SelectListbox
+    triggerEl={rootEl}
+    isOpen={isPanelOpen}
+    rows={rows}
+    highlight={activeIndex}
+    listboxId={listboxId}
+    optionSnippet={suggestionRow}
+    on={{ pickRow: handlePickRow, hoverRow: (index) => (highlight = index), dismiss: closeSuggestions }} />
+</div>
+
+<!--
+@component
+InputSuggest — a plain text field that offers suggestions. **NOT a select:** the value is the
+string the user typed, it changes on every keystroke, and it is never constrained to the
+suggestion list — typed text that matches nothing stays valid, and there is no "Use …" /
+"Create …" confirmation step. `on.input` fires per keystroke exactly like `Input`'s; `on.change`
+commits once per edit — when focus leaves the whole control, on Enter, or on pick / clear —
+so reaching into the popover never commits the half-typed query. `on.select` additionally fires
+when a suggestion was picked. `value` is controlled and is what the filter reads.
+
+A click opens the full list, typing filters it by case-insensitive substring, no match closes the
+popover and the field keeps working as an ordinary input. Focus alone opens nothing — tabbing in
+just places the caret, as with the selects. ArrowDown / ArrowUp move through the
+suggestions, Enter substitutes the highlighted one (and is left alone when nothing is
+highlighted), Escape closes without touching the text, Tab closes and keeps what was typed.
+Trigger chrome, popover and rows are shared with the selects, minus the chevron.
+
+### CSS Custom Properties
+| Property | Description | Default |
+|---|---|---|
+| `--sc-kit--input-suggest--description--color` | Suggestion description line color | `var(--sc-kit--color--text--muted)` |
+| `--sc-kit--input-suggest--description--font-size` | Suggestion description line font size | `var(--sc-kit--font-size--sm)` |
+
+**Trigger** (shared with the selects): `--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}`.
+
+**Suggestion rows:** `--sc-kit--select--option--{color, color--selected, background--active,
+padding-inline}`. `--sc-kit--select--option--height` is NOT overridable here — the component pins
+it to `auto` so a row with a `description` can grow to two lines.
+
+**Clear button** (rendered when `clearable` and the value is non-empty):
+`--sc-kit--input-clear-button--{size, icon-size, border-radius, color, color--hover,
+background--hover}`.
+-->
+
+<style>.input-suggest {
+  --_sel--height: var(--sc-kit--select--trigger--height, var(--_sel--size-height, var(--sc-kit--field--height--md)));
+  --_sel--padding-inline: var(--sc-kit--select--trigger--padding-inline, var(--_sel--size-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(--_sel--size-border-radius, var(--sc-kit--field--border-radius--md)));
+  --_sel--underline-color: var(--sc-kit--select--trigger--underline-color, transparent);
+  --_sel--font-size: var(--sc-kit--select--trigger--font-size, var(--_sel--size-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(--_sel--size-icon-size, var(--sc-kit--field--icon--size--md)));
+  --_--input-affordance--opacity: 0;
+  --_--input-affordance--scale: 0;
+}
+.input-suggest:where(:hover), .input-suggest:where(:focus-within) {
+  --_--input-affordance--opacity: 1;
+  --_--input-affordance--scale: 1;
+}
+.input-suggest {
+  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 calc(-1 * max(2px, 0.125em)) 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);
+}
+.input-suggest--sm {
+  --_sel--size-height: var(--sc-kit--field--height--sm);
+  --_sel--size-padding-inline: var(--sc-kit--field--padding-inline--sm);
+  --_sel--size-font-size: var(--sc-kit--font-size--sm);
+  --_sel--size-icon-size: var(--sc-kit--field--icon--size--sm);
+  --_sel--size-border-radius: var(--sc-kit--field--border-radius--sm);
+}
+.input-suggest--md {
+  --_sel--size-height: var(--sc-kit--field--height--md);
+  --_sel--size-padding-inline: var(--sc-kit--field--padding-inline--md);
+  --_sel--size-font-size: var(--sc-kit--font-size--md);
+  --_sel--size-icon-size: var(--sc-kit--field--icon--size--md);
+  --_sel--size-border-radius: var(--sc-kit--field--border-radius--md);
+}
+.input-suggest--lg {
+  --_sel--size-height: var(--sc-kit--field--height--lg);
+  --_sel--size-padding-inline: var(--sc-kit--field--padding-inline--lg);
+  --_sel--size-font-size: var(--sc-kit--font-size--lg);
+  --_sel--size-icon-size: var(--sc-kit--field--icon--size--lg);
+  --_sel--size-border-radius: var(--sc-kit--field--border-radius--md);
+}
+.input-suggest:where(:hover:not(:focus-within)) {
+  --sc-kit--select--trigger--border-color: var(--_sel--border-color-hover);
+}
+.input-suggest:where(:focus-within), .input-suggest--open {
+  --sc-kit--select--trigger--underline-color: var(--sc-kit--color--accent);
+}
+.input-suggest--open {
+  --sc-kit--select--trigger--border-color: unset;
+}
+.input-suggest--error {
+  --sc-kit--select--trigger--border-color: var(--_sel--border-color-error);
+  --sc-kit--select--trigger--underline-color: var(--sc-kit--color--danger);
+}
+.input-suggest--disabled, .input-suggest--readonly, .input-suggest--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;
+}
+.input-suggest--disabled {
+  --sc-kit--select--trigger--background: var(--_sel--background-disabled);
+  --sc-kit--select--trigger--color: var(--sc-kit--color--text--muted);
+}
+.input-suggest--borderless {
+  --sc-kit--select--trigger--background: transparent;
+  --sc-kit--select--trigger--border-color: transparent;
+  --sc-kit--select--trigger--underline-color: transparent;
+  box-shadow: none;
+}
+.input-suggest__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;
+}
+.input-suggest__input::placeholder {
+  color: var(--_sel--placeholder-color);
+}
+.input-suggest__input:not([readonly]) {
+  cursor: text;
+}
+.input-suggest__input--hidden {
+  opacity: 0;
+  width: 0;
+  flex: 0;
+}
+.input-suggest__input--no-search {
+  caret-color: transparent;
+  cursor: pointer;
+}
+.input-suggest__selection {
+  flex: 0 1 auto;
+  min-width: 0;
+  text-overflow: ellipsis;
+  max-width: 100%;
+  white-space: nowrap;
+  overflow: hidden;
+}
+.input-suggest__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;
+}
+.input-suggest__icon--leading {
+  margin-inline-end: var(--_sel--gap);
+}
+.input-suggest__icon--trailing {
+  margin-inline-start: var(--_sel--gap);
+}
+.input-suggest__spinner {
+  color: var(--_sel--icon-color);
+}
+.input-suggest--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);
+}
+.input-suggest__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;
+}
+.input-suggest {
+  --_isg--description-color: var(--sc-kit--input-suggest--description--color, var(--sc-kit--color--text--muted));
+  --_isg--description-font-size: var(--sc-kit--input-suggest--description--font-size, var(--sc-kit--font-size--sm));
+  --sc-kit--select--option--height: auto;
+  cursor: text;
+}
+.input-suggest--disabled, .input-suggest--readonly, .input-suggest--inert {
+  cursor: default;
+}
+.input-suggest__suggestion {
+  box-sizing: border-box;
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  justify-content: center;
+  gap: 0.125rem;
+  min-width: 0;
+  min-block-size: var(--_sel--height);
+  padding-block: var(--sc-kit--space--1);
+}
+.input-suggest__suggestion-value {
+  text-overflow: ellipsis;
+  max-width: 100%;
+  white-space: nowrap;
+  overflow: hidden;
+}
+.input-suggest__suggestion-description {
+  color: var(--_isg--description-color);
+  font-size: var(--_isg--description-font-size);
+  white-space: pre-line;
+  word-break: break-word;
+  display: -webkit-box;
+  overflow: hidden;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+}</style>

package/dist/ui/select/cmp.input-suggest.svelte.d.ts

@@ -0,0 +1,97 @@
+export type InputSuggestInstance = {
+    focus: () => void;
+    select: () => void;
+    clear: () => void;
+    open: () => void;
+    close: () => void;
+};
+import { type IconProp } from '../icon';
+import type { InputSuggestion } from './types';
+import type { HTMLInputAttributes } from 'svelte/elements';
+type Props = {
+    /** Controlled — feed `on.input` back into it; the suggestion filter reads this prop, not the DOM. */
+    value: string | null | undefined;
+    /** Advisory shortcuts offered in the popover. Never a constraint — any typed text stays valid. */
+    suggestions: InputSuggestion[];
+    /** @default 'md' */
+    size?: 'sm' | 'md' | 'lg';
+    placeholder?: string;
+    disabled?: boolean;
+    /** Non-editable but selectable; the popover never opens. */
+    readonly?: boolean;
+    /** Visual display mode — non-focusable, no hover/focus animations. */
+    inert?: boolean;
+    /** Visual error state — also sets `aria-invalid="true"`. */
+    error?: boolean;
+    /** Strip border + background + focus underline. */
+    borderless?: boolean;
+    /** Show the × clear button when the value is non-empty. */
+    clearable?: boolean;
+    /** Leading icon — string SVG source, `{ src, color?, size? }` object, or custom snippet. */
+    icon?: IconProp;
+    name?: string;
+    id?: string;
+    /** @default 'off' */
+    autocomplete?: HTMLInputAttributes['autocomplete'];
+    'aria-label'?: string;
+    'aria-describedby'?: string;
+    'aria-required'?: boolean;
+    on?: {
+        /** Fires on every keystroke, and on pick / clear — same signature and timing as `Input`. */
+        input?: (value: string) => void;
+        /** Fires when an edit is committed — focus leaving the control or Enter — and on pick / clear. */
+        change?: (value: string) => void;
+        /** Fires after `input` and `change` when the user picked a suggestion. */
+        select?: (suggestion: InputSuggestion) => void;
+        /** Fires when focus leaves the whole control — reaching into the popover does not count as leaving. */
+        blur?: () => void;
+        focus?: () => void;
+        keydown?: (event: KeyboardEvent) => void;
+    };
+};
+/**
+ * InputSuggest — a plain text field that offers suggestions. **NOT a select:** the value is the
+ * string the user typed, it changes on every keystroke, and it is never constrained to the
+ * suggestion list — typed text that matches nothing stays valid, and there is no "Use …" /
+ * "Create …" confirmation step. `on.input` fires per keystroke exactly like `Input`'s; `on.change`
+ * commits once per edit — when focus leaves the whole control, on Enter, or on pick / clear —
+ * so reaching into the popover never commits the half-typed query. `on.select` additionally fires
+ * when a suggestion was picked. `value` is controlled and is what the filter reads.
+ *
+ * A click opens the full list, typing filters it by case-insensitive substring, no match closes the
+ * popover and the field keeps working as an ordinary input. Focus alone opens nothing — tabbing in
+ * just places the caret, as with the selects. ArrowDown / ArrowUp move through the
+ * suggestions, Enter substitutes the highlighted one (and is left alone when nothing is
+ * highlighted), Escape closes without touching the text, Tab closes and keeps what was typed.
+ * Trigger chrome, popover and rows are shared with the selects, minus the chevron.
+ *
+ * ### CSS Custom Properties
+ * | Property | Description | Default |
+ * |---|---|---|
+ * | `--sc-kit--input-suggest--description--color` | Suggestion description line color | `var(--sc-kit--color--text--muted)` |
+ * | `--sc-kit--input-suggest--description--font-size` | Suggestion description line font size | `var(--sc-kit--font-size--sm)` |
+ *
+ * **Trigger** (shared with the selects): `--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}`.
+ *
+ * **Suggestion rows:** `--sc-kit--select--option--{color, color--selected, background--active,
+ * padding-inline}`. `--sc-kit--select--option--height` is NOT overridable here — the component pins
+ * it to `auto` so a row with a `description` can grow to two lines.
+ *
+ * **Clear button** (rendered when `clearable` and the value is non-empty):
+ * `--sc-kit--input-clear-button--{size, icon-size, border-radius, color, color--hover,
+ * background--hover}`.
+ */
+declare const Cmp: import("svelte").Component<Props, {
+    focus: () => void;
+    select: () => void;
+    open: () => void;
+    close: () => void;
+    clear: () => void;
+}, "">;
+type Cmp = ReturnType<typeof Cmp>;
+export default Cmp;

package/dist/ui/select/index.d.ts

@@ -1,3 +1,5 @@
+export { default as InputSuggest } from './cmp.input-suggest.svelte';
+export type { InputSuggestInstance } from './cmp.input-suggest.svelte';
 export { default as Singleselect } from './cmp.singleselect.svelte';
 export type { SingleselectInstance } from './cmp.singleselect.svelte';
 export { default as SingleselectAsync } from './cmp.singleselect-async.svelte';
@@ -9,4 +11,4 @@ export type { MultiselectAsyncInstance } from './cmp.multiselect-async.svelte';
 export { default as MultiselectTree } from './cmp.multiselect-tree.svelte';
 export type { MultiselectTreeInstance } from './cmp.multiselect-tree.svelte';
 export { isSelectGroup } from './types';
-export type { SelectCreateOptions, SelectItem, SelectOption, SelectOptionGroup } from './types';
+export type { InputSuggestion, SelectCreateOptions, SelectItem, SelectOption, SelectOptionGroup } from './types';

package/dist/ui/select/index.js

@@ -1,3 +1,4 @@
+export { default as InputSuggest } from './cmp.input-suggest.svelte';
 export { default as Singleselect } from './cmp.singleselect.svelte';
 export { default as SingleselectAsync } from './cmp.singleselect-async.svelte';
 export { default as Multiselect } from './cmp.multiselect.svelte';

package/dist/ui/select/types.d.ts

@@ -47,6 +47,16 @@ export type SelectRowCreate = {
     query: string;
 };
 export type SelectRow<T> = SelectRowOption<T> | SelectRowGroupHeader<T> | SelectRowCreate;
+/**
+ * One advisory row of `InputSuggest`. Suggestions never constrain the typed value — they only
+ * offer a shortcut to a known string.
+ */
+export type InputSuggestion = {
+    /** Text substituted into the field when the row is picked — also the row's label. */
+    value: string;
+    /** Secondary line rendered under the value in a muted tone. */
+    description?: string;
+};
 /** Creatable mode — passing this object to a select enables the create UI. */
 export type SelectCreateOptions = {
     /** Validates each query — only when it returns true does the create UI appear (and the query isn't a duplicate of an existing label). */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@streamscloud/kit",
-  "version": "0.31.0",
+  "version": "0.32.0",
   "author": "StreamsCloud",
   "repository": {
     "type": "git",