svelte-5-select 1.0.2 → 2.1.0

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,91 @@
 }
 
 .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;
+    }
+
+    /* 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. */
+    .svelte-select.disabled,
+    .svelte-select.disabled input,
+    .svelte-select.disabled input::placeholder {
+        color: GrayText;
+    }
+
+    .svelte-select.disabled {
+        border-color: GrayText;
+    }
 }
 
 .list-item {