@rcarls/rc-select 0.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +70 -0
- package/dist/custom-elements.json +856 -0
- package/dist/demo.css +85 -0
- package/dist/demo.js +40 -0
- package/dist/rc-select-BumY2uQl.js +600 -0
- package/dist/rc-select-BumY2uQl.js.map +1 -0
- package/dist/rc-select-define.js +7 -0
- package/dist/rc-select-define.js.map +1 -0
- package/dist/rc-select.js +5 -0
- package/dist/rc-select.js.map +1 -0
- package/dist/types/packages/rc-select/src/define.d.ts +1 -0
- package/dist/types/packages/rc-select/src/index.d.ts +1 -0
- package/dist/types/packages/rc-select/src/rc-select.d.ts +130 -0
- package/dist/types/packages/rc-select/src/rc-select.styles.d.ts +2 -0
- package/dist/types/packages/rc-select/src/rc-select.test.d.ts +0 -0
- package/package.json +69 -0
package/README.md
ADDED
|
@@ -0,0 +1,70 @@
|
|
|
1
|
+
# `@rcarls/rc-select`
|
|
2
|
+
|
|
3
|
+
A headless select-only ARIA combobox built with Lit 3. The component keeps a
|
|
4
|
+
native slotted `<select>` as the source of truth for form submission while
|
|
5
|
+
rendering a custom trigger and popover listbox.
|
|
6
|
+
|
|
7
|
+
## Installation
|
|
8
|
+
|
|
9
|
+
PowerShell:
|
|
10
|
+
|
|
11
|
+
```powershell
|
|
12
|
+
yarn.cmd add @rcarls/rc-select
|
|
13
|
+
```
|
|
14
|
+
|
|
15
|
+
Bash/zsh:
|
|
16
|
+
|
|
17
|
+
```bash
|
|
18
|
+
yarn add @rcarls/rc-select
|
|
19
|
+
```
|
|
20
|
+
|
|
21
|
+
## Import
|
|
22
|
+
|
|
23
|
+
```ts
|
|
24
|
+
import '@rcarls/rc-select/define';
|
|
25
|
+
```
|
|
26
|
+
|
|
27
|
+
## Basic Usage
|
|
28
|
+
|
|
29
|
+
```html
|
|
30
|
+
<label>
|
|
31
|
+
Fruit
|
|
32
|
+
<rc-select placeholder="Choose fruit">
|
|
33
|
+
<select slot="select" name="fruit">
|
|
34
|
+
<option value="">Choose fruit</option>
|
|
35
|
+
<option value="apple">Apple</option>
|
|
36
|
+
<option value="banana">Banana</option>
|
|
37
|
+
<option value="cherry" disabled>Cherry</option>
|
|
38
|
+
</select>
|
|
39
|
+
</rc-select>
|
|
40
|
+
</label>
|
|
41
|
+
```
|
|
42
|
+
|
|
43
|
+
## API
|
|
44
|
+
|
|
45
|
+
| Property / method | Type | Description |
|
|
46
|
+
| --- | --- | --- |
|
|
47
|
+
| `open` | `boolean` | Current popup state. |
|
|
48
|
+
| `multiple` | `boolean` | Mirrors the slotted `<select multiple>` state. |
|
|
49
|
+
| `disabled` | `boolean` | Mirrors the slotted `<select disabled>` state. |
|
|
50
|
+
| `placeholder` | `string` | Text shown when no value is selected. |
|
|
51
|
+
| `display` | `'auto' \| 'chips' \| 'compact'` | Controls multi-select display. |
|
|
52
|
+
| `openPopup()` | `void` | Opens the listbox popover. |
|
|
53
|
+
| `closePopup(returnFocus?)` | `void` | Closes the listbox and optionally restores focus. |
|
|
54
|
+
| `setSelected(values)` | `void` | Replaces selection without relying on mutation observation. |
|
|
55
|
+
|
|
56
|
+
## Events
|
|
57
|
+
|
|
58
|
+
| Event | Detail | Description |
|
|
59
|
+
| --- | --- | --- |
|
|
60
|
+
| `rc-select-change` | `{ value: string \| string[] }` | Fires when selection changes. |
|
|
61
|
+
| `rc-select-open` | none | Fires when the popup opens. |
|
|
62
|
+
| `rc-select-close` | none | Fires when the popup closes. |
|
|
63
|
+
|
|
64
|
+
## Accessibility
|
|
65
|
+
|
|
66
|
+
- Trigger uses `role="combobox"`, `aria-haspopup="listbox"`, and
|
|
67
|
+
`aria-activedescendant`.
|
|
68
|
+
- The popup uses `rc-listbox` for `role="listbox"` and option state.
|
|
69
|
+
- Accessible name is copied from the slotted select label or `aria-label` unless
|
|
70
|
+
the trigger has an explicit label.
|