@streamscloud/kit 0.2.42 → 0.9.0

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

@@ -0,0 +1,96 @@
+export type SingleselectInstance = {
+    open: () => void;
+    close: () => void;
+    focus: () => void;
+};
+import { type SelectItem, type SingleselectCommonProps } from './types';
+declare function $$render<T>(): {
+    props: (SingleselectCommonProps<T> & {
+        /** Static option list (or grouped). Fuse filters in-memory on every keystroke — no debounce. */
+        options: SelectItem<T>[];
+    } & {
+        /** Discriminator — `true` enables the X clear button and allows `value` to be `null`. */
+        clearable: true;
+        /** Current selection by value. `null` when nothing is picked. */
+        value: T | null | undefined;
+        on?: {
+            /** Fires when the user picks an option or clears. */
+            change?: (value: T | null) => void;
+            /** Fires when the user activates "Create …". Return a Promise to keep the spinner up. */
+            create?: (query: string) => void | Promise<void>;
+        };
+    }) | (SingleselectCommonProps<T> & {
+        /** Static option list (or grouped). Fuse filters in-memory on every keystroke — no debounce. */
+        options: SelectItem<T>[];
+    } & {
+        /** Discriminator — `false` hides the X button; `value` must always be a non-null `T`. */
+        clearable: false;
+        /** Current selection by value — non-null. */
+        value: T;
+        on?: {
+            /** Fires when the user picks an option. */
+            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']>;
+}
+/**
+ * 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}`.
+ */
+declare const Cmp: $$IsomorphicComponent;
+type Cmp<T> = InstanceType<typeof Cmp<T>>;
+export default Cmp;

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

@@ -0,0 +1,11 @@
+export { default as Singleselect } from './cmp.singleselect.svelte';
+export type { SingleselectInstance } from './cmp.singleselect.svelte';
+export { default as SingleselectAsync } from './cmp.singleselect-async.svelte';
+export type { SingleselectAsyncInstance } from './cmp.singleselect-async.svelte';
+export { default as Multiselect } from './cmp.multiselect.svelte';
+export type { MultiselectInstance } from './cmp.multiselect.svelte';
+export { default as MultiselectAsync } from './cmp.multiselect-async.svelte';
+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 type { SelectItem, SelectOption, SelectOptionGroup } from './types';

package/dist/ui/select/index.js

@@ -0,0 +1,5 @@
+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';
+export { default as MultiselectAsync } from './cmp.multiselect-async.svelte';
+export { default as MultiselectTree } from './cmp.multiselect-tree.svelte';

package/dist/ui/select/multiselect-base.svelte

@@ -0,0 +1,565 @@
+<script lang="ts" module>export {};
+</script>
+
+<script lang="ts" generics="T">import { Spinner } from '../_internal/spinner';
+import { Button } from '../button';
+import { Icon, IconSlot } from '../icon';
+import { default as Singleselect } from './cmp.singleselect.svelte';
+import { MultiselectLocalization } from './multiselect-localization';
+import { default as SelectChip } from './select-chip.svelte';
+import { createSelectCore } from './select-core.svelte';
+import { defaultCompare } from './select-internals';
+import { default as SelectListbox } from './select-listbox.svelte';
+import IconCheckmark from '@fluentui/svg-icons/icons/checkmark_16_regular.svg?raw';
+import IconChevronDown from '@fluentui/svg-icons/icons/chevron_down_16_regular.svg?raw';
+import { dndzone } from 'svelte-dnd-action';
+const { loadOptions, debounceMs = 400, value, size = 'md', placeholder = '', disabled = false, readonly = false, inert = false, error = false, borderless = false, groupHeader = 'static', compare = defaultCompare, selectionMode = 'children-only', selectedDisplay = 'checkmark', canCreate, chipMode = 'inline', reorderable = false, maxVisible = Infinity, showFullItem = false, chipVariant, showChevron = true, hideSelected = false, icon, chevronIcon, optionSnippet, chipSnippet, selectionSnippet, parentSource, id, name, autocomplete = 'off', 'aria-label': ariaLabel, 'aria-describedby': ariaDescribedby, 'aria-required': ariaRequired, on } = $props();
+const localization = new MultiselectLocalization();
+const isPicked = (v) => value.some((existing) => compare(existing.value, v));
+const hasValue = $derived(value.length > 0);
+const isInteractive = $derived(!disabled && !readonly && !inert);
+const emitChange = (next) => on?.change?.(next);
+const togglePick = (option) => {
+    if (isPicked(option.value)) {
+        emitChange(value.filter((existing) => !compare(existing.value, option.value)));
+    }
+    else {
+        emitChange([...value, option]);
+    }
+};
+let inputEl = $state.raw(undefined);
+let rootEl = $state.raw(undefined);
+const core = createSelectCore({
+    picker: 'multi',
+    loadOptions: (q) => loadOptions(q),
+    getDebounceMs: () => debounceMs,
+    getCompare: () => compare,
+    getCanCreate: () => canCreate,
+    getGroupHeader: () => groupHeader,
+    getSelectionMode: () => selectionMode,
+    isPicked: (option) => isPicked(option.value),
+    getHideSelected: () => hideSelected,
+    getSelectedOptions: () => value,
+    getInteractive: () => isInteractive,
+    getInputEl: () => inputEl,
+    onPickOption: (option, parentGroup) => {
+        const wasPicked = isPicked(option.value);
+        let next = wasPicked ? value.filter((existing) => !compare(existing.value, option.value)) : [...value, option];
+        // selectionMode='children-include-parent': cascade parent membership with child changes.
+        if (selectionMode === 'children-include-parent' && parentGroup?.value !== undefined && parentGroup.options.length > 0) {
+            const groupValue = parentGroup.value;
+            const parentInNext = next.some((o) => compare(o.value, groupValue));
+            const anyChildInNext = parentGroup.options.some((o) => next.some((n) => compare(n.value, o.value)));
+            if (anyChildInNext && !parentInNext) {
+                next = [...next, { label: parentGroup.label, value: groupValue }];
+            }
+            else if (!anyChildInNext && parentInNext) {
+                next = next.filter((o) => !compare(o.value, groupValue));
+            }
+        }
+        emitChange(next);
+    },
+    onPickGroupValue: (group) => togglePick({ label: group.label, value: group.value }),
+    onPickGroupAll: (group) => {
+        const allChildrenPicked = group.options.every((o) => isPicked(o.value));
+        let next;
+        if (allChildrenPicked) {
+            next = value.filter((existing) => !group.options.some((o) => compare(o.value, existing.value)));
+            // children-include-parent: also drop the parent value when clearing all children.
+            if (selectionMode === 'children-include-parent' && group.value !== undefined) {
+                const parentValue = group.value;
+                next = next.filter((o) => !compare(o.value, parentValue));
+            }
+        }
+        else {
+            const additions = group.options.filter((o) => !isPicked(o.value));
+            next = [...value, ...additions];
+            // children-include-parent: also add the parent value when adding any child.
+            if (selectionMode === 'children-include-parent' && group.value !== undefined) {
+                const groupValue = group.value;
+                if (!next.some((o) => compare(o.value, groupValue))) {
+                    next = [...next, { label: group.label, value: groupValue }];
+                }
+            }
+        }
+        emitChange(next);
+    },
+    onClear: () => {
+        if (hasValue) {
+            emitChange(value.slice(0, -1));
+        }
+    },
+    onCreate: (payload) => on?.create?.(payload)
+});
+const listboxId = `multiselect-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 removeChipAt = (idx) => emitChange(value.filter((_, i) => i !== idx));
+const isExternalChips = $derived(chipMode === 'external');
+const inlineVisible = $derived(isExternalChips || selectionSnippet ? [] : value.slice(0, maxVisible));
+const inlineOverflow = $derived(isExternalChips || selectionSnippet ? 0 : Math.max(0, value.length - maxVisible));
+// Create-with-parent section: shown when canCreate is gated true by core AND the proxy
+// passed a non-empty `parentSource`. The source is the FULL unfiltered group list so the
+// parent picker is stable regardless of which groups currently survive the listbox filter.
+const parentSourceList = $derived(parentSource ?? []);
+const showCreateSection = $derived(core.canShowCreate && parentSourceList.length > 0);
+let selectedParent = $state.raw(null);
+// Reset parent picker whenever the popover closes (matches Tree behavior).
+$effect(() => {
+    if (!core.isOpen) {
+        selectedParent = null;
+    }
+});
+const confirmCreate = () => {
+    // children-include-parent cascade for create: when the new item is filed under a parent
+    // group, that parent's value should land in the selection too (matching the cascade that
+    // already runs on `onPickOption`). Emitted BEFORE the consumer's `onCreate` so it sees
+    // the parent already in `value` when it appends the new child.
+    if (selectionMode === 'children-include-parent' && selectedParent) {
+        const parentValue = selectedParent.value;
+        const alreadyPicked = value.some((existing) => compare(existing.value, parentValue));
+        if (!alreadyPicked) {
+            emitChange([...value, selectedParent]);
+        }
+    }
+    core.confirmCreate(selectedParent?.value);
+};
+let externalChips = $derived(value.map((o, i) => ({ id: typeof o.value === 'string' ? o.value : JSON.stringify({ i, label: o.label }), option: o })));
+const handleDndConsider = (e) => {
+    externalChips = e.detail.items;
+};
+const handleDndFinalize = (e) => {
+    externalChips = e.detail.items;
+    emitChange(externalChips.map((c) => c.option));
+};
+</script>
+
+<div class="multiselect">
+  {#if isExternalChips && !selectionSnippet && value.length > 0}
+    {#if reorderable && isInteractive}
+      <div
+        class="multiselect__tags"
+        use:dndzone={{ items: externalChips, type: `multiselect-${listboxId}`, dragDisabled: !isInteractive, dropTargetStyle: {} }}
+        onconsider={handleDndConsider}
+        onfinalize={handleDndFinalize}>
+        {#each externalChips as chip (chip.id)}
+          <div data-id={chip.id}>
+            <SelectChip
+              option={chip.option}
+              tone={chipVariant}
+              showFullItem={showFullItem}
+              draggable
+              locked={!isInteractive}
+              removeLabel={localization.removeChip}
+              dragLabel={localization.dragHandle}
+              chipSnippet={chipSnippet}
+              on={{ remove: () => removeChipAt(externalChips.findIndex((c) => c.id === chip.id)) }} />
+          </div>
+        {/each}
+      </div>
+    {:else}
+      <div class="multiselect__tags">
+        {#each value as opt, i (i)}
+          <SelectChip
+            option={opt}
+            tone={chipVariant}
+            showFullItem={showFullItem}
+            locked={!isInteractive}
+            removeLabel={localization.removeChip}
+            chipSnippet={chipSnippet}
+            on={{ remove: () => removeChipAt(i) }} />
+        {/each}
+      </div>
+    {/if}
+  {/if}
+
+  <div
+    bind:this={rootEl}
+    class="multiselect-trigger multiselect-trigger--{size} multiselect-trigger--multi"
+    class:multiselect-trigger--open={core.isOpen}
+    class:multiselect-trigger--error={error}
+    class:multiselect-trigger--disabled={disabled}
+    class:multiselect-trigger--readonly={readonly}
+    class:multiselect-trigger--inert={inert}
+    class:multiselect-trigger--borderless={borderless}
+    onclick={core.handleClick}
+    onkeydown={() => undefined}
+    role="presentation">
+    {#if icon}
+      <span class="multiselect-trigger__icon multiselect-trigger__icon--leading"><IconSlot icon={icon} /></span>
+    {/if}
+
+    {#if selectionSnippet && value.length > 0}
+      <span class="multiselect-trigger__selection">{@render selectionSnippet({ options: value })}</span>
+    {:else if !isExternalChips}
+      {#each inlineVisible as opt, i (i)}
+        <SelectChip
+          option={opt}
+          variant="inline"
+          tone={chipVariant}
+          showFullItem={showFullItem}
+          locked={!isInteractive}
+          removeLabel={localization.removeChip}
+          chipSnippet={chipSnippet}
+          on={{ remove: () => removeChipAt(i) }} />
+      {/each}
+      {#if inlineOverflow > 0}
+        <span class="multiselect-trigger__more">{localization.moreLabel(inlineOverflow)}</span>
+      {/if}
+    {/if}
+
+    <input
+      bind:this={inputEl}
+      class="multiselect-trigger__input"
+      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={!hasValue && !core.isFiltering ? placeholder : ''}
+      disabled={disabled}
+      readonly={readonly || !core.isFiltering}
+      inert={inert}
+      value={core.isFiltering ? core.query : ''}
+      onfocus={core.handleFocus}
+      oninput={core.handleInput}
+      onkeydown={core.handleKeydown} />
+
+    {#if core.loading}
+      <span class="multiselect-trigger__icon multiselect-trigger__icon--trailing multiselect-trigger__spinner" aria-label={localization.loadingLabel}>
+        <Spinner />
+      </span>
+    {:else if showChevron}
+      <span class="multiselect-trigger__icon multiselect-trigger__icon--trailing multiselect-trigger__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}
+      selectedDisplay={selectedDisplay}
+      optionSnippet={optionSnippet}
+      headerSnippet={showCreateSection ? createWithParentSection : undefined}
+      hideCreateRows={showCreateSection}
+      suppressEmpty={hideSelected}
+      on={{ pickRow: core.pickRow, hoverRow: core.setHighlight, dismiss: core.closePopover }} />
+  </div>
+</div>
+
+{#snippet createWithParentSection()}
+  <div class="multiselect__create-new">
+    <div class="multiselect__create-new-title">{localization.createNewItem}</div>
+    <div class="multiselect__create-new-subtitle">
+      <div class="multiselect__create-new-description" class:multiselect__create-new-description--in={selectedParent}>
+        {#if selectedParent}
+          {localization.createIn}<span>"{selectedParent.label}"</span>
+        {:else}
+          {localization.createAsParent}<span>"{core.query}"</span>
+        {/if}
+      </div>
+      <div class="multiselect__create-new-action">
+        <Button type="button" size="sm" variant="secondary" aria-label={localization.confirmCreate} on={{ click: confirmCreate }}>
+          <Icon src={IconCheckmark} />
+        </Button>
+      </div>
+    </div>
+    <div class="multiselect__create-new-parent">
+      <Singleselect
+        clearable
+        options={parentSourceList}
+        value={selectedParent?.value ?? null}
+        placeholder={localization.orSelectParentItem}
+        on={{ change: (v) => (selectedParent = v === null ? null : (parentSourceList.find((g) => compare(g.value, v)) ?? null)) }} />
+    </div>
+  </div>
+{/snippet}
+
+<!--
+@component
+INTERNAL — full-featured multi-value picker engine. NOT exported from the module barrel.
+Public Multi cmps proxy here:
+- `Multiselect` (sync flat) — Fuse shim, no groups.
+- `MultiselectAsync` (async flat) — `loadOptions` debounced.
+- `MultiselectTree` (sync grouped) — groups + cascade + create-with-parent.
+
+Owns: input + trigger markup, chip rendering (`inline`/`external`/`selectionSnippet`),
+DnD reorder, listbox, create-with-parent section (when `canCreate` + groups in items),
+tri-state group headers, race-prevention against in-flight handlers, 600ms spinner gate,
+debounced/Fuse-driven `loadOptions` plumbing through `select-core`.
+
+### 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`.
+
+**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 while loading): `--sc-kit--spinner--{size, duration}`.
+-->
+
+<style>.multiselect {
+  display: block;
+}
+.multiselect__tags {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--sc-kit--space--1);
+  margin-block-end: 0.375rem;
+}
+.multiselect__create-new {
+  --_create--background: var(--sc-kit--multiselect--create--background, var(--sc-kit--color--bg--field-alt));
+  --_create--subtitle--background: var(--sc-kit--multiselect--create--subtitle--background, var(--sc-kit--color--bg--panel));
+  --_create--title--color: var(--sc-kit--multiselect--create--title--color, var(--sc-kit--color--text--muted));
+  --_create--description--color: var(--sc-kit--multiselect--create--description--color, var(--sc-kit--color--accent));
+  --_create--description--color--in: var(--sc-kit--multiselect--create--description--color--in, var(--sc-kit--color--success));
+  --_create--description--accent--color: var(--sc-kit--multiselect--create--description--accent--color, var(--sc-kit--color--text--primary));
+  display: flex;
+  flex-direction: column;
+  gap: var(--sc-kit--space--2);
+  padding: var(--sc-kit--space--2) var(--sc-kit--space--3);
+  background: var(--_create--background);
+  border-radius: var(--sc-kit--radius--sm);
+}
+.multiselect__create-new-title {
+  font-size: var(--sc-kit--font-size--xs);
+  color: var(--_create--title--color);
+}
+.multiselect__create-new-subtitle {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--sc-kit--space--2);
+  padding: var(--sc-kit--space--1) var(--sc-kit--space--2);
+  background: var(--_create--subtitle--background);
+  border-radius: var(--sc-kit--radius--sm);
+}
+.multiselect__create-new-description {
+  flex: 1;
+  min-width: 0;
+  font-size: var(--sc-kit--font-size--sm);
+  font-weight: var(--sc-kit--font-weight--medium);
+  color: var(--_create--description--color);
+}
+.multiselect__create-new-description--in {
+  color: var(--_create--description--color--in);
+}
+.multiselect__create-new-description span {
+  color: var(--_create--description--accent--color);
+  font-weight: var(--sc-kit--font-weight--regular);
+}
+.multiselect__create-new-action {
+  flex-shrink: 0;
+}
+.multiselect__create-new-parent {
+  width: 100%;
+}
+
+.multiselect-trigger {
+  --_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;
+}
+.multiselect-trigger:where(:hover), .multiselect-trigger:where(:focus-within) {
+  --_--input-affordance--opacity: 1;
+  --_--input-affordance--scale: 1;
+}
+.multiselect-trigger {
+  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);
+}
+.multiselect-trigger--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);
+}
+.multiselect-trigger--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);
+}
+.multiselect-trigger--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);
+}
+.multiselect-trigger:where(:hover) {
+  --sc-kit--select--trigger--border-color: var(--_sel--border-color-hover);
+}
+.multiselect-trigger:where(:focus-within), .multiselect-trigger--open {
+  --sc-kit--select--trigger--underline-color: var(--sc-kit--color--accent);
+}
+.multiselect-trigger--error {
+  --sc-kit--select--trigger--border-color: var(--_sel--border-color-error);
+  --sc-kit--select--trigger--underline-color: var(--sc-kit--color--danger);
+}
+.multiselect-trigger--disabled, .multiselect-trigger--readonly, .multiselect-trigger--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;
+}
+.multiselect-trigger--disabled {
+  --sc-kit--select--trigger--background: var(--_sel--background-disabled);
+  --sc-kit--select--trigger--color: var(--sc-kit--color--text--muted);
+}
+.multiselect-trigger--borderless {
+  --sc-kit--select--trigger--background: transparent;
+  --sc-kit--select--trigger--border-color: transparent;
+  --sc-kit--select--trigger--underline-color: transparent;
+  box-shadow: none;
+}
+.multiselect-trigger__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;
+}
+.multiselect-trigger__input::placeholder {
+  color: var(--_sel--placeholder-color);
+}
+.multiselect-trigger__input:not([readonly]) {
+  cursor: text;
+}
+.multiselect-trigger__input--hidden {
+  opacity: 0;
+  width: 0;
+  flex: 0;
+}
+.multiselect-trigger__selection {
+  flex: 1;
+  min-width: 0;
+  text-overflow: ellipsis;
+  max-width: 100%;
+  white-space: nowrap;
+  overflow: hidden;
+}
+.multiselect-trigger__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;
+}
+.multiselect-trigger__icon--leading {
+  margin-inline-end: var(--_sel--gap);
+}
+.multiselect-trigger__icon--trailing {
+  margin-inline-start: var(--_sel--gap);
+}
+.multiselect-trigger__chevron {
+  transition: transform var(--sc-kit--duration--fast) var(--sc-kit--ease--default);
+}
+.multiselect-trigger--open .multiselect-trigger__chevron {
+  transform: rotate(180deg);
+}
+.multiselect-trigger__spinner {
+  color: var(--_sel--icon-color);
+}
+.multiselect-trigger--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);
+}
+.multiselect-trigger--multi .multiselect-trigger__chevron {
+  position: absolute;
+  inset-block-start: calc(var(--_sel--height) / 2);
+  inset-inline-end: var(--_sel--padding-inline);
+  transform: translateY(-50%);
+  margin: 0;
+}
+.multiselect-trigger__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;
+}
+.multiselect-trigger--multi .multiselect-trigger__spinner {
+  position: absolute;
+  inset-block-start: 50%;
+  inset-inline-end: var(--sc-kit--select--trigger--padding-inline, var(--sc-kit--field--padding-inline--md));
+  transform: translateY(-50%);
+  margin: 0;
+}</style>