@threadlabs/looma 0.14.6 → 0.14.8

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.
Files changed (11) hide show
  1. package/components/ui-combobox/ui-combobox.html +52 -11
  2. package/components/ui-combobox/ui-combobox.js +29 -14
  3. package/dist/index.js +1 -1
  4. package/package.json +1 -1
  5. package/styles/ui-combobox.css +18 -0
  6. package/vanilla/UiCombobox.d.ts +8 -7
  7. package/vanilla/UiCombobox.js +43 -27
  8. package/vue/UiCombobox.d.ts +80 -3
  9. package/vue/UiCombobox.vue +279 -8
  10. package/vue/chunks/UiCombobox.js +64 -25
  11. package/vue/components.css +67 -50
package/vue/UiCombobox.d.ts CHANGED
@@ -4,6 +4,7 @@ type __VLS_Props = {
4
4
  clearable?: boolean;
5
5
  disabled?: boolean;
6
6
  disclosure?: boolean;
7
+ filter?: 'label' | 'none';
7
8
  help?: string;
8
9
  items?: readonly ({
9
10
  readonly id: string;
@@ -11,6 +12,11 @@ type __VLS_Props = {
11
12
  readonly label: string;
12
13
  readonly group?: string;
13
14
  readonly disabled?: boolean;
15
+ readonly description?: string;
16
+ readonly tag?: {
17
+ readonly label: string;
18
+ readonly tone?: 'neutral' | 'accent' | 'info' | 'success' | 'warning' | 'danger';
19
+ };
14
20
  })[];
15
21
  label?: string;
16
22
  labelVisibility?: 'visible' | 'sr-only';
@@ -25,7 +31,7 @@ type __VLS_Props = {
25
31
  tokenSeparators?: readonly (string)[];
26
32
  value?: string | null;
27
33
  };
28
- declare var __VLS_1: {}, __VLS_4: `item-${string}`, __VLS_5: {}, __VLS_20: `option-${string}`, __VLS_21: {}, __VLS_23: {}, __VLS_25: {};
34
+ declare var __VLS_1: {}, __VLS_4: `item-${string}`, __VLS_5: {}, __VLS_20: `option-${string}`, __VLS_21: {}, __VLS_29: {}, __VLS_31: {};
29
35
  type __VLS_Slots = {} & {
30
36
  [K in NonNullable<typeof __VLS_4>]?: (props: typeof __VLS_5) => any;
31
37
  } & {
@@ -33,9 +39,9 @@ type __VLS_Slots = {} & {
33
39
  } & {
34
40
  start?: (props: typeof __VLS_1) => any;
35
41
  } & {
36
- footer?: (props: typeof __VLS_23) => any;
42
+ footer?: (props: typeof __VLS_29) => any;
37
43
  } & {
38
- default?: (props: typeof __VLS_25) => any;
44
+ default?: (props: typeof __VLS_31) => any;
39
45
  };
40
46
  declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {
41
47
  validate: (...args: unknown[]) => Promise<unknown>;
@@ -51,6 +57,11 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {
51
57
  readonly label: string;
52
58
  readonly group?: string;
53
59
  readonly disabled?: boolean;
60
+ readonly description?: string;
61
+ readonly tag?: {
62
+ readonly label: string;
63
+ readonly tone?: "neutral" | "accent" | "info" | "success" | "warning" | "danger";
64
+ };
54
65
  } | null;
55
66
  readonly kind: "selection" | "clear" | "free-entry" | "create";
56
67
  readonly trigger: "keyboard" | "pointer" | "programmatic";
@@ -71,6 +82,11 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {
71
82
  readonly label: string;
72
83
  readonly group?: string;
73
84
  readonly disabled?: boolean;
85
+ readonly description?: string;
86
+ readonly tag?: {
87
+ readonly label: string;
88
+ readonly tone?: "neutral" | "accent" | "info" | "success" | "warning" | "danger";
89
+ };
74
90
  } | null;
75
91
  readonly kind: "selection" | "clear" | "free-entry" | "create";
76
92
  readonly trigger: "keyboard" | "pointer" | "programmatic";
@@ -80,6 +96,11 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {
80
96
  readonly label: string;
81
97
  readonly group?: string;
82
98
  readonly disabled?: boolean;
99
+ readonly description?: string;
100
+ readonly tag?: {
101
+ readonly label: string;
102
+ readonly tone?: "neutral" | "accent" | "info" | "success" | "warning" | "danger";
103
+ };
83
104
  }[]) => any;
84
105
  "create-entry": (detail: {
85
106
  readonly value: string | null;
@@ -90,6 +111,11 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {
90
111
  readonly label: string;
91
112
  readonly group?: string;
92
113
  readonly disabled?: boolean;
114
+ readonly description?: string;
115
+ readonly tag?: {
116
+ readonly label: string;
117
+ readonly tone?: "neutral" | "accent" | "info" | "success" | "warning" | "danger";
118
+ };
93
119
  } | null;
94
120
  readonly kind: "selection" | "clear" | "free-entry" | "create";
95
121
  readonly trigger: "keyboard" | "pointer" | "programmatic";
@@ -111,6 +137,11 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {
111
137
  readonly label: string;
112
138
  readonly group?: string;
113
139
  readonly disabled?: boolean;
140
+ readonly description?: string;
141
+ readonly tag?: {
142
+ readonly label: string;
143
+ readonly tone?: "neutral" | "accent" | "info" | "success" | "warning" | "danger";
144
+ };
114
145
  }[]) => any;
115
146
  "add-item": (detail: {
116
147
  readonly item: {
@@ -119,6 +150,11 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {
119
150
  readonly label: string;
120
151
  readonly group?: string;
121
152
  readonly disabled?: boolean;
153
+ readonly description?: string;
154
+ readonly tag?: {
155
+ readonly label: string;
156
+ readonly tone?: "neutral" | "accent" | "info" | "success" | "warning" | "danger";
157
+ };
122
158
  };
123
159
  readonly index: number;
124
160
  readonly trigger: "keyboard" | "pointer" | "programmatic";
@@ -130,6 +166,11 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {
130
166
  readonly label: string;
131
167
  readonly group?: string;
132
168
  readonly disabled?: boolean;
169
+ readonly description?: string;
170
+ readonly tag?: {
171
+ readonly label: string;
172
+ readonly tone?: "neutral" | "accent" | "info" | "success" | "warning" | "danger";
173
+ };
133
174
  };
134
175
  readonly index: number;
135
176
  readonly trigger: "keyboard" | "pointer" | "programmatic";
@@ -153,6 +194,11 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {
153
194
  readonly label: string;
154
195
  readonly group?: string;
155
196
  readonly disabled?: boolean;
197
+ readonly description?: string;
198
+ readonly tag?: {
199
+ readonly label: string;
200
+ readonly tone?: "neutral" | "accent" | "info" | "success" | "warning" | "danger";
201
+ };
156
202
  } | null;
157
203
  readonly kind: "selection" | "clear" | "free-entry" | "create";
158
204
  readonly trigger: "keyboard" | "pointer" | "programmatic";
@@ -173,6 +219,11 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {
173
219
  readonly label: string;
174
220
  readonly group?: string;
175
221
  readonly disabled?: boolean;
222
+ readonly description?: string;
223
+ readonly tag?: {
224
+ readonly label: string;
225
+ readonly tone?: "neutral" | "accent" | "info" | "success" | "warning" | "danger";
226
+ };
176
227
  } | null;
177
228
  readonly kind: "selection" | "clear" | "free-entry" | "create";
178
229
  readonly trigger: "keyboard" | "pointer" | "programmatic";
@@ -182,6 +233,11 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {
182
233
  readonly label: string;
183
234
  readonly group?: string;
184
235
  readonly disabled?: boolean;
236
+ readonly description?: string;
237
+ readonly tag?: {
238
+ readonly label: string;
239
+ readonly tone?: "neutral" | "accent" | "info" | "success" | "warning" | "danger";
240
+ };
185
241
  }[]) => any) | undefined;
186
242
  "onCreate-entry"?: ((detail: {
187
243
  readonly value: string | null;
@@ -192,6 +248,11 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {
192
248
  readonly label: string;
193
249
  readonly group?: string;
194
250
  readonly disabled?: boolean;
251
+ readonly description?: string;
252
+ readonly tag?: {
253
+ readonly label: string;
254
+ readonly tone?: "neutral" | "accent" | "info" | "success" | "warning" | "danger";
255
+ };
195
256
  } | null;
196
257
  readonly kind: "selection" | "clear" | "free-entry" | "create";
197
258
  readonly trigger: "keyboard" | "pointer" | "programmatic";
@@ -213,6 +274,11 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {
213
274
  readonly label: string;
214
275
  readonly group?: string;
215
276
  readonly disabled?: boolean;
277
+ readonly description?: string;
278
+ readonly tag?: {
279
+ readonly label: string;
280
+ readonly tone?: "neutral" | "accent" | "info" | "success" | "warning" | "danger";
281
+ };
216
282
  }[]) => any) | undefined;
217
283
  "onAdd-item"?: ((detail: {
218
284
  readonly item: {
@@ -221,6 +287,11 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {
221
287
  readonly label: string;
222
288
  readonly group?: string;
223
289
  readonly disabled?: boolean;
290
+ readonly description?: string;
291
+ readonly tag?: {
292
+ readonly label: string;
293
+ readonly tone?: "neutral" | "accent" | "info" | "success" | "warning" | "danger";
294
+ };
224
295
  };
225
296
  readonly index: number;
226
297
  readonly trigger: "keyboard" | "pointer" | "programmatic";
@@ -232,6 +303,11 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {
232
303
  readonly label: string;
233
304
  readonly group?: string;
234
305
  readonly disabled?: boolean;
306
+ readonly description?: string;
307
+ readonly tag?: {
308
+ readonly label: string;
309
+ readonly tone?: "neutral" | "accent" | "info" | "success" | "warning" | "danger";
310
+ };
235
311
  };
236
312
  readonly index: number;
237
313
  readonly trigger: "keyboard" | "pointer" | "programmatic";
@@ -245,6 +321,7 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {
245
321
  readonly trigger: "keyboard" | "pointer" | "programmatic";
246
322
  }) => any) | undefined;
247
323
  }>, {
324
+ filter: "label" | "none";
248
325
  label: string;
249
326
  name: string;
250
327
  size: "sm" | "md" | "lg";
package/vue/UiCombobox.vue CHANGED
@@ -15,6 +15,7 @@ const props = withDefaults(
15
15
  clearable?: boolean
16
16
  disabled?: boolean
17
17
  disclosure?: boolean
18
+ filter?: 'label' | 'none'
18
19
  help?: string
19
20
  items?:
20
21
  readonly ({
@@ -23,6 +24,11 @@ const props = withDefaults(
23
24
  readonly label: string
24
25
  readonly group?: string
25
26
  readonly disabled?: boolean
27
+ readonly description?: string
28
+ readonly tag?: {
29
+ readonly label: string
30
+ readonly tone?: 'neutral' | 'accent' | 'info' | 'success' | 'warning' | 'danger'
31
+ }
26
32
  })[]
27
33
  label?: string
28
34
  labelVisibility?: 'visible' | 'sr-only'
@@ -43,6 +49,7 @@ const props = withDefaults(
43
49
  clearable: false,
44
50
  disabled: false,
45
51
  disclosure: false,
52
+ filter: 'label',
46
53
  help: '',
47
54
  label: '',
48
55
  labelVisibility: 'visible',
@@ -76,6 +83,11 @@ const emit = defineEmits<{
76
83
  readonly label: string
77
84
  readonly group?: string
78
85
  readonly disabled?: boolean
86
+ readonly description?: string
87
+ readonly tag?: {
88
+ readonly label: string
89
+ readonly tone?: 'neutral' | 'accent' | 'info' | 'success' | 'warning' | 'danger'
90
+ }
79
91
  } | null
80
92
  readonly kind: 'selection' | 'clear' | 'free-entry' | 'create'
81
93
  readonly trigger: 'keyboard' | 'pointer' | 'programmatic'
@@ -86,6 +98,11 @@ const emit = defineEmits<{
86
98
  readonly label: string
87
99
  readonly group?: string
88
100
  readonly disabled?: boolean
101
+ readonly description?: string
102
+ readonly tag?: {
103
+ readonly label: string
104
+ readonly tone?: 'neutral' | 'accent' | 'info' | 'success' | 'warning' | 'danger'
105
+ }
89
106
  })[],
90
107
  ]
91
108
  'free-entry': [
@@ -98,6 +115,11 @@ const emit = defineEmits<{
98
115
  readonly label: string
99
116
  readonly group?: string
100
117
  readonly disabled?: boolean
118
+ readonly description?: string
119
+ readonly tag?: {
120
+ readonly label: string
121
+ readonly tone?: 'neutral' | 'accent' | 'info' | 'success' | 'warning' | 'danger'
122
+ }
101
123
  } | null
102
124
  readonly kind: 'selection' | 'clear' | 'free-entry' | 'create'
103
125
  readonly trigger: 'keyboard' | 'pointer' | 'programmatic'
@@ -113,6 +135,11 @@ const emit = defineEmits<{
113
135
  readonly label: string
114
136
  readonly group?: string
115
137
  readonly disabled?: boolean
138
+ readonly description?: string
139
+ readonly tag?: {
140
+ readonly label: string
141
+ readonly tone?: 'neutral' | 'accent' | 'info' | 'success' | 'warning' | 'danger'
142
+ }
116
143
  } | null
117
144
  readonly kind: 'selection' | 'clear' | 'free-entry' | 'create'
118
145
  readonly trigger: 'keyboard' | 'pointer' | 'programmatic'
@@ -140,6 +167,11 @@ const emit = defineEmits<{
140
167
  readonly label: string
141
168
  readonly group?: string
142
169
  readonly disabled?: boolean
170
+ readonly description?: string
171
+ readonly tag?: {
172
+ readonly label: string
173
+ readonly tone?: 'neutral' | 'accent' | 'info' | 'success' | 'warning' | 'danger'
174
+ }
143
175
  })[],
144
176
  ]
145
177
  'add-item': [
@@ -150,6 +182,11 @@ const emit = defineEmits<{
150
182
  readonly label: string
151
183
  readonly group?: string
152
184
  readonly disabled?: boolean
185
+ readonly description?: string
186
+ readonly tag?: {
187
+ readonly label: string
188
+ readonly tone?: 'neutral' | 'accent' | 'info' | 'success' | 'warning' | 'danger'
189
+ }
153
190
  }
154
191
  readonly index: number
155
192
  readonly trigger: 'keyboard' | 'pointer' | 'programmatic'
@@ -163,6 +200,11 @@ const emit = defineEmits<{
163
200
  readonly label: string
164
201
  readonly group?: string
165
202
  readonly disabled?: boolean
203
+ readonly description?: string
204
+ readonly tag?: {
205
+ readonly label: string
206
+ readonly tone?: 'neutral' | 'accent' | 'info' | 'success' | 'warning' | 'danger'
207
+ }
166
208
  }
167
209
  readonly index: number
168
210
  readonly trigger: 'keyboard' | 'pointer' | 'programmatic'
@@ -186,7 +228,15 @@ const popupElement = useTemplateRef<HTMLElement>('popup')
186
228
  const listboxElement = useTemplateRef<HTMLElement>('listbox')
187
229
  const optionsElement = useTemplateRef<HTMLElement>('options')
188
230
  const internalItems = ref<
189
- { id: string; value: string; label: string; group?: string; disabled?: boolean }[]
231
+ {
232
+ id: string
233
+ value: string
234
+ label: string
235
+ group?: string
236
+ disabled?: boolean
237
+ description?: string
238
+ tag?: { label: string; tone?: 'neutral' | 'accent' | 'info' | 'success' | 'warning' | 'danger' }
239
+ }[]
190
240
  >([])
191
241
  const raw = ref('')
192
242
  const display = ref('')
@@ -200,6 +250,8 @@ const rows = ref<
200
250
  group?: string
201
251
  disabled: boolean
202
252
  selected: boolean
253
+ description?: string
254
+ tag?: { label: string; tone?: 'neutral' | 'accent' | 'info' | 'success' | 'warning' | 'danger' }
203
255
  }[]
204
256
  >([])
205
257
  const active = ref<number | null>(-1)
@@ -229,7 +281,14 @@ const groups = ref<
229
281
  group?: string
230
282
  disabled: boolean
231
283
  selected: boolean
284
+ description?: string
285
+ tag?: {
286
+ label: string
287
+ tone?: 'neutral' | 'accent' | 'info' | 'success' | 'warning' | 'danger'
288
+ }
232
289
  index: number
290
+ labelledBy: string | null
291
+ detail: string | null
233
292
  }[]
234
293
  }[]
235
294
  >([])
@@ -281,8 +340,52 @@ const isValueChangeDetail = (detail: unknown): boolean =>
281
340
  || typeof ((detail as Record<string, unknown>)['option'] as Record<string, unknown>)[
282
341
  'disabled'
283
342
  ] === 'boolean')
343
+ && (((detail as Record<string, unknown>)['option'] as Record<string, unknown>)['description']
344
+ === undefined
345
+ || typeof ((detail as Record<string, unknown>)['option'] as Record<string, unknown>)[
346
+ 'description'
347
+ ] === 'string')
348
+ && (((detail as Record<string, unknown>)['option'] as Record<string, unknown>)['tag']
349
+ === undefined
350
+ || (((detail as Record<string, unknown>)['option'] as Record<string, unknown>)['tag']
351
+ !== null
352
+ && typeof ((detail as Record<string, unknown>)['option'] as Record<string, unknown>)[
353
+ 'tag'
354
+ ] === 'object'
355
+ && !Array.isArray(
356
+ ((detail as Record<string, unknown>)['option'] as Record<string, unknown>)['tag'],
357
+ )
358
+ && typeof (((detail as Record<string, unknown>)['option'] as Record<string, unknown>)[
359
+ 'tag'
360
+ ] as Record<string, unknown>)['label'] === 'string'
361
+ && ((((detail as Record<string, unknown>)['option'] as Record<string, unknown>)[
362
+ 'tag'
363
+ ] as Record<string, unknown>)['tone'] === undefined
364
+ || ((((detail as Record<string, unknown>)['option'] as Record<string, unknown>)[
365
+ 'tag'
366
+ ] as Record<string, unknown>)['tone'] === 'neutral'
367
+ || (((detail as Record<string, unknown>)['option'] as Record<string, unknown>)[
368
+ 'tag'
369
+ ] as Record<string, unknown>)['tone'] === 'accent'
370
+ || (((detail as Record<string, unknown>)['option'] as Record<string, unknown>)[
371
+ 'tag'
372
+ ] as Record<string, unknown>)['tone'] === 'info'
373
+ || (((detail as Record<string, unknown>)['option'] as Record<string, unknown>)[
374
+ 'tag'
375
+ ] as Record<string, unknown>)['tone'] === 'success'
376
+ || (((detail as Record<string, unknown>)['option'] as Record<string, unknown>)[
377
+ 'tag'
378
+ ] as Record<string, unknown>)['tone'] === 'warning'
379
+ || (((detail as Record<string, unknown>)['option'] as Record<string, unknown>)[
380
+ 'tag'
381
+ ] as Record<string, unknown>)['tone'] === 'danger'))
382
+ && Object.keys(
383
+ ((detail as Record<string, unknown>)['option'] as Record<string, unknown>)[
384
+ 'tag'
385
+ ] as object,
386
+ ).every((key) => ['label', 'tone'].includes(key))))
284
387
  && Object.keys((detail as Record<string, unknown>)['option'] as object).every((key) =>
285
- ['id', 'value', 'label', 'group', 'disabled'].includes(key)
388
+ ['id', 'value', 'label', 'group', 'disabled', 'description', 'tag'].includes(key)
286
389
  )) || (detail as Record<string, unknown>)['option'] === null)
287
390
  && ((detail as Record<string, unknown>)['kind'] === 'selection'
288
391
  || (detail as Record<string, unknown>)['kind'] === 'clear'
@@ -305,8 +408,33 @@ const isValueChangeDetail = (detail: unknown): boolean =>
305
408
  || typeof (item as Record<string, unknown>)['group'] === 'string')
306
409
  && ((item as Record<string, unknown>)['disabled'] === undefined
307
410
  || typeof (item as Record<string, unknown>)['disabled'] === 'boolean')
411
+ && ((item as Record<string, unknown>)['description'] === undefined
412
+ || typeof (item as Record<string, unknown>)['description'] === 'string')
413
+ && ((item as Record<string, unknown>)['tag'] === undefined
414
+ || ((item as Record<string, unknown>)['tag'] !== null
415
+ && typeof (item as Record<string, unknown>)['tag'] === 'object'
416
+ && !Array.isArray((item as Record<string, unknown>)['tag'])
417
+ && typeof ((item as Record<string, unknown>)['tag'] as Record<string, unknown>)['label']
418
+ === 'string'
419
+ && (((item as Record<string, unknown>)['tag'] as Record<string, unknown>)['tone']
420
+ === undefined
421
+ || (((item as Record<string, unknown>)['tag'] as Record<string, unknown>)['tone']
422
+ === 'neutral'
423
+ || ((item as Record<string, unknown>)['tag'] as Record<string, unknown>)['tone']
424
+ === 'accent'
425
+ || ((item as Record<string, unknown>)['tag'] as Record<string, unknown>)['tone']
426
+ === 'info'
427
+ || ((item as Record<string, unknown>)['tag'] as Record<string, unknown>)['tone']
428
+ === 'success'
429
+ || ((item as Record<string, unknown>)['tag'] as Record<string, unknown>)['tone']
430
+ === 'warning'
431
+ || ((item as Record<string, unknown>)['tag'] as Record<string, unknown>)['tone']
432
+ === 'danger'))
433
+ && Object.keys((item as Record<string, unknown>)['tag'] as object).every((key) =>
434
+ ['label', 'tone'].includes(key)
435
+ )))
308
436
  && Object.keys(item as object).every((key) =>
309
- ['id', 'value', 'label', 'group', 'disabled'].includes(key)
437
+ ['id', 'value', 'label', 'group', 'disabled', 'description', 'tag'].includes(key)
310
438
  ))
311
439
  ))
