svelte-5-select 1.0.2 → 2.0.0

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

@@ -0,0 +1,38 @@
+import type { ItemLike, SelectProps, SelectRow } from '../types';
+import type { SelectItem } from '../types';
+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';
+/**
+ * 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,44 @@ 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;
+    }
+}

package/dist/tailwind.css

@@ -2,16 +2,25 @@
 
 .svelte-select {
     @apply border rounded box-border h-10 relative flex items-center px-4 py-0 bg-white m-0	w-full
-        hover:border-gray-400;
+        hover:border-gray-500;
+    /* gray-500 (~4.8:1 on white), not gray-400 (~2.5:1): preflight defaults the
+       border to currentColor, so a gray-400 hover *lightened* the control's
+       boundary below the 3:1 non-text bar (WCAG 1.4.11) at the moment of
+       interaction — mirrors --border-hover (#67727d) in styles/default.css. */
 }
 
 .svelte-select input {
-    @apply cursor-default border-none text-gray-600 h-10 leading-10 px-4 py-0 bg-transparent text-sm absolute left-0 m-0 w-full 
-        focus:outline-none hover:border-gray-400;
+    @apply cursor-default border-none text-gray-600 h-10 leading-10 px-4 py-0 bg-transparent text-sm absolute left-0 m-0 w-full
+        focus:outline-none
+        placeholder:text-gray-500 placeholder:opacity-100;
+    /* Without an explicit placeholder color, Tailwind v4 preflight's 50%-alpha
+       currentColor ::placeholder applies — ~2.3:1 on white, a WCAG 1.4.3
+       failure on the control's primary prompt. gray-500 mirrors the default
+       theme's #67727d (~4.9:1); the disabled rule below still overrides. */
 }
 
 .svelte-select.focused {
-    @apply border-blue-600;
+    @apply border-blue-600 ring-2 ring-blue-600/40;
 }
 
 .svelte-select.disabled {
@@ -27,11 +36,11 @@
         focus:outline-none;
 }
 
