@chenzy-design/svelte 0.1.0 → 0.2.1

package/src/autocomplete/AutoComplete.svelte

@@ -1,706 +0,0 @@
-<!--
-  AutoComplete — see specs/components/input/AutoComplete.spec.md
-  输入联想 + 本地过滤 + 键盘选择。Token-driven, a11y-correct (combobox + listbox)。
-  remote：提供 onSearch 时输入防抖回调（searchDebounce ms），由外部更新 data；loading 显示 spinner。
-  remote 模式本地不再过滤（外部已按 query 准备 data）。maxCount：建议项最多渲染条数（0=不限）。
-  insetLabel：输入框内嵌前缀标签（string | Snippet）。openOnFocus：聚焦即展开建议列表。
-  分组：data 支持 { label, options }[]，逻辑/键盘/maxCount 基于扁平序列（红线 #2 派生纯函数）。
--->
-<script lang="ts">
-  import type { Snippet } from 'svelte';
-  import { useId, useDismiss } from '@chenzy-design/core';
-  import { useLocale } from '../locale-provider/index.js';
-
-  type ItemValue = string | number;
-  type Item = ItemValue | { value: ItemValue; label?: string; disabled?: boolean };
-  /** 分组项：含 options 即为分组 */
-  type ItemGroup = { label: string; options: Item[] };
-  type ItemOrGroup = Item | ItemGroup;
-  type NormalizedItem = { value: ItemValue; label: string; disabled: boolean };
-  type Size = 'small' | 'default' | 'large';
-  type Status = 'default' | 'warning' | 'error';
-  type Position = 'bottomLeft' | 'bottomRight' | 'topLeft' | 'topRight';
-
-  function isGroup(o: ItemOrGroup): o is ItemGroup {
-    return typeof o === 'object' && o !== null && Array.isArray((o as ItemGroup).options);
-  }
-
-  interface Props {
-    value?: string;
-    defaultValue?: string;
-    /** 候选数据；可含分组项 { label, options: [] } */
-    data?: ItemOrGroup[];
-    open?: boolean;
-    defaultOpen?: boolean;
-    placeholder?: string;
-    /** combobox 输入框可访问名；缺省回退到 placeholder 或 locale 默认 */
-    ariaLabel?: string;
-    /** 关联外部 label 的 id（优先于 ariaLabel） */
-    ariaLabelledby?: string;
-    /** 输入框内嵌前缀标签 */
-    insetLabel?: string | Snippet;
-    /** 聚焦即展开建议列表（默认 false，仅输入时展开） */
-    openOnFocus?: boolean;
-    size?: Size;
-    status?: Status;
-    disabled?: boolean;
-    filter?: boolean;
-    defaultActiveFirstOption?: boolean;
-    clearable?: boolean;
-    /** 远程搜索：输入防抖后回调（由外部更新 data，本地不再过滤） */
-    onSearch?: (query: string) => void;
-    /** 远程加载中（显示 spinner） */
-    loading?: boolean;
-    /** onSearch 防抖毫秒（默认 300） */
-    searchDebounce?: number;
-    /** 建议项最多渲染条数（0=不限制） */
-    maxCount?: number;
-    onChange?: (v: string) => void;
-    onSelect?: (value: ItemValue) => void;
-    onOpenChange?: (open: boolean) => void;
-    /** 浮层宽度与触发器同宽（默认 true） */
-    dropdownMatchSelectWidth?: boolean;
-    /** 浮层挂载容器 */
-    getPopupContainer?: () => HTMLElement;
-    /** 浮层 className */
-    dropdownClassName?: string;
-    /** 浮层样式 */
-    dropdownStyle?: string | Record<string, string>;
-    /** 完全自定义触发器 */
-    triggerRender?: Snippet<[{ value: string; placeholder: string; disabled: boolean }]>;
-    /** 自定义候选项渲染 */
-    renderItem?: Snippet<[{ item: NormalizedItem; isSelected: boolean }]>;
-    /** 自定义已选项显示 */
-    renderSelectedItem?: Snippet<[{ item: NormalizedItem }]>;
-    /** 无候选时展示内容 */
-    emptyContent?: Snippet | string;
-    /** 输入框前缀 */
-    prefix?: Snippet | string;
-    /** 输入框后缀 */
-    suffix?: Snippet | string;
-    /** 显示清除按钮（clearable 的别名，showClear 优先） */
-    showClear?: boolean;
-    /** 自定义清除图标 */
-    clearIcon?: Snippet;
-    onBlur?: (e: FocusEvent) => void;
-    onFocus?: (e: FocusEvent) => void;
-    onClear?: () => void;
-    /** 显式远程模式（关闭本地过滤），不依赖 onSearch 是否存在 */
-    remote?: boolean;
-    /** 挂载自动聚焦 */
-    autoFocus?: boolean;
-    /** 浮层位置 */
-    position?: Position;
-  }
-
-  let {
-    value = $bindable(),
-    defaultValue = '',
-    data = [],
-    open = $bindable(),
-    defaultOpen = false,
-    placeholder = '',
-    ariaLabel,
-    ariaLabelledby,
-    insetLabel,
-    openOnFocus = false,
-    size = 'default',
-    status = 'default',
-    disabled = false,
-    filter = true,
-    defaultActiveFirstOption = true,
-    clearable = false,
-    onSearch,
-    loading = false,
-    searchDebounce = 300,
-    maxCount = 0,
-    onChange,
-    onSelect,
-    onOpenChange,
-    dropdownMatchSelectWidth = true,
-    getPopupContainer,
-    dropdownClassName,
-    dropdownStyle,
-    triggerRender,
-    renderItem,
-    renderSelectedItem,
-    emptyContent,
-    prefix,
-    suffix,
-    showClear,
-    clearIcon,
-    onBlur,
-    onFocus,
-    onClear,
-    remote = false,
-    autoFocus = false,
-    position = 'bottomLeft',
-  }: Props = $props();
-
-  const loc = useLocale();
-
-  const listId = useId('cd-autocomplete-list');
-
-  // --- 受控值 (红线 #1): 不无条件回写 value，仅 onChange ---
-  const isValueControlled = $derived(value !== undefined);
-  let innerValue = $state(getInitialValue());
-  const currentValue = $derived(isValueControlled ? (value ?? '') : innerValue);
-
-  function getInitialValue(): string {
-    return defaultValue;
-  }
-
-  function setValue(next: string) {
-    if (!isValueControlled) innerValue = next;
-    onChange?.(next);
-  }
-
-  // --- 受控 open (红线 #1): 不无条件回写 open，仅 onOpenChange ---
-  const isOpenControlled = $derived(open !== undefined);
-  let innerOpen = $state(getInitialOpen());
-  const isOpen = $derived(isOpenControlled ? !!open : innerOpen);
-
-  function getInitialOpen(): boolean {
-    return defaultOpen;
-  }
-
-  function setOpen(next: boolean) {
-    if (next === isOpen) return;
-    if (!isOpenControlled) innerOpen = next;
-    onOpenChange?.(next);
-    if (!next) activeIndex = -1;
-  }
-
-  function normalize(it: Item): NormalizedItem {
-    if (typeof it === 'string' || typeof it === 'number') {
-      return { value: it, label: String(it), disabled: false };
-    }
-    return { value: it.value, label: it.label ?? String(it.value), disabled: it.disabled ?? false };
-  }
-
-  // remote 模式：外部已按 query 更新 data，本地不再过滤。
-  // remote prop 显式开启时也禁用本地过滤，无需 onSearch。
-  const isRemote = $derived(remote || onSearch !== undefined);
-
-  // 是否含分组：决定渲染走分组结构还是扁平。
-  const hasGroups = $derived(data.some(isGroup));
-
-  // 过滤纯函数：复用于扁平序列与分组视图，保证两者一致。
-  function matchOption(o: NormalizedItem): boolean {
-    if (isRemote || !filter || currentValue === '') return true;
-    const q = currentValue.toLowerCase();
-    return (
-      o.label.toLowerCase().includes(q) || String(o.value).toLowerCase().includes(q)
-    );
-  }
-
-  // 候选条目：归一化 + 记录所属组（groupKey：组序号，无组为 -1），用于分组视图重组。
-  type FlatItem = NormalizedItem & { groupKey: number };
-
-  // 扁平候选序列（拍平分组并过滤/截断）——逻辑/键盘/maxCount/高亮统一基于它（红线 #2）。
-  const options = $derived.by<FlatItem[]>(() => {
-    const all: FlatItem[] = [];
-    data.forEach((o, gi) => {
-      if (isGroup(o)) {
-        for (const child of o.options) all.push({ ...normalize(child), groupKey: gi });
-      } else {
-        all.push({ ...normalize(o), groupKey: -1 });
-      }
-    });
-    const matched = all.filter(matchOption);
-    return maxCount > 0 ? matched.slice(0, maxCount) : matched;
-  });
-
-  // 分组渲染视图：按原始组顺序聚合过滤后的候选 + 全局扁平索引（与 activeIndex 对齐）。
-  // 仅 hasGroups 时使用；纯派生，无副作用（红线 #2）。
-  const groupedView = $derived.by<{ key: number; label: string | null; items: { opt: FlatItem; flatIndex: number }[] }[]>(() => {
-    if (!hasGroups) return [];
-    const out: { key: number; label: string | null; items: { opt: FlatItem; flatIndex: number }[] }[] = [];
-    options.forEach((opt, flatIndex) => {
-      const label = opt.groupKey >= 0 ? (data[opt.groupKey] as ItemGroup).label : null;
-      const last = out[out.length - 1];
-      // 连续同组合并为同一段，保留原始相邻关系。
-      if (last && last.key === opt.groupKey) {
-        last.items.push({ opt, flatIndex });
-      } else {
-        out.push({ key: opt.groupKey, label, items: [{ opt, flatIndex }] });
-      }
-    });
-    return out;
-  });
-
-  // --- roving 高亮 (红线 #2): activeIndex 本地 $state，不依赖挂载 registry ---
-  let activeIndex = $state(-1);
-
-  const activeOptionId = $derived(
-    activeIndex >= 0 && activeIndex < options.length
-      ? `${listId}-opt-${activeIndex}`
-      : undefined,
-  );
-
-  // remote 模式下即便暂无候选也展开（显示 spinner / 空文案）；本地模式无候选则不展开。
-  const showDropdown = $derived(isOpen && (options.length > 0 || isRemote));
-
-  // showClear 优先，clearable 兜底；两者任一为 true 时显示清除按钮。
-  const effectiveClearable = $derived(showClear ?? clearable);
-  const showClearBtn = $derived(effectiveClearable && !disabled && currentValue.length > 0);
-
-  // 已选项：options 里找到与 currentValue 匹配的 label 对应项。
-  const selectedItem = $derived(
-    options.find((o) => o.label === currentValue) ?? null,
-  );
-
-  function openWithOptions() {
-    if (!isRemote && options.length === 0) {
-      setOpen(false);
-      return;
-    }
-    setOpen(true);
-    if (defaultActiveFirstOption) activeIndex = firstEnabledIndex();
-  }
-
-  function firstEnabledIndex(): number {
-    return options.findIndex((o) => !o.disabled);
-  }
-
-  // --- remote 搜索防抖（命令式定时器 + cleanup，红线 #3）---
-  let searchTimer: ReturnType<typeof setTimeout> | undefined;
-  function scheduleSearch(q: string) {
-    if (searchTimer !== undefined) clearTimeout(searchTimer);
-    searchTimer = setTimeout(() => {
-      searchTimer = undefined;
-      onSearch?.(q);
-    }, Math.max(0, searchDebounce));
-  }
-  // 卸载兜底清理。
-  $effect(() => () => {
-    if (searchTimer !== undefined) clearTimeout(searchTimer);
-  });
-
-  function handleInput(e: Event & { currentTarget: HTMLInputElement }) {
-    const next = e.currentTarget.value;
-    setValue(next);
-    // 输入即打开浮层。openWithOptions 读取 derived options，
-    // 它在本次更新已随 currentValue 变化；调用在事件处理器内，非 render 期。
-    openWithOptions();
-    // remote：防抖回调外部更新 data（受控值红线 #1：仅 onSearch，不回写）。
-    if (onSearch) scheduleSearch(next);
-  }
-
-  function handleFocus(e: FocusEvent) {
-    if (!disabled && openOnFocus) openWithOptions();
-    onFocus?.(e);
-  }
-
-  function handleBlur(e: FocusEvent) {
-    onBlur?.(e);
-  }
-
-  function commit(opt: NormalizedItem) {
-    if (opt.disabled || disabled) return;
-    setValue(opt.label);
-    onSelect?.(opt.value);
-    setOpen(false);
-  }
-
-  function clearAll() {
-    if (disabled) return;
-    setValue('');
-    setOpen(false);
-    onClear?.();
-  }
-
-  function moveActive(delta: number) {
-    const len = options.length;
-    if (len === 0) return;
-    let next = activeIndex;
-    for (let i = 0; i < len; i += 1) {
-      next = (next + delta + len) % len;
-      if (!options[next]?.disabled) {
-        activeIndex = next;
-        return;
-      }
-    }
-  }
-
-  function handleKeydown(e: KeyboardEvent) {
-    if (disabled) return;
-    switch (e.key) {
-      case 'ArrowDown':
-        e.preventDefault();
-        if (!isOpen) openWithOptions();
-        else moveActive(1);
-        break;
-      case 'ArrowUp':
-        e.preventDefault();
-        if (!isOpen) openWithOptions();
-        else moveActive(-1);
-        break;
-      case 'Enter':
-        if (isOpen && activeIndex >= 0) {
-          e.preventDefault();
-          const opt = options[activeIndex];
-          if (opt) commit(opt);
-        }
-        break;
-      case 'Escape':
-        if (isOpen) {
-          e.preventDefault();
-          setOpen(false);
-        }
-        break;
-      default:
-        break;
-    }
-  }
-
-  // autoFocus：命令式聚焦一次（红线 #3，SSR 安全）。
-  let inputEl = $state<HTMLInputElement | null>(null);
-  $effect(() => {
-    if (autoFocus && inputEl && !disabled) {
-      inputEl.focus();
-    }
-  });
-
-  // --- useDismiss (红线 #3): 绑定放进 $effect，open 时绑、cleanup 解绑 ---
-  let rootEl = $state<HTMLDivElement | null>(null);
-
-  $effect(() => {
-    if (!isOpen || !rootEl) return;
-    const cleanup = useDismiss(rootEl, {
-      onDismiss: () => setOpen(false),
-      escape: true,
-      outsideClick: true,
-    });
-    return cleanup;
-  });
-
-  // 浮层样式：dropdownMatchSelectWidth 时宽度与触发器同宽（inline-size: 100%）。
-  const dropdownStyleStr = $derived.by(() => {
-    const base = dropdownMatchSelectWidth ? 'inline-size: 100%' : '';
-    if (!dropdownStyle) return base;
-    if (typeof dropdownStyle === 'string') return base ? `${base}; ${dropdownStyle}` : dropdownStyle;
-    const obj = Object.entries(dropdownStyle).map(([k, v]) => `${k}: ${v}`).join('; ');
-    return base ? `${base}; ${obj}` : obj;
-  });
-
-  // 浮层位置映射到 CSS 定位。
-  const dropdownPositionStyle = $derived.by(() => {
-    switch (position) {
-      case 'bottomRight':
-        return 'inset-block-start: calc(100% + var(--cd-spacing-1)); inset-inline-end: 0; inset-inline-start: auto';
-      case 'topLeft':
-        return 'inset-block-end: calc(100% + var(--cd-spacing-1)); inset-block-start: auto; inset-inline-start: 0';
-      case 'topRight':
-        return 'inset-block-end: calc(100% + var(--cd-spacing-1)); inset-block-start: auto; inset-inline-end: 0; inset-inline-start: auto';
-      default: // bottomLeft
-        return '';
-    }
-  });
-
-  const cls = $derived(
-    [
-      'cd-autocomplete',
-      `cd-autocomplete--${size}`,
-      `cd-autocomplete--${status}`,
-      disabled && 'cd-autocomplete--disabled',
-      isOpen && 'cd-autocomplete--open',
-    ]
-      .filter(Boolean)
-      .join(' '),
-  );
-
-  // combobox 输入框可访问名：ariaLabelledby > ariaLabel > placeholder(非空) > locale 默认
-  const inputAriaLabel = $derived(
-    ariaLabelledby ? undefined : (ariaLabel || placeholder || loc().t('AutoComplete.ariaLabel')),
-  );
-</script>
-
-{#snippet optionRow(opt: NormalizedItem, i: number)}
-  <!-- svelte-ignore a11y_click_events_have_key_events -->
-  <div
-    class="cd-autocomplete__option"
-    class:cd-autocomplete__option--active={i === activeIndex}
-    id={`${listId}-opt-${i}`}
-    role="option"
-    aria-selected={i === activeIndex}
-    aria-disabled={opt.disabled || undefined}
-    tabindex="-1"
-    onpointerenter={() => {
-      if (!opt.disabled) activeIndex = i;
-    }}
-    onclick={() => commit(opt)}
-  >
-    {#if renderItem}
-      {@render renderItem({ item: opt, isSelected: opt.label === currentValue })}
-    {:else}
-      {opt.label}
-    {/if}
-  </div>
-{/snippet}
-
-<div class={cls} bind:this={rootEl}>
-  {#if triggerRender}
-    {@render triggerRender({ value: currentValue, placeholder, disabled })}
-  {:else}
-    <div class="cd-autocomplete__control">
-      {#if prefix}
-        <span class="cd-autocomplete__prefix">
-          {#if typeof prefix === 'string'}{prefix}{:else}{@render prefix()}{/if}
-        </span>
-      {/if}
-      {#if insetLabel}
-        <span class="cd-autocomplete__inset-label">
-          {#if typeof insetLabel === 'string'}{insetLabel}{:else}{@render insetLabel()}{/if}
-        </span>
-      {/if}
-      <input
-        class="cd-autocomplete__input"
-        bind:this={inputEl}
-        type="text"
-        role="combobox"
-        value={currentValue}
-        {placeholder}
-        {disabled}
-        aria-label={inputAriaLabel}
-        aria-labelledby={ariaLabelledby}
-        aria-expanded={showDropdown}
-        aria-controls={listId}
-        aria-autocomplete="list"
-        aria-activedescendant={activeOptionId}
-        aria-invalid={status === 'error' || undefined}
-        oninput={handleInput}
-        onkeydown={handleKeydown}
-        onfocus={handleFocus}
-        onblur={handleBlur}
-      />
-
-      {#if renderSelectedItem && selectedItem}
-        <span class="cd-autocomplete__selected">
-          {@render renderSelectedItem({ item: selectedItem })}
-        </span>
-      {/if}
-
-      {#if showClearBtn}
-        <button type="button" class="cd-autocomplete__clear" aria-label={loc().t('AutoComplete.clear')} onclick={clearAll}>
-          {#if clearIcon}
-            {@render clearIcon()}
-          {:else}
-            <svg viewBox="0 0 16 16" width="14" height="14" aria-hidden="true" focusable="false">
-              <path
-                fill="currentColor"
-                d="M8 1a7 7 0 1 0 0 14A7 7 0 0 0 8 1Zm2.5 9.1-1.4 1.4L8 9.4 6.5 11l-1.4-1.4L6.6 8 5.1 6.5 6.5 5.1 8 6.6 9.5 5.1l1.4 1.4L9.4 8l1.1 1.1Z"
-              />
-            </svg>
-          {/if}
-        </button>
-      {/if}
-
-      {#if suffix}
-        <span class="cd-autocomplete__suffix">
-          {#if typeof suffix === 'string'}{suffix}{:else}{@render suffix()}{/if}
-        </span>
-      {/if}
-    </div>
-  {/if}
-
-  {#if showDropdown}
-    <div
-      class={['cd-autocomplete__dropdown', dropdownClassName].filter(Boolean).join(' ')}
-      role="listbox"
-      id={listId}
-      aria-busy={loading || undefined}
-      style={[dropdownPositionStyle, dropdownStyleStr].filter(Boolean).join('; ')}
-    >
-      {#if loading}
-        <div class="cd-autocomplete__loading">
-          <span class="cd-autocomplete__spinner" aria-hidden="true"></span>
-          <span>{loc().t('AutoComplete.loading')}</span>
-        </div>
-      {/if}
-      {#if options.length === 0 && !loading}
-        <div class="cd-autocomplete__empty">
-          {#if emptyContent}
-            {#if typeof emptyContent === 'string'}{emptyContent}{:else}{@render emptyContent()}{/if}
-          {:else}
-            {loc().t('AutoComplete.emptyText')}
-          {/if}
-        </div>
-      {:else if hasGroups}
-        {#each groupedView as group, gi (group.label === null ? `g-${gi}` : `${group.key}-${group.label}`)}
-          {#if group.label !== null}
-            <div class="cd-autocomplete__group-label" role="presentation">{group.label}</div>
-          {/if}
-          {#each group.items as it (it.opt.value)}
-            {@render optionRow(it.opt, it.flatIndex)}
-          {/each}
-        {/each}
-      {:else}
-        {#each options as opt, i (opt.value)}
-          {@render optionRow(opt, i)}
-        {/each}
-      {/if}
-    </div>
-  {/if}
-</div>
-
-<style>
-  .cd-autocomplete {
-    position: relative;
-    display: inline-flex;
-    inline-size: 100%;
-    font-size: var(--cd-input-font-size);
-  }
-  .cd-autocomplete__control {
-    display: flex;
-    align-items: center;
-    gap: var(--cd-spacing-2);
-    inline-size: 100%;
-    block-size: var(--cd-input-height-default);
-    padding-inline: var(--cd-input-padding-x);
-    background: var(--cd-input-color-bg);
-    border: 1px solid var(--cd-input-border);
-    border-radius: var(--cd-input-radius);
-    transition: border-color var(--cd-motion-duration-fast) var(--cd-motion-ease-standard);
-  }
-  .cd-autocomplete--small .cd-autocomplete__control {
-    block-size: var(--cd-input-height-small);
-  }
-  .cd-autocomplete--large .cd-autocomplete__control {
-    block-size: var(--cd-input-height-large);
-  }
-  .cd-autocomplete__control:focus-within {
-    border-color: var(--cd-input-border-active);
-    box-shadow: var(--cd-focus-ring);
-  }
-  .cd-autocomplete--warning .cd-autocomplete__control {
-    border-color: var(--cd-input-border-warning);
-  }
-  .cd-autocomplete--error .cd-autocomplete__control {
-    border-color: var(--cd-input-border-error);
-  }
-  .cd-autocomplete--disabled .cd-autocomplete__control {
-    background: var(--cd-color-fill-0);
-    color: var(--cd-color-text-3);
-    cursor: not-allowed;
-  }
-  .cd-autocomplete__inset-label {
-    display: inline-flex;
-    align-items: center;
-    flex: 0 0 auto;
-    color: var(--cd-color-text-2);
-    user-select: none;
-    white-space: nowrap;
-  }
-  .cd-autocomplete__prefix,
-  .cd-autocomplete__suffix {
-    display: inline-flex;
-    align-items: center;
-    flex: 0 0 auto;
-    color: var(--cd-color-text-2);
-    user-select: none;
-    white-space: nowrap;
-  }
-  .cd-autocomplete__input {
-    flex: 1 1 auto;
-    inline-size: 100%;
-    min-inline-size: 0;
-    block-size: 100%;
-    margin: 0;
-    padding: 0;
-    border: none;
-    background: transparent;
-    color: inherit;
-    font: inherit;
-    outline: none;
-  }
-  .cd-autocomplete__input::placeholder {
-    color: var(--cd-input-color-placeholder);
-  }
-  .cd-autocomplete__input:disabled {
-    cursor: not-allowed;
-  }
-  .cd-autocomplete__clear {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    flex: 0 0 auto;
-    padding: 0;
-    border: none;
-    background: transparent;
-    color: var(--cd-color-text-2);
-    cursor: pointer;
-  }
-  .cd-autocomplete__clear:hover {
-    color: var(--cd-color-text-0);
-  }
-  .cd-autocomplete__selected {
-    display: inline-flex;
-    align-items: center;
-    flex: 0 0 auto;
-  }
-  .cd-autocomplete__dropdown {
-    position: absolute;
-    inset-block-start: calc(100% + var(--cd-spacing-1));
-    inset-inline: 0;
-    z-index: var(--cd-select-dropdown-z);
-    max-block-size: 16rem;
-    overflow-y: auto;
-    padding-block: var(--cd-spacing-1);
-    background: var(--cd-select-dropdown-bg);
-    border-radius: var(--cd-select-dropdown-radius);
-    box-shadow: var(--cd-select-dropdown-shadow);
-  }
-  .cd-autocomplete__option {
-    padding: var(--cd-select-option-padding);
-    cursor: pointer;
-  }
-  .cd-autocomplete__option--active {
-    background: var(--cd-select-option-bg-hover);
-  }
-  .cd-autocomplete__option[aria-disabled='true'] {
-    color: var(--cd-color-text-3);
-    cursor: not-allowed;
-  }
-  .cd-autocomplete__group-label {
-    padding: var(--cd-spacing-1) var(--cd-select-option-padding, var(--cd-spacing-2));
-    color: var(--cd-color-text-3);
-    font-size: var(--cd-font-size-1);
-    font-weight: var(--cd-font-weight-medium, 500);
-    user-select: none;
-  }
-  .cd-autocomplete__empty {
-    padding: var(--cd-select-option-padding);
-    color: var(--cd-color-text-3);
-    text-align: center;
-  }
-  .cd-autocomplete__loading {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    gap: var(--cd-spacing-2);
-    padding: var(--cd-select-option-padding);
-    color: var(--cd-color-text-3);
-  }
-  .cd-autocomplete__spinner {
-    inline-size: 1em;
-    block-size: 1em;
-    border: 2px solid var(--cd-color-border);
-    border-block-start-color: var(--cd-color-primary);
-    border-radius: var(--cd-radius-full);
-    animation: cd-autocomplete-spin 0.7s linear infinite;
-  }
-  @keyframes cd-autocomplete-spin {
-    to {
-      transform: rotate(360deg);
-    }
-  }
-  @media (prefers-reduced-motion: reduce) {
-    .cd-autocomplete__control {
-      transition: none;
-    }
-    .cd-autocomplete__spinner {
-      animation: none;
-    }
-  }
-</style>