@lostgradient/cinder 0.5.0 → 0.6.0

package/src/components/color-picker/index.ts

@@ -1,6 +0,0 @@
-import './color-picker.css';
-import ColorPicker from './color-picker.svelte';
-
-export default ColorPicker;
-export type { ColorPickerProps } from './color-picker.types.ts';
-export { ColorPicker };

package/src/components/color-swatch-picker/color-swatch-picker.svelte

@@ -1,211 +0,0 @@
-<script lang="ts" module>
-  /**
-   * @cinder
-   * @category form
-   * @status stable
-   * @purpose Keyboard-navigable listbox of preset color swatches that constrains selection to a curated palette.
-   * @tag form
-   * @tag color
-   * @useWhen Restricting color choice to a fixed brand or theme palette.
-   * @useWhen Pairing with color-picker as a shortcut for common values.
-   * @avoidWhen Letting users author arbitrary colors across the spectrum — use color-picker instead.
-   * @related color-picker
-   */
-  export type { ColorSwatch, ColorSwatchPickerProps } from './color-swatch-picker.types.ts';
-</script>
-
-<script lang="ts">
-  import type { ColorSwatch, ColorSwatchPickerProps } from './color-swatch-picker.types.ts';
-  import { tick, untrack } from 'svelte';
-
-  import { classNames } from '../../utilities/class-names.ts';
-  import { devWarn } from '../../utilities/dev-warn.ts';
-  import { hasAlpha, pickContrastColor } from '../../utilities/color-luminance.ts';
-  import { handleRovingKeydown } from '../../utilities/roving-tabindex.ts';
-  import Check from 'lucide-svelte/icons/check';
-
-  let {
-    value,
-    defaultValue,
-    colors,
-    shape = 'circle',
-    size = 'md',
-    layout = 'grid',
-    disabled = false,
-    label,
-    class: className,
-    onchange,
-    indicator,
-  }: ColorSwatchPickerProps = $props();
-
-  // Seeded once from `defaultValue` for the uncontrolled case; later selection
-  // changes flow through user interaction, not the prop.
-  let internalValue = $state(untrack(() => defaultValue) ?? '');
-  const selected = $derived(value ?? internalValue);
-
-  // Deduplicate swatches by color (first occurrence wins) so the keyed {#each}
-  // never receives duplicate keys and Svelte cannot throw each_key_duplicate.
-  // A dev warning is emitted when duplicates are found so the data author can fix
-  // their input, but the component continues to render the deduplicated list.
-  const renderableColors = $derived.by(() => {
-    const seen = new Set<string>();
-    const result: ColorSwatch[] = [];
-    let hasDuplicates = false;
-    for (const swatch of colors) {
-      if (seen.has(swatch.color)) {
-        hasDuplicates = true;
-      } else {
-        seen.add(swatch.color);
-        result.push(swatch);
-      }
-    }
-    if (hasDuplicates) {
-      devWarn(
-        '[ColorSwatchPicker] Duplicate color values detected in palette. ' +
-          'Only the first matching swatch will be shown as selected. Duplicates were removed.',
-      );
-    }
-    return result;
-  });
-
-  // Track focus index driven by user interaction. null = derive from selection.
-  let userFocusIndex = $state<number | null>(null);
-
-  // Reset stale focus index when palette identity changes.
-  $effect(() => {
-    void colors;
-    userFocusIndex = null;
-  });
-
-  const effectiveFocusIndex = $derived.by(() => {
-    if (renderableColors.length === 0) return -1;
-
-    // 1. User-driven focus if it points to a valid, non-item-disabled option.
-    if (
-      userFocusIndex !== null &&
-      userFocusIndex < renderableColors.length &&
-      !renderableColors[userFocusIndex]?.disabled
-    ) {
-      return userFocusIndex;
-    }
-
-    // 2. Currently selected swatch if it exists and is not item-disabled.
-    const selectedIndex = renderableColors.findIndex((s) => s.color === selected);
-    if (selectedIndex !== -1 && !renderableColors[selectedIndex]?.disabled) {
-      return selectedIndex;
-    }
-
-    // 3. First non-item-disabled option.
-    const firstEnabled = renderableColors.findIndex((s) => !s.disabled);
-    if (firstEnabled !== -1) return firstEnabled;
-
-    // 4. First option in DOM order (ensures the control always has a tab stop).
-    return 0;
-  });
-
-  // DOM refs for focusing after keyboard navigation.
-  let liRefs: (HTMLLIElement | null)[] = $state([]);
-
-  // Index of the first swatch (by DOM order) matching `selected` — for aria-selected.
-  const selectedIndex = $derived(renderableColors.findIndex((s) => s.color === selected));
-
-  function isItemDisabledForRoving(index: number): boolean {
-    return renderableColors[index]?.disabled === true;
-  }
-
-  function isInteractive(index: number): boolean {
-    return !disabled && !renderableColors[index]?.disabled;
-  }
-
-  function selectSwatch(index: number): void {
-    if (!isInteractive(index)) return;
-    const swatch = renderableColors[index];
-    if (!swatch) return;
-    internalValue = swatch.color;
-    onchange?.(swatch.color);
-  }
-
-  async function handleKeydown(event: KeyboardEvent): Promise<void> {
-    if (disabled) return;
-
-    const { key } = event;
-
-    if (key === 'Enter' || key === ' ') {
-      if (effectiveFocusIndex < 0) return;
-      event.preventDefault();
-      selectSwatch(effectiveFocusIndex);
-      return;
-    }
-
-    const newIndex = handleRovingKeydown(event, effectiveFocusIndex, renderableColors.length, {
-      vertical: true,
-      horizontal: layout === 'grid',
-      isDisabled: isItemDisabledForRoving,
-    });
-
-    if (newIndex !== null) {
-      event.preventDefault();
-      if (newIndex !== effectiveFocusIndex) {
-        userFocusIndex = newIndex;
-        await tick();
-        liRefs[newIndex]?.focus();
-      }
-    }
-  }
-
-  function handleClick(index: number): void {
-    if (!isInteractive(index)) return;
-    userFocusIndex = index;
-    selectSwatch(index);
-  }
-</script>
-
-<ul
-  role="listbox"
-  aria-label={label}
-  aria-disabled={disabled ? 'true' : undefined}
-  aria-orientation={layout === 'stack' ? 'vertical' : undefined}
-  class={classNames('cinder-color-swatch-picker', className)}
-  data-cinder-size={size}
-  data-cinder-shape={shape}
-  data-cinder-layout={layout}
-  onkeydown={handleKeydown}
->
-  {#each renderableColors as swatch, index (swatch.color)}
-    {@const isSelected = index === selectedIndex}
-    {@const isDisabled = swatch.disabled === true}
-    {@const contrastColor = pickContrastColor(swatch.color)}
-    {@const alpha = hasAlpha(swatch.color)}
-    <!--
-      Listbox pattern: keyboard activation (Enter/Space) and roving navigation
-      are handled once on the role="listbox" container above, where the focused
-      role="option" delegates its keydown by bubbling. Per-option click is a
-      pointer convenience, so the colocated-keydown lint rule is a false positive.
-    -->
-    <!-- svelte-ignore a11y_click_events_have_key_events -->
-    <li
-      role="option"
-      aria-selected={isSelected}
-      aria-label={swatch.name ? `${swatch.name}, ${swatch.color}` : swatch.color}
-      aria-disabled={disabled || isDisabled ? 'true' : undefined}
-      tabindex={index === effectiveFocusIndex ? 0 : -1}
-      class="cinder-color-swatch-picker__swatch"
-      data-cinder-selected={isSelected ? '' : undefined}
-      data-cinder-disabled={isDisabled ? '' : undefined}
-      data-cinder-alpha={alpha ? '' : undefined}
-      style="--swatch-color: {swatch.color}"
-      bind:this={liRefs[index]}
-      onclick={() => handleClick(index)}
-    >
-      {#if isSelected}
-        <span class="cinder-color-swatch-picker__indicator" style="color: {contrastColor}">
-          {#if indicator}
-            {@render indicator({ swatch, contrastColor })}
-          {:else}
-            <Check aria-hidden="true" />
-          {/if}
-        </span>
-      {/if}
-    </li>
-  {/each}
-</ul>

package/src/components/color-swatch-picker/color-swatch-picker.types.ts

@@ -1,55 +0,0 @@
-import type { Snippet } from 'svelte';
-/**
- * A single color entry in a ColorSwatchPicker palette.
- *
- * Supported `color` formats for alpha detection and contrast computation:
- * `#rgb`, `#rgba`, `#rrggbb`, `#rrggbbaa`, `rgb(r, g, b)`, `rgba(r, g, b, a)`,
- * `hsl(h, s%, l%)`, `hsla(h, s%, l%, a)` (legacy comma syntax only).
- * Other CSS color formats render via CSS but receive no checkerboard and a
- * best-effort `'white'` contrast indicator that may be invisible on near-white colors.
- */
-export type ColorSwatch = {
-  /** CSS color string rendered as the swatch background. */
-  color: string;
-  /** Optional human label. When omitted, the `color` string is the accessible name. */
-  name?: string;
-  /** Disables this individual swatch. Skipped during keyboard navigation; not selectable. */
-  disabled?: boolean;
-};
-/** Props for ColorSwatchPicker. */
-export type ColorSwatchPickerProps = {
-  /** Controlled selected color. When provided, the parent owns the state. */
-  value?: string;
-  /** Initial selected color for uncontrolled use. Ignored when `value` is set. */
-  defaultValue?: string;
-  /** Palette to render. */
-  colors: ColorSwatch[];
-  /** Visual shape of each swatch. Default `'circle'`. */
-  shape?: 'circle' | 'square';
-  /** Swatch dimension token. Default `'md'`. */
-  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
-  /**
-   * Layout direction. Default `'grid'`.
-   *
-   * Note: grid layout uses one-dimensional DOM-order navigation for both
-   * ArrowLeft/Right and ArrowUp/Down. True column-aware navigation is not
-   * implemented in v1 — see a11y memo.
-   */
-  layout?: 'grid' | 'stack';
-  /** Disables the entire listbox. Keyboard activation and clicks are ignored. */
-  disabled?: boolean;
-  /**
-   * Accessible name for the listbox. Required — `role="listbox"` needs a label
-   * so screen readers can announce the control's purpose.
-   */
-  label: string;
-  /** Additional classes merged into the listbox `<ul>`. */
-  class?: string;
-  /** Fired when the selected swatch changes. */
-  onchange?: (color: string) => void;
-  /**
-   * Snippet that replaces the default check-icon indicator on the selected swatch.
-   * Receives the active swatch and the computed contrast color for the icon.
-   */
-  indicator?: Snippet<[{ swatch: ColorSwatch; contrastColor: 'black' | 'white' }]>;
-};

package/src/components/color-swatch-picker/index.ts

@@ -1,6 +0,0 @@
-import './color-swatch-picker.css';
-import ColorSwatchPicker from './color-swatch-picker.svelte';
-
-export default ColorSwatchPicker;
-export type { ColorSwatch, ColorSwatchPickerProps } from './color-swatch-picker.types.ts';
-export { ColorSwatchPicker };

package/src/components/combobox/combobox.svelte

@@ -1,411 +0,0 @@
-<script lang="ts" module>
-  /**
-   * @cinder
-   * @category form
-   * @status stable
-   * @purpose Single-select input that filters a fixed option list as the user types, combining free-text search with constrained values.
-   * @tag form
-   * @tag autocomplete
-   * @useWhen Choosing one value from a long list where typing is faster than scrolling.
-   * @useWhen Letting users narrow options by substring while still requiring a constrained selection.
-   * @avoidWhen Picking from a short fixed list with no need to filter — use select instead.
-   * @avoidWhen Querying remote data or accepting free-text submissions — use search-field instead.
-   * @related select, search-field, dropdown
-   */
-  export type { ComboboxOption, ComboboxProps } from './combobox.types.ts';
-</script>
-
-<script lang="ts" generics="T extends string = string">
-  import type { ComboboxOption, ComboboxProps } from './combobox.types.ts';
-  import { untrack } from 'svelte';
-
-  import { resolveFieldControl } from '../../_internal/field-control.ts';
-  import { getFormFieldContext } from '../../_internal/form-field-context.ts';
-  import { pushEscapeHandler } from '../../_internal/overlay.ts';
-  import { classNames } from '../../utilities/class-names.ts';
-  import Popover from '../popover/popover.svelte';
-
-  let {
-    id,
-    value = $bindable(''),
-    name,
-    inputValue = $bindable(''),
-    options,
-    label,
-    placeholder,
-    filter,
-    description,
-    error,
-    disabled,
-    required,
-    maxVisibleOptions = 200,
-    class: className,
-    'aria-describedby': consumerDescribedBy,
-  }: ComboboxProps<T> = $props();
-
-  const context = getFormFieldContext();
-  const field = $derived(
-    resolveFieldControl({
-      id,
-      generatedId: id,
-      context,
-      hasDescription: !!description,
-      hasError: !!error,
-      localIdNamespace: 'combobox',
-      consumerDescribedBy,
-      required,
-      disabled,
-    }),
-  );
-  const resolvedDisabled = $derived(field.disabled);
-  const resolvedRequired = $derived(field.required);
-  const describedBy = $derived(field.describedBy);
-
-  const listboxId = $derived(`${id}-listbox`);
-  const descriptionId = $derived(field.ownDescriptionId);
-  // Stable id for the always-in-DOM error live region when no error is active.
-  // Mirrors Select: avoids colliding with a wrapping FormField's error id.
-  const stableLocalErrorId = $derived(
-    context?.errorId === `${field.id}-error` ? `${field.id}-combobox-error` : `${field.id}-error`,
-  );
-
-  const defaultFilter = (option: ComboboxOption<T>, query: string): boolean => {
-    if (!query) return true;
-    const q = query.toLowerCase();
-    return (
-      option.label.toLowerCase().includes(q) ||
-      (option.description?.toLowerCase().includes(q) ?? false)
-    );
-  };
-
-  const filteredOptions = $derived.by(() => {
-    const fn = filter ?? defaultFilter;
-    const matches: ComboboxOption<T>[] = [];
-    for (const option of options) {
-      if (fn(option, inputValue)) {
-        matches.push(option);
-        if (matches.length >= maxVisibleOptions) break;
-      }
-    }
-    return matches;
-  });
-
-  let open = $state(false);
-  let activeIndex = $state(-1);
-  let inputElement = $state<HTMLInputElement | null>(null);
-  let hiddenInputElement = $state<HTMLInputElement | null>(null);
-  let listboxElement = $state<HTMLElement | null>(null);
-  let committedLabel = $state('');
-  let resetSyncTimeout: ReturnType<typeof setTimeout> | undefined;
-  const initialValue = untrack(() => value);
-  const initialInputValue = untrack(() => inputValue);
-
-  // Reset active index whenever the filtered set changes so we don't point
-  // at a stale option.
-  $effect(() => {
-    void filteredOptions;
-    if (activeIndex >= filteredOptions.length) {
-      activeIndex = filteredOptions.length > 0 ? 0 : -1;
-    }
-  });
-
-  // When a value is provided externally, mirror its label in the input box.
-  // The current input text is read untracked so typing can keep driving filtering.
-  $effect(() => {
-    if (!value) {
-      // Clearing the value (deselect/reset) must also clear the visible text;
-      // otherwise the input keeps showing the previously selected option's label.
-      if (untrack(() => inputValue)) inputValue = '';
-      committedLabel = '';
-      return;
-    }
-    const matched = options.find((option) => option.value === value);
-    if (matched) {
-      // `committedLabel` tracks the committed `value`'s label and must stay in
-      // sync whenever a match exists — even when `inputValue` already shows that
-      // label. Gating it behind the `inputValue !== matched.label` check left
-      // `committedLabel` stale (''), so a later Escape restored to empty text.
-      committedLabel = matched.label;
-      if (untrack(() => inputValue) !== matched.label) {
-        inputValue = matched.label;
-      }
-    }
-  });
-
-  // Escape ownership.
-  //
-  // The combobox is the single Escape owner for the whole time it is open. The
-  // option Popover is told `closeOnEscape={false}`, so it never registers its
-  // own escape-stack handler — otherwise, while options are visible, the
-  // Popover's handler would sit on top of the shared LIFO stack and shadow this
-  // one. With the Popover opting out, this combobox's handler is the top-most
-  // Escape consumer for the entire open session, including the empty-filter gap
-  // (`open && filteredOptions.length === 0`) where the Popover is unmounted.
-  //
-  // That matters most when the combobox is nested inside a Modal/Sheet: the
-  // shared escape stack's window listener is capture-phase and invokes ONLY its
-  // top handler, so this combobox consumes Escape and `preventDefault()`s it
-  // before the parent overlay ever sees the key — Escape dismisses just the
-  // combobox, never the enclosing overlay.
-  function handleEscape(event: KeyboardEvent | undefined = undefined): void {
-    const wasOpen = open;
-    open = false;
-    // Restore the committed label whenever the live text drifted from it.
-    if (inputValue !== committedLabel) {
-      inputValue = committedLabel;
-      if (inputElement) inputElement.value = committedLabel;
-    }
-    // Swallow the key if the combobox actually consumed this Escape (it was
-    // open) so the same keystroke doesn't also dismiss an enclosing overlay or
-    // trigger a page-level default.
-    if (wasOpen) event?.preventDefault();
-  }
-
-  $effect(() => {
-    if (!open) return;
-    const releaseEscape = pushEscapeHandler(handleEscape);
-    return releaseEscape;
-  });
-
-  const activeOptionId = $derived(
-    activeIndex >= 0 && activeIndex < filteredOptions.length
-      ? `${id}-option-${activeIndex}`
-      : undefined,
-  );
-
-  function handleInput(event: Event) {
-    const target = event.target as HTMLInputElement;
-    inputValue = target.value;
-    open = true;
-    activeIndex = filteredOptions.length > 0 ? 0 : -1;
-  }
-
-  function handleFocus() {
-    if (!resolvedDisabled) open = true;
-  }
-
-  function handleBlur(event: FocusEvent) {
-    // Defer close so a click on a listbox option can complete first. Use a DOM
-    // containment check rather than a `#${listboxId}` selector so ids with
-    // CSS-special characters (colons, dots, leading digits) don't throw.
-    const next = event.relatedTarget as Node | null;
-    if (next && listboxElement?.contains(next)) return;
-    open = false;
-    // Restore the committed label if the live text drifted from it. Leaving the
-    // field on a stale edit (without selecting an option) would desync the
-    // visible text from the unchanged `value` — the same mismatch Escape fixes.
-    if (inputValue !== committedLabel) {
-      inputValue = committedLabel;
-      if (inputElement) inputElement.value = committedLabel;
-    }
-  }
-
-  function selectOption(option: ComboboxOption<T>) {
-    if (option.disabled) return;
-    value = option.value;
-    inputValue = option.label;
-    committedLabel = option.label;
-    open = false;
-  }
-
-  function resetToInitialValue(event: Event): void {
-    if (resetSyncTimeout !== undefined) clearTimeout(resetSyncTimeout);
-    resetSyncTimeout = setTimeout(() => {
-      resetSyncTimeout = undefined;
-      if (event.defaultPrevented) return;
-      value = initialValue;
-      const matched = options.find((option) => option.value === initialValue);
-      const nextInputValue = matched?.label ?? initialInputValue;
-      inputValue = nextInputValue;
-      committedLabel = matched?.label ?? '';
-      open = false;
-      activeIndex = -1;
-      if (inputElement) inputElement.value = nextInputValue;
-      if (hiddenInputElement) hiddenInputElement.value = initialValue;
-    }, 0);
-  }
-
-  $effect(() => {
-    const input = hiddenInputElement;
-    if (input === null) return;
-    const form = input.form;
-    form?.addEventListener('reset', resetToInitialValue);
-    return () => {
-      form?.removeEventListener('reset', resetToInitialValue);
-      if (resetSyncTimeout !== undefined) {
-        clearTimeout(resetSyncTimeout);
-        resetSyncTimeout = undefined;
-      }
-    };
-  });
-
-  $effect(() => {
-    inputElement?.setCustomValidity(
-      (resolvedRequired && !value) || inputValue !== committedLabel
-        ? 'Please select an option.'
-        : '',
-    );
-  });
-
-  function handleKeydown(event: KeyboardEvent) {
-    if (event.key === 'ArrowDown') {
-      event.preventDefault();
-      open = true;
-      if (filteredOptions.length === 0) return;
-      activeIndex = (activeIndex + 1) % filteredOptions.length;
-    } else if (event.key === 'ArrowUp') {
-      event.preventDefault();
-      open = true;
-      if (filteredOptions.length === 0) return;
-      activeIndex = activeIndex <= 0 ? filteredOptions.length - 1 : activeIndex - 1;
-    } else if (event.key === 'Home') {
-      if (!open) return;
-      event.preventDefault();
-      activeIndex = filteredOptions.length > 0 ? 0 : -1;
-    } else if (event.key === 'End') {
-      if (!open) return;
-      event.preventDefault();
-      activeIndex = filteredOptions.length - 1;
-    } else if (event.key === 'Enter' && open) {
-      const option = filteredOptions[activeIndex];
-      if (option) {
-        event.preventDefault();
-        selectOption(option);
-      }
-    } else if (event.key === 'Escape') {
-      // Fallback path. In a real browser the capture-phase escape-stack listener
-      // (installed by the $effect's pushEscapeHandler) runs first and has
-      // already closed + restored + preventDefault'd; `defaultPrevented` is true
-      // here and we bail. This branch only does real work when the stack
-      // listener never ran — SSR/no-window environments where `window` is
-      // absent so `pushEscapeHandler` installed nothing.
-      if (event.defaultPrevented) return;
-      handleEscape(event);
-    }
-  }
-</script>
-
-<div class={classNames('cinder-combobox', className)}>
-  {#if label}
-    <label for={id} class="cinder-combobox__label" data-disabled={resolvedDisabled || undefined}>
-      {label}
-      {#if resolvedRequired}
-        <span class="cinder-_required-marker" aria-hidden="true">*</span>
-      {/if}
-    </label>
-  {/if}
-
-  <div class="cinder-combobox__control" data-cinder-open={open || undefined}>
-    <input
-      bind:this={inputElement}
-      {id}
-      type="text"
-      role="combobox"
-      class="cinder-combobox__input"
-      autocomplete="off"
-      autocorrect="off"
-      spellcheck="false"
-      disabled={resolvedDisabled}
-      required={resolvedRequired}
-      {placeholder}
-      value={inputValue}
-      aria-autocomplete="list"
-      aria-expanded={open}
-      aria-controls={listboxId}
-      aria-activedescendant={activeOptionId}
-      aria-invalid={field.ariaInvalid}
-      aria-required={resolvedRequired || undefined}
-      aria-describedby={describedBy}
-      oninput={handleInput}
-      onfocus={handleFocus}
-      onblur={handleBlur}
-      onkeydown={handleKeydown}
-    />
-  </div>
-
-  {#if name}
-    <input
-      bind:this={hiddenInputElement}
-      type="hidden"
-      {name}
-      {value}
-      disabled={resolvedDisabled}
-    />
-  {/if}
-
-  {#if open && filteredOptions.length > 0}
-    <Popover
-      bind:open
-      id={listboxId}
-      triggerRef={inputElement}
-      role="listbox"
-      focusManagement="preserve"
-      wireTriggerAria={false}
-      closeOnEscape={false}
-      widthMode="match-anchor"
-      class="cinder-combobox__panel"
-    >
-      <ul bind:this={listboxElement} role="presentation" class="cinder-combobox__listbox">
-        {#each filteredOptions as option, index (option.value)}
-          <li
-            id="{id}-option-{index}"
-            role="option"
-            class="cinder-_option-row cinder-combobox__option"
-            aria-selected={value === option.value}
-            aria-disabled={option.disabled || undefined}
-            aria-label={option.description ? `${option.label}, ${option.description}` : undefined}
-            data-cinder-active={index === activeIndex || undefined}
-            onmousedown={(event) => {
-              // mousedown rather than click so the option fires before the
-              // input's blur cancels the popover.
-              event.preventDefault();
-              selectOption(option);
-            }}
-            onmouseenter={() => {
-              activeIndex = index;
-            }}
-          >
-            {#if option.avatar?.trim()}
-              <img
-                class="cinder-combobox__option-avatar"
-                src={option.avatar}
-                alt=""
-                loading="lazy"
-              />
-            {/if}
-            <span class="cinder-combobox__option-text">
-              <span class="cinder-combobox__option-label">{option.label}</span>
-              {#if option.description}
-                <span class="cinder-combobox__option-description">{option.description}</span>
-              {/if}
-            </span>
-          </li>
-        {/each}
-      </ul>
-    </Popover>
-  {/if}
-
-  <!-- Always in DOM so screen readers hear "No results" when text is injected.
-       Freshly-mounted role="status" nodes are not reliably announced by NVDA/JAWS. -->
-  <div
-    class="cinder-combobox__empty"
-    role="status"
-    data-cinder-active={(open && filteredOptions.length === 0) || undefined}
-  >
-    {open && filteredOptions.length === 0 ? 'No results' : ''}
-  </div>
-
-  {#if description}
-    <p id={descriptionId} class="cinder-combobox__description">{description}</p>
-  {/if}
-
-  <!-- Always in DOM for the same reason — live region must pre-exist before text is injected. -->
-  <p
-    id={field.ownErrorId ?? stableLocalErrorId}
-    class="cinder-combobox__error"
-    aria-live="polite"
-    data-cinder-error={!!error || undefined}
-  >
-    {error ?? ''}
-  </p>
-</div>