svelte-5-select 1.0.2 → 2.1.0

package/dist/no-styles/Select.svelte.d.ts

@@ -0,0 +1,38 @@
+import type { ItemLike, SelectProps, SelectRow } from '../types.js';
+import type { SelectItem } from '../types.js';
+declare function $$render<Item extends ItemLike = SelectItem, Multiple extends boolean = false>(): {
+    props: SelectProps<Item, Multiple>;
+    exports: {
+        getFilteredItems: () => SelectRow<Item>[];
+        reset: () => void;
+    };
+    bindings: "loading" | "value" | "hoverItemIndex" | "listOpen" | "filterText" | "items" | "justValue" | "focused" | "container" | "input";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<Item extends ItemLike = SelectItem, Multiple extends boolean = false> {
+    props(): ReturnType<typeof $$render<Item, Multiple>>['props'];
+    events(): ReturnType<typeof $$render<Item, Multiple>>['events'];
+    slots(): ReturnType<typeof $$render<Item, Multiple>>['slots'];
+    bindings(): "loading" | "value" | "hoverItemIndex" | "listOpen" | "filterText" | "items" | "justValue" | "focused" | "container" | "input";
+    exports(): {
+        getFilteredItems: () => SelectRow<Item>[];
+        reset: () => void;
+    };
+}
+interface $$IsomorphicComponent {
+    new <Item extends ItemLike = SelectItem, Multiple extends boolean = false>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<Item, Multiple>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<Item, Multiple>['props']>, ReturnType<__sveltets_Render<Item, Multiple>['events']>, ReturnType<__sveltets_Render<Item, Multiple>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<Item, Multiple>['bindings']>;
+    } & ReturnType<__sveltets_Render<Item, Multiple>['exports']>;
+    <Item extends ItemLike = SelectItem, Multiple extends boolean = false>(internal: unknown, props: ReturnType<__sveltets_Render<Item, Multiple>['props']> & {}): ReturnType<__sveltets_Render<Item, Multiple>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any, any>['bindings']>;
+}
+/**
+ * A select/autocomplete/typeahead control: a WAI-ARIA combobox with a floating
+ * listbox popup. Generic over your item type; supports multi-select, async
+ * loading (`loadOptions`), grouping (`groupBy`), and snippet-based customization.
+ * Bind `value` (and optionally `justValue`, `filterText`, `listOpen`, `focused`).
+ */
+declare const Select: $$IsomorphicComponent;
+type Select<Item extends ItemLike = SelectItem, Multiple extends boolean = false> = InstanceType<typeof Select<Item, Multiple>>;
+export default Select;

package/dist/select-state.svelte.d.ts

@@ -0,0 +1,15 @@
+import type { ItemLike, SelectItem, SelectState } from './types.js';
+/**
+ * The prop-backed part of the store: Select.svelte supplies live getter/setter
+ * accessors over its `$props()` bindings and derived values, so reads stay
+ * reactive and writes flow back into the bound props.
+ */
+export type SelectStateProps<Item extends ItemLike = SelectItem> = Omit<SelectState<Item>, 'activeValue' | 'isScrolling' | 'clearState' | 'prevValue' | 'prevFilterText' | 'prevMultiple' | 'suppressValueHoverSnap' | 'userNavigatedSinceOpen'>;
+/**
+ * Builds the single shared state object passed to every composable (in place of
+ * the former per-composable getState()/setter bundles). Internal shared state
+ * lives here; prop-backed fields are forwarded to the accessors from Select.svelte.
+ * Per-field access means a read tracks only that one signal, so composables no
+ * longer create blanket reactive dependencies on all state at once.
+ */
+export declare function createSelectState<Item extends ItemLike = SelectItem>(props: SelectStateProps<Item>): SelectState<Item>;

package/dist/select-state.svelte.js

