@threadlabs/looma 0.14.5 → 0.14.7

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