-.svelte-select .icons {
-    @apply absolute flex items-center right-0 translate-y-0 text-gray-200 pointer-events-none top-0 bottom-0;
+.svelte-select .indicators {
+    @apply absolute flex items-center right-0 translate-y-0 text-gray-500 pointer-events-none top-0 bottom-0;
 }
 
-.svelte-select .icons > * {
+.svelte-select .indicators > * {
     @apply transition-colors ease-in-out duration-200;
 }
 
@@ -39,18 +48,20 @@
     @apply pointer-events-auto;
 }
 
-.svelte-select.focused .icons,
+.svelte-select.focused .indicators,
 .svelte-select .chevron:hover,
 .svelte-select .clear-select:hover {
     @apply text-gray-600;
 }
 
 .svelte-select .clear-select {
-    @apply px-2 h-5 text-gray-300 flex-none w-9;
+    /* h-6: 24px minimum in both dimensions (WCAG 2.2 2.5.8 target size) —
+       h-5 left the activation target 20px tall */
+    @apply px-2 h-6 text-gray-500 flex-none w-9;
 }
 
 .svelte-select .chevron {
-    @apply flex pt-0 pr-2 pl-2 border-l-2 w-9 h-5 text-gray-300;
+    @apply flex pt-0 pr-2 pl-2 border-l-2 w-9 h-5 text-gray-500;
 }
 
 .svelte-select.multi {
@@ -69,15 +80,19 @@
     @apply sr-only;
 }
 
-.list {
+.svelte-select-list {
     @apply shadow-md rounded-sm max-h-64 overflow-y-auto bg-white border-none absolute z-10 w-full left-0 right-0;
 }
 
-.list .list-group-title {
+.svelte-select-list.prefloat {
+    @apply opacity-0 pointer-events-none;
+}
+
+.svelte-select-list .list-group-title {
     @apply text-slate-800 cursor-default text-sm font-medium h-10 leading-10 px-5 text-ellipsis whitespace-nowrap uppercase;
 }
 
-.list .empty {
+.svelte-select-list .empty {
     @apply text-center py-5 text-gray-500;
 }
 
@@ -97,16 +112,47 @@
     @apply bg-blue-600 text-white;
 }
 
-.item.not-selectable {
-    @apply text-gray-300;
+/* Disabled options are not actionable, so they must not show the hover/active
+   affordances (background or the keyboard-cursor outline). gray-400 tracks the
+   default theme's #999 (2.84:1 — allowed by WCAG 1.4.3's inactive-component
+   exemption). */
+.item.not-selectable,
+.item.hover.item.not-selectable,
+.item.active.item.not-selectable,
+.item.not-selectable:active {
+    @apply text-gray-400 bg-transparent;
+    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 must not reach a header. Keep them at the group-title color,
+   including during the transient first frame where the keyboard cursor parks
+   on index 0 before the keep-hover effect moves it off a header. (Mirrors
+   styles/default.css — keep the two themes in sync.) */
+.item.list-group-title.not-selectable,
+.item.hover.item.list-group-title.not-selectable {
+    @apply text-slate-800;
 }
 
 .item.first {
     @apply rounded-t-sm;
 }
 
+.item.last {
+    @apply rounded-b-sm;
+}
+
+.item.first.last {
+    @apply rounded-sm;
+}
+
 .item.hover:not(.active) {
     @apply bg-blue-100;
+    /* The background alone is a colour-only cue for the keyboard cursor
+       (WCAG 1.4.11) — blue-600 is >=3:1 on white and on blue-100 */
+    outline: 2px solid #2563eb;
+    outline-offset: -2px;
 }
 
 .multi input {
@@ -114,15 +160,72 @@
 }
 
 .multi-item {
-    @apply bg-gray-100 mt-1 mr-1 border border-gray-200 rounded-sm h-8 leading-8 flex cursor-default pr-1 pl-1 max-w-full items-center mr-1 overflow-hidden text-ellipsis whitespace-nowrap;
+    @apply bg-gray-100 mt-1 mr-1 border border-gray-200 rounded-sm h-8 leading-8 flex cursor-default pr-1 pl-1 max-w-full items-center overflow-hidden text-ellipsis whitespace-nowrap;
 }
 
 .multi-item.disabled {
     @apply hover:bg-gray-300 hover:text-gray-500;
 }
 
+/* Keyboard-focused chip (multiFullItemClearable): explicit ring in the theme
+   accent (mirrors styles/default.css). Distinct from .multi-item.active below,
+   which is the arrow-key tag cursor, not DOM focus. */
+.multi-item:focus-visible {
+    outline: 2px solid #2563eb;
+    outline-offset: -1px;
+}
+
+/* ArrowLeft/ArrowRight park a virtual cursor on a tag before Backspace removes
+   it; without a visible indicator a sighted keyboard user deletes a chip they
+   cannot see targeted (WCAG 1.4.11 non-text contrast: blue-600 is >=3:1 on
+   white and on the gray-100 chip). */
+.multi-item.active {
+    outline: 1px solid #2563eb;
+}
+
 .multi-item-clear {
-    @apply flex items-center justify-center w-5;
+    /* w-6 + self-stretch: a 24x32px activation target (WCAG 2.2 2.5.8) —
+       w-5 alone left the remove button 20x20px */
+    @apply flex items-center justify-center w-6 self-stretch;
+}
+
+@media (prefers-reduced-motion: reduce) {
+    .svelte-select .indicators > * {
+        @apply transition-none;
+    }
+}
+
+@media (forced-colors: active) {
+    /* The ring above uses box-shadow, which forced-colors mode drops; restore a
+       real outline, and distinguish selected (filled) from cursor (outlined). */
+    .svelte-select.focused {
+        outline: 2px solid Highlight;
+        outline-offset: 1px;
+    }
+
+    .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;
+    }
+
+    /* The arrow-key tag cursor (the normal-mode .multi-item.active rule above)
+       differs from an ordinary chip only by an author outline colour, which is
+       flattened here — width + style survive the forced palette, so the
+       Backspace target stays visible. */
+    .multi-item.active {
+        outline: 2px dashed Highlight;
+        outline-offset: -2px;
+    }
 }
 
 .list-item {