@@ -0,0 +1,161 @@
+/**
+ * Builds the single shared state object passed to every composable (in place of
+ * the former per-composable getState()/setter bundles). Internal shared state
+ * lives here; prop-backed fields are forwarded to the accessors from Select.svelte.
+ * Per-field access means a read tracks only that one signal, so composables no
+ * longer create blanket reactive dependencies on all state at once.
+ */
+export function createSelectState(props) {
+    let activeValue = $state(undefined);
+    let isScrolling = $state(false);
+    let clearState = $state(false);
+    // Comparison scratch fields, only read inside untrack()ed code — deliberately non-reactive.
+    // prevValue is seeded with the initial value so mount does not dispatch onValueChange;
+    // prevFilterText is seeded so an initial filterText does not open the list (and
+    // steal focus through the list-open effect) on mount.
+    let prevValue = props.value;
+    let prevFilterText = props.filterText;
+    let prevMultiple = undefined;
+    let suppressValueHoverSnap = false;
+    let userNavigatedSinceOpen = false;
+    return {
+        get value() {
+            return props.value;
+        },
+        set value(v) {
+            props.value = v;
+        },
+        get items() {
+            return props.items;
+        },
+        set items(v) {
+            props.items = v;
+        },
+        get filterText() {
+            return props.filterText;
+        },
+        set filterText(v) {
+            props.filterText = v;
+        },
+        get justValue() {
+            return props.justValue;
+        },
+        set justValue(v) {
+            props.justValue = v;
+        },
+        get listOpen() {
+            return props.listOpen;
+        },
+        set listOpen(v) {
+            props.listOpen = v;
+        },
+        get loading() {
+            return props.loading;
+        },
+        set loading(v) {
+            props.loading = v;
+        },
+        get focused() {
+            return props.focused;
+        },
+        set focused(v) {
+            props.focused = v;
+        },
+        get hoverItemIndex() {
+            return props.hoverItemIndex;
+        },
+        set hoverItemIndex(v) {
+            props.hoverItemIndex = v;
+        },
+        get multiple() {
+            return props.multiple;
+        },
+        get itemId() {
+            return props.itemId;
+        },
+        get label() {
+            return props.label;
+        },
+        get searchable() {
+            return props.searchable;
+        },
+        get disabled() {
+            return props.disabled;
+        },
+        get useJustValue() {
+            return props.useJustValue;
+        },
+        get closeListOnChange() {
+            return props.closeListOnChange;
+        },
+        get debounceWait() {
+            return props.debounceWait;
+        },
+        get groupBy() {
+            return props.groupBy;
+        },
+        get loadOptions() {
+            return props.loadOptions;
+        },
+        get loadOptionsDeps() {
+            return props.loadOptionsDeps;
+        },
+        get filteredItems() {
+            return props.filteredItems;
+        },
+        get normalizedValue() {
+            return props.normalizedValue;
+        },
+        get hasValue() {
+            return props.hasValue;
+        },
+        get activeValue() {
+            return activeValue;
+        },
+        set activeValue(v) {
+            activeValue = v;
+        },
+        get isScrolling() {
+            return isScrolling;
+        },
+        set isScrolling(v) {
+            isScrolling = v;
+        },
+        get clearState() {
+            return clearState;
+        },
+        set clearState(v) {
+            clearState = v;
+        },
+        get prevValue() {
+            return prevValue;
+        },
+        set prevValue(v) {
+            prevValue = v;
+        },
+        get prevFilterText() {
+            return prevFilterText;
+        },
+        set prevFilterText(v) {
+            prevFilterText = v;
+        },
+        get prevMultiple() {
+            return prevMultiple;
+        },
+        set prevMultiple(v) {
+            prevMultiple = v;
+        },
+        get suppressValueHoverSnap() {
+            return suppressValueHoverSnap;
+        },
+        set suppressValueHoverSnap(v) {
+            suppressValueHoverSnap = v;
+        },
+        get userNavigatedSinceOpen() {
+            return userNavigatedSinceOpen;
+        },
+        set userNavigatedSinceOpen(v) {
+            userNavigatedSinceOpen = v;
+        },
+    };
+}

