@mountainpass/addressr-svelte 0.6.0 → 0.6.1
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 +56 -0
- package/package.json +2 -2
package/README.md
CHANGED
|
@@ -39,9 +39,29 @@ Peer dependencies: `svelte` >= 4.
|
|
|
39
39
|
| `label` | `string` | `"Search Australian addresses"` | Accessible label text |
|
|
40
40
|
| `placeholder` | `string` | `"Start typing an address..."` | Input placeholder |
|
|
41
41
|
| `debounceMs` | `number` | `300` | Debounce delay in milliseconds |
|
|
42
|
+
| `name` | `string` | `"address"` | Input name attribute for form submission |
|
|
43
|
+
| `required` | `boolean` | `false` | Sets `aria-required` on the input |
|
|
42
44
|
| `apiUrl` | `string` | `"https://addressr.p.rapidapi.com/"` | API root URL |
|
|
43
45
|
| `apiHost` | `string` | `"addressr.p.rapidapi.com"` | RapidAPI host header |
|
|
44
46
|
|
|
47
|
+
### Slots
|
|
48
|
+
|
|
49
|
+
Override rendering zones while keeping built-in search logic and keyboard navigation:
|
|
50
|
+
|
|
51
|
+
| Slot | Default | Description |
|
|
52
|
+
|------|---------|-------------|
|
|
53
|
+
| `loading` | Animated skeleton lines | Custom loading state |
|
|
54
|
+
| `no-results` | "No addresses found" message | Custom empty state |
|
|
55
|
+
|
|
56
|
+
```svelte
|
|
57
|
+
<AddressAutocomplete apiUrl="https://api.addressr.io/" onSelect={handleSelect}>
|
|
58
|
+
<li slot="loading">Loading addresses...</li>
|
|
59
|
+
<li slot="no-results">No matches found</li>
|
|
60
|
+
</AddressAutocomplete>
|
|
61
|
+
```
|
|
62
|
+
|
|
63
|
+
When you provide a custom slot, you are responsible for accessibility in that zone.
|
|
64
|
+
|
|
45
65
|
## Headless store
|
|
46
66
|
|
|
47
67
|
Build your own UI while keeping the search logic, debounce, pagination, and abort handling:
|
|
@@ -95,6 +115,42 @@ Build your own UI while keeping the search logic, debounce, pagination, and abor
|
|
|
95
115
|
| `clear()` | Reset all state |
|
|
96
116
|
| `destroy()` | Clean up timers and abort controllers |
|
|
97
117
|
|
|
118
|
+
## Theming
|
|
119
|
+
|
|
120
|
+
All visual styles use CSS custom properties. Override on any ancestor element:
|
|
121
|
+
|
|
122
|
+
```css
|
|
123
|
+
.my-form {
|
|
124
|
+
--addressr-font-family: 'Inter', sans-serif;
|
|
125
|
+
--addressr-border-color: #ccc;
|
|
126
|
+
--addressr-focus-color: #0066cc;
|
|
127
|
+
--addressr-highlight-bg: #e0f0ff;
|
|
128
|
+
--addressr-error-color: #c62828;
|
|
129
|
+
}
|
|
130
|
+
```
|
|
131
|
+
|
|
132
|
+
| Token | Default | Description |
|
|
133
|
+
|-------|---------|-------------|
|
|
134
|
+
| `--addressr-font-family` | `system-ui, -apple-system, sans-serif` | Font stack |
|
|
135
|
+
| `--addressr-padding-x` | `0.75rem` | Horizontal padding |
|
|
136
|
+
| `--addressr-padding-y` | `0.625rem` | Vertical padding |
|
|
137
|
+
| `--addressr-text-color` | `inherit` | Text color |
|
|
138
|
+
| `--addressr-border-color` | `#767676` | Input and dropdown border |
|
|
139
|
+
| `--addressr-border-radius` | `0.25rem` | Corner radius |
|
|
140
|
+
| `--addressr-focus-color` | `#005fcc` | Focus ring and border |
|
|
141
|
+
| `--addressr-z-index` | `1000` | Dropdown stacking order |
|
|
142
|
+
| `--addressr-bg` | `#fff` | Dropdown background |
|
|
143
|
+
| `--addressr-shadow` | `0 4px 6px rgba(0,0,0,0.1)` | Dropdown shadow |
|
|
144
|
+
| `--addressr-highlight-bg` | `#e8f0fe` | Active item background |
|
|
145
|
+
| `--addressr-mark-weight` | `700` | Search match font weight |
|
|
146
|
+
| `--addressr-mark-color` | `inherit` | Search match text color |
|
|
147
|
+
| `--addressr-muted-color` | `#555` | Status and empty text |
|
|
148
|
+
| `--addressr-error-color` | `#d32f2f` | Error message text |
|
|
149
|
+
| `--addressr-skeleton-from` | `#e0e0e0` | Loading skeleton base |
|
|
150
|
+
| `--addressr-skeleton-to` | `#f0f0f0` | Loading skeleton shimmer |
|
|
151
|
+
|
|
152
|
+
The loading state shows animated skeleton lines instead of text. The animation respects `prefers-reduced-motion: reduce`.
|
|
153
|
+
|
|
98
154
|
## Accessibility
|
|
99
155
|
|
|
100
156
|
Implements the WAI-ARIA combobox pattern:
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@mountainpass/addressr-svelte",
|
|
3
|
-
"version": "0.6.
|
|
3
|
+
"version": "0.6.1",
|
|
4
4
|
"description": "Svelte address autocomplete component for Australian address search via Addressr",
|
|
5
5
|
"author": {
|
|
6
6
|
"name": "Mountain Pass",
|
|
@@ -35,7 +35,7 @@
|
|
|
35
35
|
},
|
|
36
36
|
"dependencies": {
|
|
37
37
|
"@windyroad/link-header": "^1.0.1",
|
|
38
|
-
"@mountainpass/addressr-core": "0.6.
|
|
38
|
+
"@mountainpass/addressr-core": "0.6.1"
|
|
39
39
|
},
|
|
40
40
|
"devDependencies": {
|
|
41
41
|
"@sveltejs/vite-plugin-svelte": "^5.0.3",
|