312
440
  const isFreeEntryDetail = (detail: unknown): boolean =>
@@ -332,8 +460,51 @@ const isFreeEntryDetail = (detail: unknown): boolean =>
332
460
  || typeof ((detail as Record<string, unknown>)['option'] as Record<string, unknown>)[
333
461
  'disabled'
334
462
  ] === 'boolean')
463
+ && (((detail as Record<string, unknown>)['option'] as Record<string, unknown>)['description']
464
+ === undefined
465
+ || typeof ((detail as Record<string, unknown>)['option'] as Record<string, unknown>)[
466
+ 'description'
467
+ ] === 'string')
468
+ && (((detail as Record<string, unknown>)['option'] as Record<string, unknown>)['tag']
469
+ === undefined
470
+ || (((detail as Record<string, unknown>)['option'] as Record<string, unknown>)['tag'] !== null
471
+ && typeof ((detail as Record<string, unknown>)['option'] as Record<string, unknown>)['tag']
472
+ === 'object'
473
+ && !Array.isArray(
474
+ ((detail as Record<string, unknown>)['option'] as Record<string, unknown>)['tag'],
475
+ ) && typeof (((detail as Record<string, unknown>)['option'] as Record<string, unknown>)[
476
+ 'tag'
477
+ ] as Record<string, unknown>)['label'] === 'string'
478
+ && ((((detail as Record<string, unknown>)['option'] as Record<string, unknown>)[
479
+ 'tag'
480
+ ] as Record<string, unknown>)['tone'] === undefined
481
+ || ((((detail as Record<string, unknown>)['option'] as Record<string, unknown>)[
482
+ 'tag'
483
+ ] as Record<string, unknown>)['tone'] === 'neutral'
484
+ || (((detail as Record<string, unknown>)['option'] as Record<string, unknown>)[
485
+ 'tag'
486
+ ] as Record<string, unknown>)['tone'] === 'accent'
487
+ || (((detail as Record<string, unknown>)['option'] as Record<string, unknown>)[
488
+ 'tag'
489
+ ] as Record<string, unknown>)['tone'] === 'info'
490
+ || (((detail as Record<string, unknown>)['option'] as Record<string, unknown>)[
491
+ 'tag'
492
+ ] as Record<string, unknown>)['tone'] === 'success'
493
+ || (((detail as Record<string, unknown>)['option'] as Record<string, unknown>)[
494
+ 'tag'
495
+ ] as Record<string, unknown>)['tone'] === 'warning'
496
+ || (((detail as Record<string, unknown>)['option'] as Record<string, unknown>)[
497
+ 'tag'
498
+ ] as Record<string, unknown>)['tone'] === 'danger'))
499
+ && Object.keys(
500
+ ((detail as Record<string, unknown>)['option'] as Record<string, unknown>)[
501
+ 'tag'
502
+ ] as object,
503
+ ).every((key) =>
504
+ ['label', 'tone'].includes(key)
505
+ )))
335
506
  && Object.keys((detail as Record<string, unknown>)['option'] as object).every((key) =>
336
- ['id', 'value', 'label', 'group', 'disabled'].includes(key)
507
+ ['id', 'value', 'label', 'group', 'disabled', 'description', 'tag'].includes(key)
337
508
  )) || (detail as Record<string, unknown>)['option'] === null)
