@volvo-cars/css 0.27.0 → 0.29.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/dist/styles.d.ts CHANGED
@@ -3,6 +3,12 @@ export interface ClassNames {
3
3
  /**
4
4
  * ```css
5
5
  * background-color: var(--_v-color-black-64)
6
+ * z-index: calc(var(--v-index-overlay) - 1)
7
+ * justify-content: center
8
+ * align-items: center
9
+ * display: flex
10
+ * position: fixed
11
+ * inset: 0
6
12
  * ``` */ readonly backdrop: 'backdrop';
7
13
  /**
8
14
  * ```css
@@ -50,6 +56,9 @@ export interface ClassNames {
50
56
  * ``` */ readonly block: 'block';
51
57
  /**
52
58
  * ```css
59
+ * --stack-gap: var(--v-space-8)
60
+ * --stack-gap: var(--v-space-4)
61
+ * --stack-gap: var(--v-space-16)
53
62
  * font-size: var(--v-font-16-size)
54
63
  * line-height: var(--v-font-16-lineheight)
55
64
  * ``` */ readonly body16: 'body-16';
@@ -165,10 +174,9 @@ export interface ClassNames {
165
174
  * ```css
166
175
  * flex: 1 0 40%
167
176
  * flex: 1 0 40cqw
168
- * --_height: 3rem
169
- * min-width: max-content
170
- * max-width: 100%
171
- * height: var(--_height)
177
+ * --stack-gap: var(--v-space-24)
178
+ * --stack-gap: var(--v-space-32)
179
+ * --stack-gap: var(--v-space-16)
172
180
  * font-size: var(--v-font-16-size)
173
181
  * font-weight: var(--v-font-emphasis-weight)
174
182
  * color: var(--_color)
@@ -177,13 +185,22 @@ export interface ClassNames {
177
185
  * background-color: var(--_background)
178
186
  * justify-content: center
179
187
  * align-items: center
188
+ * min-width: max-content
189
+ * max-width: 100%
190
+ * height: 3rem
180
191
  * transition: transform .2s, background-color .2s
181
192
  * display: inline-flex
182
193
  * position: relative
183
194
  * overflow: hidden
184
195
  * --_min-touch-area: 44px
185
- * --_height: 2rem
196
+ * content: ""
197
+ * width: 100%
198
+ * height: 44px
199
+ * position: absolute
200
+ * top: 50%
201
+ * transform: translateY(-50%)
186
202
  * font-size: var(--v-font-12-size)
203
+ * height: 2rem
187
204
  * color: var(--_color-disabled, var(--_color))
188
205
  * background-color: var(--_background-disabled, var(--_background))
189
206
  * color: var(--_color-hover, var(--_color))
@@ -203,15 +220,9 @@ export interface ClassNames {
203
220
  * border-radius: var(--v-radius-4)
204
221
  * width: 1.5rem
205
222
  * height: 1.5rem
206
- * position: absolute
207
223
  * padding-inline: var(--v-space-16)
208
224
  * width: 1rem
209
225
  * height: 1rem
210
- * width: 100%
211
- * height: 44px
212
- * content: ""
213
- * top: 50%
214
- * transform: translateY(-50%)
215
226
  * transform: scale(.95)
216
227
  * ``` */ readonly buttonFilled: 'button-filled';
217
228
  /**
@@ -222,15 +233,17 @@ export interface ClassNames {
222
233
  * container: button-group / inline-size
223
234
  * flex: 1 0 40%
224
235
  * flex: 1 0 40cqw
236
+ * --stack-gap: var(--v-space-24)
237
+ * --stack-gap: var(--v-space-32)
238
+ * --stack-gap: var(--v-space-16)
225
239
  * ``` */ readonly buttonGroup: 'button-group';
226
240
  /**
227
241
  * ```css
228
242
  * flex: 1 0 40%
229
243
  * flex: 1 0 40cqw
230
- * --_height: 3rem
231
- * min-width: max-content
232
- * max-width: 100%
233
- * height: var(--_height)
244
+ * --stack-gap: var(--v-space-24)
245
+ * --stack-gap: var(--v-space-32)
246
+ * --stack-gap: var(--v-space-16)
234
247
  * font-size: var(--v-font-16-size)
235
248
  * font-weight: var(--v-font-emphasis-weight)
236
249
  * color: var(--_color)
@@ -239,13 +252,22 @@ export interface ClassNames {
239
252
  * background-color: var(--_background)
240
253
  * justify-content: center
241
254
  * align-items: center
255
+ * min-width: max-content
256
+ * max-width: 100%
257
+ * height: 3rem
242
258
  * transition: transform .2s, background-color .2s
243
259
  * display: inline-flex
244
260
  * position: relative
245
261
  * overflow: hidden
246
262
  * --_min-touch-area: 44px
247
- * --_height: 2rem
263
+ * content: ""
264
+ * width: 100%
265
+ * height: 44px
266
+ * position: absolute
267
+ * top: 50%
268
+ * transform: translateY(-50%)
248
269
  * font-size: var(--v-font-12-size)
270
+ * height: 2rem
249
271
  * color: var(--_color-disabled, var(--_color))
250
272
  * background-color: var(--_background-disabled, var(--_background))
251
273
  * color: var(--_color-hover, var(--_color))
@@ -264,25 +286,17 @@ export interface ClassNames {
264
286
  * border-radius: var(--v-radius-4)
265
287
  * width: 1.5rem
266
288
  * height: 1.5rem
267
- * position: absolute
268
289
  * padding-inline: var(--v-space-16)
269
290
  * width: 1rem
270
291
  * height: 1rem
271
- * width: 100%
272
- * height: 44px
273
- * content: ""
274
- * top: 50%
275
- * transform: translateY(-50%)
276
292
  * transform: scale(.95)
277
293
  * ``` */ readonly buttonOutlined: 'button-outlined';
278
294
  /**
279
295
  * ```css
280
296
  * flex: 1 0 40%
281
297
  * flex: 1 0 40cqw
282
- * --_height: 3rem
283
- * min-width: max-content
284
- * max-width: 100%
285
- * height: var(--_height)
298
+ * --stack-gap: var(--v-space-24)
299
+ * --stack-gap: var(--v-space-16)
286
300
  * font-size: var(--v-font-16-size)
287
301
  * font-weight: var(--v-font-emphasis-weight)
288
302
  * color: var(--_color)
@@ -291,13 +305,22 @@ export interface ClassNames {
291
305
  * background-color: var(--_background)
292
306
  * justify-content: center
293
307
  * align-items: center
308
+ * min-width: max-content
309
+ * max-width: 100%
310
+ * height: 3rem
294
311
  * transition: transform .2s, background-color .2s
295
312
  * display: inline-flex
296
313
  * position: relative
297
314
  * overflow: hidden
298
315
  * --_min-touch-area: 44px
299
- * --_height: 2rem
316
+ * content: ""
317
+ * width: 100%
318
+ * height: 44px
319
+ * position: absolute
320
+ * top: 50%
321
+ * transform: translateY(-50%)
300
322
  * font-size: var(--v-font-12-size)
323
+ * height: 2rem
301
324
  * color: var(--_color-disabled, var(--_color))
302
325
  * background-color: var(--_background-disabled, var(--_background))
303
326
  * color: var(--_color-hover, var(--_color))
@@ -305,24 +328,21 @@ export interface ClassNames {
305
328
  * --_color: var(--v-color-foreground-primary)
306
329
  * --_color-hover: var(--_v-color-foreground-primary-hover)
307
330
  * --_color-disabled: var(--_v-color-surface-neutral-disabled)
308
- * height: max(var(--_min-touch-area, var(--_height)), var(--_height))
309
- * margin-block: min(0rem, (var(--_height) - max(var(--_min-touch-area), var(--_height))) / 2)
310
331
  * text-align: start
311
332
  * --_color: var(--v-color-surface-feedback-red)
312
333
  * --_color-disabled: var(--_v-color-surface-feedback-red-disabled)
313
334
  * --_color-hover: var(--_v-color-surface-feedback-red-hover)
314
335
  * --_arrow-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none'%3E%3Cpath fill='%23000' fill-opacity='.96' fill-rule='evenodd' d='m10 8.707-4-4-4 4L1.293 8 6 3.293 10.707 8 10 8.707Z' clip-rule='evenodd'/%3E%3Cpath stroke='%23000' stroke-linecap='square' stroke-opacity='.96' stroke-width='.4' d='M9.858 8.848 10 8.99l.141-.142.707-.707L10.99 8l-.142-.141L6.141 3.15 6 3.01l-.141.141L1.15 7.86l-.141.14.141.142.708.707.14.142.142-.142L6 4.99l3.858 3.858Z'/%3E%3C/svg%3E")
315
- * width: .75rem
316
- * height: .75rem
317
336
  * mask: var(--_arrow-icon)
318
337
  * rotate: var(--_arrow-rotation)
319
338
  * flex-shrink: 0
339
+ * width: .75em
340
+ * height: .75em
320
341
  * margin-top: .125rem
321
342
  * transition: translate .1s
322
343
  * mask-size: cover
323
344
  * width: .5rem
324
345
  * height: .5rem
325
- * content: ""
326
346
  * background-color: currentColor
327
347
  * margin-inline-start: var(--v-space-4)
328
348
  * margin-inline-end: var(--v-space-4)
@@ -333,13 +353,26 @@ export interface ClassNames {
333
353
  * --_arrow-rotation: 180deg
334
354
  * --_arrow-rotation: 0deg
335
355
  * ``` */ readonly buttonText: 'button-text';
356
+ /**
357
+ * ```css
358
+ * width: var(--v-space-16)
359
+ * height: var(--v-space-16)
360
+ * background-color: var(--_input-background-color, var(--v-color-background-primary))
361
+ * border-radius: var(--v-radius-4)
362
+ * box-shadow: inset 0 0 0 var(--_input-border-size, 1px) var(--_input-border-color, var(--v-color-foreground-secondary))
363
+ * transition: box-shadow var(--v-transition-default)
364
+ * place-content: center
365
+ * margin-top: .25em
366
+ * display: inline-grid
367
+ * position: relative
368
+ * ``` */ readonly checkbox: 'checkbox';
336
369
  /**
337
370
  * ```css
338
371
  * --_outer-margin: 0px
339
372
  * --_colspan: min(var(--v-grid-columns), var(--_container-colspan, var(--v-grid-columns)))
340
373
  * --_columns-total-width: calc((var(--v-size-gridcolumn) * var(--_colspan)) + var(--v-space-gutter) * (var(--_colspan) - 1))
341
- * width: 100%
342
374
  * max-width: min(80rem, min(var(--v-size-gridmax), var(--_columns-total-width)) + var(--_outer-margin))
375
+ * width: 100%
343
376
  * margin-inline: auto
344
377
  * container-type: inline-size
345
378
  * ``` */ readonly container: 'container';
@@ -348,8 +381,8 @@ export interface ClassNames {
348
381
  * --_outer-margin: 0px
349
382
  * --_colspan: min(var(--v-grid-columns), var(--_container-colspan, var(--v-grid-columns)))
350
383
  * --_columns-total-width: calc((var(--v-size-gridcolumn) * var(--_colspan)) + var(--v-space-gutter) * (var(--_colspan) - 1))
351
- * width: 100%
352
384
  * max-width: min(80rem, min(var(--v-size-gridmax), var(--_columns-total-width)) + var(--_outer-margin))
385
+ * width: 100%
353
386
  * margin-inline: auto
354
387
  * container-type: inline-size
355
388
  * --_outer-margin: calc(var(--v-space-pagemargin) * 2)
@@ -360,8 +393,8 @@ export interface ClassNames {
360
393
  * --_outer-margin: 0px
361
394
  * --_colspan: min(var(--v-grid-columns), var(--_container-colspan, var(--v-grid-columns)))
362
395
  * --_columns-total-width: calc((var(--v-size-gridcolumn) * var(--_colspan)) + var(--v-space-gutter) * (var(--_colspan) - 1))
363
- * width: 100%
364
396
  * max-width: min(80rem, min(var(--v-size-gridmax), var(--_columns-total-width)) + var(--_outer-margin))
397
+ * width: 100%
365
398
  * margin-inline: auto
366
399
  * container-type: inline-size
367
400
  * --_outer-margin: calc(var(--v-space-pagemargin) * 2)
@@ -372,8 +405,8 @@ export interface ClassNames {
372
405
  * --_outer-margin: 0px
373
406
  * --_colspan: min(var(--v-grid-columns), var(--_container-colspan, var(--v-grid-columns)))
374
407
  * --_columns-total-width: calc((var(--v-size-gridcolumn) * var(--_colspan)) + var(--v-space-gutter) * (var(--_colspan) - 1))
375
- * width: 100%
376
408
  * max-width: min(80rem, min(var(--v-size-gridmax), var(--_columns-total-width)) + var(--_outer-margin))
409
+ * width: 100%
377
410
  * margin-inline: auto
378
411
  * container-type: inline-size
379
412
  * --_outer-margin: calc(var(--v-space-pagemargin) * 2)
@@ -385,8 +418,8 @@ export interface ClassNames {
385
418
  * --_outer-margin: 0px
386
419
  * --_colspan: min(var(--v-grid-columns), var(--_container-colspan, var(--v-grid-columns)))
387
420
  * --_columns-total-width: calc((var(--v-size-gridcolumn) * var(--_colspan)) + var(--v-space-gutter) * (var(--_colspan) - 1))
388
- * width: 100%
389
421
  * max-width: min(80rem, min(var(--v-size-gridmax), var(--_columns-total-width)) + var(--_outer-margin))
422
+ * width: 100%
390
423
  * margin-inline: auto
391
424
  * container-type: inline-size
392
425
  * --_container-colspan: 4
@@ -398,8 +431,8 @@ export interface ClassNames {
398
431
  * --_outer-margin: 0px
399
432
  * --_colspan: min(var(--v-grid-columns), var(--_container-colspan, var(--v-grid-columns)))
400
433
  * --_columns-total-width: calc((var(--v-size-gridcolumn) * var(--_colspan)) + var(--v-space-gutter) * (var(--_colspan) - 1))
401
- * width: 100%
402
434
  * max-width: min(80rem, min(var(--v-size-gridmax), var(--_columns-total-width)) + var(--_outer-margin))
435
+ * width: 100%
403
436
  * margin-inline: auto
404
437
  * container-type: inline-size
405
438
  * --_outer-margin: calc(var(--v-space-pagemargin) * 2)
@@ -409,8 +442,8 @@ export interface ClassNames {
409
442
  * --_outer-margin: 0px
410
443
  * --_colspan: min(var(--v-grid-columns), var(--_container-colspan, var(--v-grid-columns)))
411
444
  * --_columns-total-width: calc((var(--v-size-gridcolumn) * var(--_colspan)) + var(--v-space-gutter) * (var(--_colspan) - 1))
412
- * width: 100%
413
445
  * max-width: min(80rem, min(var(--v-size-gridmax), var(--_columns-total-width)) + var(--_outer-margin))
446
+ * width: 100%
414
447
  * margin-inline: auto
415
448
  * container-type: inline-size
416
449
  * --_container-colspan: 4
@@ -419,20 +452,20 @@ export interface ClassNames {
419
452
  /**
420
453
  * ```css
421
454
  * z-index: var(--v-index-overlay)
422
- * width: 100%
423
- * max-width: 100%
424
- * height: fit-content
425
- * max-height: 80vh
426
455
  * padding-block: var(--v-space-48)
427
456
  * padding-inline: var(--v-space-24)
428
457
  * color: var(--v-color-foreground-primary)
429
458
  * background-color: var(--v-color-background-secondary)
430
459
  * margin: auto
460
+ * width: 100%
461
+ * max-width: 100%
462
+ * height: fit-content
463
+ * max-height: 80vh
431
464
  * margin-bottom: 0
432
465
  * position: fixed
433
466
  * inset: 0
434
- * max-width: 496px
435
467
  * padding: var(--v-space-48)
468
+ * max-width: 496px
436
469
  * margin-bottom: auto
437
470
  * ``` */ readonly dialog: 'dialog';
438
471
  /**
@@ -489,6 +522,8 @@ export interface ClassNames {
489
522
  * ``` */ readonly fontLight: 'font-light';
490
523
  /**
491
524
  * ```css
525
+ * --stack-gap: var(--v-space-4)
526
+ * --stack-gap: var(--v-space-16)
492
527
  * font-weight: 500
493
528
  * ``` */ readonly fontMedium: 'font-medium';
494
529
  /**
@@ -605,14 +640,21 @@ export interface ClassNames {
605
640
  * ``` */ readonly gapYS: 'gap-y-s';
606
641
  /**
607
642
  * ```css
643
+ * --stack-gap: var(--v-space-8)
644
+ * --stack-gap: calc(var(--v-space-8) + 1em)
608
645
  * font: var(--v-font-heading-1)
609
646
  * ``` */ readonly heading1: 'heading-1';
610
647
  /**
611
648
  * ```css
649
+ * --stack-gap: var(--v-space-8)
650
+ * --stack-gap: calc(var(--v-space-8) + 1em)
612
651
  * font: var(--v-font-heading-2)
613
652
  * ``` */ readonly heading2: 'heading-2';
614
653
  /**
615
654
  * ```css
655
+ * --stack-gap: var(--v-space-8)
656
+ * --stack-gap: calc(var(--v-space-8) + 1em)
657
+ * --stack-gap: var(--v-space-24)
616
658
  * font: var(--v-font-heading-3)
617
659
  * ``` */ readonly heading3: 'heading-3';
618
660
  /**
@@ -623,6 +665,50 @@ export interface ClassNames {
623
665
  * ```css
624
666
  * hyphens: auto
625
667
  * ``` */ readonly hyphens: 'hyphens';
668
+ /**
669
+ * ```css
670
+ * width: var(--_icon-size)
671
+ * height: var(--_icon-size)
672
+ * vertical-align: middle
673
+ * flex-grow: 0
674
+ * flex-shrink: 0
675
+ * display: inline-block
676
+ * --_icon-size: 5rem
677
+ * --_icon-size: 4rem
678
+ * --_icon-size: 3rem
679
+ * --_icon-size: 2.5rem
680
+ * --_icon-size: 2rem
681
+ * --_icon-size: 1.5rem
682
+ * --_icon-size: 1rem
683
+ * --_icon-size: .75rem
684
+ * object-position: 0 -999px
685
+ * mask-repeat: no-repeat
686
+ * mask-image: var(--icon-url)
687
+ * background-color: currentColor
688
+ * transform: scaleX(-1)
689
+ * ``` */ readonly iconMask: 'icon-mask';
690
+ /**
691
+ * ```css
692
+ * width: var(--_icon-size)
693
+ * height: var(--_icon-size)
694
+ * vertical-align: middle
695
+ * flex-grow: 0
696
+ * flex-shrink: 0
697
+ * display: inline-block
698
+ * --_icon-size: 5rem
699
+ * --_icon-size: 4rem
700
+ * --_icon-size: 3rem
701
+ * --_icon-size: 2.5rem
702
+ * --_icon-size: 2rem
703
+ * --_icon-size: 1.5rem
704
+ * --_icon-size: 1rem
705
+ * --_icon-size: .75rem
706
+ * --_y-offset: var(--_dark-toggle) 7
707
+ * fill: currentColor
708
+ * object-fit: cover
709
+ * object-position: 0 calc(var(--_y-offset, 0) * -1 * var(--_icon-size, 0))
710
+ * transform: scaleX(-1)
711
+ * ``` */ readonly iconSprite: 'icon-sprite';
626
712
  /**
627
713
  * ```css
628
714
  * visibility: hidden
@@ -672,6 +758,12 @@ export interface ClassNames {
672
758
  * color: var(--v-color-foreground-secondary)
673
759
  * text-decoration-line: underline
674
760
  * ``` */ readonly linkInline: 'link-inline';
761
+ /**
762
+ * ```css
763
+ * --stack-gap: var(--v-space-8)
764
+ * list-style-type: revert
765
+ * padding-inline-start: 2rem
766
+ * ``` */ readonly list: 'list';
675
767
  /**
676
768
  * ```css
677
769
  * margin: 0
@@ -758,6 +850,8 @@ export interface ClassNames {
758
850
  * ``` */ readonly mbS: 'mb-s';
759
851
  /**
760
852
  * ```css
853
+ * --stack-gap: var(--v-space-8)
854
+ * --stack-gap: 0rem
761
855
  * font-size: var(--v-font-12-size)
762
856
  * line-height: var(--v-font-12-lineheight)
763
857
  * letter-spacing: .02em
@@ -1292,6 +1386,20 @@ export interface ClassNames {
1292
1386
  * padding-top: var(--v-space-s)
1293
1387
  * padding-bottom: var(--v-space-s)
1294
1388
  * ``` */ readonly pyS: 'py-s';
1389
+ /**
1390
+ * ```css
1391
+ * width: var(--v-space-16)
1392
+ * height: var(--v-space-16)
1393
+ * background-color: var(--_input-background-color, var(--v-color-background-primary))
1394
+ * border-radius: var(--v-radius-4)
1395
+ * box-shadow: inset 0 0 0 var(--_input-border-size, 1px) var(--_input-border-color, var(--v-color-foreground-secondary))
1396
+ * transition: box-shadow var(--v-transition-default)
1397
+ * place-content: center
1398
+ * margin-top: .25em
1399
+ * display: inline-grid
1400
+ * position: relative
1401
+ * border-radius: var(--v-radius-full)
1402
+ * ``` */ readonly radio: 'radio';
1295
1403
  /**
1296
1404
  * ```css
1297
1405
  * border-radius: var(--v-radius-4)
@@ -1325,24 +1433,24 @@ export interface ClassNames {
1325
1433
  * width: 1rem
1326
1434
  * height: 1rem
1327
1435
  * contain: strict
1328
- * width: 2.5rem
1329
- * height: 2.5rem
1330
1436
  * appearance: none
1331
1437
  * background: none
1332
1438
  * border: 2px solid
1333
1439
  * border-bottom-color: #0000
1334
1440
  * border-radius: 50%
1441
+ * width: 2.5rem
1442
+ * height: 2.5rem
1335
1443
  * animation: .7s cubic-bezier(.62, .63, 0, .53) infinite rotate
1336
1444
  * display: inline-flex
1337
1445
  * display: none
1338
1446
  * ``` */ readonly spinner: 'spinner';
1339
1447
  /**
1340
1448
  * ```css
1341
- * width: 1px
1342
- * height: 1px
1343
1449
  * clip: rect(0, 0, 0, 0)
1344
1450
  * white-space: nowrap
1345
1451
  * border-width: 0
1452
+ * width: 1px
1453
+ * height: 1px
1346
1454
  * margin: -1px
1347
1455
  * padding: 0
1348
1456
  * position: absolute
@@ -1402,7 +1510,12 @@ export interface ClassNames {
1402
1510
  * ```css
1403
1511
  * margin-top: var(--stack-gap)
1404
1512
  * --stack-gap: var(--v-space-16)
1513
+ * --stack-gap: var(--v-space-8)
1514
+ * --stack-gap: var(--v-space-4)
1515
+ * --stack-gap: calc(var(--v-space-8) + 1em)
1405
1516
  * --stack-gap: var(--v-space-24)
1517
+ * --stack-gap: 0rem
1518
+ * --stack-gap: var(--v-space-32)
1406
1519
  * ``` */ readonly stackText: 'stack-text';
1407
1520
  /**
1408
1521
  * ```css
@@ -1415,6 +1528,7 @@ export interface ClassNames {
1415
1528
  /**
1416
1529
  * ```css
1417
1530
  * --stack-gap: var(--v-space-24)
1531
+ * --stack-gap: var(--v-space-32)
1418
1532
  * font: var(--v-font-statement-3)
1419
1533
  * ``` */ readonly statement3: 'statement-3';
1420
1534
  /**
@@ -1472,11 +1586,17 @@ export interface ClassNames {
1472
1586
  * ``` */ readonly textStart: 'text-start';
1473
1587
  /**
1474
1588
  * ```css
1589
+ * --stack-gap: var(--v-space-8)
1590
+ * --stack-gap: var(--v-space-4)
1591
+ * --stack-gap: var(--v-space-24)
1592
+ * --stack-gap: var(--v-space-16)
1475
1593
  * font-size: var(--v-font-title-20-size)
1476
1594
  * line-height: var(--v-font-title-20-lineheight)
1477
1595
  * ``` */ readonly title20: 'title-20';
1478
1596
  /**
1479
1597
  * ```css
1598
+ * --stack-gap: var(--v-space-4)
1599
+ * --stack-gap: var(--v-space-16)
1480
1600
  * font-size: var(--v-font-title-24-size)
1481
1601
  * line-height: var(--v-font-title-24-lineheight)
1482
1602
  * ``` */ readonly title24: 'title-24';
@@ -1493,8 +1613,21 @@ export interface ClassNames {
1493
1613
  * ``` */ readonly truncate: 'truncate';
1494
1614
  /**
1495
1615
  * ```css
1616
+ * padding: var(--v-space-16)
1617
+ * background-color: var(--_input-background-color, var(--v-color-background-primary))
1618
+ * border-radius: var(--v-radius-4)
1619
+ * box-shadow: inset 0 0 0 var(--_input-border-size, 1px) var(--_input-border-color, var(--v-color-ornament-primary))
1620
+ * transition: box-shadow var(--v-transition-default)
1621
+ * outline: none
1622
+ * height: 3rem
1623
+ * width: 100%
1496
1624
  * --_input-border-color: var(--v-color-ornament-primary)
1497
1625
  * --_input-background-color: var(--v-color-background-secondary)
1626
+ * --_bg-pos-x: var(--_rtl-toggle) left
1627
+ * background-image: var(--_icon-chevrondown)
1628
+ * background-repeat: no-repeat
1629
+ * background-position: center var(--_bg-pos-x, right) var(--v-space-16)
1630
+ * background-size: 1.5rem 1.5rem
1498
1631
  * ``` */ readonly vInput: 'v-input';
1499
1632
  /**
1500
1633
  * ```css
@@ -1502,6 +1635,7 @@ export interface ClassNames {
1502
1635
  * ``` */ readonly vInputDelegate: 'v-input-delegate';
1503
1636
  /**
1504
1637
  * ```css
1638
+ * --stack-gap: var(--v-space-32)
1505
1639
  * position: relative
1506
1640
  * --_transform-origin: var(--_rtl-toggle) 100%
1507
1641
  * z-index: 1
@@ -1513,27 +1647,34 @@ export interface ClassNames {
1513
1647
  * position: absolute
1514
1648
  * inset-inline-start: var(--v-space-16)
1515
1649
  * transform: translateY(5px)scale(.75)
1650
+ * color: var(--v-color-foreground-feedback-red)
1516
1651
  * height: 3.5rem
1517
1652
  * padding-top: 1.625rem
1518
1653
  * padding-bottom: .625rem
1519
1654
  * ``` */ readonly vInputFloatingLabel: 'v-input-floating-label';
1520
1655
  /**
1521
1656
  * ```css
1522
- * width: 1.5rem
1523
- * height: 1.5rem
1524
1657
  * background-image: var(--_icon-eye-slash)
1525
1658
  * background-position: center
1526
1659
  * background-repeat: no-repeat
1527
1660
  * background-size: 1.5rem 1.5rem
1528
1661
  * flex-shrink: 0
1662
+ * width: 1.5rem
1663
+ * height: 1.5rem
1529
1664
  * ``` */ readonly vInputPasswordVisibilityControl: 'v-input__password-visibility-control';
1665
+ /**
1666
+ * ```css
1667
+ * flex-direction: column
1668
+ * display: inline-flex
1669
+ * margin-top: var(--v-space-8)
1670
+ * ``` */ readonly vLabel: 'v-label';
1530
1671
  /**
1531
1672
  * ```css
1532
1673
  * --_outer-margin: 0px
1533
1674
  * --_colspan: min(var(--v-grid-columns), var(--_container-colspan, var(--v-grid-columns)))
1534
1675
  * --_columns-total-width: calc((var(--v-size-gridcolumn) * var(--_colspan)) + var(--v-space-gutter) * (var(--_colspan) - 1))
1535
- * width: 100%
1536
1676
  * max-width: min(80rem, min(var(--v-size-gridmax), var(--_columns-total-width)) + var(--_outer-margin))
1677
+ * width: 100%
1537
1678
  * width: min(var(--v-size-gridmax), var(--_columns-total-width))
1538
1679
  * --_container-colspan: 10
1539
1680
  * ``` */ readonly wLg: 'w-lg';
@@ -1542,8 +1683,8 @@ export interface ClassNames {
1542
1683
  * --_outer-margin: 0px
1543
1684
  * --_colspan: min(var(--v-grid-columns), var(--_container-colspan, var(--v-grid-columns)))
1544
1685
  * --_columns-total-width: calc((var(--v-size-gridcolumn) * var(--_colspan)) + var(--v-space-gutter) * (var(--_colspan) - 1))
1545
- * width: 100%
1546
1686
  * max-width: min(80rem, min(var(--v-size-gridmax), var(--_columns-total-width)) + var(--_outer-margin))
1687
+ * width: 100%
1547
1688
  * width: min(var(--v-size-gridmax), var(--_columns-total-width))
1548
1689
  * --_container-colspan: 10
1549
1690
  * --_container-colspan: 8
@@ -1553,8 +1694,8 @@ export interface ClassNames {
1553
1694
  * --_outer-margin: 0px
1554
1695
  * --_colspan: min(var(--v-grid-columns), var(--_container-colspan, var(--v-grid-columns)))
1555
1696
  * --_columns-total-width: calc((var(--v-size-gridcolumn) * var(--_colspan)) + var(--v-space-gutter) * (var(--_colspan) - 1))
1556
- * width: 100%
1557
1697
  * max-width: min(80rem, min(var(--v-size-gridmax), var(--_columns-total-width)) + var(--_outer-margin))
1698
+ * width: 100%
1558
1699
  * width: min(var(--v-size-gridmax), var(--_columns-total-width))
1559
1700
  * --_container-colspan: 4
1560
1701
  * --_container-colspan: 8
@@ -1565,8 +1706,8 @@ export interface ClassNames {
1565
1706
  * --_outer-margin: 0px
1566
1707
  * --_colspan: min(var(--v-grid-columns), var(--_container-colspan, var(--v-grid-columns)))
1567
1708
  * --_columns-total-width: calc((var(--v-size-gridcolumn) * var(--_colspan)) + var(--v-space-gutter) * (var(--_colspan) - 1))
1568
- * width: 100%
1569
1709
  * max-width: min(80rem, min(var(--v-size-gridmax), var(--_columns-total-width)) + var(--_outer-margin))
1710
+ * width: 100%
1570
1711
  * width: min(var(--v-size-gridmax), var(--_columns-total-width))
1571
1712
  * --_container-colspan: 4
1572
1713
  * --_container-colspan: 6