@insymetri/styleguide 0.1.86 → 0.1.87
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.
|
@@ -37,6 +37,10 @@
|
|
|
37
37
|
// Grouped items (alternative to flat items)
|
|
38
38
|
groups?: Group<T>[]
|
|
39
39
|
openOnFocus?: boolean
|
|
40
|
+
// Accessible field label rendered above the input, associated via `for`/`id`
|
|
41
|
+
label?: string
|
|
42
|
+
// Optional id for the input; auto-generated when omitted
|
|
43
|
+
id?: string
|
|
40
44
|
// CSS classes
|
|
41
45
|
class?: string
|
|
42
46
|
contentClass?: string
|
|
@@ -56,12 +60,19 @@
|
|
|
56
60
|
emptyContent,
|
|
57
61
|
groups,
|
|
58
62
|
openOnFocus = false,
|
|
63
|
+
label,
|
|
64
|
+
id,
|
|
59
65
|
class: className,
|
|
60
66
|
contentClass,
|
|
61
67
|
}: Props<T> = $props()
|
|
62
68
|
|
|
63
69
|
const density = useDensity()
|
|
64
70
|
|
|
71
|
+
// Auto-generate a stable input id so the label can associate without callers
|
|
72
|
+
// having to thread one through (an explicit `id` prop still wins).
|
|
73
|
+
const uid = $props.id()
|
|
74
|
+
const inputId = $derived(id ?? uid)
|
|
75
|
+
|
|
65
76
|
const densityClasses = {
|
|
66
77
|
compact: 'h-28 rounded-control text-tiny',
|
|
67
78
|
default: 'h-32 rounded-control text-small',
|
|
@@ -176,6 +187,11 @@
|
|
|
176
187
|
{/snippet}
|
|
177
188
|
|
|
178
189
|
<div class={cn('block w-full', className)}>
|
|
190
|
+
{#if label}
|
|
191
|
+
<label for={inputId} class="block text-small-emphasis text-secondary mb-4">
|
|
192
|
+
{label}
|
|
193
|
+
</label>
|
|
194
|
+
{/if}
|
|
179
195
|
<Combobox.Root
|
|
180
196
|
type="single"
|
|
181
197
|
bind:value
|
|
@@ -185,6 +201,7 @@
|
|
|
185
201
|
onOpenChange={handleOpenChange}
|
|
186
202
|
>
|
|
187
203
|
<Combobox.Input
|
|
204
|
+
id={inputId}
|
|
188
205
|
{placeholder}
|
|
189
206
|
{disabled}
|
|
190
207
|
oninput={handleInput}
|