338
509
  && ((detail as Record<string, unknown>)['kind'] === 'selection'
339
510
  || (detail as Record<string, unknown>)['kind'] === 'clear'
@@ -387,8 +558,33 @@ const isOptionsChangeDetail = (detail: unknown): boolean =>
387
558
  || typeof (item as Record<string, unknown>)['group'] === 'string')
388
559
  && ((item as Record<string, unknown>)['disabled'] === undefined
389
560
  || typeof (item as Record<string, unknown>)['disabled'] === 'boolean')
561
+ && ((item as Record<string, unknown>)['description'] === undefined
562
+ || typeof (item as Record<string, unknown>)['description'] === 'string')
563
+ && ((item as Record<string, unknown>)['tag'] === undefined
564
+ || ((item as Record<string, unknown>)['tag'] !== null
565
+ && typeof (item as Record<string, unknown>)['tag'] === 'object'
566
+ && !Array.isArray((item as Record<string, unknown>)['tag'])
567
+ && typeof ((item as Record<string, unknown>)['tag'] as Record<string, unknown>)['label']
568
+ === 'string'
569
+ && (((item as Record<string, unknown>)['tag'] as Record<string, unknown>)['tone']
570
+ === undefined
571
+ || (((item as Record<string, unknown>)['tag'] as Record<string, unknown>)['tone']
572
+ === 'neutral'
573
+ || ((item as Record<string, unknown>)['tag'] as Record<string, unknown>)['tone']
574
+ === 'accent'
575
+ || ((item as Record<string, unknown>)['tag'] as Record<string, unknown>)['tone']
576
+ === 'info'
577
+ || ((item as Record<string, unknown>)['tag'] as Record<string, unknown>)['tone']
578
+ === 'success'
579
+ || ((item as Record<string, unknown>)['tag'] as Record<string, unknown>)['tone']
580
+ === 'warning'
581
+ || ((item as Record<string, unknown>)['tag'] as Record<string, unknown>)['tone']
582
+ === 'danger'))
583
+ && Object.keys((item as Record<string, unknown>)['tag'] as object).every((key) =>
584
+ ['label', 'tone'].includes(key)
585
+ )))
390
586
  && Object.keys(item as object).every((key) =>
391
- ['id', 'value', 'label', 'group', 'disabled'].includes(key)
587
+ ['id', 'value', 'label', 'group', 'disabled', 'description', 'tag'].includes(key)
392
588
  ))
