@irina_grigoreva/accessible-vue-search-select 1.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,274 @@
+# Accessible Vue Search Select
+
+![Vue](https://img.shields.io/badge/Vue-3.5+-42b883)
+![TypeScript](https://img.shields.io/badge/TypeScript-Ready-blue)
+![Accessibility](https://img.shields.io/badge/a11y-ARIA%20combobox-green)
+![Tests](https://img.shields.io/badge/tests-vitest-yellow)
+
+A reusable and accessible Vue 3 combobox/listbox component built with TypeScript.
+
+![Accessible Vue Search Select demo](./docs/demo-screenshot.svg)
+
+## Features
+
+- Vue 3.5+ component built with `<script setup lang="ts">`
+- Accessible searchable combobox/listbox pattern
+- `v-model` support for objects and primitive values via `emitValue`
+- Teleported dropdown with optional inline listbox mode
+- Loading, empty, disabled, clearable, and error states
+- Light and dark mode support via CSS custom properties
+- Custom option and selected-value slots
+- Flexible `labelKey`, `valueKey`, and `searchKeys` mapping
+- Configurable `inputId`, `listboxId`, and ARIA labels
+- Stable ARIA relationships:
+  - `aria-controls`
+  - `aria-expanded`
+  - `aria-activedescendant`
+  - `aria-selected`
+- Keyboard navigation support
+- Vitest + Vue Test Utils coverage
+- Library build with exported TypeScript types
+
+## Demo
+
+<video src="./demo/demo.mp4" controls autoplay loop muted playsinline></video>
+
+Run the local demo:
+
+```bash
+npm install
+npm run dev
+```
+
+Then open:
+
+```text
+http://127.0.0.1:5173/
+```
+
+The demo source is in [examples/SelectSimpleSearchDemo.vue](./examples/SelectSimpleSearchDemo.vue).
+
+## Installation
+
+```bash
+npm install accessible-vue-search-select
+```
+
+Import the component and styles:
+
+```ts
+import { SelectSimpleSearch } from "accessible-vue-search-select";
+import "accessible-vue-search-select/dist/accessible-vue-search-select.css";
+```
+
+For local development in this repository:
+
+```bash
+npm install
+npm run typecheck
+npm run test
+npm run build
+```
+
+## Basic Usage
+
+```vue
+<script setup lang="ts">
+import { ref } from "vue";
+import { SelectSimpleSearch, type SelectOption } from "accessible-vue-search-select";
+import "accessible-vue-search-select/dist/accessible-vue-search-select.css";
+
+const selected = ref<SelectOption | null>(null);
+
+const states = [
+  { label: "California", value: "ca" },
+  { label: "New York", value: "ny" },
+  { label: "Texas", value: "tx" },
+];
+</script>
+
+<template>
+  <SelectSimpleSearch
+    v-model="selected"
+    label="State"
+    placeholder="Choose a state"
+    :options="states"
+    label-key="label"
+    value-key="value"
+  />
+</template>
+```
+
+Primitive `v-model` values:
+
+```vue
+<script setup lang="ts">
+import { ref } from "vue";
+
+const selectedState = ref<string | number | null>(null);
+</script>
+
+<template>
+  <SelectSimpleSearch
+    v-model="selectedState"
+    emit-value
+    label="State"
+    :options="states"
+  />
+</template>
+```
+
+Facility-style objects are supported by default:
+
+```ts
+const facilities = [
+  {
+    id: 1,
+    slug: "seattle-storage",
+    public_title: "",
+    address: {
+      city: "Seattle",
+      full_address: "8 Pine Street, Seattle, WA",
+    },
+  },
+];
+```
+
+This renders the selected label as `Seattle - Storage Facility`.
+
+## Props
+
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `options` | `SelectOption[]` | `[]` | Options to render. |
+| `modelValue` | `SelectOption \| string \| number \| null` | `null` | Selected value for `v-model`. |
+| `placeholder` | `string` | `"Select an option"` | Input placeholder. |
+| `type` | `string` | `"default"` | Optional compatibility class. |
+| `inlineListbox` | `boolean` | `false` | Render listbox inline instead of teleporting to `body`. |
+| `closeOnBlur` | `boolean` | `false` | Close after input blur. |
+| `label` | `string` | `""` | Visible input label. |
+| `name` | `string` | `"select-simple-search"` | Input name. |
+| `inputId` | `string` | generated | Input id. |
+| `listboxId` | `string` | generated | Listbox id used by `aria-controls` and option ids. |
+| `ariaLabel` | `string` | `"Search options"` | Accessible label when no visible label is provided. |
+| `labelKey` | `string` | `""` | Dot-path used for option labels. |
+| `valueKey` | `string` | `""` | Dot-path used for option values. |
+| `searchKeys` | `string[]` | common label/facility fields | Dot-path fields searched by the input. |
+| `disabled` | `boolean` | `false` | Disable the component. |
+| `clearable` | `boolean` | `true` | Show clear button when selected. |
+| `clearLabel` | `string` | `"Clear selection"` | Clear button accessible label. |
+| `noResultsText` | `string` | `"No results found"` | Empty state text. |
+| `loading` | `boolean` | `false` | Show loading state. |
+| `loadingText` | `string` | `"Loading options..."` | Loading state text. |
+| `maxHeight` | `string` | `"18rem"` | Dropdown max height. |
+| `dropdownClass` | `string` | `""` | Extra dropdown class. |
+| `optionClass` | `string` | `""` | Extra option class. |
+| `hasError` | `boolean` | `false` | Apply error styling and `aria-invalid`. |
+| `facilityFallbackLabel` | `string` | `"Storage Facility"` | Fallback title for legacy facility options without `public_title`. |
+| `emitValue` | `boolean` | `false` | Emit option value instead of the whole option object. |
+| `sortOptions` | `boolean` | `false` | Sort filtered options alphabetically by display label. |
+
+## Emits
+
+| Event | Payload | Description |
+| --- | --- | --- |
+| `update:modelValue` | `SelectOption \| string \| number \| null` | Emitted for `v-model`. |
+| `change` | `SelectOption \| string \| number \| null` | Emitted when selection changes. |
+| `blur` | none | Emitted after input blur handling. |
+| `clear` | none | Emitted when selection is cleared. |
+| `open` | none | Emitted when listbox opens. |
+| `close` | none | Emitted when listbox closes. |
+
+## Slots
+
+| Slot | Props | Description |
+| --- | --- | --- |
+| `option` | `{ option, selected, active }` | Custom option rendering. |
+| `selected` | `{ option }` | Custom selected-value rendering. |
+| `no-results` | none | Custom empty state. |
+| `loading` | none | Custom loading state. |
+
+Example:
+
+```vue
+<SelectSimpleSearch v-model="facility" :options="facilities">
+  <template #option="{ option, active, selected }">
+    <div :class="{ active, selected }">
+      <strong>{{ option.address?.city }}</strong>
+      <span>{{ option.public_title || "Storage Facility" }}</span>
+      <small>{{ option.address?.full_address }}</small>
+    </div>
+  </template>
+</SelectSimpleSearch>
+```
+
+## Accessibility
+
+The component keeps DOM focus on the input and uses `aria-activedescendant` for active-option tracking. The input exposes `role="combobox"`, `aria-expanded`, `aria-controls`, `aria-autocomplete="list"`, and `aria-haspopup="listbox"`.
+
+When open, the listbox exists in the DOM with `role="listbox"`. Each option has `role="option"`, a stable `id`, and `aria-selected="true"` or `aria-selected="false"`.
+
+For best screen reader support, pass either a visible `label` or an `ariaLabel`.
+
+## Dark Mode
+
+The component supports dark mode automatically through `prefers-color-scheme`. You can also force a theme by setting `data-theme` on any parent:
+
+```html
+<div data-theme="dark">
+  <SelectSimpleSearch />
+</div>
+```
+
+Theme colors are exposed as CSS custom properties on `.select-simple`, so design systems can override them:
+
+```css
+.select-simple {
+  --select-simple-bg: #ffffff;
+  --select-simple-text: #111827;
+  --select-simple-border: #9ca3af;
+  --select-simple-option-active-bg: #eff6ff;
+  --select-simple-option-selected-bg: #dbeafe;
+}
+```
+
+## Keyboard Support
+
+| Key | Behavior |
+| --- | --- |
+| `ArrowDown` | Opens the listbox or moves to the next enabled option. |
+| `ArrowUp` | Opens the listbox or moves to the previous enabled option. |
+| `Enter` | Selects the active option while the listbox is open. |
+| `Escape` | Closes the listbox and returns focus to the input. |
+| `Backspace` / `Delete` | Clears the selected value when the selected label is shown. |
+| `Home` / `End` | Preserve native text-input caret behavior. |
+
+## License
+
+MIT
+
+## Publishing
+
+Do not publish before running the full package verification:
+
+```bash
+npm run lint
+npm run typecheck
+npm run test
+npm run build
+npm pack --dry-run
+```
+
+Publish manually when the package contents look correct:
+
+```bash
+npm login
+npm publish --access public
+```
+
+The package is configured to publish only:
+
+- `dist`
+- `README.md`
+- `LICENSE`
+- `package.json`

package/dist/accessible-vue-search-select.css

@@ -0,0 +1 @@
+.select-simple[data-v-58b7f39e],.select-simple-options[data-v-58b7f39e]{--select-simple-bg: #fff;--select-simple-text: #111827;--select-simple-muted: #4b5563;--select-simple-border: #9ca3af;--select-simple-border-subtle: #d1d5db;--select-simple-focus-border: #2563eb;--select-simple-focus-ring: #bfdbfe;--select-simple-clear-hover-bg: #f3f4f6;--select-simple-option-active-bg: #eff6ff;--select-simple-option-selected-bg: #dbeafe;--select-simple-option-hover-bg: #f8fafc;--select-simple-error: #dc2626;--select-simple-shadow: 0 10px 24px rgb(15 23 42 / 14%);position:relative;width:100%;color:var(--select-simple-text)}@media(prefers-color-scheme:dark){.select-simple[data-v-58b7f39e],.select-simple-options[data-v-58b7f39e]{--select-simple-bg: #111827;--select-simple-text: #f9fafb;--select-simple-muted: #cbd5e1;--select-simple-border: #475569;--select-simple-border-subtle: #334155;--select-simple-focus-border: #60a5fa;--select-simple-focus-ring: #1e3a8a;--select-simple-clear-hover-bg: #1f2937;--select-simple-option-active-bg: #1d4ed8;--select-simple-option-selected-bg: #1e40af;--select-simple-option-hover-bg: #1f2937;--select-simple-error: #f87171;--select-simple-shadow: 0 14px 32px rgb(0 0 0 / 34%)}}[data-theme=light]{--select-simple-bg: #fff;--select-simple-text: #111827;--select-simple-muted: #4b5563;--select-simple-border: #9ca3af;--select-simple-border-subtle: #d1d5db;--select-simple-focus-border: #2563eb;--select-simple-focus-ring: #bfdbfe;--select-simple-clear-hover-bg: #f3f4f6;--select-simple-option-active-bg: #eff6ff;--select-simple-option-selected-bg: #dbeafe;--select-simple-option-hover-bg: #f8fafc;--select-simple-error: #dc2626;--select-simple-shadow: 0 10px 24px rgb(15 23 42 / 14%)}[data-theme=dark]{--select-simple-bg: #111827;--select-simple-text: #f9fafb;--select-simple-muted: #cbd5e1;--select-simple-border: #475569;--select-simple-border-subtle: #334155;--select-simple-focus-border: #60a5fa;--select-simple-focus-ring: #1e3a8a;--select-simple-clear-hover-bg: #1f2937;--select-simple-option-active-bg: #1d4ed8;--select-simple-option-selected-bg: #1e40af;--select-simple-option-hover-bg: #1f2937;--select-simple-error: #f87171;--select-simple-shadow: 0 14px 32px rgb(0 0 0 / 34%)}.select-simple-label[data-v-58b7f39e]{display:block;margin-bottom:.375rem;font-weight:600}.select-simple-control[data-v-58b7f39e]{position:relative}.select-simple.has-selected-slot .select-simple-control[data-v-58b7f39e]>:not(input,button){position:absolute;top:50%;left:.75rem;z-index:1;max-width:calc(100% - 3rem);overflow:hidden;pointer-events:none;text-overflow:ellipsis;white-space:nowrap;transform:translateY(-50%)}.select-simple.has-selected-slot:focus-within .select-simple-control[data-v-58b7f39e]>:not(input,button){display:none}.select-simple-input[data-v-58b7f39e]{box-sizing:border-box;width:100%;min-height:2.5rem;padding:.5rem 2.25rem .5rem .75rem;border:1px solid var(--select-simple-border);border-radius:6px;background-color:var(--select-simple-bg);color:var(--select-simple-text);font:inherit}.select-simple.has-selected-slot .select-simple-input[data-v-58b7f39e]{color:transparent}.select-simple.has-selected-slot .select-simple-input[data-v-58b7f39e]:focus{color:var(--select-simple-text)}.select-simple-input[data-v-58b7f39e]:focus{border-color:var(--select-simple-focus-border);outline:2px solid var(--select-simple-focus-ring);outline-offset:1px}.select-simple.disabled[data-v-58b7f39e]{opacity:.65}.select-simple.has-error .select-simple-input[data-v-58b7f39e]{border-color:var(--select-simple-error)}.select-simple-clear[data-v-58b7f39e]{position:absolute;top:50%;right:.5rem;display:inline-flex;width:1.75rem;height:1.75rem;align-items:center;justify-content:center;padding:0;border:0;border-radius:4px;background:transparent;color:var(--select-simple-muted);cursor:pointer;transform:translateY(-50%)}.select-simple-clear[data-v-58b7f39e]:hover{background:var(--select-simple-clear-hover-bg);color:var(--select-simple-text)}.select-simple-overlay[data-v-58b7f39e]{position:fixed;top:0;right:0;bottom:0;left:0;z-index:999;pointer-events:none}.select-simple-options[data-v-58b7f39e]{position:fixed;z-index:1000;box-sizing:border-box;overflow-y:auto;border:1px solid var(--select-simple-border-subtle);border-radius:6px;background-color:var(--select-simple-bg);box-shadow:var(--select-simple-shadow);color:var(--select-simple-text)}[data-v-58b7f39e]::-webkit-scrollbar{width:6px}[data-v-58b7f39e]::-webkit-scrollbar-thumb{background:#0003;border-radius:999px}.select-simple-options-inline[data-v-58b7f39e]{position:relative;z-index:1;width:100%;margin-top:.25rem;box-shadow:none}.select-simple-option[data-v-58b7f39e],.select-simple-status[data-v-58b7f39e]{padding:.625rem .75rem}.select-simple-option[data-v-58b7f39e]{background-color:var(--select-simple-bg);cursor:pointer}.select-simple-option[data-v-58b7f39e]:hover{background-color:var(--select-simple-option-hover-bg)}.select-simple-option.active[data-v-58b7f39e]{background-color:var(--select-simple-option-active-bg)}.select-simple-option.selected[data-v-58b7f39e]{background-color:var(--select-simple-option-selected-bg)}.select-simple-option.disabled[data-v-58b7f39e]{color:var(--select-simple-muted);cursor:not-allowed}.select-simple-option-text[data-v-58b7f39e]{display:grid;gap:.125rem}.select-simple-option-description[data-v-58b7f39e]{color:var(--select-simple-muted);font-size:.875rem}.select-simple-status[data-v-58b7f39e]{color:var(--select-simple-muted)}.sr-only[data-v-58b7f39e]{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

package/dist/accessible-vue-search-select.js

@@ -0,0 +1,468 @@
+import { defineComponent as Oe, useId as De, computed as m, ref as f, toRefs as Re, watch as fe, onMounted as Te, onUnmounted as Ee, openBlock as c, createElementBlock as v, normalizeClass as J, unref as o, toDisplayString as _, createCommentVNode as x, createElementVNode as h, renderSlot as M, withDirectives as Ke, vModelText as Me, withModifiers as ve, createBlock as ze, Teleport as Ae, normalizeStyle as Fe, createTextVNode as pe, Fragment as Ne, renderList as je, nextTick as z } from "vue";
+const He = ["for"], Pe = ["id", "name", "disabled", "placeholder", "aria-label", "aria-expanded", "aria-controls", "aria-activedescendant", "aria-invalid", "aria-busy"], Ue = ["aria-label"], qe = {
+  class: "sr-only",
+  "aria-live": "polite",
+  "aria-atomic": "true"
+}, We = {
+  key: 0,
+  class: "select-simple-overlay"
+}, Ze = ["id"], Ge = {
+  key: 0,
+  class: "select-simple-status"
+}, Je = ["id", "aria-selected", "aria-disabled", "onClick"], Qe = { class: "select-simple-option-text" }, Xe = {
+  key: 0,
+  class: "select-simple-option-description"
+}, Ye = {
+  key: 2,
+  class: "select-simple-status"
+}, el = /* @__PURE__ */ Oe({
+  __name: "SelectSimpleSearch",
+  props: {
+    options: { default: () => [] },
+    modelValue: { default: null },
+    placeholder: { default: "Select an option" },
+    type: { default: "default" },
+    inlineListbox: { type: Boolean, default: !1 },
+    closeOnBlur: { type: Boolean, default: !1 },
+    label: { default: "" },
+    name: { default: "select-simple-search" },
+    inputId: { default: "" },
+    listboxId: { default: "" },
+    ariaLabel: { default: "Search options" },
+    labelKey: { default: "" },
+    valueKey: { default: "" },
+    searchKeys: { default: () => [
+      "label",
+      "name",
+      "public_title",
+      "address.city",
+      "address.full_address",
+      "slug",
+      "value",
+      "id"
+    ] },
+    disabled: { type: Boolean, default: !1 },
+    clearable: { type: Boolean, default: !0 },
+    clearLabel: { default: "Clear selection" },
+    noResultsText: { default: "No results found" },
+    loading: { type: Boolean, default: !1 },
+    loadingText: { default: "Loading options..." },
+    maxHeight: { default: "18rem" },
+    dropdownClass: { default: "" },
+    optionClass: { default: "" },
+    hasError: { type: Boolean, default: !1 },
+    facilityFallbackLabel: { default: "Storage Facility" },
+    emitValue: { type: Boolean, default: !1 },
+    sortOptions: { type: Boolean, default: !1 }
+  },
+  emits: ["update:modelValue", "change", "blur", "clear", "open", "close"],
+  setup(V, { emit: A }) {
+    const a = V, d = A, S = De().replace(/[^A-Za-z0-9_-]/g, "-"), F = m(() => a.listboxId || `select-simple-listbox-${S}`), Q = m(() => a.inputId || `select-simple-input-${S}`), X = f(null), N = f(null), $ = f(null), B = f(null), s = f(!1), p = f(""), i = f(-1), j = f(""), Y = f({}), I = f(!1), {
+      ariaLabel: be,
+      clearLabel: me,
+      clearable: ge,
+      disabled: H,
+      dropdownClass: ye,
+      hasError: ee,
+      inlineListbox: P,
+      label: U,
+      loading: le,
+      loadingText: he,
+      name: we,
+      noResultsText: ke,
+      optionClass: _e,
+      placeholder: xe,
+      type: te
+    } = Re(a), Le = m(() => {
+      const e = { maxHeight: a.maxHeight };
+      return a.inlineListbox ? e : { ...e, ...Y.value };
+    }), L = m(() => {
+      const e = a.modelValue;
+      if (e == null)
+        return null;
+      if (oe(e)) {
+        const l = b(e);
+        return a.options.find((t) => D(b(t), l)) ?? e;
+      }
+      return a.options.find((l) => D(b(l), e)) ?? null;
+    }), Ce = m(() => L.value ? g(L.value) : ""), O = m(() => a.modelValue !== null && a.modelValue !== void 0), ae = m({
+      get() {
+        return p.value || Ce.value;
+      },
+      set(e) {
+        p.value = e;
+      }
+    }), u = m(() => {
+      const e = p.value.trim().toLowerCase(), l = e ? a.options.filter(
+        (t) => a.searchKeys.some((n) => W(q(t, n)).toLowerCase().includes(e))
+      ) : a.options;
+      return a.sortOptions ? [...l].sort((t, n) => {
+        const r = g(t).toLowerCase(), k = g(n).toLowerCase();
+        return r.localeCompare(k);
+      }) : [...l];
+    }), ne = m(() => {
+      if (!(a.loading || !s.value || i.value < 0 || i.value >= u.value.length))
+        return se(i.value);
+    });
+    function oe(e) {
+      return typeof e == "object" && e !== null;
+    }
+    function q(e, l) {
+      return l.split(".").reduce((t, n) => {
+        if (t && typeof t == "object" && n in t)
+          return t[n];
+      }, e);
+    }
+    function W(e) {
+      return e == null ? "" : String(e);
+    }
+    function b(e) {
+      if (a.valueKey) {
+        const l = q(e, a.valueKey);
+        if (typeof l == "string" || typeof l == "number")
+          return l;
+      }
+      return e.slug ?? e.value ?? e.id;
+    }
+    function g(e) {
+      var l, t, n;
+      if (a.labelKey) {
+        const r = W(q(e, a.labelKey)).trim();
+        if (r)
+          return r;
+      }
+      if (e.label)
+        return e.label;
+      if (e.name)
+        return e.name;
+      if ((l = e.address) != null && l.city || e.public_title) {
+        const r = (n = (t = e.address) == null ? void 0 : t.city) == null ? void 0 : n.trim(), k = e.public_title && e.public_title.length > 1 ? e.public_title : a.facilityFallbackLabel;
+        return [r, k].filter(Boolean).join(" - ");
+      }
+      return W(b(e));
+    }
+    function ie(e) {
+      var l;
+      return ((l = e.address) == null ? void 0 : l.full_address) ?? "";
+    }
+    function Ve(e, l) {
+      const t = b(e);
+      return t !== void 0 ? String(t) : `${g(e)}-${l}`;
+    }
+    function se(e) {
+      return `${F.value}-option-${e}`;
+    }
+    function D(e, l) {
+      return e === void 0 || l === void 0 ? !1 : String(e) === String(l);
+    }
+    function Z(e) {
+      const l = a.modelValue;
+      if (l == null)
+        return !1;
+      if (oe(l)) {
+        const t = b(l), n = b(e);
+        return D(t, n) || l === e;
+      }
+      return D(b(e), l);
+    }
+    function y(e) {
+      j.value = "", z(() => {
+        j.value = e;
+      });
+    }
+    function G(e) {
+      return `${e} ${e === 1 ? "option" : "options"} available.`;
+    }
+    function R() {
+      if (a.inlineListbox || !N.value)
+        return;
+      const e = N.value.getBoundingClientRect();
+      Y.value = {
+        left: `${e.left}px`,
+        top: `${e.bottom + 4}px`,
+        width: `${e.width}px`
+      };
+    }
+    async function w() {
+      a.disabled || s.value || (I.value = !0, R(), s.value = !0, d("open"), await z(), R(), C(a.loading ? -1 : E()), y(a.loading ? a.loadingText : G(u.value.length)), window.setTimeout(() => {
+        I.value = !1;
+      }, 0));
+    }
+    function T() {
+      s.value && (s.value = !1, i.value = -1, p.value = "", d("close"));
+    }
+    function E() {
+      return u.value.findIndex((e) => !e.disabled);
+    }
+    function ue(e, l) {
+      const t = u.value;
+      if (!t.length)
+        return -1;
+      let n = e;
+      for (let r = 0; r < t.length; r += 1)
+        if (n = (n + l + t.length) % t.length, !t[n].disabled)
+          return n;
+      return -1;
+    }
+    function C(e) {
+      if (i.value = e, e < 0)
+        return;
+      const l = u.value[e];
+      if (!l) {
+        i.value = -1;
+        return;
+      }
+      y(`${g(l)}, ${e + 1} of ${u.value.length}.`), Se();
+    }
+    function Se() {
+      z(() => {
+        var t;
+        const e = ne.value;
+        if (!e || !B.value)
+          return;
+        const l = B.value.querySelector(`#${e}`);
+        (t = l == null ? void 0 : l.scrollIntoView) == null || t.call(l, { block: "nearest" });
+      });
+    }
+    async function $e() {
+      if (!a.disabled) {
+        if (O.value && p.value.trim() && (d("update:modelValue", null), d("change", null)), !s.value) {
+          await w();
+          return;
+        }
+        await z(), R(), C(E()), y(G(u.value.length));
+      }
+    }
+    function Be(e) {
+      var l;
+      if (!a.disabled) {
+        if (e.key === "Escape") {
+          e.preventDefault(), T(), (l = $.value) == null || l.focus();
+          return;
+        }
+        if ((e.key === "Backspace" || e.key === "Delete") && O.value && !p.value) {
+          e.preventDefault(), de();
+          return;
+        }
+        if (e.key === "ArrowDown") {
+          if (e.preventDefault(), !s.value) {
+            w();
+            return;
+          }
+          if (a.loading)
+            return;
+          C(ue(i.value, 1));
+          return;
+        }
+        if (e.key === "ArrowUp") {
+          if (e.preventDefault(), !s.value) {
+            w();
+            return;
+          }
+          if (a.loading)
+            return;
+          C(ue(i.value < 0 ? u.value.length : i.value, -1));
+          return;
+        }
+        if (e.key === "Enter") {
+          if (!s.value || a.loading)
+            return;
+          e.preventDefault();
+          const t = u.value[i.value];
+          t && !t.disabled && re(t);
+        }
+      }
+    }
+    function re(e) {
+      var t;
+      if (a.disabled || e.disabled)
+        return;
+      const l = a.emitValue ? b(e) ?? e : e;
+      d("update:modelValue", l), d("change", l), y(`${g(e)} selected.`), T(), (t = $.value) == null || t.focus();
+    }
+    function de() {
+      var e;
+      a.disabled || (d("update:modelValue", null), d("change", null), d("clear"), p.value = "", y("Selection cleared."), w(), (e = $.value) == null || e.focus());
+    }
+    function Ie() {
+      window.setTimeout(() => {
+        a.closeOnBlur && T(), d("blur");
+      }, 100);
+    }
+    function ce(e) {
+      var r, k;
+      const l = e.target;
+      if (!l || !s.value)
+        return;
+      if (I.value) {
+        I.value = !1;
+        return;
+      }
+      const t = (r = X.value) == null ? void 0 : r.contains(l), n = (k = B.value) == null ? void 0 : k.contains(l);
+      !t && !n && T();
+    }
+    function K() {
+      s.value && R();
+    }
+    return fe(
+      () => a.loading,
+      (e) => {
+        s.value && (i.value = e ? -1 : E(), y(e ? a.loadingText : G(u.value.length)));
+      }
+    ), fe(u, (e) => {
+      var l;
+      if (!(!s.value || a.loading)) {
+        if (!e.length) {
+          i.value = -1, y(a.noResultsText);
+          return;
+        }
+        (i.value < 0 || i.value >= e.length || (l = e[i.value]) != null && l.disabled) && C(E());
+      }
+    }), Te(() => {
+      document.addEventListener("click", ce), window.addEventListener("resize", K), window.addEventListener("scroll", K, !0);
+    }), Ee(() => {
+      document.removeEventListener("click", ce), window.removeEventListener("resize", K), window.removeEventListener("scroll", K, !0);
+    }), (e, l) => (c(), v("div", {
+      ref_key: "rootRef",
+      ref: X,
+      class: J(["select-simple select-simple-search", {
+        selected: O.value,
+        disabled: o(H),
+        "has-error": o(ee),
+        open: s.value,
+        "has-selected-slot": !!e.$slots.selected && L.value && !p.value
+      }])
+    }, [
+      o(U) ? (c(), v("label", {
+        key: 0,
+        for: Q.value,
+        class: "select-simple-label"
+      }, _(o(U)), 9, He)) : x("", !0),
+      h("div", {
+        ref_key: "controlRef",
+        ref: N,
+        class: "select-simple-control"
+      }, [
+        L.value && !p.value ? M(e.$slots, "selected", {
+          key: 0,
+          option: L.value
+        }, void 0, !0) : x("", !0),
+        Ke(h("input", {
+          id: Q.value,
+          ref_key: "inputRef",
+          ref: $,
+          "onUpdate:modelValue": l[0] || (l[0] = (t) => ae.value = t),
+          type: "text",
+          class: "select-simple-input",
+          role: "combobox",
+          name: o(we),
+          disabled: o(H),
+          placeholder: o(xe),
+          "aria-label": o(U) ? void 0 : o(be),
+          "aria-expanded": s.value,
+          "aria-controls": F.value,
+          "aria-activedescendant": ne.value,
+          "aria-invalid": o(ee) || void 0,
+          "aria-haspopup": "listbox",
+          "aria-autocomplete": "list",
+          "aria-busy": o(le) || void 0,
+          autocomplete: "off",
+          onFocus: w,
+          onClick: w,
+          onInput: $e,
+          onKeydown: Be,
+          onBlur: Ie
+        }, null, 40, Pe), [
+          [Me, ae.value]
+        ]),
+        o(ge) && O.value && !o(H) ? (c(), v("button", {
+          key: 1,
+          type: "button",
+          class: "select-simple-clear",
+          "aria-label": o(me),
+          onClick: ve(de, ["stop"])
+        }, [...l[2] || (l[2] = [
+          h("svg", {
+            width: "16",
+            height: "16",
+            viewBox: "0 0 16 16",
+            "aria-hidden": "true",
+            focusable: "false"
+          }, [
+            h("path", {
+              d: "M12 4L4 12M4 4l8 8",
+              fill: "none",
+              stroke: "currentColor",
+              "stroke-linecap": "round",
+              "stroke-width": "2"
+            })
+          ], -1)
+        ])], 8, Ue)) : x("", !0)
+      ], 512),
+      h("div", qe, _(j.value), 1),
+      (c(), ze(Ae, {
+        to: "body",
+        disabled: o(P)
+      }, [
+        s.value && !o(P) ? (c(), v("div", We)) : x("", !0),
+        s.value ? (c(), v("div", {
+          key: 1,
+          id: F.value,
+          ref_key: "listboxRef",
+          ref: B,
+          role: "listbox",
+          class: J(["select-simple-options", [o(te), o(ye), { "select-simple-options-inline": o(P) }]]),
+          style: Fe(Le.value)
+        }, [
+          o(le) ? (c(), v("div", Ge, [
+            M(e.$slots, "loading", {}, () => [
+              pe(_(o(he)), 1)
+            ], !0)
+          ])) : u.value.length ? (c(!0), v(Ne, { key: 1 }, je(u.value, (t, n) => (c(), v("div", {
+            id: se(n),
+            key: Ve(t, n),
+            role: "option",
+            class: J(["select-simple-option", [
+              o(_e),
+              {
+                selected: Z(t),
+                active: i.value === n,
+                disabled: t.disabled,
+                highlighted: o(te) === "billing-state" && i.value === n
+              }
+            ]]),
+            "aria-selected": Z(t),
+            "aria-disabled": t.disabled || void 0,
+            onMousedown: l[1] || (l[1] = ve(() => {
+            }, ["prevent"])),
+            onClick: (r) => re(t)
+          }, [
+            M(e.$slots, "option", {
+              option: t,
+              selected: Z(t),
+              active: i.value === n
+            }, () => [
+              h("span", Qe, [
+                h("strong", null, _(g(t)), 1),
+                ie(t) ? (c(), v("span", Xe, _(ie(t)), 1)) : x("", !0)
+              ])
+            ], !0)
+          ], 42, Je))), 128)) : (c(), v("div", Ye, [
+            M(e.$slots, "no-results", {}, () => [
+              pe(_(o(ke)), 1)
+            ], !0)
+          ]))
+        ], 14, Ze)) : x("", !0)
+      ], 8, ["disabled"]))
+    ], 2));
+  }
+}), ll = (V, A) => {
+  const a = V.__vccOpts || V;
+  for (const [d, S] of A)
+    a[d] = S;
+  return a;
+}, al = /* @__PURE__ */ ll(el, [["__scopeId", "data-v-58b7f39e"]]);
+export {
+  al as SelectSimpleSearch,
+  al as default
+};

package/dist/accessible-vue-search-select.umd.cjs

@@ -0,0 +1 @@
+(function(p,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],e):(p=typeof globalThis<"u"?globalThis:p||self,e(p.AccessibleVueSearchSelect={},p.Vue))})(this,(function(p,e){"use strict";const ae=["for"],oe=["id","name","disabled","placeholder","aria-label","aria-expanded","aria-controls","aria-activedescendant","aria-invalid","aria-busy"],re=["aria-label"],ie={class:"sr-only","aria-live":"polite","aria-atomic":"true"},se={key:0,class:"select-simple-overlay"},ce=["id"],de={key:0,class:"select-simple-status"},ue=["id","aria-selected","aria-disabled","onClick"],fe={class:"select-simple-option-text"},pe={key:0,class:"select-simple-option-description"},me={key:2,class:"select-simple-status"},F=((w,I)=>{const a=w.__vccOpts||w;for(const[d,v]of I)a[d]=v;return a})(e.defineComponent({__name:"SelectSimpleSearch",props:{options:{default:()=>[]},modelValue:{default:null},placeholder:{default:"Select an option"},type:{default:"default"},inlineListbox:{type:Boolean,default:!1},closeOnBlur:{type:Boolean,default:!1},label:{default:""},name:{default:"select-simple-search"},inputId:{default:""},listboxId:{default:""},ariaLabel:{default:"Search options"},labelKey:{default:""},valueKey:{default:""},searchKeys:{default:()=>["label","name","public_title","address.city","address.full_address","slug","value","id"]},disabled:{type:Boolean,default:!1},clearable:{type:Boolean,default:!0},clearLabel:{default:"Clear selection"},noResultsText:{default:"No results found"},loading:{type:Boolean,default:!1},loadingText:{default:"Loading options..."},maxHeight:{default:"18rem"},dropdownClass:{default:""},optionClass:{default:""},hasError:{type:Boolean,default:!1},facilityFallbackLabel:{default:"Storage Facility"},emitValue:{type:Boolean,default:!1},sortOptions:{type:Boolean,default:!1}},emits:["update:modelValue","change","blur","clear","open","close"],setup(w,{emit:I}){const a=w,d=I,v=e.useId().replace(/[^A-Za-z0-9_-]/g,"-"),D=e.computed(()=>a.listboxId||`select-simple-listbox-${v}`),P=e.computed(()=>a.inputId||`select-simple-input-${v}`),H=e.ref(null),O=e.ref(null),_=e.ref(null),B=e.ref(null),i=e.ref(!1),u=e.ref(""),r=e.ref(-1),T=e.ref(""),U=e.ref({}),x=e.ref(!1),{ariaLabel:be,clearLabel:ge,clearable:ye,disabled:N,dropdownClass:he,hasError:q,inlineListbox:R,label:K,loading:W,loadingText:ke,name:we,noResultsText:ve,optionClass:_e,placeholder:Be,type:Z}=e.toRefs(a),xe=e.computed(()=>{const t={maxHeight:a.maxHeight};return a.inlineListbox?t:{...t,...U.value}}),h=e.computed(()=>{const t=a.modelValue;if(t==null)return null;if(Q(t)){const l=f(t);return a.options.find(n=>V(f(n),l))??t}return a.options.find(l=>V(f(l),t))??null}),Se=e.computed(()=>h.value?m(h.value):""),S=e.computed(()=>a.modelValue!==null&&a.modelValue!==void 0),G=e.computed({get(){return u.value||Se.value},set(t){u.value=t}}),s=e.computed(()=>{const t=u.value.trim().toLowerCase(),l=t?a.options.filter(n=>a.searchKeys.some(o=>z(M(n,o)).toLowerCase().includes(t))):a.options;return a.sortOptions?[...l].sort((n,o)=>{const c=m(n).toLowerCase(),y=m(o).toLowerCase();return c.localeCompare(y)}):[...l]}),J=e.computed(()=>{if(!(a.loading||!i.value||r.value<0||r.value>=s.value.length))return Y(r.value)});function Q(t){return typeof t=="object"&&t!==null}function M(t,l){return l.split(".").reduce((n,o)=>{if(n&&typeof n=="object"&&o in n)return n[o]},t)}function z(t){return t==null?"":String(t)}function f(t){if(a.valueKey){const l=M(t,a.valueKey);if(typeof l=="string"||typeof l=="number")return l}return t.slug??t.value??t.id}function m(t){var l,n,o;if(a.labelKey){const c=z(M(t,a.labelKey)).trim();if(c)return c}if(t.label)return t.label;if(t.name)return t.name;if((l=t.address)!=null&&l.city||t.public_title){const c=(o=(n=t.address)==null?void 0:n.city)==null?void 0:o.trim(),y=t.public_title&&t.public_title.length>1?t.public_title:a.facilityFallbackLabel;return[c,y].filter(Boolean).join(" - ")}return z(f(t))}function X(t){var l;return((l=t.address)==null?void 0:l.full_address)??""}function Ve(t,l){const n=f(t);return n!==void 0?String(n):`${m(t)}-${l}`}function Y(t){return`${D.value}-option-${t}`}function V(t,l){return t===void 0||l===void 0?!1:String(t)===String(l)}function A(t){const l=a.modelValue;if(l==null)return!1;if(Q(l)){const n=f(l),o=f(t);return V(n,o)||l===t}return V(f(t),l)}function b(t){T.value="",e.nextTick(()=>{T.value=t})}function j(t){return`${t} ${t===1?"option":"options"} available.`}function C(){if(a.inlineListbox||!O.value)return;const t=O.value.getBoundingClientRect();U.value={left:`${t.left}px`,top:`${t.bottom+4}px`,width:`${t.width}px`}}async function g(){a.disabled||i.value||(x.value=!0,C(),i.value=!0,d("open"),await e.nextTick(),C(),k(a.loading?-1:E()),b(a.loading?a.loadingText:j(s.value.length)),window.setTimeout(()=>{x.value=!1},0))}function L(){i.value&&(i.value=!1,r.value=-1,u.value="",d("close"))}function E(){return s.value.findIndex(t=>!t.disabled)}function ee(t,l){const n=s.value;if(!n.length)return-1;let o=t;for(let c=0;c<n.length;c+=1)if(o=(o+l+n.length)%n.length,!n[o].disabled)return o;return-1}function k(t){if(r.value=t,t<0)return;const l=s.value[t];if(!l){r.value=-1;return}b(`${m(l)}, ${t+1} of ${s.value.length}.`),Ce()}function Ce(){e.nextTick(()=>{var n;const t=J.value;if(!t||!B.value)return;const l=B.value.querySelector(`#${t}`);(n=l==null?void 0:l.scrollIntoView)==null||n.call(l,{block:"nearest"})})}async function Le(){if(!a.disabled){if(S.value&&u.value.trim()&&(d("update:modelValue",null),d("change",null)),!i.value){await g();return}await e.nextTick(),C(),k(E()),b(j(s.value.length))}}function Ee(t){var l;if(!a.disabled){if(t.key==="Escape"){t.preventDefault(),L(),(l=_.value)==null||l.focus();return}if((t.key==="Backspace"||t.key==="Delete")&&S.value&&!u.value){t.preventDefault(),le();return}if(t.key==="ArrowDown"){if(t.preventDefault(),!i.value){g();return}if(a.loading)return;k(ee(r.value,1));return}if(t.key==="ArrowUp"){if(t.preventDefault(),!i.value){g();return}if(a.loading)return;k(ee(r.value<0?s.value.length:r.value,-1));return}if(t.key==="Enter"){if(!i.value||a.loading)return;t.preventDefault();const n=s.value[r.value];n&&!n.disabled&&te(n)}}}function te(t){var n;if(a.disabled||t.disabled)return;const l=a.emitValue?f(t)??t:t;d("update:modelValue",l),d("change",l),b(`${m(t)} selected.`),L(),(n=_.value)==null||n.focus()}function le(){var t;a.disabled||(d("update:modelValue",null),d("change",null),d("clear"),u.value="",b("Selection cleared."),g(),(t=_.value)==null||t.focus())}function $e(){window.setTimeout(()=>{a.closeOnBlur&&L(),d("blur")},100)}function ne(t){var c,y;const l=t.target;if(!l||!i.value)return;if(x.value){x.value=!1;return}const n=(c=H.value)==null?void 0:c.contains(l),o=(y=B.value)==null?void 0:y.contains(l);!n&&!o&&L()}function $(){i.value&&C()}return e.watch(()=>a.loading,t=>{i.value&&(r.value=t?-1:E(),b(t?a.loadingText:j(s.value.length)))}),e.watch(s,t=>{var l;if(!(!i.value||a.loading)){if(!t.length){r.value=-1,b(a.noResultsText);return}(r.value<0||r.value>=t.length||(l=t[r.value])!=null&&l.disabled)&&k(E())}}),e.onMounted(()=>{document.addEventListener("click",ne),window.addEventListener("resize",$),window.addEventListener("scroll",$,!0)}),e.onUnmounted(()=>{document.removeEventListener("click",ne),window.removeEventListener("resize",$),window.removeEventListener("scroll",$,!0)}),(t,l)=>(e.openBlock(),e.createElementBlock("div",{ref_key:"rootRef",ref:H,class:e.normalizeClass(["select-simple select-simple-search",{selected:S.value,disabled:e.unref(N),"has-error":e.unref(q),open:i.value,"has-selected-slot":!!t.$slots.selected&&h.value&&!u.value}])},[e.unref(K)?(e.openBlock(),e.createElementBlock("label",{key:0,for:P.value,class:"select-simple-label"},e.toDisplayString(e.unref(K)),9,ae)):e.createCommentVNode("",!0),e.createElementVNode("div",{ref_key:"controlRef",ref:O,class:"select-simple-control"},[h.value&&!u.value?e.renderSlot(t.$slots,"selected",{key:0,option:h.value},void 0,!0):e.createCommentVNode("",!0),e.withDirectives(e.createElementVNode("input",{id:P.value,ref_key:"inputRef",ref:_,"onUpdate:modelValue":l[0]||(l[0]=n=>G.value=n),type:"text",class:"select-simple-input",role:"combobox",name:e.unref(we),disabled:e.unref(N),placeholder:e.unref(Be),"aria-label":e.unref(K)?void 0:e.unref(be),"aria-expanded":i.value,"aria-controls":D.value,"aria-activedescendant":J.value,"aria-invalid":e.unref(q)||void 0,"aria-haspopup":"listbox","aria-autocomplete":"list","aria-busy":e.unref(W)||void 0,autocomplete:"off",onFocus:g,onClick:g,onInput:Le,onKeydown:Ee,onBlur:$e},null,40,oe),[[e.vModelText,G.value]]),e.unref(ye)&&S.value&&!e.unref(N)?(e.openBlock(),e.createElementBlock("button",{key:1,type:"button",class:"select-simple-clear","aria-label":e.unref(ge),onClick:e.withModifiers(le,["stop"])},[...l[2]||(l[2]=[e.createElementVNode("svg",{width:"16",height:"16",viewBox:"0 0 16 16","aria-hidden":"true",focusable:"false"},[e.createElementVNode("path",{d:"M12 4L4 12M4 4l8 8",fill:"none",stroke:"currentColor","stroke-linecap":"round","stroke-width":"2"})],-1)])],8,re)):e.createCommentVNode("",!0)],512),e.createElementVNode("div",ie,e.toDisplayString(T.value),1),(e.openBlock(),e.createBlock(e.Teleport,{to:"body",disabled:e.unref(R)},[i.value&&!e.unref(R)?(e.openBlock(),e.createElementBlock("div",se)):e.createCommentVNode("",!0),i.value?(e.openBlock(),e.createElementBlock("div",{key:1,id:D.value,ref_key:"listboxRef",ref:B,role:"listbox",class:e.normalizeClass(["select-simple-options",[e.unref(Z),e.unref(he),{"select-simple-options-inline":e.unref(R)}]]),style:e.normalizeStyle(xe.value)},[e.unref(W)?(e.openBlock(),e.createElementBlock("div",de,[e.renderSlot(t.$slots,"loading",{},()=>[e.createTextVNode(e.toDisplayString(e.unref(ke)),1)],!0)])):s.value.length?(e.openBlock(!0),e.createElementBlock(e.Fragment,{key:1},e.renderList(s.value,(n,o)=>(e.openBlock(),e.createElementBlock("div",{id:Y(o),key:Ve(n,o),role:"option",class:e.normalizeClass(["select-simple-option",[e.unref(_e),{selected:A(n),active:r.value===o,disabled:n.disabled,highlighted:e.unref(Z)==="billing-state"&&r.value===o}]]),"aria-selected":A(n),"aria-disabled":n.disabled||void 0,onMousedown:l[1]||(l[1]=e.withModifiers(()=>{},["prevent"])),onClick:c=>te(n)},[e.renderSlot(t.$slots,"option",{option:n,selected:A(n),active:r.value===o},()=>[e.createElementVNode("span",fe,[e.createElementVNode("strong",null,e.toDisplayString(m(n)),1),X(n)?(e.openBlock(),e.createElementBlock("span",pe,e.toDisplayString(X(n)),1)):e.createCommentVNode("",!0)])],!0)],42,ue))),128)):(e.openBlock(),e.createElementBlock("div",me,[e.renderSlot(t.$slots,"no-results",{},()=>[e.createTextVNode(e.toDisplayString(e.unref(ve)),1)],!0)]))],14,ce)):e.createCommentVNode("",!0)],8,["disabled"]))],2))}}),[["__scopeId","data-v-58b7f39e"]]);p.SelectSimpleSearch=F,p.default=F,Object.defineProperties(p,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})}));

package/dist/components/SelectSimpleSearch.vue.d.ts

@@ -0,0 +1,79 @@
+import { SelectOption, SelectSimpleSearchProps } from '../types';
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: {
+        selected?(_: {
+            option: SelectOption;
+        }): any;
+        loading?(_: {}): any;
+        option?(_: {
+            option: SelectOption;
+            selected: boolean;
+            active: boolean;
+        }): any;
+        'no-results'?(_: {}): any;
+    };
+    refs: {
+        rootRef: HTMLDivElement;
+        controlRef: HTMLDivElement;
+        inputRef: HTMLInputElement;
+        listboxRef: HTMLDivElement;
+    };
+    rootEl: HTMLDivElement;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import('vue').DefineComponent<SelectSimpleSearchProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
+    "update:modelValue": (value: import('..').ModelValue) => any;
+    change: (value: import('..').ModelValue) => any;
+    blur: () => any;
+    clear: () => any;
+    open: () => any;
+    close: () => any;
+}, string, import('vue').PublicProps, Readonly<SelectSimpleSearchProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: import('..').ModelValue) => any) | undefined;
+    onChange?: ((value: import('..').ModelValue) => any) | undefined;
+    onBlur?: (() => any) | undefined;
+    onClear?: (() => any) | undefined;
+    onOpen?: (() => any) | undefined;
+    onClose?: (() => any) | undefined;
+}>, {
+    label: string;
+    name: string;
+    disabled: boolean;
+    options: SelectOption[];
+    modelValue: import('..').ModelValue;
+    placeholder: string;
+    type: string;
+    inlineListbox: boolean;
+    closeOnBlur: boolean;
+    inputId: string;
+    listboxId: string;
+    ariaLabel: string;
+    labelKey: string;
+    valueKey: string;
+    searchKeys: string[];
+    clearable: boolean;
+    clearLabel: string;
+    noResultsText: string;
+    loading: boolean;
+    loadingText: string;
+    maxHeight: string;
+    dropdownClass: string;
+    optionClass: string;
+    hasError: boolean;
+    facilityFallbackLabel: string;
+    emitValue: boolean;
+    sortOptions: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
+    rootRef: HTMLDivElement;
+    controlRef: HTMLDivElement;
+    inputRef: HTMLInputElement;
+    listboxRef: HTMLDivElement;
+}, HTMLDivElement>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/index.d.ts