package/dist/styles/default.css

@@ -1,71 +1,10 @@
 .svelte-select {
-    /* deprecating camelCase custom props in favour of kebab-case for v5 */
-    --borderRadius: var(--border-radius);
-    --clearSelectColor: var(--clear-select-color);
-    --clearSelectWidth: var(--clear-select-width);
-    --disabledBackground: var(--disabled-background);
-    --disabledBorderColor: var(--disabled-border-color);
-    --disabledColor: var(--disabled-color);
-    --disabledPlaceholderColor: var(--disabled-placeholder-color);
-    --disabledPlaceholderOpacity: var(--disabled-placeholder-opacity);
-    --errorBackground: var(--error-background);
-    --errorBorder: var(--error-border);
-    --groupItemPaddingLeft: var(--group-item-padding-left);
-    --groupTitleColor: var(--group-title-color);
-    --groupTitleFontSize: var(--group-title-font-size);
-    --groupTitleFontWeight: var(--group-title-font-weight);
-    --groupTitlePadding: var(--group-title-padding);
-    --groupTitleTextTransform: var(--group-title-text-transform);
-    --groupTitleBorderColor: var(--group-title-border-color);
-    --groupTitleBorderWidth: var(--group-title-border-width);
-    --groupTitleBorderStyle: var(--group-title-border-style);
-    --indicatorColor: var(--chevron-color);
-    --indicatorHeight: var(--chevron-height);
-    --indicatorWidth: var(--chevron-width);
-    --inputColor: var(--input-color);
-    --inputLeft: var(--input-left);
-    --inputLetterSpacing: var(--input-letter-spacing);
-    --inputMargin: var(--input-margin);
-    --inputPadding: var(--input-padding);
-    --itemActiveBackground: var(--item-active-background);
-    --itemColor: var(--item-color);
-    --itemFirstBorderRadius: var(--item-first-border-radius);
-    --itemHoverBG: var(--item-hover-bg);
-    --itemHoverColor: var(--item-hover-color);
-    --itemIsActiveBG: var(--item-is-active-bg);
-    --itemIsActiveColor: var(--item-is-active-color);
-    --itemIsNotSelectableColor: var(--item-is-not-selectable-color);
-    --itemPadding: var(--item-padding);
-    --listBackground: var(--list-background);
-    --listBorder: var(--list-border);
-    --listBorderRadius: var(--list-border-radius);
-    --listEmptyColor: var(--list-empty-color);
-    --listEmptyPadding: var(--list-empty-padding);
-    --listEmptyTextAlign: var(--list-empty-text-align);
-    --listMaxHeight: var(--list-max-height);
-    --listPosition: var(--list-position);
-    --listShadow: var(--list-shadow);
-    --listZIndex: var(--list-z-index);
-    --multiItemBG: var(--multi-item-bg);
-    --multiItemBorderRadius: var(--multi-item-border-radius);
-    --multiItemDisabledHoverBg: var(--multi-item-disabled-hover-bg);
-    --multiItemDisabledHoverColor: var(--multi-item-disabled-hover-color);
-    --multiItemHeight: var(--multi-item-height);
-    --multiItemMargin: var(--multi-item-margin);
-    --multiItemPadding: var(--multi-item-padding);
-    --multiSelectInputMargin: var(--multi-select-input-margin);
-    --multiSelectInputPadding: var(--multi-select-input-padding);
-    --multiSelectPadding: var(--multi-select-padding);
-    --placeholderColor: var(--placeholder-color);
-    --placeholderOpacity: var(--placeholder-opacity);
-    --selectedItemPadding: var(--selected-item-padding);
-    --spinnerColor: var(--spinner-color);
-    --spinnerHeight: var(--spinner-height);
-    --spinnerWidth: var(--spinner-width);
-
     --internal-padding: 0 0 0 16px;
 
-    border: var(--border, 1px solid #d8dbdf);
+    /* #858a93 is 3.47:1 on the default #fff background. The old #d8dbdf was 1.39:1 —
+       the border is what identifies the control's boundary, so it needs 3:1
+       (WCAG 1.4.11 Non-text Contrast). Override --border to restyle. */
+    border: var(--border, 1px solid #858a93);
     border-radius: var(--border-radius, 6px);
     min-height: var(--height, 42px);
     position: relative;
@@ -84,7 +23,9 @@
 }
 
 .svelte-select:hover {
-    border: var(--border-hover, 1px solid #b2b8bf);
+    /* Darker than --border so hover stays a visible change, and 4.91:1 on #fff
+       (the old #b2b8bf was 2.00:1) */
+    border: var(--border-hover, 1px solid #67727d);
 }
 
 .value-container {
@@ -136,7 +77,7 @@ input {
 }
 
 input::placeholder {
-    color: var(--placeholder-color, #78848f);
+    color: var(--placeholder-color, #67727d);
     opacity: var(--placeholder-opacity, 1);
 }
 
@@ -147,6 +88,10 @@ input:focus {
 .svelte-select.focused {
     border: var(--border-focused, 1px solid #006fe8);
     border-radius: var(--border-radius-focused, var(--border-radius, 6px));
+    /* A focus ring in addition to the border colour change: the input's own
+       outline is suppressed, so relying on the 1px border alone was a
+       colour-only cue (WCAG 2.4.7/2.4.11) that vanished if --border was overridden. */
+    box-shadow: var(--focused-box-shadow, 0 0 0 2px rgba(0, 111, 232, 0.4));
 }
 
 .disabled {
@@ -203,7 +148,7 @@ input:focus {
     flex-shrink: 0;
 }
 
-.clear-select:focus {
+.clear-select:focus-visible {
     outline: var(--clear-select-focus-outline, 1px solid #006fe8);
 }
 
@@ -283,12 +228,33 @@ input:focus {
 }
 
 .multi-item-clear {
+    all: unset;
     display: flex;
     align-items: center;
     justify-content: center;
+    cursor: pointer;
+    /* The button stretches to the chip's height (25px); without a width floor
+       it shrinks to the 20px icon, under the 24px activation-target minimum
+       (WCAG 2.2 2.5.8) */
+    min-width: var(--multi-item-clear-min-width, 24px);
     --clear-icon-color: var(--multi-item-clear-icon-color, #000);
 }
 
+.multi-item-clear:focus-visible {
+    outline: var(--multi-item-clear-focus-outline, 1px solid #006fe8);
+}
+
+/* With multiFullItemClearable the whole chip is a real tab stop (role="button",
+   tabindex="0"). .multi-item sets `outline` unconditionally, and an author outline
+   beats the UA's :focus-visible ring by cascade origin, so without this rule a
+   keyboard-focused chip looked identical to an unfocused one (WCAG 2.4.7 Focus
+   Visible). Distinct from .multi-item.active below, which is the arrow-key tag
+   cursor, not DOM focus. */
+.multi-item:focus-visible {
+    outline: var(--multi-item-focus-outline, 2px solid #006fe8);
+    outline-offset: -1px;
+}
+
 .multi-item.active {
     outline: var(--multi-item-active-outline, 1px solid #006fe8);
 }
@@ -329,7 +295,7 @@ input:focus {
 .empty {
     text-align: var(--list-empty-text-align, center);
     padding: var(--list-empty-padding, 20px 0);
-    color: var(--list-empty-color, #78848f);
+    color: var(--list-empty-color, #67727d);
 }
 
 .item {
@@ -355,7 +321,7 @@ input:focus {
 }
 
 .item.active {
-    background: var(--item-is-active-bg, #007aff);
+    background: var(--item-is-active-bg, #006fe8);
     color: var(--item-is-active-color, #fff);
 }
 
@@ -363,9 +329,28 @@ input:focus {
     border-radius: var(--item-first-border-radius, 4px 4px 0 0);
 }
 
+/* Mirror of .item.first: without it the last item's hover/selection background
+   (and the keyboard-cursor outline) square off against the list's rounded
+   bottom corners */
+.item.last {
+    border-radius: var(--item-last-border-radius, 0 0 4px 4px);
+}
+
+/* A single-option list is both first and last: round all corners (the two
+   shorthand variables above cannot compose, so this matches their defaults) */
+.item.first.last {
+    border-radius: 4px;
+}
+
 .item.hover:not(.active) {
     background: var(--item-hover-bg, #e7f2ff);
     color: var(--item-hover-color, inherit);
+    /* The background alone is ~1.13:1 against the default #fff list — a
+       colour-only cue for the keyboard cursor (WCAG 1.4.11 Non-text Contrast).
+       #006fe8 is 4.5:1 on #fff and ~4.1:1 on the hover background; set
+       --item-hover-outline to `none` to opt out. */
+    outline: var(--item-hover-outline, 2px solid #006fe8);
+    outline-offset: -2px;
 }
 
 .item.not-selectable,
@@ -374,6 +359,22 @@ input:focus {
 .item.not-selectable:active {
     color: var(--item-is-not-selectable-color, #999);
     background: transparent;
+    /* Not actionable, so it must not show the keyboard-cursor outline either */
+    outline: none;
+}
+
+/* Group titles are informative text, not disabled controls, so WCAG 1.4.3's
+   inactive-component exemption does not apply to them: the not-selectable
+   dimming above (#999 = 2.84:1) must not reach a header. Keep them at the
+   group-title color (default #000 = 21:1 on white). The hover variant must
+   win over `.item.hover.item.not-selectable` too: the first frame parks the
+   keyboard cursor on index 0 before the keep-hover effect moves it off a
+   header, and without it that frame paints #999 which then *animates* back
+   through `transition: all` — mid-transition greys fail contrast when
+   sampled (the CI-only axe flake). */
+.item.list-group-title.not-selectable,
+.item.hover.item.list-group-title.not-selectable {
+    color: var(--group-title-color, #000000);
 }
 
 .required {
@@ -384,4 +385,63 @@ input:focus {
     left: 0;
     bottom: 0;
     right: 0;
-}
+}
+
+@media (prefers-reduced-motion: reduce) {
+    .item {
+        transition: none;
+    }
+}
+
+@media (forced-colors: active) {
+    /* box-shadow is dropped in forced-colors mode, so the focus ring above is
+       invisible there — restore a real outline using a system colour. */
+    .svelte-select.focused {
+        outline: 2px solid Highlight;
+        outline-offset: 1px;
+    }
+
+    /* Custom background colours are also flattened, so distinguish the selected
+       option (filled) from the option under the keyboard cursor (outlined). */
+    .item.active {
+        background: Highlight;
+        color: HighlightText;
+    }
+
+    .item.hover:not(.active) {
+        outline: 2px solid Highlight;
+        outline-offset: -2px;
+    }
+
+    /* The chip's focus ring is an author colour, which is flattened here */
+    .multi-item:focus-visible {
+        outline: 2px solid Highlight;
+    }
+
+    /* Every chip carries a 1px outline and the arrow-key tag cursor differs
+       only by outline colour — flattened to the same system colour here, the
+       Backspace target vanished. Width + style survive the forced palette. */
+    .multi-item.active {
+        outline: 2px dashed Highlight;
+        outline-offset: -2px;
+    }
+
+    /* The error state is conveyed only by an author border colour, which is
+       flattened to the standard border — border width + style survive the
+       forced palette, so a double border keeps the state visible. */
+    .svelte-select.error {
+        border: 3px double CanvasText;
+    }
+
+    /* Disabled is aria-disabled + readonly, not :disabled, so the UA never
+       applies its own GrayText treatment — do it explicitly. */
+    .disabled,
+    .disabled input,
+    .disabled input::placeholder {
+        color: GrayText;
+    }
+
+    .disabled {
+        border-color: GrayText;
+    }
+}