393
589
  )
394
590
  const isAddItemDetail = (detail: unknown): boolean =>
@@ -410,14 +606,57 @@ const isAddItemDetail = (detail: unknown): boolean =>
410
606
  === undefined
411
607
  || typeof ((detail as Record<string, unknown>)['item'] as Record<string, unknown>)['disabled']
412
608
  === 'boolean')
609
+ && (((detail as Record<string, unknown>)['item'] as Record<string, unknown>)['description']
610
+ === undefined
611
+ || typeof ((detail as Record<string, unknown>)['item'] as Record<string, unknown>)[
612
+ 'description'
613
+ ] === 'string')
614
+ && (((detail as Record<string, unknown>)['item'] as Record<string, unknown>)['tag']
615
+ === undefined
616
+ || (((detail as Record<string, unknown>)['item'] as Record<string, unknown>)['tag'] !== null
617
+ && typeof ((detail as Record<string, unknown>)['item'] as Record<string, unknown>)['tag']
618
+ === 'object'
619
+ && !Array.isArray(
620
+ ((detail as Record<string, unknown>)['item'] as Record<string, unknown>)['tag'],
621
+ ) && typeof (((detail as Record<string, unknown>)['item'] as Record<string, unknown>)[
622
+ 'tag'
623
+ ] as Record<string, unknown>)['label'] === 'string'
624
+ && ((((detail as Record<string, unknown>)['item'] as Record<string, unknown>)[
625
+ 'tag'
626
+ ] as Record<string, unknown>)['tone'] === undefined
627
+ || ((((detail as Record<string, unknown>)['item'] as Record<string, unknown>)[
628
+ 'tag'
629
+ ] as Record<string, unknown>)['tone'] === 'neutral'
630
+ || (((detail as Record<string, unknown>)['item'] as Record<string, unknown>)[
631
+ 'tag'
632
+ ] as Record<string, unknown>)['tone'] === 'accent'
633
+ || (((detail as Record<string, unknown>)['item'] as Record<string, unknown>)[
634
+ 'tag'
635
+ ] as Record<string, unknown>)['tone'] === 'info'
636
+ || (((detail as Record<string, unknown>)['item'] as Record<string, unknown>)[
637
+ 'tag'
638
+ ] as Record<string, unknown>)['tone'] === 'success'
639
+ || (((detail as Record<string, unknown>)['item'] as Record<string, unknown>)[
640
+ 'tag'
641
+ ] as Record<string, unknown>)['tone'] === 'warning'
642
+ || (((detail as Record<string, unknown>)['item'] as Record<string, unknown>)[
643
+ 'tag'
644
+ ] as Record<string, unknown>)['tone'] === 'danger'))
645
+ && Object.keys(
646
+ ((detail as Record<string, unknown>)['item'] as Record<string, unknown>)['tag'] as object,
647
+ ).every((key) =>
648
+ ['label', 'tone'].includes(key)
649
+ )))
413
650
  && Object.keys((detail as Record<string, unknown>)['item'] as object).every((key) =>
414
- ['id', 'value', 'label', 'group', 'disabled'].includes(key)
651
+ ['id', 'value', 'label', 'group', 'disabled', 'description', 'tag'].includes(key)
415
652
  ))