@@ -0,0 +1,4 @@
+import { default as SelectSimpleSearch } from './components/SelectSimpleSearch.vue';
+export { SelectSimpleSearch };
+export default SelectSimpleSearch;
+export type { ModelValue, SelectOption, SelectPrimitive, SelectSimpleSearchEmits, SelectSimpleSearchProps, } from './types';

package/dist/types.d.ts

@@ -0,0 +1,53 @@
+export type SelectPrimitive = string | number;
+export interface SelectOption {
+    id?: SelectPrimitive;
+    value?: SelectPrimitive;
+    slug?: string;
+    label?: string;
+    name?: string;
+    disabled?: boolean;
+    address?: {
+        city?: string;
+        full_address?: string;
+    };
+    public_title?: string;
+    [key: string]: unknown;
+}
+export type ModelValue = SelectOption | SelectPrimitive | null;
+export interface SelectSimpleSearchProps {
+    options?: SelectOption[];
+    modelValue?: ModelValue;
+    placeholder?: string;
+    type?: string;
+    inlineListbox?: boolean;
+    closeOnBlur?: boolean;
+    label?: string;
+    name?: string;
+    inputId?: string;
+    listboxId?: string;
+    ariaLabel?: string;
+    labelKey?: string;
+    valueKey?: string;
+    searchKeys?: string[];
+    disabled?: boolean;
+    clearable?: boolean;
+    clearLabel?: string;
+    noResultsText?: string;
+    loading?: boolean;
+    loadingText?: string;
+    maxHeight?: string;
+    dropdownClass?: string;
+    optionClass?: string;
+    hasError?: boolean;
+    facilityFallbackLabel?: string;
+    emitValue?: boolean;
+    sortOptions?: boolean;
+}
+export interface SelectSimpleSearchEmits {
+    (event: "update:modelValue", value: ModelValue): void;
+    (event: "change", value: ModelValue): void;
+    (event: "blur"): void;
+    (event: "clear"): void;
+    (event: "open"): void;
+    (event: "close"): void;
+}

