@lostgradient/cinder 0.5.0 → 0.7.0

package/src/components/multi-select/multi-select.svelte

@@ -1,396 +1,348 @@
 <script lang="ts" module>
-  /**
-   * @cinder
-   * @category form
-   * @status alpha
-   * @purpose Multi-value dropdown with checkbox options, optional filtering, and count-summary trigger text.
-   * @tag form
-   * @tag selection
-   * @tag multiselect
-   * @useWhen Selecting multiple values from a fixed option list while preserving compact form layout.
-   * @useWhen Showing many options in an anchored picker instead of a permanently-expanded checkbox group.
-   * @avoidWhen Selecting a single value from a short fixed list — use select instead.
-   * @avoidWhen Moving items between available/selected panes — use transfer-list instead.
-   * @related select, combobox, checkbox-group, transfer-list
-   */
-  export type {
-    MultiSelectDirection,
-    MultiSelectItem,
-    MultiSelectProps,
-    MultiSelectSelectionFeedback,
-  } from './multi-select.types.ts';
+export {};
 </script>
 
 <script lang="ts" generics="T extends string = string">
-  import { tick, untrack } from 'svelte';
-
-  import { pushEscapeHandler } from '../../_internal/overlay.ts';
-  import { resolveFieldControl } from '../../_internal/field-control.ts';
-  import { getFormFieldContext } from '../../_internal/form-field-context.ts';
-  import { classNames } from '../../utilities/class-names.ts';
-  import type { MultiSelectItem, MultiSelectProps } from './multi-select.types.ts';
-
-  let {
+import { tick, untrack } from 'svelte';
+import { pushEscapeHandler } from '../../_internal/overlay.ts';
+import { resolveFieldControl } from '../../_internal/field-control.ts';
+import { getFormFieldContext } from '../../_internal/form-field-context.ts';
+import { classNames } from '../../utilities/class-names.ts';
+let { id, items, selectedIds = $bindable([]), name, label, placeholder = 'Select options', description, error, warning, disabled, readonly = false, required, filterable = false, filterItem, selectionFeedback = 'fixed', direction = 'down', class: className, 'aria-describedby': consumerDescribedBy, } = $props();
+const context = getFormFieldContext();
+const warningId = $derived(warning ? `${id}-warning` : undefined);
+const field = $derived(resolveFieldControl({
     id,
-    items,
-    selectedIds = $bindable([] as NoInfer<T>[]),
-    name,
-    label,
-    placeholder = 'Select options',
-    description,
-    error,
-    warning,
-    disabled,
-    readonly = false,
+    generatedId: id,
+    context,
+    hasDescription: !!description,
+    hasError: !!error,
+    localIdNamespace: 'multi-select',
+    consumerDescribedBy,
+    additionalDescribedBy: [warningId],
     required,
-    filterable = false,
-    filterItem,
-    selectionFeedback = 'fixed',
-    direction = 'down',
-    class: className,
-    'aria-describedby': consumerDescribedBy,
-  }: MultiSelectProps<T> = $props();
-
-  const context = getFormFieldContext();
-  const warningId = $derived(warning ? `${id}-warning` : undefined);
-  const field = $derived(
-    resolveFieldControl({
-      id,
-      generatedId: id,
-      context,
-      hasDescription: !!description,
-      hasError: !!error,
-      localIdNamespace: 'multi-select',
-      consumerDescribedBy,
-      additionalDescribedBy: [warningId],
-      required,
-      disabled,
-    }),
-  );
-
-  const stableLocalErrorId = $derived(
-    context?.errorId === `${field.id}-error`
-      ? `${field.id}-multi-select-error`
-      : `${field.id}-error`,
-  );
-
-  const listboxId = $derived(`${id}-listbox`);
-  const filterId = $derived(`${id}-filter`);
-  const filterLabelHintId = $derived(`${id}-filter-label-hint`);
-  const labelId = $derived(label ? `${id}-label` : undefined);
-  const listboxLabelledBy = $derived(labelId ?? context?.labelId);
-  const itemIdSet = $derived(new Set(items.map((item) => item.id)));
-  const uniqueSelectedIds = $derived.by(() => {
-    const seen = new Set<T>();
-    const next: T[] = [];
+    disabled,
+}));
+const stableLocalErrorId = $derived(context?.errorId === `${field.id}-error`
+    ? `${field.id}-multi-select-error`
+    : `${field.id}-error`);
+const listboxId = $derived(`${id}-listbox`);
+const filterId = $derived(`${id}-filter`);
+const filterLabelHintId = $derived(`${id}-filter-label-hint`);
+const labelId = $derived(label ? `${id}-label` : undefined);
+const listboxLabelledBy = $derived(labelId ?? context?.labelId);
+const itemIdSet = $derived(new Set(items.map((item) => item.id)));
+const uniqueSelectedIds = $derived.by(() => {
+    const seen = new Set();
+    const next = [];
     for (const selectedId of selectedIds) {
-      if (!itemIdSet.has(selectedId) || seen.has(selectedId)) continue;
-      seen.add(selectedId);
-      next.push(selectedId);
+        if (!itemIdSet.has(selectedId) || seen.has(selectedId))
+            continue;
+        seen.add(selectedId);
+        next.push(selectedId);
     }
     return next;
-  });
-  const selectedSet = $derived(new Set(uniqueSelectedIds));
-  const selectedCount = $derived(uniqueSelectedIds.length);
-  let open = $state(false);
-  let query = $state('');
-  let activeIndex = $state(-1);
-  let reorderAfterReopen = $state(false);
-  let openedAtLeastOnce = $state(false);
-  let triggerElement = $state<HTMLButtonElement | null>(null);
-  let controlElement = $state<HTMLDivElement | null>(null);
-  let panelElement = $state<HTMLDivElement | null>(null);
-  let filterElement = $state<HTMLInputElement | null>(null);
-  let listboxElement = $state<HTMLElement | null>(null);
-  let validityProxyElement = $state<HTMLInputElement | null>(null);
-  let nativeError = $state('');
-  let resetSyncTimeout: ReturnType<typeof setTimeout> | undefined;
-  const triggerAriaInvalid = $derived(field.ariaInvalid ?? (nativeError ? true : undefined));
-  const triggerDescribedBy = $derived.by(() => {
+});
+const selectedSet = $derived(new Set(uniqueSelectedIds));
+const selectedCount = $derived(uniqueSelectedIds.length);
+let open = $state(false);
+let query = $state('');
+let activeIndex = $state(-1);
+let reorderAfterReopen = $state(false);
+let openedAtLeastOnce = $state(false);
+let triggerElement = $state(null);
+let controlElement = $state(null);
+let panelElement = $state(null);
+let filterElement = $state(null);
+let listboxElement = $state(null);
+let validityProxyElement = $state(null);
+let nativeError = $state('');
+let resetSyncTimeout;
+const triggerAriaInvalid = $derived(field.ariaInvalid ?? (nativeError ? true : undefined));
+const triggerDescribedBy = $derived.by(() => {
     const ids = new Set((field.describedBy ?? '').split(/\s+/).filter(Boolean));
-    if (nativeError) ids.add(field.ownErrorId ?? stableLocalErrorId);
+    if (nativeError)
+        ids.add(field.ownErrorId ?? stableLocalErrorId);
     const value = Array.from(ids).join(' ');
     return value === '' ? undefined : value;
-  });
-  const filterAriaLabelledBy = $derived.by(() => {
-    if (!listboxLabelledBy) return filterLabelHintId;
+});
+const filterAriaLabelledBy = $derived.by(() => {
+    if (!listboxLabelledBy)
+        return filterLabelHintId;
     return `${listboxLabelledBy} ${filterLabelHintId}`;
-  });
-  const triggerSummary = $derived(selectedCount > 0 ? `${selectedCount} selected` : placeholder);
-  const emptyListMessage = $derived(filterable ? 'No matching options' : 'No options');
-  const initialSelectedIds = untrack(() => [...selectedIds]);
-
-  const defaultFilter = (item: MultiSelectItem<T>, nextQuery: string): boolean => {
-    if (!nextQuery) return true;
+});
+const triggerSummary = $derived(selectedCount > 0 ? `${selectedCount} selected` : placeholder);
+const emptyListMessage = $derived(filterable ? 'No matching options' : 'No options');
+const initialSelectedIds = untrack(() => [...selectedIds]);
+const defaultFilter = (item, nextQuery) => {
+    if (!nextQuery)
+        return true;
     const q = nextQuery.toLowerCase();
-    return (
-      item.label.toLowerCase().includes(q) || (item.description?.toLowerCase().includes(q) ?? false)
-    );
-  };
-
-  const filteredItems = $derived.by(() => {
-    if (!filterable) return items;
+    return (item.label.toLowerCase().includes(q) || (item.description?.toLowerCase().includes(q) ?? false));
+};
+const filteredItems = $derived.by(() => {
+    if (!filterable)
+        return items;
     const fn = filterItem ?? defaultFilter;
     return items.filter((item) => fn(item, query));
-  });
-
-  const visibleItems = $derived.by(() => {
-    const shouldPromoteSelected =
-      selectionFeedback === 'top' ||
-      (selectionFeedback === 'top-after-reopen' && reorderAfterReopen);
-
-    if (!shouldPromoteSelected) return filteredItems;
-
-    const selected: MultiSelectItem<T>[] = [];
-    const unselected: MultiSelectItem<T>[] = [];
+});
+const visibleItems = $derived.by(() => {
+    const shouldPromoteSelected = selectionFeedback === 'top' ||
+        (selectionFeedback === 'top-after-reopen' && reorderAfterReopen);
+    if (!shouldPromoteSelected)
+        return filteredItems;
+    const selected = [];
+    const unselected = [];
     for (const item of filteredItems) {
-      if (selectedSet.has(item.id)) selected.push(item);
-      else unselected.push(item);
+        if (selectedSet.has(item.id))
+            selected.push(item);
+        else
+            unselected.push(item);
     }
     return [...selected, ...unselected];
-  });
-
-  const activeOptionId = $derived(
-    activeIndex >= 0 && activeIndex < visibleItems.length
-      ? `${id}-option-${activeIndex}`
-      : undefined,
-  );
-
-  function firstEnabledIndex(list: readonly MultiSelectItem<T>[]): number {
+});
+const activeOptionId = $derived(activeIndex >= 0 && activeIndex < visibleItems.length
+    ? `${id}-option-${activeIndex}`
+    : undefined);
+function firstEnabledIndex(list) {
     return list.findIndex((item) => !item.disabled);
-  }
-
-  function getLastEnabledIndex(list: readonly MultiSelectItem<T>[]): number {
+}
+function getLastEnabledIndex(list) {
     for (let index = list.length - 1; index >= 0; index -= 1) {
-      if (!list[index]?.disabled) return index;
+        if (!list[index]?.disabled)
+            return index;
     }
     return -1;
-  }
-
-  function openMenu(preferLast = false): void {
-    if (field.disabled) return;
+}
+function openMenu(preferLast = false) {
+    if (field.disabled)
+        return;
     open = true;
     query = '';
     reorderAfterReopen = selectionFeedback === 'top-after-reopen' && openedAtLeastOnce;
     openedAtLeastOnce = true;
     const nextIndex = preferLast
-      ? getLastEnabledIndex(visibleItems)
-      : firstEnabledIndex(visibleItems);
+        ? getLastEnabledIndex(visibleItems)
+        : firstEnabledIndex(visibleItems);
     activeIndex = nextIndex;
     void tick().then(() => {
-      if (filterable) filterElement?.focus();
-      else listboxElement?.focus();
+        if (filterable)
+            filterElement?.focus();
+        else
+            listboxElement?.focus();
     });
-  }
-
-  function closeMenu(restoreFocus = true): void {
+}
+function closeMenu(restoreFocus = true) {
     open = false;
     activeIndex = -1;
     query = '';
-    if (restoreFocus) triggerElement?.focus();
-  }
-
-  function setSelectedIds(next: T[]): void {
+    if (restoreFocus)
+        triggerElement?.focus();
+}
+function setSelectedIds(next) {
     selectedIds = [...next];
-  }
-
-  function toggleItem(item: MultiSelectItem<T>): void {
-    if (field.disabled || readonly || item.disabled) return;
+}
+function toggleItem(item) {
+    if (field.disabled || readonly || item.disabled)
+        return;
     const nextSelectedIds = selectedSet.has(item.id)
-      ? uniqueSelectedIds.filter((candidate) => candidate !== item.id)
-      : [...uniqueSelectedIds, item.id];
+        ? uniqueSelectedIds.filter((candidate) => candidate !== item.id)
+        : [...uniqueSelectedIds, item.id];
     setSelectedIds(nextSelectedIds);
-    if (!open) return;
+    if (!open)
+        return;
     queueMicrotask(() => {
-      const nextIndex = visibleItems.findIndex((candidate) => candidate.id === item.id);
-      if (nextIndex >= 0) activeIndex = nextIndex;
+        const nextIndex = visibleItems.findIndex((candidate) => candidate.id === item.id);
+        if (nextIndex >= 0)
+            activeIndex = nextIndex;
     });
-  }
-
-  function clearSelection(event?: Event): void {
+}
+function clearSelection(event) {
     event?.stopPropagation();
-    if (field.disabled || readonly || selectedIds.length === 0) return;
+    if (field.disabled || readonly || selectedIds.length === 0)
+        return;
     setSelectedIds([]);
     triggerElement?.focus();
-  }
-
-  function moveActive(delta: 1 | -1): void {
+}
+function moveActive(delta) {
     if (visibleItems.length === 0) {
-      activeIndex = -1;
-      return;
+        activeIndex = -1;
+        return;
     }
     const start = activeIndex < 0 ? (delta === 1 ? -1 : 0) : activeIndex;
     for (let offset = 1; offset <= visibleItems.length; offset += 1) {
-      const index = (start + delta * offset + visibleItems.length) % visibleItems.length;
-      if (!visibleItems[index]?.disabled) {
-        activeIndex = index;
-        return;
-      }
+        const index = (start + delta * offset + visibleItems.length) % visibleItems.length;
+        if (!visibleItems[index]?.disabled) {
+            activeIndex = index;
+            return;
+        }
     }
-  }
-
-  function handleListNavigationKeydown(event: KeyboardEvent): void {
+}
+function handleListNavigationKeydown(event) {
     if (event.key === 'ArrowDown') {
-      event.preventDefault();
-      moveActive(1);
-      return;
+        event.preventDefault();
+        moveActive(1);
+        return;
     }
     if (event.key === 'ArrowUp') {
-      event.preventDefault();
-      moveActive(-1);
-      return;
+        event.preventDefault();
+        moveActive(-1);
+        return;
     }
     if (event.key === 'Home') {
-      event.preventDefault();
-      activeIndex = firstEnabledIndex(visibleItems);
-      return;
+        event.preventDefault();
+        activeIndex = firstEnabledIndex(visibleItems);
+        return;
     }
     if (event.key === 'End') {
-      event.preventDefault();
-      activeIndex = getLastEnabledIndex(visibleItems);
-      return;
+        event.preventDefault();
+        activeIndex = getLastEnabledIndex(visibleItems);
+        return;
     }
     if (event.key === 'Escape') {
-      event.preventDefault();
-      closeMenu();
-      return;
+        event.preventDefault();
+        closeMenu();
+        return;
     }
     if (event.key === ' ' || event.key === 'Enter') {
-      event.preventDefault();
-      const item = visibleItems[activeIndex];
-      if (!item) return;
-      toggleItem(item);
+        event.preventDefault();
+        const item = visibleItems[activeIndex];
+        if (!item)
+            return;
+        toggleItem(item);
     }
-  }
-
-  function handleTriggerKeydown(event: KeyboardEvent): void {
-    if (field.disabled) return;
+}
+function handleTriggerKeydown(event) {
+    if (field.disabled)
+        return;
     if ((event.key === 'Enter' || event.key === ' ') && !open) {
-      event.preventDefault();
-      openMenu();
-      return;
+        event.preventDefault();
+        openMenu();
+        return;
     }
     if (event.key === 'ArrowDown') {
-      event.preventDefault();
-      if (!open) openMenu();
-      else moveActive(1);
-      return;
+        event.preventDefault();
+        if (!open)
+            openMenu();
+        else
+            moveActive(1);
+        return;
     }
     if (event.key === 'ArrowUp') {
-      event.preventDefault();
-      if (!open) openMenu(true);
-      else moveActive(-1);
-      return;
+        event.preventDefault();
+        if (!open)
+            openMenu(true);
+        else
+            moveActive(-1);
+        return;
     }
     if ((event.key === 'Backspace' || event.key === 'Delete') && selectedIds.length > 0) {
-      clearSelection(event);
+        clearSelection(event);
     }
-  }
-
-  function handleFilterInput(event: Event): void {
-    query = (event.currentTarget as HTMLInputElement).value;
+}
+function handleFilterInput(event) {
+    query = event.currentTarget.value;
     activeIndex = firstEnabledIndex(visibleItems);
-  }
-
-  function handleFilterKeydown(event: KeyboardEvent): void {
-    if (event.isComposing) return;
-    if (event.key === ' ') return;
-    if (event.key === 'Home' || event.key === 'End') return;
+}
+function handleFilterKeydown(event) {
+    if (event.isComposing)
+        return;
+    if (event.key === ' ')
+        return;
+    if (event.key === 'Home' || event.key === 'End')
+        return;
     handleListNavigationKeydown(event);
-  }
-
-  function resetToInitialValue(event: Event): void {
-    if (resetSyncTimeout !== undefined) clearTimeout(resetSyncTimeout);
+}
+function resetToInitialValue(event) {
+    if (resetSyncTimeout !== undefined)
+        clearTimeout(resetSyncTimeout);
     resetSyncTimeout = setTimeout(() => {
-      resetSyncTimeout = undefined;
-      if (event.defaultPrevented) return;
-      setSelectedIds(initialSelectedIds);
-      open = false;
-      activeIndex = -1;
-      query = '';
+        resetSyncTimeout = undefined;
+        if (event.defaultPrevented)
+            return;
+        setSelectedIds(initialSelectedIds);
+        open = false;
+        activeIndex = -1;
+        query = '';
     }, 0);
-  }
-
-  function handleProxyInvalid(event: Event): void {
+}
+function handleProxyInvalid(event) {
     event.preventDefault();
     nativeError =
-      validityProxyElement?.validationMessage ||
-      (validityProxyElement?.validity.valueMissing ? 'Please select at least one option.' : '');
+        validityProxyElement?.validationMessage ||
+            (validityProxyElement?.validity.valueMissing ? 'Please select at least one option.' : '');
     triggerElement?.focus();
-  }
-
-  $effect(() => {
+}
+$effect(() => {
     const proxy = validityProxyElement;
-    if (!proxy) return;
-    proxy.setCustomValidity(
-      field.required && uniqueSelectedIds.length === 0 ? 'Please select at least one option.' : '',
-    );
-    if (proxy.validationMessage === '') nativeError = '';
-  });
-
-  $effect(() => {
+    if (!proxy)
+        return;
+    proxy.setCustomValidity(field.required && uniqueSelectedIds.length === 0 ? 'Please select at least one option.' : '');
+    if (proxy.validationMessage === '')
+        nativeError = '';
+});
+$effect(() => {
     const proxy = validityProxyElement;
-    if (proxy === null) return;
+    if (proxy === null)
+        return;
     const form = proxy.form;
     form?.addEventListener('reset', resetToInitialValue);
     return () => {
-      form?.removeEventListener('reset', resetToInitialValue);
-      if (resetSyncTimeout !== undefined) {
-        clearTimeout(resetSyncTimeout);
-        resetSyncTimeout = undefined;
-      }
+        form?.removeEventListener('reset', resetToInitialValue);
+        if (resetSyncTimeout !== undefined) {
+            clearTimeout(resetSyncTimeout);
+            resetSyncTimeout = undefined;
+        }
     };
-  });
-
-  $effect(() => {
-    if (!open) return;
-    if (
-      activeIndex < 0 ||
-      activeIndex >= visibleItems.length ||
-      visibleItems[activeIndex]?.disabled
-    ) {
-      activeIndex = firstEnabledIndex(visibleItems);
+});
+$effect(() => {
+    if (!open)
+        return;
+    if (activeIndex < 0 ||
+        activeIndex >= visibleItems.length ||
+        visibleItems[activeIndex]?.disabled) {
+        activeIndex = firstEnabledIndex(visibleItems);
     }
-  });
-
-  $effect(() => {
-    if (!open) return;
-
-    const handlePointerDown = (event: MouseEvent): void => {
-      const target = event.target as Node | null;
-      if (target && controlElement?.contains(target)) return;
-      if (target && panelElement?.contains(target)) return;
-      closeMenu(false);
+});
+$effect(() => {
+    if (!open)
+        return;
+    const handlePointerDown = (event) => {
+        const target = event.target;
+        if (target && controlElement?.contains(target))
+            return;
+        if (target && panelElement?.contains(target))
+            return;
+        closeMenu(false);
     };
-
-    const handleFocusIn = (event: FocusEvent): void => {
-      const target = event.target as Node | null;
-      if (target && controlElement?.contains(target)) return;
-      if (target && panelElement?.contains(target)) return;
-      closeMenu(false);
+    const handleFocusIn = (event) => {
+        const target = event.target;
+        if (target && controlElement?.contains(target))
+            return;
+        if (target && panelElement?.contains(target))
+            return;
+        closeMenu(false);
     };
-
-    const releaseEscape = pushEscapeHandler((event?: KeyboardEvent) => {
-      if (event?.key === 'Escape') {
-        event?.preventDefault();
-        closeMenu();
-      }
+    const releaseEscape = pushEscapeHandler((event) => {
+        if (event?.key === 'Escape') {
+            event?.preventDefault();
+            closeMenu();
+        }
     });
-
     document.addEventListener('mousedown', handlePointerDown, true);
     document.addEventListener('focusin', handleFocusIn, true);
     return () => {
-      releaseEscape();
-      document.removeEventListener('mousedown', handlePointerDown, true);
-      document.removeEventListener('focusin', handleFocusIn, true);
+        releaseEscape();
+        document.removeEventListener('mousedown', handlePointerDown, true);
+        document.removeEventListener('focusin', handleFocusIn, true);
     };
-  });
-
-  $effect(() => {
-    if (!open || activeIndex < 0) return;
+});
+$effect(() => {
+    if (!open || activeIndex < 0)
+        return;
     const activeOption = document.getElementById(`${id}-option-${activeIndex}`);
     activeOption?.scrollIntoView?.({ block: 'nearest' });
-  });
+});
 </script>
 
 <div class={classNames('cinder-multi-select', className)}>

package/src/components/multi-select/multi-select.variables.json

@@ -0,0 +1 @@
+[]

package/src/components/multi-select/multi-select.variables.ts

@@ -0,0 +1,3 @@
+const variables: readonly string[] = [];
+
+export default variables;