416
653
  && Number.isInteger((detail as Record<string, unknown>)['index'])
417
654
  && ((detail as Record<string, unknown>)['trigger'] === 'keyboard'
418
655
  || (detail as Record<string, unknown>)['trigger'] === 'pointer'
419
656
  || (detail as Record<string, unknown>)['trigger'] === 'programmatic')
420
- && Object.keys(detail as object).every((key) => ['item', 'index', 'trigger'].includes(key))
657
+ && Object.keys(detail as object).every((key) =>
658
+ ['item', 'index', 'trigger'].includes(key)
659
+ )
421
660
  const isCreateItemDetail = (detail: unknown): boolean =>
422
661
  detail !== null && typeof detail === 'object' && !Array.isArray(detail)
423
662
  && typeof (detail as Record<string, unknown>)['query'] === 'string'
@@ -652,9 +891,24 @@ defineExpose({
652
891
  :aria-selected="row.selected"
653
892
  :aria-disabled="row.disabled"
654
893
  :data-index="row.index"
894
+ :aria-labelledby="row.labelledBy ?? undefined"
895
+ :aria-describedby="row.detail ?? undefined"
655
896
  :class="{ active: row.index === active }"
656
897
  >
657
- <slot :name="`option-${row.id}`"><span class="primary">{{ row.label }}</span></slot>
898
+ <slot :name="`option-${row.id}`"><span v-if="row.detail" class="detail"><span
899
+ class="line"
900
+ ><span class="primary" :id="`${uid}-option-${row.index}-label`">{{
901
+ row.label
902
+ }}</span>
903
+ <UiBadge v-if="row.tag" :tone="row.tag?.tone"><span
904
+ :id="`${uid}-option-${row.index}-tag`"
905
+ >{{ row.tag?.label }}</span></UiBadge></span>
906
+ <span
907
+ v-if="row.description"
908
+ class="description"
909
+ :id="`${uid}-option-${row.index}-description`"
910
+ >{{ row.description }}</span></span>
911
+ <span v-if="!row.detail" class="primary">{{ row.label }}</span></slot>
658
912
  </div>
659
913
  </div>
660
914
  <div
@@ -923,6 +1177,23 @@ input:disabled, button:disabled {
923
1177
  color: var(--_ui-combobox-option-text, var(--ui-text-primary));
924
1178
  font-weight: 500;
925
1179
  }
1180
+ /* A row with a tag or a description: the label and its tag on one line, the description under them. */
1181
+ .detail {
1182
+ display: grid;
1183
+ gap: var(--ui-space-0-5);
1184
+ min-inline-size: 0;
1185
+ }
1186
+ .line {
1187
+ display: flex;
1188
+ flex-wrap: wrap;
1189
+ align-items: center;
1190
+ gap: var(--ui-space-2);
1191
+ }
1192
+ .description {
1193
+ color: var(--ui-text-muted);
1194
+ font-size: var(--ui-font-size-sm);
1195
+ line-height: var(--ui-line-height-md);
1196
+ }
926
1197
  .message, .group {
927
1198
  color: var(--_ui-combobox-message-text, var(--ui-text-secondary));
928
1199
  font-weight: 400;