package/package.json

@@ -0,0 +1,302 @@
+{
+  "name": "@irina_grigoreva/accessible-vue-search-select",
+  "version": "1.0.0",
+  "description": "Accessible Vue 3 searchable select component with keyboard navigation, ARIA combobox/listbox support, TypeScript, slots, and teleported dropdowns.",
+  "keywords": [
+    "vue",
+    "vue3",
+    "typescript",
+    "accessibility",
+    "a11y",
+    "combobox",
+    "listbox",
+    "select",
+    "searchable-select",
+    "ui-component"
+  ],
+  "homepage": "https://github.com/irina-grigoreva/accessible-vue-search-select#readme",
+  "bugs": {
+    "url": "https://github.com/irina-grigoreva/accessible-vue-search-select/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/irina-grigoreva/accessible-vue-search-select.git"
+  },
+  "license": "MIT",
+  "author": "Irina Grigoreva",
+  "type": "module",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/accessible-vue-search-select.js",
+      "require": "./dist/accessible-vue-search-select.umd.cjs"
+    },
+    "./dist/accessible-vue-search-select.css": "./dist/accessible-vue-search-select.css",
+    "./style.css": "./dist/accessible-vue-search-select.css"
+  },
+  "main": "./dist/accessible-vue-search-select.umd.cjs",
+  "types": "./dist/index.d.ts",
+  "directories": {
+    "doc": "docs",
+    "example": "examples",
+    "test": "tests"
+  },
+  "files": [
+    "dist",
+    "README.md",
+    "LICENSE"
+  ],
+  "scripts": {
+    "build": "vue-tsc --noEmit && vite build",
+    "dev": "vite",
+    "lint": "eslint .",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "typecheck": "vue-tsc --noEmit",
+    "preview": "vite preview",
+    "prepublishOnly": "npm run lint && npm run typecheck && npm run test && npm run build"
+  },
+  "dependencies": {
+    "abbrev": "^2.0.0",
+    "acorn": "^8.16.0",
+    "acorn-jsx": "^5.3.2",
+    "agent-base": "^7.1.4",
+    "ajv": "^6.15.0",
+    "ajv-formats": "^3.0.1",
+    "alien-signals": "^1.0.13",
+    "ansi-regex": "^6.2.2",
+    "ansi-styles": "^6.2.3",
+    "argparse": "^2.0.1",
+    "assertion-error": "^2.0.1",
+    "asynckit": "^0.4.0",
+    "balanced-match": "^1.0.2",
+    "boolbase": "^1.0.0",
+    "brace-expansion": "^2.1.0",
+    "cac": "^6.7.14",
+    "call-bind-apply-helpers": "^1.0.2",
+    "callsites": "^3.1.0",
+    "chai": "^5.3.3",
+    "chalk": "^4.1.2",
+    "check-error": "^2.1.3",
+    "color-convert": "^2.0.1",
+    "color-name": "^1.1.4",
+    "combined-stream": "^1.0.8",
+    "commander": "^10.0.1",
+    "compare-versions": "^6.1.1",
+    "concat-map": "^0.0.1",
+    "confbox": "^0.2.4",
+    "config-chain": "^1.1.13",
+    "cross-spawn": "^7.0.6",
+    "cssesc": "^3.0.0",
+    "cssstyle": "^4.6.0",
+    "csstype": "^3.2.3",
+    "data-urls": "^5.0.0",
+    "de-indent": "^1.0.2",
+    "debug": "^4.4.3",
+    "decimal.js": "^10.6.0",
+    "deep-eql": "^5.0.2",
+    "deep-is": "^0.1.4",
+    "delayed-stream": "^1.0.0",
+    "diff": "^8.0.4",
+    "dunder-proto": "^1.0.1",
+    "eastasianwidth": "^0.2.0",
+    "editorconfig": "^1.0.7",
+    "emoji-regex": "^9.2.2",
+    "entities": "^7.0.1",
+    "es-define-property": "^1.0.1",
+    "es-errors": "^1.3.0",
+    "es-module-lexer": "^1.7.0",
+    "es-object-atoms": "^1.1.1",
+    "es-set-tostringtag": "^2.1.0",
+    "esbuild": "^0.25.12",
+    "escape-string-regexp": "^4.0.0",
+    "eslint-scope": "^8.4.0",
+    "eslint-visitor-keys": "^4.2.1",
+    "espree": "^10.4.0",
+    "esquery": "^1.7.0",
+    "esrecurse": "^4.3.0",
+    "estraverse": "^5.3.0",
+    "estree-walker": "^2.0.2",
+    "esutils": "^2.0.3",
+    "expect-type": "^1.3.0",
+    "exsolve": "^1.0.8",
+    "fast-deep-equal": "^3.1.3",
+    "fast-json-stable-stringify": "^2.1.0",
+    "fast-levenshtein": "^2.0.6",
+    "fast-uri": "^3.1.2",
+    "fdir": "^6.5.0",
+    "file-entry-cache": "^8.0.0",
+    "find-up": "^5.0.0",
+    "flat-cache": "^4.0.1",
+    "flatted": "^3.4.2",
+    "foreground-child": "^3.3.1",
+    "form-data": "^4.0.5",
+    "fs-extra": "^11.3.5",
+    "function-bind": "^1.1.2",
+    "get-intrinsic": "^1.3.0",
+    "get-proto": "^1.0.1",
+    "glob": "^10.5.0",
+    "glob-parent": "^6.0.2",
+    "globals": "^14.0.0",
+    "gopd": "^1.2.0",
+    "graceful-fs": "^4.2.11",
+    "has-flag": "^4.0.0",
+    "has-symbols": "^1.1.0",
+    "has-tostringtag": "^1.0.2",
+    "hasown": "^2.0.3",
+    "he": "^1.2.0",
+    "html-encoding-sniffer": "^4.0.0",
+    "http-proxy-agent": "^7.0.2",
+    "https-proxy-agent": "^7.0.6",
+    "iconv-lite": "^0.6.3",
+    "ignore": "^5.3.2",
+    "import-fresh": "^3.3.1",
+    "import-lazy": "^4.0.0",
+    "imurmurhash": "^0.1.4",
+    "ini": "^1.3.8",
+    "is-core-module": "^2.16.2",
+    "is-extglob": "^2.1.1",
+    "is-fullwidth-code-point": "^3.0.0",
+    "is-glob": "^4.0.3",
+    "is-potential-custom-element-name": "^1.0.1",
+    "isexe": "^2.0.0",
+    "jackspeak": "^3.4.3",
+    "jju": "^1.4.0",
+    "js-beautify": "^1.15.4",
+    "js-cookie": "^3.0.7",
+    "js-tokens": "^9.0.1",
+    "js-yaml": "^4.1.1",
+    "json-buffer": "^3.0.1",
+    "json-schema-traverse": "^0.4.1",
+    "json-stable-stringify-without-jsonify": "^1.0.1",
+    "jsonfile": "^6.2.1",
+    "keyv": "^4.5.4",
+    "kolorist": "^1.8.0",
+    "levn": "^0.4.1",
+    "local-pkg": "^1.1.2",
+    "locate-path": "^6.0.0",
+    "lodash": "^4.18.1",
+    "lodash.merge": "^4.6.2",
+    "loupe": "^3.2.1",
+    "lru-cache": "^10.4.3",
+    "magic-string": "^0.30.21",
+    "math-intrinsics": "^1.1.0",
+    "mime-db": "^1.52.0",
+    "mime-types": "^2.1.35",
+    "minimatch": "^9.0.9",
+    "minipass": "^7.1.3",
+    "mlly": "^1.8.2",
+    "ms": "^2.1.3",
+    "muggle-string": "^0.4.1",
+    "nanoid": "^3.3.12",
+    "natural-compare": "^1.4.0",
+    "nopt": "^7.2.1",
+    "nth-check": "^2.1.1",
+    "nwsapi": "^2.2.23",
+    "optionator": "^0.9.4",
+    "p-limit": "^3.1.0",
+    "p-locate": "^5.0.0",
+    "package-json-from-dist": "^1.0.1",
+    "parent-module": "^1.0.1",
+    "parse5": "^7.3.0",
+    "path-browserify": "^1.0.1",
+    "path-exists": "^4.0.0",
+    "path-key": "^3.1.1",
+    "path-parse": "^1.0.7",
+    "path-scurry": "^1.11.1",
+    "pathe": "^2.0.3",
+    "pathval": "^2.0.1",
+    "picocolors": "^1.1.1",
+    "picomatch": "^4.0.4",
+    "pkg-types": "^2.3.1",
+    "postcss": "^8.5.14",
+    "postcss-selector-parser": "^6.1.2",
+    "prelude-ls": "^1.2.1",
+    "proto-list": "^1.2.4",
+    "punycode": "^2.3.1",
+    "quansync": "^0.2.11",
+    "require-from-string": "^2.0.2",
+    "resolve": "^1.22.12",
+    "resolve-from": "^4.0.0",
+    "rollup": "^4.60.4",
+    "rrweb-cssom": "^0.7.1",
+    "safer-buffer": "^2.1.2",
+    "saxes": "^6.0.0",
+    "semver": "^7.8.0",
+    "shebang-command": "^2.0.0",
+    "shebang-regex": "^3.0.0",
+    "siginfo": "^2.0.0",
+    "signal-exit": "^4.1.0",
+    "source-map": "^0.6.1",
+    "source-map-js": "^1.2.1",
+    "sprintf-js": "^1.0.3",
+    "stackback": "^0.0.2",
+    "std-env": "^3.10.0",
+    "string-argv": "^0.3.2",
+    "string-width": "^5.1.2",
+    "string-width-cjs": "^4.2.3",
+    "strip-ansi": "^7.2.0",
+    "strip-ansi-cjs": "^6.0.1",
+    "strip-json-comments": "^3.1.1",
+    "strip-literal": "^3.1.0",
+    "supports-color": "^7.2.0",
+    "supports-preserve-symlinks-flag": "^1.0.0",
+    "symbol-tree": "^3.2.4",
+    "tinybench": "^2.9.0",
+    "tinyexec": "^0.3.2",
+    "tinyglobby": "^0.2.16",
+    "tinypool": "^1.1.1",
+    "tinyrainbow": "^2.0.0",
+    "tinyspy": "^4.0.4",
+    "tldts": "^6.1.86",
+    "tldts-core": "^6.1.86",
+    "tough-cookie": "^5.1.2",
+    "tr46": "^5.1.1",
+    "ts-api-utils": "^2.5.0",
+    "type-check": "^0.4.0",
+    "type-fest": "^0.20.2",
+    "ufo": "^1.6.4",
+    "undici-types": "^7.24.6",
+    "universalify": "^2.0.1",
+    "uri-js": "^4.4.1",
+    "util-deprecate": "^1.0.2",
+    "vite-node": "^3.2.4",
+    "vscode-uri": "^3.1.0",
+    "vue-component-type-helpers": "^3.3.0",
+    "vue-eslint-parser": "^9.4.3",
+    "w3c-xmlserializer": "^5.0.0",
+    "webidl-conversions": "^7.0.0",
+    "whatwg-encoding": "^3.1.1",
+    "whatwg-mimetype": "^4.0.0",
+    "whatwg-url": "^14.2.0",
+    "which": "^2.0.2",
+    "why-is-node-running": "^2.3.0",
+    "word-wrap": "^1.2.5",
+    "wrap-ansi": "^8.1.0",
+    "wrap-ansi-cjs": "^7.0.0",
+    "ws": "^8.20.1",
+    "xml-name-validator": "^5.0.0",
+    "xmlchars": "^2.2.0",
+    "yocto-queue": "^0.1.0"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.27.0",
+    "@types/node": "^25.9.0",
+    "@vitejs/plugin-vue": "^5.2.4",
+    "@vue/test-utils": "^2.4.6",
+    "eslint": "^9.27.0",
+    "eslint-plugin-vue": "^9.33.0",
+    "jsdom": "^25.0.1",
+    "typescript": "^5.8.3",
+    "typescript-eslint": "^8.32.1",
+    "vite": "^6.3.5",
+    "vite-plugin-dts": "^4.5.4",
+    "vitest": "^3.1.4",
+    "vue": "^3.5.16",
+    "vue-tsc": "^2.2.10"
+  },
+  "peerDependencies": {
+    "vue": "^3.5.0"
+  },
+  "module": "./dist/accessible-vue-search-select.js"
+}