@rei/cedar 14.0.3 → 14.1.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.
Files changed (88) hide show
  1. package/dist/cedar-compiled.css +1050 -1050
  2. package/dist/cedar.umd.js +5 -5
  3. package/dist/component-docgen.json +1634 -1633
  4. package/dist/icon-component-docgen.json +587 -587
  5. package/dist/lib.d.ts +4 -4
  6. package/dist/src/components/accordion/styles/CdrAccordion.module.scss.mjs +29 -29
  7. package/dist/src/components/accordion/styles/CdrAccordionGroup.module.scss.mjs +2 -2
  8. package/dist/src/components/banner/styles/CdrBanner.module.scss.mjs +14 -14
  9. package/dist/src/components/breadcrumb/styles/CdrBreadcrumb.module.scss.mjs +7 -7
  10. package/dist/src/components/button/styles/CdrButton.module.scss.mjs +31 -31
  11. package/dist/src/components/caption/styles/CdrCaption.module.scss.mjs +2 -2
  12. package/dist/src/components/card/styles/CdrCard.module.scss.mjs +1 -1
  13. package/dist/src/components/checkbox/styles/CdrCheckbox.module.scss.mjs +27 -27
  14. package/dist/src/components/chip/styles/CdrChip.module.scss.mjs +4 -4
  15. package/dist/src/components/chip/styles/CdrChipGroup.module.scss.mjs +4 -4
  16. package/dist/src/components/container/styles/CdrContainer.module.scss.mjs +2 -2
  17. package/dist/src/components/formError/styles/CdrFormError.module.scss.mjs +2 -2
  18. package/dist/src/components/formGroup/styles/CdrFormGroup.module.scss.mjs +8 -8
  19. package/dist/src/components/grid/styles/CdrGrid.module.scss.mjs +21 -21
  20. package/dist/src/components/icon/styles/CdrIcon.module.scss.mjs +12 -12
  21. package/dist/src/components/image/styles/CdrImg.module.scss.mjs +8 -8
  22. package/dist/src/components/input/CdrInput.vue2.mjs +32 -32
  23. package/dist/src/components/input/styles/CdrInput.module.scss.mjs +32 -32
  24. package/dist/src/components/labelStandalone/styles/CdrLabelStandalone.module.scss.mjs +12 -12
  25. package/dist/src/components/labelWrapper/styles/CdrLabelWrapper.module.scss.mjs +25 -25
  26. package/dist/src/components/link/styles/CdrLink.module.scss.mjs +3 -3
  27. package/dist/src/components/list/styles/CdrList.module.scss.mjs +5 -5
  28. package/dist/src/components/modal/styles/CdrModal.module.scss.mjs +12 -12
  29. package/dist/src/components/pagination/styles/CdrPagination.module.scss.mjs +53 -53
  30. package/dist/src/components/popover/styles/CdrPopover.module.scss.mjs +63 -63
  31. package/dist/src/components/popup/styles/CdrPopup.module.scss.mjs +14 -14
  32. package/dist/src/components/quote/styles/CdrQuote.module.scss.mjs +4 -4
  33. package/dist/src/components/radio/styles/CdrRadio.module.scss.mjs +27 -27
  34. package/dist/src/components/rating/styles/CdrRating.module.scss.mjs +44 -44
  35. package/dist/src/components/select/styles/CdrSelect.module.scss.mjs +42 -42
  36. package/dist/src/components/skeleton/styles/CdrSkeleton.module.scss.mjs +1 -1
  37. package/dist/src/components/skeleton/styles/CdrSkeletonBone.module.scss.mjs +7 -7
  38. package/dist/src/components/switch/styles/CdrSwitch.module.scss.mjs +8 -8
  39. package/dist/src/components/table/styles/CdrTable.module.scss.mjs +13 -13
  40. package/dist/src/components/tabs/styles/CdrTabPanel.module.scss.mjs +5 -5
  41. package/dist/src/components/tabs/styles/CdrTabs.module.scss.mjs +28 -28
  42. package/dist/src/components/text/styles/CdrText.module.scss.mjs +1 -1
  43. package/dist/src/components/toast/styles/CdrToast.module.scss.mjs +57 -57
  44. package/dist/src/components/toggleButton/styles/CdrToggleButton.module.scss.mjs +2 -2
  45. package/dist/src/components/toggleButton/styles/CdrToggleGroup.module.scss.mjs +5 -5
  46. package/dist/src/components/tooltip/styles/CdrTooltip.module.scss.mjs +16 -16
  47. package/dist/style/cdr-accordion-group.css +1 -1
  48. package/dist/style/cdr-accordion.css +1 -1
  49. package/dist/style/cdr-banner.css +1 -1
  50. package/dist/style/cdr-breadcrumb.css +1 -1
  51. package/dist/style/cdr-button.css +1 -1
  52. package/dist/style/cdr-caption.css +1 -1
  53. package/dist/style/cdr-card.css +1 -1
  54. package/dist/style/cdr-checkbox.css +1 -1
  55. package/dist/style/cdr-chip-group.css +1 -1
  56. package/dist/style/cdr-chip.css +1 -1
  57. package/dist/style/cdr-container.css +1 -1
  58. package/dist/style/cdr-form-error.css +1 -1
  59. package/dist/style/cdr-form-group.css +1 -1
  60. package/dist/style/cdr-grid.css +1 -1
  61. package/dist/style/cdr-icon.css +1 -1
  62. package/dist/style/cdr-img.css +1 -1
  63. package/dist/style/cdr-input.css +1 -1
  64. package/dist/style/cdr-label-standalone.css +1 -1
  65. package/dist/style/cdr-label-wrapper.css +1 -1
  66. package/dist/style/cdr-link.css +1 -1
  67. package/dist/style/cdr-list.css +1 -1
  68. package/dist/style/cdr-modal.css +1 -1
  69. package/dist/style/cdr-pagination.css +1 -1
  70. package/dist/style/cdr-popover.css +1 -1
  71. package/dist/style/cdr-popup.css +1 -1
  72. package/dist/style/cdr-quote.css +1 -1
  73. package/dist/style/cdr-radio.css +1 -1
  74. package/dist/style/cdr-rating.css +1 -1
  75. package/dist/style/cdr-select.css +1 -1
  76. package/dist/style/cdr-skeleton-bone.css +1 -1
  77. package/dist/style/cdr-skeleton.css +1 -1
  78. package/dist/style/cdr-switch.css +1 -1
  79. package/dist/style/cdr-tab-panel.css +1 -1
  80. package/dist/style/cdr-table.css +1 -1
  81. package/dist/style/cdr-tabs.css +1 -1
  82. package/dist/style/cdr-text.css +1 -1
  83. package/dist/style/cdr-toast.css +1 -1
  84. package/dist/style/cdr-toggle-button.css +1 -1
  85. package/dist/style/cdr-toggle-group.css +1 -1
  86. package/dist/style/cdr-tooltip.css +1 -1
  87. package/dist/style.css +1 -1
  88. package/package.json +2 -2
@@ -163,43 +163,6 @@
163
163
  }
164
164
  ]
165
165
  },
166
- "CdrAccordionGroup": {
167
- "name": "CdrAccordionGroup",
168
- "exportName": "default",
169
- "displayName": "CdrAccordionGroup",
170
- "description": "",
171
- "tags": {},
172
- "props": [
173
- {
174
- "name": "unwrap",
175
- "description": "A prop that will present accordion content as unwrapped. All content is expanded at the provided breakpoints.",
176
- "tags": {},
177
- "values": [
178
- "@xs",
179
- "@sm",
180
- "@md",
181
- "@lg",
182
- "true"
183
- ],
184
- "type": {
185
- "name": "string|boolean"
186
- },
187
- "defaultValue": {
188
- "func": false,
189
- "value": false
190
- }
191
- }
192
- ],
193
- "slots": [
194
- {
195
- "name": "default",
196
- "description": "CdrAccordionGroup content (i.e. CdrAccordion components)"
197
- }
198
- ],
199
- "sourceFiles": [
200
- "./src/components/accordion/CdrAccordionGroup.vue"
201
- ]
202
- },
203
166
  "CdrBanner": {
204
167
  "name": "CdrBanner",
205
168
  "description": "Provides contextual feedback messages for typical user actions",
@@ -402,16 +365,16 @@
402
365
  }
403
366
  ]
404
367
  },
405
- "CdrBreadcrumb": {
406
- "name": "CdrBreadcrumb",
407
- "description": "Navigation used to reveal a page's location within the site hierarchy",
368
+ "CdrCaption": {
369
+ "name": "CdrCaption",
370
+ "description": "Provides context and credit for an asset such as an image, video, or chart",
408
371
  "tags": {},
409
372
  "exportName": "default",
410
- "displayName": "CdrBreadcrumb",
373
+ "displayName": "CdrCaption",
411
374
  "props": [
412
375
  {
413
- "name": "items",
414
- "description": "Sets the array of a breadcrumb object containing a 'url' and 'name' property.",
376
+ "name": "summary",
377
+ "description": "Sets the string content for the description body of the caption.",
415
378
  "tags": {
416
379
  "demoIgnore": [
417
380
  {
@@ -421,27 +384,12 @@
421
384
  ]
422
385
  },
423
386
  "type": {
424
- "name": "breadcrumbItem[]"
425
- },
426
- "defaultValue": {
427
- "func": true,
428
- "value": "() => []"
429
- }
430
- },
431
- {
432
- "name": "truncationEnabled",
433
- "description": "Controls the ability to truncate the entire breadcrumb path. If this value is false, truncation will no longer occur.",
434
- "type": {
435
- "name": "boolean"
436
- },
437
- "defaultValue": {
438
- "func": false,
439
- "value": true
387
+ "name": "string"
440
388
  }
441
389
  },
442
390
  {
443
- "name": "id",
444
- "description": "Define a custom ID for the `<nav>` element. Randomly generated if no ID provided.",
391
+ "name": "credit",
392
+ "description": "Sets the string content for attribution.",
445
393
  "tags": {
446
394
  "demoIgnore": [
447
395
  {
@@ -455,130 +403,107 @@
455
403
  }
456
404
  }
457
405
  ],
458
- "events": [
459
- {
460
- "name": "navigate",
461
- "description": "Emits when a breadcrumb item is clicked. `e.preventDefault()` may be used to override the default link navigation.",
462
- "properties": [
463
- {
464
- "type": {
465
- "names": [
466
- "mixed"
467
- ]
468
- },
469
- "name": "breadcrumb",
470
- "description": "The breadcrumb data object"
471
- }
472
- ],
473
- "tags": [
474
- {
475
- "title": "param",
476
- "type": {
477
- "name": "mixed"
478
- },
479
- "name": "breadcrumb",
480
- "description": "The breadcrumb data object"
481
- }
482
- ]
483
- }
484
- ],
485
- "slots": [
486
- {
487
- "name": "link",
488
- "scoped": true,
489
- "bindings": [
490
- {
491
- "name": "class",
492
- "title": "binding"
493
- },
494
- {
495
- "name": "href",
496
- "title": "binding"
497
- },
498
- {
499
- "name": "content",
500
- "title": "binding"
501
- }
502
- ]
503
- }
504
- ],
505
406
  "sourceFiles": [
506
- "./src/components/breadcrumb/CdrBreadcrumb.vue"
407
+ "./src/components/caption/CdrCaption.vue"
507
408
  ],
508
409
  "UIProperties": [
509
410
  {
510
- "name": "--cdr-breadcrumb-ellipses-icon-color",
511
- "defaultValue": "--cdr-color-text-secondary",
512
- "description": "Ellipses icon color"
513
- },
514
- {
515
- "name": "--cdr-breadcrumb-ellipses-icon-highlight-color",
516
- "defaultValue": "--cdr-color-text-link-hover",
517
- "description": "Ellipses icon hover, active and focus color"
411
+ "name": "--cdr-caption-summary-color",
412
+ "defaultValue": "--cdr-color-text-primary",
413
+ "description": "Text color of a cdr-caption"
518
414
  },
519
415
  {
520
- "name": "--cdr-breadcrumb-item-color",
416
+ "name": "--cdr-caption-cite-color",
521
417
  "defaultValue": "--cdr-color-text-secondary",
522
- "description": "Breadcrumb item color"
523
- },
524
- {
525
- "name": "--cdr-breadcrumb-item-linked-highlight-color",
526
- "defaultValue": "--cdr-color-text-link-hover",
527
- "description": "Breadcrumb item linked hover, active and focus color"
418
+ "description": "Text color of a cdr-caption"
528
419
  }
529
420
  ]
530
421
  },
531
- "CdrCaption": {
532
- "name": "CdrCaption",
533
- "description": "Provides context and credit for an asset such as an image, video, or chart",
534
- "tags": {},
422
+ "CdrAccordionGroup": {
423
+ "name": "CdrAccordionGroup",
535
424
  "exportName": "default",
536
- "displayName": "CdrCaption",
425
+ "displayName": "CdrAccordionGroup",
426
+ "description": "",
427
+ "tags": {},
537
428
  "props": [
538
429
  {
539
- "name": "summary",
540
- "description": "Sets the string content for the description body of the caption.",
541
- "tags": {
542
- "demoIgnore": [
543
- {
544
- "description": "true",
545
- "title": "demoIgnore"
546
- }
547
- ]
548
- },
430
+ "name": "unwrap",
431
+ "description": "A prop that will present accordion content as unwrapped. All content is expanded at the provided breakpoints.",
432
+ "tags": {},
433
+ "values": [
434
+ "@xs",
435
+ "@sm",
436
+ "@md",
437
+ "@lg",
438
+ "true"
439
+ ],
549
440
  "type": {
550
- "name": "string"
441
+ "name": "string|boolean"
442
+ },
443
+ "defaultValue": {
444
+ "func": false,
445
+ "value": false
551
446
  }
552
- },
447
+ }
448
+ ],
449
+ "slots": [
553
450
  {
554
- "name": "credit",
555
- "description": "Sets the string content for attribution.",
556
- "tags": {
557
- "demoIgnore": [
558
- {
559
- "description": "true",
560
- "title": "demoIgnore"
561
- }
562
- ]
563
- },
451
+ "name": "default",
452
+ "description": "CdrAccordionGroup content (i.e. CdrAccordion components)"
453
+ }
454
+ ],
455
+ "sourceFiles": [
456
+ "./src/components/accordion/CdrAccordionGroup.vue"
457
+ ]
458
+ },
459
+ "CdrCard": {
460
+ "name": "CdrCard",
461
+ "description": "Related, interactive containers linking to a single subject or destination",
462
+ "tags": {},
463
+ "exportName": "default",
464
+ "displayName": "CdrCard",
465
+ "props": [
466
+ {
467
+ "name": "tag",
468
+ "description": "Sets valid HTML container element tag.",
564
469
  "type": {
565
470
  "name": "string"
471
+ },
472
+ "defaultValue": {
473
+ "func": false,
474
+ "value": "'article'"
566
475
  }
567
476
  }
568
477
  ],
478
+ "slots": [
479
+ {
480
+ "name": "default",
481
+ "description": "CdrCard content"
482
+ }
483
+ ],
569
484
  "sourceFiles": [
570
- "./src/components/caption/CdrCaption.vue"
485
+ "./src/components/card/CdrCard.vue"
571
486
  ],
572
487
  "UIProperties": [
573
488
  {
574
- "name": "--cdr-caption-summary-color",
489
+ "name": "--cdr-card-base-background-color",
490
+ "defaultValue": "--cdr-color-background-primary",
491
+ "description": "Background color of a cdr-card"
492
+ },
493
+ {
494
+ "name": "--cdr-card-base-color",
575
495
  "defaultValue": "--cdr-color-text-primary",
576
- "description": "Text color of a cdr-caption"
496
+ "description": "Text color of a cdr-card"
577
497
  },
578
498
  {
579
- "name": "--cdr-caption-cite-color",
580
- "defaultValue": "--cdr-color-text-secondary",
581
- "description": "Text color of a cdr-caption"
499
+ "name": "--cdr-card-link-color",
500
+ "defaultValue": "--cdr-color-text-primary",
501
+ "description": "Link text color of a cdr-card"
502
+ },
503
+ {
504
+ "name": "--cdr-card-link-hover-color",
505
+ "defaultValue": "--cdr-color-text-link-hover",
506
+ "description": "Link hover text color of a cdr-card"
582
507
  }
583
508
  ]
584
509
  },
@@ -1284,54 +1209,129 @@
1284
1209
  }
1285
1210
  ]
1286
1211
  },
1287
- "CdrCard": {
1288
- "name": "CdrCard",
1289
- "description": "Related, interactive containers linking to a single subject or destination",
1212
+ "CdrBreadcrumb": {
1213
+ "name": "CdrBreadcrumb",
1214
+ "description": "Navigation used to reveal a page's location within the site hierarchy",
1290
1215
  "tags": {},
1291
1216
  "exportName": "default",
1292
- "displayName": "CdrCard",
1217
+ "displayName": "CdrBreadcrumb",
1293
1218
  "props": [
1294
1219
  {
1295
- "name": "tag",
1296
- "description": "Sets valid HTML container element tag.",
1297
- "type": {
1298
- "name": "string"
1299
- },
1300
- "defaultValue": {
1301
- "func": false,
1302
- "value": "'article'"
1303
- }
1220
+ "name": "items",
1221
+ "description": "Sets the array of a breadcrumb object containing a 'url' and 'name' property.",
1222
+ "tags": {
1223
+ "demoIgnore": [
1224
+ {
1225
+ "description": "true",
1226
+ "title": "demoIgnore"
1227
+ }
1228
+ ]
1229
+ },
1230
+ "type": {
1231
+ "name": "breadcrumbItem[]"
1232
+ },
1233
+ "defaultValue": {
1234
+ "func": true,
1235
+ "value": "() => []"
1236
+ }
1237
+ },
1238
+ {
1239
+ "name": "truncationEnabled",
1240
+ "description": "Controls the ability to truncate the entire breadcrumb path. If this value is false, truncation will no longer occur.",
1241
+ "type": {
1242
+ "name": "boolean"
1243
+ },
1244
+ "defaultValue": {
1245
+ "func": false,
1246
+ "value": true
1247
+ }
1248
+ },
1249
+ {
1250
+ "name": "id",
1251
+ "description": "Define a custom ID for the `<nav>` element. Randomly generated if no ID provided.",
1252
+ "tags": {
1253
+ "demoIgnore": [
1254
+ {
1255
+ "description": "true",
1256
+ "title": "demoIgnore"
1257
+ }
1258
+ ]
1259
+ },
1260
+ "type": {
1261
+ "name": "string"
1262
+ }
1263
+ }
1264
+ ],
1265
+ "events": [
1266
+ {
1267
+ "name": "navigate",
1268
+ "description": "Emits when a breadcrumb item is clicked. `e.preventDefault()` may be used to override the default link navigation.",
1269
+ "properties": [
1270
+ {
1271
+ "type": {
1272
+ "names": [
1273
+ "mixed"
1274
+ ]
1275
+ },
1276
+ "name": "breadcrumb",
1277
+ "description": "The breadcrumb data object"
1278
+ }
1279
+ ],
1280
+ "tags": [
1281
+ {
1282
+ "title": "param",
1283
+ "type": {
1284
+ "name": "mixed"
1285
+ },
1286
+ "name": "breadcrumb",
1287
+ "description": "The breadcrumb data object"
1288
+ }
1289
+ ]
1304
1290
  }
1305
1291
  ],
1306
1292
  "slots": [
1307
1293
  {
1308
- "name": "default",
1309
- "description": "CdrCard content"
1294
+ "name": "link",
1295
+ "scoped": true,
1296
+ "bindings": [
1297
+ {
1298
+ "name": "class",
1299
+ "title": "binding"
1300
+ },
1301
+ {
1302
+ "name": "href",
1303
+ "title": "binding"
1304
+ },
1305
+ {
1306
+ "name": "content",
1307
+ "title": "binding"
1308
+ }
1309
+ ]
1310
1310
  }
1311
1311
  ],
1312
1312
  "sourceFiles": [
1313
- "./src/components/card/CdrCard.vue"
1313
+ "./src/components/breadcrumb/CdrBreadcrumb.vue"
1314
1314
  ],
1315
1315
  "UIProperties": [
1316
1316
  {
1317
- "name": "--cdr-card-base-background-color",
1318
- "defaultValue": "--cdr-color-background-primary",
1319
- "description": "Background color of a cdr-card"
1317
+ "name": "--cdr-breadcrumb-ellipses-icon-color",
1318
+ "defaultValue": "--cdr-color-text-secondary",
1319
+ "description": "Ellipses icon color"
1320
1320
  },
1321
1321
  {
1322
- "name": "--cdr-card-base-color",
1323
- "defaultValue": "--cdr-color-text-primary",
1324
- "description": "Text color of a cdr-card"
1322
+ "name": "--cdr-breadcrumb-ellipses-icon-highlight-color",
1323
+ "defaultValue": "--cdr-color-text-link-hover",
1324
+ "description": "Ellipses icon hover, active and focus color"
1325
1325
  },
1326
1326
  {
1327
- "name": "--cdr-card-link-color",
1328
- "defaultValue": "--cdr-color-text-primary",
1329
- "description": "Link text color of a cdr-card"
1327
+ "name": "--cdr-breadcrumb-item-color",
1328
+ "defaultValue": "--cdr-color-text-secondary",
1329
+ "description": "Breadcrumb item color"
1330
1330
  },
1331
1331
  {
1332
- "name": "--cdr-card-link-hover-color",
1332
+ "name": "--cdr-breadcrumb-item-linked-highlight-color",
1333
1333
  "defaultValue": "--cdr-color-text-link-hover",
1334
- "description": "Link hover text color of a cdr-card"
1334
+ "description": "Breadcrumb item linked hover, active and focus color"
1335
1335
  }
1336
1336
  ]
1337
1337
  },
@@ -1593,45 +1593,39 @@
1593
1593
  }
1594
1594
  ]
1595
1595
  },
1596
- "CdrChipGroup": {
1597
- "name": "CdrChipGroup",
1596
+ "CdrFormError": {
1597
+ "name": "CdrFormError",
1598
1598
  "exportName": "default",
1599
- "displayName": "CdrChipGroup",
1599
+ "displayName": "CdrFormError",
1600
1600
  "description": "",
1601
1601
  "tags": {},
1602
1602
  "props": [
1603
1603
  {
1604
- "name": "label",
1605
- "description": "Sets a label that describes the chip group and what it is selecting. By default this label is visually hidden and only made available to screen readers.",
1606
- "type": {
1607
- "name": "string"
1608
- },
1609
- "required": true
1610
- },
1611
- {
1612
- "name": "hideLabel",
1613
- "description": "Visually hides the chip group label but makes it accessible to screen readers.",
1604
+ "name": "error",
1614
1605
  "type": {
1615
- "name": "boolean"
1616
- },
1617
- "defaultValue": {
1618
- "func": false,
1619
- "value": true
1606
+ "name": "boolean|string"
1620
1607
  }
1621
1608
  }
1622
1609
  ],
1623
1610
  "slots": [
1624
1611
  {
1625
- "name": "label",
1626
- "description": "Override CdrChip label content with a custom element"
1627
- },
1628
- {
1629
- "name": "default",
1630
- "description": "CdrChipGroup content (CdrChip components)"
1612
+ "name": "error"
1631
1613
  }
1632
1614
  ],
1633
1615
  "sourceFiles": [
1634
- "./src/components/chip/CdrChipGroup.vue"
1616
+ "./src/components/formError/CdrFormError.vue"
1617
+ ],
1618
+ "UIProperties": [
1619
+ {
1620
+ "name": "--cdr-form-error-text-color",
1621
+ "defaultValue": "--cdr-color-text-input-error",
1622
+ "description": "Text color of a cdr-form-error"
1623
+ },
1624
+ {
1625
+ "name": "--cdr-form-error-fill-color",
1626
+ "defaultValue": "--cdr-color-text-input-error",
1627
+ "description": "Fill color of a cdr-form-error"
1628
+ }
1635
1629
  ]
1636
1630
  },
1637
1631
  "CdrChip": {
@@ -1765,162 +1759,62 @@
1765
1759
  }
1766
1760
  ]
1767
1761
  },
1768
- "CdrContainer": {
1769
- "name": "CdrContainer",
1770
- "description": "Provides base margins and responsive layout logic for pages",
1771
- "tags": {},
1762
+ "CdrChipGroup": {
1763
+ "name": "CdrChipGroup",
1772
1764
  "exportName": "default",
1773
- "displayName": "CdrContainer",
1765
+ "displayName": "CdrChipGroup",
1766
+ "description": "",
1767
+ "tags": {},
1774
1768
  "props": [
1775
1769
  {
1776
- "name": "tag",
1777
- "description": "Sets the HTML tag for the container element",
1770
+ "name": "label",
1771
+ "description": "Sets a label that describes the chip group and what it is selecting. By default this label is visually hidden and only made available to screen readers.",
1778
1772
  "type": {
1779
1773
  "name": "string"
1780
1774
  },
1781
- "defaultValue": {
1782
- "func": false,
1783
- "value": "'div'"
1784
- }
1775
+ "required": true
1785
1776
  },
1786
1777
  {
1787
- "name": "modifier",
1788
- "description": "Controls whether container is static or fluid width.",
1789
- "tags": {
1790
- "demoSelectMultiple": [
1791
- {
1792
- "description": "false",
1793
- "title": "demoSelectMultiple"
1794
- }
1795
- ]
1796
- },
1797
- "values": [
1798
- "static",
1799
- "fluid"
1800
- ],
1778
+ "name": "hideLabel",
1779
+ "description": "Visually hides the chip group label but makes it accessible to screen readers.",
1801
1780
  "type": {
1802
- "name": "string"
1781
+ "name": "boolean"
1803
1782
  },
1804
1783
  "defaultValue": {
1805
1784
  "func": false,
1806
- "value": "'static'"
1785
+ "value": true
1807
1786
  }
1808
1787
  }
1809
1788
  ],
1810
1789
  "slots": [
1811
1790
  {
1812
- "name": "default",
1813
- "description": "CdrContainer content"
1814
- }
1815
- ],
1816
- "sourceFiles": [
1817
- "./src/components/container/CdrContainer.vue"
1818
- ]
1819
- },
1820
- "CdrFormError": {
1821
- "name": "CdrFormError",
1822
- "exportName": "default",
1823
- "displayName": "CdrFormError",
1824
- "description": "",
1825
- "tags": {},
1826
- "props": [
1827
- {
1828
- "name": "error",
1829
- "type": {
1830
- "name": "boolean|string"
1831
- }
1832
- }
1833
- ],
1834
- "slots": [
1791
+ "name": "label",
1792
+ "description": "Override CdrChip label content with a custom element"
1793
+ },
1835
1794
  {
1836
- "name": "error"
1795
+ "name": "default",
1796
+ "description": "CdrChipGroup content (CdrChip components)"
1837
1797
  }
1838
1798
  ],
1839
1799
  "sourceFiles": [
1840
- "./src/components/formError/CdrFormError.vue"
1841
- ],
1842
- "UIProperties": [
1843
- {
1844
- "name": "--cdr-form-error-text-color",
1845
- "defaultValue": "--cdr-color-text-input-error",
1846
- "description": "Text color of a cdr-form-error"
1847
- },
1848
- {
1849
- "name": "--cdr-form-error-fill-color",
1850
- "defaultValue": "--cdr-color-text-input-error",
1851
- "description": "Fill color of a cdr-form-error"
1852
- }
1800
+ "./src/components/chip/CdrChipGroup.vue"
1853
1801
  ]
1854
1802
  },
1855
- "CdrGrid": {
1856
- "name": "CdrGrid",
1857
- "description": "Simple wrapper for working with CSS grid",
1803
+ "CdrFormGroup": {
1804
+ "name": "CdrFormGroup",
1805
+ "description": "Groups related input elements together",
1858
1806
  "tags": {},
1859
1807
  "exportName": "default",
1860
- "displayName": "CdrGrid",
1808
+ "displayName": "CdrFormGroup",
1861
1809
  "props": [
1862
1810
  {
1863
- "name": "gutter",
1864
- "description": "Defines gutter size. Also accepts responsive values with `@breakpoint`: \"none@md\"",
1811
+ "name": "id",
1812
+ "description": "Custom ID that is mapped to the form error. If this value is not set, it will be randomly generated.",
1865
1813
  "tags": {
1866
- "demoSelectMultiple": [
1814
+ "demoIgnore": [
1867
1815
  {
1868
- "description": "false",
1869
- "title": "demoSelectMultiple"
1870
- }
1871
- ]
1872
- },
1873
- "values": [
1874
- "none",
1875
- "small",
1876
- "medium",
1877
- "large"
1878
- ],
1879
- "type": {
1880
- "name": "string"
1881
- },
1882
- "defaultValue": {
1883
- "func": false,
1884
- "value": "'medium@xs medium@sm large@md large@lg'"
1885
- }
1886
- },
1887
- {
1888
- "name": "tag",
1889
- "description": "Sets the HTML tag for the grid element",
1890
- "type": {
1891
- "name": "string"
1892
- },
1893
- "defaultValue": {
1894
- "func": false,
1895
- "value": "'div'"
1896
- }
1897
- }
1898
- ],
1899
- "slots": [
1900
- {
1901
- "name": "default",
1902
- "description": "CdrGrid content (grid child elements)"
1903
- }
1904
- ],
1905
- "sourceFiles": [
1906
- "./src/components/grid/CdrGrid.vue"
1907
- ]
1908
- },
1909
- "CdrFormGroup": {
1910
- "name": "CdrFormGroup",
1911
- "description": "Groups related input elements together",
1912
- "tags": {},
1913
- "exportName": "default",
1914
- "displayName": "CdrFormGroup",
1915
- "props": [
1916
- {
1917
- "name": "id",
1918
- "description": "Custom ID that is mapped to the form error. If this value is not set, it will be randomly generated.",
1919
- "tags": {
1920
- "demoIgnore": [
1921
- {
1922
- "description": "true",
1923
- "title": "demoIgnore"
1816
+ "description": "true",
1817
+ "title": "demoIgnore"
1924
1818
  }
1925
1819
  ]
1926
1820
  },
@@ -2227,95 +2121,56 @@
2227
2121
  }
2228
2122
  ]
2229
2123
  },
2230
- "CdrLabelStandalone": {
2231
- "name": "CdrLabelStandalone",
2232
- "exportName": "default",
2233
- "displayName": "CdrLabelStandalone",
2234
- "description": "",
2124
+ "CdrContainer": {
2125
+ "name": "CdrContainer",
2126
+ "description": "Provides base margins and responsive layout logic for pages",
2235
2127
  "tags": {},
2128
+ "exportName": "default",
2129
+ "displayName": "CdrContainer",
2236
2130
  "props": [
2237
2131
  {
2238
- "name": "forId",
2132
+ "name": "tag",
2133
+ "description": "Sets the HTML tag for the container element",
2239
2134
  "type": {
2240
2135
  "name": "string"
2241
2136
  },
2242
- "required": true
2243
- },
2244
- {
2245
- "name": "label",
2246
- "type": {
2247
- "name": "string"
2248
- }
2249
- },
2250
- {
2251
- "name": "disabled",
2252
- "type": {
2253
- "name": "boolean"
2254
- }
2255
- },
2256
- {
2257
- "name": "required",
2258
- "type": {
2259
- "name": "boolean"
2260
- }
2261
- },
2262
- {
2263
- "name": "optional",
2264
- "type": {
2265
- "name": "boolean"
2137
+ "defaultValue": {
2138
+ "func": false,
2139
+ "value": "'div'"
2266
2140
  }
2267
2141
  },
2268
2142
  {
2269
- "name": "hideLabel",
2143
+ "name": "modifier",
2144
+ "description": "Controls whether container is static or fluid width.",
2145
+ "tags": {
2146
+ "demoSelectMultiple": [
2147
+ {
2148
+ "description": "false",
2149
+ "title": "demoSelectMultiple"
2150
+ }
2151
+ ]
2152
+ },
2153
+ "values": [
2154
+ "static",
2155
+ "fluid"
2156
+ ],
2270
2157
  "type": {
2271
- "name": "boolean"
2158
+ "name": "string"
2159
+ },
2160
+ "defaultValue": {
2161
+ "func": false,
2162
+ "value": "'static'"
2272
2163
  }
2273
2164
  }
2274
2165
  ],
2275
2166
  "slots": [
2276
2167
  {
2277
- "name": "helper"
2278
- },
2279
- {
2280
- "name": "default"
2281
- },
2282
- {
2283
- "name": "info-action"
2284
- },
2285
- {
2286
- "name": "info"
2287
- },
2288
- {
2289
- "name": "helper-text-bottom"
2290
- },
2291
- {
2292
- "name": "error"
2168
+ "name": "default",
2169
+ "description": "CdrContainer content"
2293
2170
  }
2294
2171
  ],
2295
2172
  "sourceFiles": [
2296
- "./src/components/labelStandalone/CdrLabelStandalone.vue"
2297
- ],
2298
- "UIProperties": [
2299
- {
2300
- "name": "--cdr-label-standalone-text-color",
2301
- "defaultValue": "--cdr-color-text-input-label",
2302
- "description": "Text color of a standalone label"
2303
- },
2304
- {
2305
- "name": "--cdr-label-standalone-disabled-text-color",
2306
- "defaultValue": "--cdr-color-text-input-disabled",
2307
- "description": "Text color of a standalone label when disabled"
2308
- },
2309
- {
2310
- "name": "--cdr-label-standalone-optional-text-color",
2311
- "defaultValue": "--cdr-color-text-input-optional",
2312
- "description": "Text color of a standalone label when optional"
2313
- },
2314
- {
2315
- "name": "--cdr-label-standalone-helper-text-color",
2316
- "defaultValue": "--cdr-color-text-input-help",
2317
- "description": "Text color of a standalone helper label"
2318
- }
2173
+ "./src/components/container/CdrContainer.vue"
2319
2174
  ]
2320
2175
  },
2321
2176
  "CdrInput": {
@@ -2334,7 +2189,7 @@
2334
2189
  },
2335
2190
  {
2336
2191
  "name": "type",
2337
- "description": "'type' attribute for the input as defined by w3c.\n Only supporting text|email|number|password|search|url|date.\n The increment/decrement webkit psuedo element is hidden for number.",
2192
+ "description": "'type' attribute for the input as defined by w3c.\n Only supporting text|email|number|password|search|url|date|datetime-local.\n The increment/decrement webkit psuedo element is hidden for number.",
2338
2193
  "tags": {
2339
2194
  "demoSelectMultiple": [
2340
2195
  {
@@ -2351,7 +2206,8 @@
2351
2206
  "search",
2352
2207
  "url",
2353
2208
  "tel",
2354
- "date"
2209
+ "date",
2210
+ "datetime-local"
2355
2211
  ],
2356
2212
  "type": {
2357
2213
  "name": "string"
@@ -2661,6 +2517,97 @@
2661
2517
  }
2662
2518
  ]
2663
2519
  },
2520
+ "CdrLabelStandalone": {
2521
+ "name": "CdrLabelStandalone",
2522
+ "exportName": "default",
2523
+ "displayName": "CdrLabelStandalone",
2524
+ "description": "",
2525
+ "tags": {},
2526
+ "props": [
2527
+ {
2528
+ "name": "forId",
2529
+ "type": {
2530
+ "name": "string"
2531
+ },
2532
+ "required": true
2533
+ },
2534
+ {
2535
+ "name": "label",
2536
+ "type": {
2537
+ "name": "string"
2538
+ }
2539
+ },
2540
+ {
2541
+ "name": "disabled",
2542
+ "type": {
2543
+ "name": "boolean"
2544
+ }
2545
+ },
2546
+ {
2547
+ "name": "required",
2548
+ "type": {
2549
+ "name": "boolean"
2550
+ }
2551
+ },
2552
+ {
2553
+ "name": "optional",
2554
+ "type": {
2555
+ "name": "boolean"
2556
+ }
2557
+ },
2558
+ {
2559
+ "name": "hideLabel",
2560
+ "type": {
2561
+ "name": "boolean"
2562
+ }
2563
+ }
2564
+ ],
2565
+ "slots": [
2566
+ {
2567
+ "name": "helper"
2568
+ },
2569
+ {
2570
+ "name": "default"
2571
+ },
2572
+ {
2573
+ "name": "info-action"
2574
+ },
2575
+ {
2576
+ "name": "info"
2577
+ },
2578
+ {
2579
+ "name": "helper-text-bottom"
2580
+ },
2581
+ {
2582
+ "name": "error"
2583
+ }
2584
+ ],
2585
+ "sourceFiles": [
2586
+ "./src/components/labelStandalone/CdrLabelStandalone.vue"
2587
+ ],
2588
+ "UIProperties": [
2589
+ {
2590
+ "name": "--cdr-label-standalone-text-color",
2591
+ "defaultValue": "--cdr-color-text-input-label",
2592
+ "description": "Text color of a standalone label"
2593
+ },
2594
+ {
2595
+ "name": "--cdr-label-standalone-disabled-text-color",
2596
+ "defaultValue": "--cdr-color-text-input-disabled",
2597
+ "description": "Text color of a standalone label when disabled"
2598
+ },
2599
+ {
2600
+ "name": "--cdr-label-standalone-optional-text-color",
2601
+ "defaultValue": "--cdr-color-text-input-optional",
2602
+ "description": "Text color of a standalone label when optional"
2603
+ },
2604
+ {
2605
+ "name": "--cdr-label-standalone-helper-text-color",
2606
+ "defaultValue": "--cdr-color-text-input-help",
2607
+ "description": "Text color of a standalone helper label"
2608
+ }
2609
+ ]
2610
+ },
2664
2611
  "CdrLabelWrapper": {
2665
2612
  "name": "CdrLabelWrapper",
2666
2613
  "exportName": "default",
@@ -2792,12 +2739,66 @@
2792
2739
  }
2793
2740
  ]
2794
2741
  },
2795
- "CdrLink": {
2796
- "name": "CdrLink",
2797
- "description": "Clickable text elements used for navigating to other pages or sections",
2742
+ "CdrGrid": {
2743
+ "name": "CdrGrid",
2744
+ "description": "Simple wrapper for working with CSS grid",
2798
2745
  "tags": {},
2799
2746
  "exportName": "default",
2800
- "displayName": "CdrLink",
2747
+ "displayName": "CdrGrid",
2748
+ "props": [
2749
+ {
2750
+ "name": "gutter",
2751
+ "description": "Defines gutter size. Also accepts responsive values with `@breakpoint`: \"none@md\"",
2752
+ "tags": {
2753
+ "demoSelectMultiple": [
2754
+ {
2755
+ "description": "false",
2756
+ "title": "demoSelectMultiple"
2757
+ }
2758
+ ]
2759
+ },
2760
+ "values": [
2761
+ "none",
2762
+ "small",
2763
+ "medium",
2764
+ "large"
2765
+ ],
2766
+ "type": {
2767
+ "name": "string"
2768
+ },
2769
+ "defaultValue": {
2770
+ "func": false,
2771
+ "value": "'medium@xs medium@sm large@md large@lg'"
2772
+ }
2773
+ },
2774
+ {
2775
+ "name": "tag",
2776
+ "description": "Sets the HTML tag for the grid element",
2777
+ "type": {
2778
+ "name": "string"
2779
+ },
2780
+ "defaultValue": {
2781
+ "func": false,
2782
+ "value": "'div'"
2783
+ }
2784
+ }
2785
+ ],
2786
+ "slots": [
2787
+ {
2788
+ "name": "default",
2789
+ "description": "CdrGrid content (grid child elements)"
2790
+ }
2791
+ ],
2792
+ "sourceFiles": [
2793
+ "./src/components/grid/CdrGrid.vue"
2794
+ ]
2795
+ },
2796
+ "CdrLink": {
2797
+ "name": "CdrLink",
2798
+ "description": "Clickable text elements used for navigating to other pages or sections",
2799
+ "tags": {},
2800
+ "exportName": "default",
2801
+ "displayName": "CdrLink",
2801
2802
  "props": [
2802
2803
  {
2803
2804
  "name": "tag",
@@ -2913,6 +2914,126 @@
2913
2914
  }
2914
2915
  ]
2915
2916
  },
2917
+ "CdrPopover": {
2918
+ "name": "CdrPopover",
2919
+ "description": "Small overlay used to display contextual information",
2920
+ "tags": {},
2921
+ "exportName": "default",
2922
+ "displayName": "CdrPopover",
2923
+ "props": [
2924
+ {
2925
+ "name": "position",
2926
+ "description": "Sets the position where the popover will render relative to the trigger element.",
2927
+ "tags": {
2928
+ "demoSelectMultiple": [
2929
+ {
2930
+ "description": "false",
2931
+ "title": "demoSelectMultiple"
2932
+ }
2933
+ ]
2934
+ },
2935
+ "values": [
2936
+ "top",
2937
+ "bottom",
2938
+ "left",
2939
+ "right"
2940
+ ],
2941
+ "type": {
2942
+ "name": "string"
2943
+ },
2944
+ "required": false,
2945
+ "defaultValue": {
2946
+ "func": false,
2947
+ "value": "'top'"
2948
+ }
2949
+ },
2950
+ {
2951
+ "name": "autoPosition",
2952
+ "description": "If set to `true`, popover will attempt to dynamically set it's position to\nensure it renders within the visible browser window.\nIf `false` the popover will always render in the provided `position`.",
2953
+ "type": {
2954
+ "name": "boolean"
2955
+ },
2956
+ "required": false,
2957
+ "defaultValue": {
2958
+ "func": false,
2959
+ "value": true
2960
+ }
2961
+ },
2962
+ {
2963
+ "name": "label",
2964
+ "description": "Sets the title for the popover content. Can also be provided via the `title` slot.",
2965
+ "type": {
2966
+ "name": "string"
2967
+ },
2968
+ "required": false
2969
+ },
2970
+ {
2971
+ "name": "id",
2972
+ "description": "ID for the popover element, required for accessibility",
2973
+ "type": {
2974
+ "name": "string"
2975
+ },
2976
+ "required": true
2977
+ },
2978
+ {
2979
+ "name": "contentClass",
2980
+ "description": "Add custom class to the popover content wrapper. Allows for overriding size, styling, etc.",
2981
+ "type": {
2982
+ "name": "string"
2983
+ },
2984
+ "required": false
2985
+ },
2986
+ {
2987
+ "name": "open",
2988
+ "description": "Used to programmatically control the popover state. Does not need to be set if you are using the `trigger` slot.",
2989
+ "tags": {
2990
+ "demoIgnore": [
2991
+ {
2992
+ "description": "true",
2993
+ "title": "demoIgnore"
2994
+ }
2995
+ ]
2996
+ },
2997
+ "type": {
2998
+ "name": "boolean"
2999
+ },
3000
+ "required": false,
3001
+ "defaultValue": {
3002
+ "func": false,
3003
+ "value": false
3004
+ }
3005
+ }
3006
+ ],
3007
+ "events": [
3008
+ {
3009
+ "name": "opened",
3010
+ "description": "Emits when popover is opened"
3011
+ },
3012
+ {
3013
+ "name": "closed",
3014
+ "description": "Emits when popover is closed"
3015
+ }
3016
+ ],
3017
+ "slots": [
3018
+ {
3019
+ "name": "trigger",
3020
+ "description": " Slot for the element that triggers the popover."
3021
+ },
3022
+ {
3023
+ "name": "title",
3024
+ "description": "Sets the title for the popover. Can also be set with `label` prop"
3025
+ },
3026
+ {
3027
+ "name": "default"
3028
+ },
3029
+ {
3030
+ "name": "icon"
3031
+ }
3032
+ ],
3033
+ "sourceFiles": [
3034
+ "./src/components/popover/CdrPopover.vue"
3035
+ ]
3036
+ },
2916
3037
  "CdrList": {
2917
3038
  "name": "CdrList",
2918
3039
  "description": "Groups related content items together either vertically or horizontally",
@@ -2994,16 +3115,16 @@
2994
3115
  }
2995
3116
  ]
2996
3117
  },
2997
- "CdrPagination": {
2998
- "name": "CdrPagination",
2999
- "description": "Allows people to navigate to the next or previous page within an experience",
3118
+ "CdrModal": {
3119
+ "name": "CdrModal",
3120
+ "description": "Disruptive, action-blocking overlays used to display important information",
3000
3121
  "tags": {},
3001
3122
  "exportName": "default",
3002
- "displayName": "CdrPagination",
3123
+ "displayName": "CdrModal",
3003
3124
  "props": [
3004
3125
  {
3005
- "name": "id",
3006
- "description": "Define a custom slug for the generated pagination item IDs. Slug is randomly generated if no ID provided.",
3126
+ "name": "opened",
3127
+ "description": "Toggles the state of the modal",
3007
3128
  "tags": {
3008
3129
  "demoIgnore": [
3009
3130
  {
@@ -3012,232 +3133,79 @@
3012
3133
  }
3013
3134
  ]
3014
3135
  },
3136
+ "type": {
3137
+ "name": "boolean"
3138
+ },
3139
+ "required": true
3140
+ },
3141
+ {
3142
+ "name": "label",
3143
+ "description": "Sets `aria-label` and modal title text. Can also use title slot to set title.",
3015
3144
  "type": {
3016
3145
  "name": "string"
3017
- }
3146
+ },
3147
+ "required": true
3018
3148
  },
3019
3149
  {
3020
- "name": "totalPages",
3021
- "description": "Sets the total number of pages for displaying \"Page x of <totalPages>\".\nSometimes the total number of pages is different than total page data objects in the pages array.\nFor example, if only the next and previous pages are provided.",
3150
+ "name": "showTitle",
3151
+ "description": "Toggles the modal title text, which comes from `label` prop or `title` slot.",
3022
3152
  "type": {
3023
- "name": "number"
3153
+ "name": "boolean"
3024
3154
  },
3155
+ "required": false,
3025
3156
  "defaultValue": {
3026
3157
  "func": false,
3027
- "value": "null"
3158
+ "value": true
3028
3159
  }
3029
3160
  },
3030
3161
  {
3031
- "name": "pages",
3032
- "description": "Array of objects containing pagination data.\nObjects must have structure of `{ page: number, url: string }`",
3162
+ "name": "ariaDescribedby",
3163
+ "description": "Text for aria-describedby attribute. Applied to modal content element",
3033
3164
  "type": {
3034
- "name": "paginationItem[]"
3165
+ "name": "string"
3035
3166
  },
3036
- "required": true
3167
+ "required": false,
3168
+ "defaultValue": {
3169
+ "func": false,
3170
+ "value": "null"
3171
+ }
3037
3172
  },
3038
3173
  {
3039
- "name": "linkTag",
3040
- "description": "Sets which tag type is used to render pagination elements",
3174
+ "name": "role",
3175
+ "description": "Sets the `role` attribute on the modal content element",
3041
3176
  "tags": {},
3042
3177
  "values": [
3043
- "a",
3044
- "button"
3178
+ "dialog",
3179
+ "alertDialog"
3045
3180
  ],
3046
3181
  "type": {
3047
3182
  "name": "string"
3048
3183
  },
3184
+ "required": false,
3049
3185
  "defaultValue": {
3050
3186
  "func": false,
3051
- "value": "'a'"
3187
+ "value": "'dialog'"
3052
3188
  }
3053
3189
  },
3054
3190
  {
3055
- "name": "forLabel",
3056
- "description": "Used to customize the aria-label for the root pagination element.\nFor page-level pagination (i.e, pagination that updates the entire page content and changes the URL)\nthis property should be omitted.\nFor intra-page navigation this property should describe the element being paginated, for example:\n`Pagination for sub-content`",
3191
+ "name": "id",
3192
+ "description": "Sets unique `id` for modal",
3057
3193
  "type": {
3058
3194
  "name": "string"
3059
3195
  },
3196
+ "required": false,
3060
3197
  "defaultValue": {
3061
3198
  "func": false,
3062
- "value": "''"
3199
+ "value": "null"
3063
3200
  }
3064
3201
  },
3065
3202
  {
3066
- "name": "modelValue",
3067
- "tags": {
3068
- "ignore": [
3069
- {
3070
- "description": "used for binding v-model, represents the current page",
3071
- "title": "ignore"
3072
- }
3073
- ]
3074
- },
3203
+ "name": "overlayClass",
3204
+ "description": "Adds custom class to the `cdr-modal__overlay` div",
3075
3205
  "type": {
3076
- "name": "number"
3206
+ "name": "string"
3077
3207
  }
3078
- }
3079
- ],
3080
- "events": [
3081
- {
3082
- "name": "update:modelValue",
3083
- "description": "Event emitted by v-model on the select <input> element to indicate current page.\nOnly used on small devices",
3084
- "properties": [
3085
- {
3086
- "type": {
3087
- "names": [
3088
- "mixed"
3089
- ]
3090
- },
3091
- "name": "modelValue"
3092
- }
3093
- ],
3094
- "tags": [
3095
- {
3096
- "title": "param",
3097
- "type": {
3098
- "name": "mixed"
3099
- },
3100
- "name": "modelValue"
3101
- }
3102
- ]
3103
- },
3104
- {
3105
- "name": "navigate",
3106
- "description": "$emit event fired when page changes based on user interaction by clicking a link\nor selecting an option from the select on mobile.\n`event.preventDefault()` can be used to override the default link navigation behavior."
3107
- }
3108
- ],
3109
- "sourceFiles": [
3110
- "./src/components/pagination/CdrPagination.vue"
3111
- ],
3112
- "UIProperties": [
3113
- {
3114
- "name": "--cdr-pagination-link-text-color",
3115
- "defaultValue": "--cdr-color-text-primary",
3116
- "description": "Text color of a cdr-pagination link"
3117
- },
3118
- {
3119
- "name": "--cdr-pagination-link-fill-color",
3120
- "defaultValue": "--cdr-color-text-primary",
3121
- "description": "Fill color of a cdr-pagination link"
3122
- },
3123
- {
3124
- "name": "--cdr-pagination-link-background-color-interaction",
3125
- "defaultValue": "--cdr-color-background-pagination-hover",
3126
- "description": "Background color of a cdr-pagination link on hover/focus/active"
3127
- },
3128
- {
3129
- "name": "--cdr-pagination-link-current-background-color-keyline",
3130
- "defaultValue": "--cdr-color-background-pagination-keyline",
3131
- "description": "Background color of the keyline for the current cdr-pagination link"
3132
- },
3133
- {
3134
- "name": "--cdr-pagination-link-text-color-disabled",
3135
- "defaultValue": "--cdr-color-text-disabled",
3136
- "description": "Text color of a disabled cdr-pagination link"
3137
- },
3138
- {
3139
- "name": "--cdr-pagination-link-fill-color-disabled",
3140
- "defaultValue": "--cdr-color-text-disabled",
3141
- "description": "Fill color of a disabled cdr-pagination link"
3142
- },
3143
- {
3144
- "name": "--cdr-pagination-link-text-color-interactive-disabled",
3145
- "defaultValue": "--cdr-color-text-disabled",
3146
- "description": "Text color of a disabled cdr-pagination link on hover/focus/active"
3147
- }
3148
- ]
3149
- },
3150
- "CdrModal": {
3151
- "name": "CdrModal",
3152
- "description": "Disruptive, action-blocking overlays used to display important information",
3153
- "tags": {},
3154
- "exportName": "default",
3155
- "displayName": "CdrModal",
3156
- "props": [
3157
- {
3158
- "name": "opened",
3159
- "description": "Toggles the state of the modal",
3160
- "tags": {
3161
- "demoIgnore": [
3162
- {
3163
- "description": "true",
3164
- "title": "demoIgnore"
3165
- }
3166
- ]
3167
- },
3168
- "type": {
3169
- "name": "boolean"
3170
- },
3171
- "required": true
3172
- },
3173
- {
3174
- "name": "label",
3175
- "description": "Sets `aria-label` and modal title text. Can also use title slot to set title.",
3176
- "type": {
3177
- "name": "string"
3178
- },
3179
- "required": true
3180
- },
3181
- {
3182
- "name": "showTitle",
3183
- "description": "Toggles the modal title text, which comes from `label` prop or `title` slot.",
3184
- "type": {
3185
- "name": "boolean"
3186
- },
3187
- "required": false,
3188
- "defaultValue": {
3189
- "func": false,
3190
- "value": true
3191
- }
3192
- },
3193
- {
3194
- "name": "ariaDescribedby",
3195
- "description": "Text for aria-describedby attribute. Applied to modal content element",
3196
- "type": {
3197
- "name": "string"
3198
- },
3199
- "required": false,
3200
- "defaultValue": {
3201
- "func": false,
3202
- "value": "null"
3203
- }
3204
- },
3205
- {
3206
- "name": "role",
3207
- "description": "Sets the `role` attribute on the modal content element",
3208
- "tags": {},
3209
- "values": [
3210
- "dialog",
3211
- "alertDialog"
3212
- ],
3213
- "type": {
3214
- "name": "string"
3215
- },
3216
- "required": false,
3217
- "defaultValue": {
3218
- "func": false,
3219
- "value": "'dialog'"
3220
- }
3221
- },
3222
- {
3223
- "name": "id",
3224
- "description": "Sets unique `id` for modal",
3225
- "type": {
3226
- "name": "string"
3227
- },
3228
- "required": false,
3229
- "defaultValue": {
3230
- "func": false,
3231
- "value": "null"
3232
- }
3233
- },
3234
- {
3235
- "name": "overlayClass",
3236
- "description": "Adds custom class to the `cdr-modal__overlay` div",
3237
- "type": {
3238
- "name": "string"
3239
- }
3240
- },
3208
+ },
3241
3209
  {
3242
3210
  "name": "wrapperClass",
3243
3211
  "description": "Adds custom class to the `cdr-modal__outerWrap` div",
@@ -3299,348 +3267,69 @@
3299
3267
  }
3300
3268
  ]
3301
3269
  },
3302
- "CdrPopover": {
3303
- "name": "CdrPopover",
3304
- "description": "Small overlay used to display contextual information",
3270
+ "CdrRadio": {
3271
+ "name": "CdrRadio",
3272
+ "description": "Permits the selection of only one option from a list of two or more",
3305
3273
  "tags": {},
3306
3274
  "exportName": "default",
3307
- "displayName": "CdrPopover",
3275
+ "displayName": "CdrRadio",
3308
3276
  "props": [
3309
3277
  {
3310
- "name": "position",
3311
- "description": "Sets the position where the popover will render relative to the trigger element.",
3312
- "tags": {
3313
- "demoSelectMultiple": [
3314
- {
3315
- "description": "false",
3316
- "title": "demoSelectMultiple"
3317
- }
3318
- ]
3319
- },
3320
- "values": [
3321
- "top",
3322
- "bottom",
3323
- "left",
3324
- "right"
3325
- ],
3278
+ "name": "labelClass",
3279
+ "description": "Adds CSS class to the label for custom styles.",
3326
3280
  "type": {
3327
3281
  "name": "string"
3328
- },
3329
- "required": false,
3330
- "defaultValue": {
3331
- "func": false,
3332
- "value": "'top'"
3333
3282
  }
3334
3283
  },
3335
3284
  {
3336
- "name": "autoPosition",
3337
- "description": "If set to `true`, popover will attempt to dynamically set it's position to\nensure it renders within the visible browser window.\nIf `false` the popover will always render in the provided `position`.",
3285
+ "name": "inputClass",
3286
+ "description": "Adds CSS class to the input for custom styles.",
3338
3287
  "type": {
3339
- "name": "boolean"
3340
- },
3341
- "required": false,
3342
- "defaultValue": {
3343
- "func": false,
3344
- "value": true
3288
+ "name": "string"
3345
3289
  }
3346
3290
  },
3347
3291
  {
3348
- "name": "label",
3349
- "description": "Sets the title for the popover content. Can also be provided via the `title` slot.",
3292
+ "name": "contentClass",
3293
+ "description": "Adds CSS class to the slot wrapper for custom styles.",
3350
3294
  "type": {
3351
3295
  "name": "string"
3352
- },
3353
- "required": false
3296
+ }
3354
3297
  },
3355
3298
  {
3356
- "name": "id",
3357
- "description": "ID for the popover element, required for accessibility",
3299
+ "name": "disabled",
3300
+ "description": "Disables the radio",
3358
3301
  "type": {
3359
- "name": "string"
3360
- },
3361
- "required": true
3302
+ "name": "boolean"
3303
+ }
3362
3304
  },
3363
3305
  {
3364
- "name": "contentClass",
3365
- "description": "Add custom class to the popover content wrapper. Allows for overriding size, styling, etc.",
3306
+ "name": "name",
3307
+ "description": "Sets the name of the radio button.",
3366
3308
  "type": {
3367
3309
  "name": "string"
3368
3310
  },
3369
- "required": false
3311
+ "required": true
3370
3312
  },
3371
3313
  {
3372
- "name": "open",
3373
- "description": "Used to programmatically control the popover state. Does not need to be set if you are using the `trigger` slot.",
3314
+ "name": "modifier",
3315
+ "description": "Modifies the style variants for this component",
3374
3316
  "tags": {
3375
- "demoIgnore": [
3317
+ "demoSelectMultiple": [
3376
3318
  {
3377
3319
  "description": "true",
3378
- "title": "demoIgnore"
3320
+ "title": "demoSelectMultiple"
3379
3321
  }
3380
3322
  ]
3381
3323
  },
3324
+ "values": [
3325
+ "hide-figure"
3326
+ ],
3382
3327
  "type": {
3383
- "name": "boolean"
3328
+ "name": "string"
3384
3329
  },
3385
- "required": false,
3386
3330
  "defaultValue": {
3387
3331
  "func": false,
3388
- "value": false
3389
- }
3390
- }
3391
- ],
3392
- "events": [
3393
- {
3394
- "name": "opened",
3395
- "description": "Emits when popover is opened"
3396
- },
3397
- {
3398
- "name": "closed",
3399
- "description": "Emits when popover is closed"
3400
- }
3401
- ],
3402
- "slots": [
3403
- {
3404
- "name": "trigger",
3405
- "description": " Slot for the element that triggers the popover."
3406
- },
3407
- {
3408
- "name": "title",
3409
- "description": "Sets the title for the popover. Can also be set with `label` prop"
3410
- },
3411
- {
3412
- "name": "default"
3413
- },
3414
- {
3415
- "name": "icon"
3416
- }
3417
- ],
3418
- "sourceFiles": [
3419
- "./src/components/popover/CdrPopover.vue"
3420
- ]
3421
- },
3422
- "CdrPopup": {
3423
- "name": "CdrPopup",
3424
- "description": "An internal helper component used by Popover and Tooltip",
3425
- "tags": {},
3426
- "exportName": "default",
3427
- "displayName": "CdrPopup",
3428
- "props": [
3429
- {
3430
- "name": "opened",
3431
- "type": {
3432
- "name": "boolean"
3433
- },
3434
- "defaultValue": {
3435
- "func": false,
3436
- "value": false
3437
- }
3438
- },
3439
- {
3440
- "name": "position",
3441
- "type": {
3442
- "name": "string"
3443
- },
3444
- "required": false,
3445
- "defaultValue": {
3446
- "func": false,
3447
- "value": "'top'"
3448
- }
3449
- },
3450
- {
3451
- "name": "autoPosition",
3452
- "type": {
3453
- "name": "boolean"
3454
- },
3455
- "defaultValue": {
3456
- "func": false,
3457
- "value": true
3458
- }
3459
- },
3460
- {
3461
- "name": "contentClass",
3462
- "type": {
3463
- "name": "string"
3464
- }
3465
- }
3466
- ],
3467
- "events": [
3468
- {
3469
- "name": "closed"
3470
- }
3471
- ],
3472
- "slots": [
3473
- {
3474
- "name": "default"
3475
- }
3476
- ],
3477
- "sourceFiles": [
3478
- "./src/components/popup/CdrPopup.vue"
3479
- ],
3480
- "UIProperties": [
3481
- {
3482
- "name": "--cdr-popup-content-background",
3483
- "defaultValue": "--cdr-color-background-primary",
3484
- "description": "Background color of cdr-popup content"
3485
- },
3486
- {
3487
- "name": "--cdr-popup-content-border-color",
3488
- "defaultValue": "--cdr-color-border-secondary",
3489
- "description": "Border color of cdr-popup content"
3490
- }
3491
- ]
3492
- },
3493
- "CdrQuote": {
3494
- "name": "CdrQuote",
3495
- "description": "Short excerpt used to emphasize content or break up a large body of text",
3496
- "tags": {},
3497
- "exportName": "default",
3498
- "displayName": "CdrQuote",
3499
- "props": [
3500
- {
3501
- "name": "tag",
3502
- "description": "Sets the semantic HTML element for the quote.",
3503
- "tags": {},
3504
- "values": [
3505
- "blockquote",
3506
- "aside",
3507
- "q",
3508
- "div"
3509
- ],
3510
- "type": {
3511
- "name": "string"
3512
- },
3513
- "defaultValue": {
3514
- "func": false,
3515
- "value": "'blockquote'"
3516
- }
3517
- },
3518
- {
3519
- "name": "modifier",
3520
- "description": "Modifies the style variant for the quote",
3521
- "tags": {
3522
- "demoSelectMultiple": [
3523
- {
3524
- "description": "true",
3525
- "title": "demoSelectMultiple"
3526
- }
3527
- ]
3528
- },
3529
- "values": [
3530
- "pull"
3531
- ],
3532
- "type": {
3533
- "name": "string"
3534
- },
3535
- "defaultValue": {
3536
- "func": false,
3537
- "value": "''"
3538
- }
3539
- },
3540
- {
3541
- "name": "summary",
3542
- "description": "Sets the quote body text.",
3543
- "type": {
3544
- "name": "string"
3545
- }
3546
- },
3547
- {
3548
- "name": "citation",
3549
- "description": "Sets the quote attribution text.",
3550
- "type": {
3551
- "name": "string"
3552
- }
3553
- }
3554
- ],
3555
- "slots": [
3556
- {
3557
- "name": "default"
3558
- }
3559
- ],
3560
- "sourceFiles": [
3561
- "./src/components/quote/CdrQuote.vue"
3562
- ],
3563
- "UIProperties": [
3564
- {
3565
- "name": "--cdr-quote-cite-text-color",
3566
- "defaultValue": "--cdr-color-text-secondary",
3567
- "description": "Text color of a cdr-quote citation"
3568
- },
3569
- {
3570
- "name": "--cdr-quote-content-text-color",
3571
- "defaultValue": "--cdr-color-text-primary",
3572
- "description": "Text color of cdr-quote content"
3573
- },
3574
- {
3575
- "name": "--cdr-quote-pull-container-border-color",
3576
- "defaultValue": "--cdr-color-border-primary",
3577
- "description": "Border color of a cdr-quote pull container"
3578
- }
3579
- ]
3580
- },
3581
- "CdrRadio": {
3582
- "name": "CdrRadio",
3583
- "description": "Permits the selection of only one option from a list of two or more",
3584
- "tags": {},
3585
- "exportName": "default",
3586
- "displayName": "CdrRadio",
3587
- "props": [
3588
- {
3589
- "name": "labelClass",
3590
- "description": "Adds CSS class to the label for custom styles.",
3591
- "type": {
3592
- "name": "string"
3593
- }
3594
- },
3595
- {
3596
- "name": "inputClass",
3597
- "description": "Adds CSS class to the input for custom styles.",
3598
- "type": {
3599
- "name": "string"
3600
- }
3601
- },
3602
- {
3603
- "name": "contentClass",
3604
- "description": "Adds CSS class to the slot wrapper for custom styles.",
3605
- "type": {
3606
- "name": "string"
3607
- }
3608
- },
3609
- {
3610
- "name": "disabled",
3611
- "description": "Disables the radio",
3612
- "type": {
3613
- "name": "boolean"
3614
- }
3615
- },
3616
- {
3617
- "name": "name",
3618
- "description": "Sets the name of the radio button.",
3619
- "type": {
3620
- "name": "string"
3621
- },
3622
- "required": true
3623
- },
3624
- {
3625
- "name": "modifier",
3626
- "description": "Modifies the style variants for this component",
3627
- "tags": {
3628
- "demoSelectMultiple": [
3629
- {
3630
- "description": "true",
3631
- "title": "demoSelectMultiple"
3632
- }
3633
- ]
3634
- },
3635
- "values": [
3636
- "hide-figure"
3637
- ],
3638
- "type": {
3639
- "name": "string"
3640
- },
3641
- "defaultValue": {
3642
- "func": false,
3643
- "value": "''"
3332
+ "value": "''"
3644
3333
  }
3645
3334
  },
3646
3335
  {
@@ -3818,67 +3507,168 @@
3818
3507
  }
3819
3508
  ]
3820
3509
  },
3821
- "CdrSkeleton": {
3822
- "name": "CdrSkeleton",
3823
- "description": "Visually communicates content is in the process of loading",
3510
+ "CdrPagination": {
3511
+ "name": "CdrPagination",
3512
+ "description": "Allows people to navigate to the next or previous page within an experience",
3824
3513
  "tags": {},
3825
3514
  "exportName": "default",
3826
- "displayName": "CdrSkeleton",
3515
+ "displayName": "CdrPagination",
3827
3516
  "props": [
3828
3517
  {
3829
- "name": "motion",
3830
- "description": "Toggle animation on/off.\nWhen `true`, animated gradient will be used while loading.\nWhen `false` a static background color will be used.\nAutomatically disabled if `prefers-reduced-motion` is set by user.",
3518
+ "name": "id",
3519
+ "description": "Define a custom slug for the generated pagination item IDs. Slug is randomly generated if no ID provided.",
3520
+ "tags": {
3521
+ "demoIgnore": [
3522
+ {
3523
+ "description": "true",
3524
+ "title": "demoIgnore"
3525
+ }
3526
+ ]
3527
+ },
3831
3528
  "type": {
3832
- "name": "boolean"
3529
+ "name": "string"
3530
+ }
3531
+ },
3532
+ {
3533
+ "name": "totalPages",
3534
+ "description": "Sets the total number of pages for displaying \"Page x of <totalPages>\".\nSometimes the total number of pages is different than total page data objects in the pages array.\nFor example, if only the next and previous pages are provided.",
3535
+ "type": {
3536
+ "name": "number"
3833
3537
  },
3834
3538
  "defaultValue": {
3835
3539
  "func": false,
3836
- "value": true
3540
+ "value": "null"
3541
+ }
3542
+ },
3543
+ {
3544
+ "name": "pages",
3545
+ "description": "Array of objects containing pagination data.\nObjects must have structure of `{ page: number, url: string }`",
3546
+ "type": {
3547
+ "name": "paginationItem[]"
3548
+ },
3549
+ "required": true
3550
+ },
3551
+ {
3552
+ "name": "linkTag",
3553
+ "description": "Sets which tag type is used to render pagination elements",
3554
+ "tags": {},
3555
+ "values": [
3556
+ "a",
3557
+ "button"
3558
+ ],
3559
+ "type": {
3560
+ "name": "string"
3561
+ },
3562
+ "defaultValue": {
3563
+ "func": false,
3564
+ "value": "'a'"
3565
+ }
3566
+ },
3567
+ {
3568
+ "name": "forLabel",
3569
+ "description": "Used to customize the aria-label for the root pagination element.\nFor page-level pagination (i.e, pagination that updates the entire page content and changes the URL)\nthis property should be omitted.\nFor intra-page navigation this property should describe the element being paginated, for example:\n`Pagination for sub-content`",
3570
+ "type": {
3571
+ "name": "string"
3572
+ },
3573
+ "defaultValue": {
3574
+ "func": false,
3575
+ "value": "''"
3576
+ }
3577
+ },
3578
+ {
3579
+ "name": "modelValue",
3580
+ "tags": {
3581
+ "ignore": [
3582
+ {
3583
+ "description": "used for binding v-model, represents the current page",
3584
+ "title": "ignore"
3585
+ }
3586
+ ]
3587
+ },
3588
+ "type": {
3589
+ "name": "number"
3837
3590
  }
3838
3591
  }
3839
3592
  ],
3840
- "slots": [
3593
+ "events": [
3841
3594
  {
3842
- "name": "default",
3843
- "description": "CdrSkeleton content (CdrSkeletonBone components)"
3595
+ "name": "update:modelValue",
3596
+ "description": "Event emitted by v-model on the select <input> element to indicate current page.\nOnly used on small devices",
3597
+ "properties": [
3598
+ {
3599
+ "type": {
3600
+ "names": [
3601
+ "mixed"
3602
+ ]
3603
+ },
3604
+ "name": "modelValue"
3605
+ }
3606
+ ],
3607
+ "tags": [
3608
+ {
3609
+ "title": "param",
3610
+ "type": {
3611
+ "name": "mixed"
3612
+ },
3613
+ "name": "modelValue"
3614
+ }
3615
+ ]
3616
+ },
3617
+ {
3618
+ "name": "navigate",
3619
+ "description": "$emit event fired when page changes based on user interaction by clicking a link\nor selecting an option from the select on mobile.\n`event.preventDefault()` can be used to override the default link navigation behavior."
3844
3620
  }
3845
3621
  ],
3846
3622
  "sourceFiles": [
3847
- "./src/components/skeleton/CdrSkeleton.vue"
3623
+ "./src/components/pagination/CdrPagination.vue"
3848
3624
  ],
3849
3625
  "UIProperties": [
3850
3626
  {
3851
- "name": "--cdr-skeleton-bone-background-color",
3852
- "defaultValue": "#edeae3",
3853
- "description": "Skeleton bone background color"
3627
+ "name": "--cdr-pagination-link-text-color",
3628
+ "defaultValue": "--cdr-color-text-primary",
3629
+ "description": "Text color of a cdr-pagination link"
3854
3630
  },
3855
3631
  {
3856
- "name": "--cdr-skeleton-gradient-1",
3857
- "defaultValue": "rgba(237,234,227,1)",
3858
- "description": "Skeleton shimmer gradient part 1"
3632
+ "name": "--cdr-pagination-link-fill-color",
3633
+ "defaultValue": "--cdr-color-text-primary",
3634
+ "description": "Fill color of a cdr-pagination link"
3859
3635
  },
3860
3636
  {
3861
- "name": "--cdr-skeleton-gradient-2",
3862
- "defaultValue": "rgba(249,248,240,1)",
3863
- "description": "Skeleton shimmer gradient part 2"
3637
+ "name": "--cdr-pagination-link-background-color-interaction",
3638
+ "defaultValue": "--cdr-color-background-pagination-hover",
3639
+ "description": "Background color of a cdr-pagination link on hover/focus/active"
3864
3640
  },
3865
3641
  {
3866
- "name": "--cdr-skeleton-gradient-3",
3867
- "defaultValue": "rgba(237,234,227,1)",
3868
- "description": "Skeleton shimmer gradient part 3"
3642
+ "name": "--cdr-pagination-link-current-background-color-keyline",
3643
+ "defaultValue": "--cdr-color-background-pagination-keyline",
3644
+ "description": "Background color of the keyline for the current cdr-pagination link"
3645
+ },
3646
+ {
3647
+ "name": "--cdr-pagination-link-text-color-disabled",
3648
+ "defaultValue": "--cdr-color-text-disabled",
3649
+ "description": "Text color of a disabled cdr-pagination link"
3650
+ },
3651
+ {
3652
+ "name": "--cdr-pagination-link-fill-color-disabled",
3653
+ "defaultValue": "--cdr-color-text-disabled",
3654
+ "description": "Fill color of a disabled cdr-pagination link"
3655
+ },
3656
+ {
3657
+ "name": "--cdr-pagination-link-text-color-interactive-disabled",
3658
+ "defaultValue": "--cdr-color-text-disabled",
3659
+ "description": "Text color of a disabled cdr-pagination link on hover/focus/active"
3869
3660
  }
3870
3661
  ]
3871
3662
  },
3872
- "CdrTable": {
3873
- "name": "CdrTable",
3874
- "description": "Organizes structured data for users to easily scan, compare, and analyze",
3663
+ "CdrPopup": {
3664
+ "name": "CdrPopup",
3665
+ "description": "An internal helper component used by Popover and Tooltip",
3875
3666
  "tags": {},
3876
3667
  "exportName": "default",
3877
- "displayName": "CdrTable",
3668
+ "displayName": "CdrPopup",
3878
3669
  "props": [
3879
3670
  {
3880
- "name": "striped",
3881
- "description": "Sets row colors to alternate between darker and lighter backgrounds.\nStriping will not apply when `border` is true",
3671
+ "name": "opened",
3882
3672
  "type": {
3883
3673
  "name": "boolean"
3884
3674
  },
@@ -3888,8 +3678,18 @@
3888
3678
  }
3889
3679
  },
3890
3680
  {
3891
- "name": "border",
3892
- "description": "Adds borders between rows. Will disable `striped` if both are true",
3681
+ "name": "position",
3682
+ "type": {
3683
+ "name": "string"
3684
+ },
3685
+ "required": false,
3686
+ "defaultValue": {
3687
+ "func": false,
3688
+ "value": "'top'"
3689
+ }
3690
+ },
3691
+ {
3692
+ "name": "autoPosition",
3893
3693
  "type": {
3894
3694
  "name": "boolean"
3895
3695
  },
@@ -3899,30 +3699,72 @@
3899
3699
  }
3900
3700
  },
3901
3701
  {
3902
- "name": "fullWidth",
3903
- "description": "Sets the width to 100%. Also accepts space separated strings for breakpoints that it should be full width: { '@xs' | '@sm' | '@md' | '@lg' }",
3702
+ "name": "contentClass",
3904
3703
  "type": {
3905
- "name": "boolean|string"
3704
+ "name": "string"
3705
+ }
3706
+ }
3707
+ ],
3708
+ "events": [
3709
+ {
3710
+ "name": "closed"
3711
+ }
3712
+ ],
3713
+ "slots": [
3714
+ {
3715
+ "name": "default"
3716
+ }
3717
+ ],
3718
+ "sourceFiles": [
3719
+ "./src/components/popup/CdrPopup.vue"
3720
+ ],
3721
+ "UIProperties": [
3722
+ {
3723
+ "name": "--cdr-popup-content-background",
3724
+ "defaultValue": "--cdr-color-background-primary",
3725
+ "description": "Background color of cdr-popup content"
3726
+ },
3727
+ {
3728
+ "name": "--cdr-popup-content-border-color",
3729
+ "defaultValue": "--cdr-color-border-secondary",
3730
+ "description": "Border color of cdr-popup content"
3731
+ }
3732
+ ]
3733
+ },
3734
+ "CdrRating": {
3735
+ "name": "CdrRating",
3736
+ "description": "Provides insight into user opinions for products, experiences, and more",
3737
+ "tags": {},
3738
+ "exportName": "default",
3739
+ "displayName": "CdrRating",
3740
+ "props": [
3741
+ {
3742
+ "name": "rating",
3743
+ "description": "Sets the rating values between 0 and 5.",
3744
+ "type": {
3745
+ "name": "string|number"
3906
3746
  },
3747
+ "required": true,
3907
3748
  "defaultValue": {
3908
3749
  "func": false,
3909
- "value": true
3750
+ "value": "0"
3910
3751
  }
3911
3752
  },
3912
3753
  {
3913
- "name": "responsive",
3914
- "description": "Makes the table scroll horizontally when it would overflow its container",
3754
+ "name": "count",
3755
+ "description": "Sets the total number of ratings",
3915
3756
  "type": {
3916
- "name": "boolean"
3757
+ "name": "string|number"
3917
3758
  },
3759
+ "required": false,
3918
3760
  "defaultValue": {
3919
3761
  "func": false,
3920
- "value": true
3762
+ "value": "null"
3921
3763
  }
3922
3764
  },
3923
3765
  {
3924
- "name": "hover",
3925
- "description": "Adds a darker background on row hover",
3766
+ "name": "compact",
3767
+ "description": "Hides the word 'reviews' if true",
3926
3768
  "type": {
3927
3769
  "name": "boolean"
3928
3770
  },
@@ -3931,9 +3773,16 @@
3931
3773
  "value": false
3932
3774
  }
3933
3775
  },
3776
+ {
3777
+ "name": "href",
3778
+ "description": "Sets the rating component (icons and text) to display inline and wraps them in an anchor tag so they can act as link.",
3779
+ "type": {
3780
+ "name": "string"
3781
+ }
3782
+ },
3934
3783
  {
3935
3784
  "name": "size",
3936
- "description": "Sets the table size (cell padding); values can target responsive breakpoints. Example `small@lg`.",
3785
+ "description": "Sets the rating size.",
3937
3786
  "tags": {
3938
3787
  "demoSelectMultiple": [
3939
3788
  {
@@ -3956,36 +3805,268 @@
3956
3805
  }
3957
3806
  }
3958
3807
  ],
3959
- "slots": [
3960
- {
3961
- "name": "default",
3962
- "description": "CdrTable content (Valid table elements <th>, <tbody>, <tr>, <td>, etc.)"
3963
- }
3964
- ],
3965
3808
  "sourceFiles": [
3966
- "./src/components/table/CdrTable.vue"
3809
+ "./src/components/rating/CdrRating.vue"
3967
3810
  ],
3968
3811
  "UIProperties": [
3969
3812
  {
3970
- "name": "--cdr-table-base-text-color",
3971
- "defaultValue": "--cdr-color-text-primary",
3972
- "description": "Color of the cdr-table base text"
3813
+ "name": "--cdr-rating-count-hover-color",
3814
+ "defaultValue": "--cdr-color-text-rating-hover",
3815
+ "description": "Hover text color of cdr-rating count"
3973
3816
  },
3974
3817
  {
3975
- "name": "--cdr-table-row-background-color",
3976
- "defaultValue": "--cdr-color-background-table-row",
3977
- "description": "Background color of the table rows"
3818
+ "name": "--cdr-rating-text-rating-separator",
3819
+ "defaultValue": "--cdr-color-text-rating-separator",
3820
+ "description": "Color of the rating text separator"
3978
3821
  },
3979
3822
  {
3980
- "name": "--cdr-table-header-background-color",
3981
- "defaultValue": "--cdr-color-background-table-header",
3982
- "description": "Background color of the table header"
3823
+ "name": "--cdr-rating-star-null-fill-color",
3824
+ "defaultValue": "#F9F8F6",
3825
+ "description": "Fill color of a null star"
3983
3826
  },
3984
3827
  {
3985
- "name": "--cdr-table-text-cell-color",
3986
- "defaultValue": "--cdr-color-text-primary",
3987
- "description": "Text color of the table cells"
3988
- },
3828
+ "name": "--cdr-rating-star-null-outline-color",
3829
+ "defaultValue": "#928B80",
3830
+ "description": "Outline color of a null star"
3831
+ },
3832
+ {
3833
+ "name": "--cdr-rating-star-partial-fill-color",
3834
+ "defaultValue": "#FFD280",
3835
+ "description": "Fill color of a partially filled star"
3836
+ },
3837
+ {
3838
+ "name": "--cdr-rating-star-partial-stroke-color",
3839
+ "defaultValue": "#BD7B2D",
3840
+ "description": "Stroke color of a partially filled star"
3841
+ },
3842
+ {
3843
+ "name": "--cdr-rating-star-filled-fill-color",
3844
+ "defaultValue": "#FFD280",
3845
+ "description": "Fill color of a filled star"
3846
+ },
3847
+ {
3848
+ "name": "--cdr-rating-star-filled-stroke-color",
3849
+ "defaultValue": "#BD7B2D",
3850
+ "description": "Stroke color of a filled star"
3851
+ },
3852
+ {
3853
+ "name": "--cdr-rating-star-empty-fill-color",
3854
+ "defaultValue": "#F9F8F6",
3855
+ "description": "Fill color of an empty star"
3856
+ },
3857
+ {
3858
+ "name": "--cdr-rating-star-empty-stroke-color",
3859
+ "defaultValue": "#BD7B2D",
3860
+ "description": "Stroke color of an empty star"
3861
+ }
3862
+ ]
3863
+ },
3864
+ "CdrSkeleton": {
3865
+ "name": "CdrSkeleton",
3866
+ "description": "Visually communicates content is in the process of loading",
3867
+ "tags": {},
3868
+ "exportName": "default",
3869
+ "displayName": "CdrSkeleton",
3870
+ "props": [
3871
+ {
3872
+ "name": "motion",
3873
+ "description": "Toggle animation on/off.\nWhen `true`, animated gradient will be used while loading.\nWhen `false` a static background color will be used.\nAutomatically disabled if `prefers-reduced-motion` is set by user.",
3874
+ "type": {
3875
+ "name": "boolean"
3876
+ },
3877
+ "defaultValue": {
3878
+ "func": false,
3879
+ "value": true
3880
+ }
3881
+ }
3882
+ ],
3883
+ "slots": [
3884
+ {
3885
+ "name": "default",
3886
+ "description": "CdrSkeleton content (CdrSkeletonBone components)"
3887
+ }
3888
+ ],
3889
+ "sourceFiles": [
3890
+ "./src/components/skeleton/CdrSkeleton.vue"
3891
+ ],
3892
+ "UIProperties": [
3893
+ {
3894
+ "name": "--cdr-skeleton-bone-background-color",
3895
+ "defaultValue": "#edeae3",
3896
+ "description": "Skeleton bone background color"
3897
+ },
3898
+ {
3899
+ "name": "--cdr-skeleton-gradient-1",
3900
+ "defaultValue": "rgba(237,234,227,1)",
3901
+ "description": "Skeleton shimmer gradient part 1"
3902
+ },
3903
+ {
3904
+ "name": "--cdr-skeleton-gradient-2",
3905
+ "defaultValue": "rgba(249,248,240,1)",
3906
+ "description": "Skeleton shimmer gradient part 2"
3907
+ },
3908
+ {
3909
+ "name": "--cdr-skeleton-gradient-3",
3910
+ "defaultValue": "rgba(237,234,227,1)",
3911
+ "description": "Skeleton shimmer gradient part 3"
3912
+ }
3913
+ ]
3914
+ },
3915
+ "CdrSkeletonBone": {
3916
+ "name": "CdrSkeletonBone",
3917
+ "exportName": "default",
3918
+ "displayName": "CdrSkeletonBone",
3919
+ "description": "",
3920
+ "tags": {},
3921
+ "props": [
3922
+ {
3923
+ "name": "type",
3924
+ "description": "Sets the type of content placeholder",
3925
+ "tags": {
3926
+ "demoSelectMultiple": [
3927
+ {
3928
+ "description": "false",
3929
+ "title": "demoSelectMultiple"
3930
+ }
3931
+ ]
3932
+ },
3933
+ "values": [
3934
+ "default",
3935
+ "heading",
3936
+ "line",
3937
+ "rectangle",
3938
+ "square"
3939
+ ],
3940
+ "type": {
3941
+ "name": "string"
3942
+ },
3943
+ "defaultValue": {
3944
+ "func": false,
3945
+ "value": "'default'"
3946
+ }
3947
+ }
3948
+ ],
3949
+ "sourceFiles": [
3950
+ "./src/components/skeleton/CdrSkeletonBone.vue"
3951
+ ]
3952
+ },
3953
+ "CdrTable": {
3954
+ "name": "CdrTable",
3955
+ "description": "Organizes structured data for users to easily scan, compare, and analyze",
3956
+ "tags": {},
3957
+ "exportName": "default",
3958
+ "displayName": "CdrTable",
3959
+ "props": [
3960
+ {
3961
+ "name": "striped",
3962
+ "description": "Sets row colors to alternate between darker and lighter backgrounds.\nStriping will not apply when `border` is true",
3963
+ "type": {
3964
+ "name": "boolean"
3965
+ },
3966
+ "defaultValue": {
3967
+ "func": false,
3968
+ "value": false
3969
+ }
3970
+ },
3971
+ {
3972
+ "name": "border",
3973
+ "description": "Adds borders between rows. Will disable `striped` if both are true",
3974
+ "type": {
3975
+ "name": "boolean"
3976
+ },
3977
+ "defaultValue": {
3978
+ "func": false,
3979
+ "value": true
3980
+ }
3981
+ },
3982
+ {
3983
+ "name": "fullWidth",
3984
+ "description": "Sets the width to 100%. Also accepts space separated strings for breakpoints that it should be full width: { '@xs' | '@sm' | '@md' | '@lg' }",
3985
+ "type": {
3986
+ "name": "boolean|string"
3987
+ },
3988
+ "defaultValue": {
3989
+ "func": false,
3990
+ "value": true
3991
+ }
3992
+ },
3993
+ {
3994
+ "name": "responsive",
3995
+ "description": "Makes the table scroll horizontally when it would overflow its container",
3996
+ "type": {
3997
+ "name": "boolean"
3998
+ },
3999
+ "defaultValue": {
4000
+ "func": false,
4001
+ "value": true
4002
+ }
4003
+ },
4004
+ {
4005
+ "name": "hover",
4006
+ "description": "Adds a darker background on row hover",
4007
+ "type": {
4008
+ "name": "boolean"
4009
+ },
4010
+ "defaultValue": {
4011
+ "func": false,
4012
+ "value": false
4013
+ }
4014
+ },
4015
+ {
4016
+ "name": "size",
4017
+ "description": "Sets the table size (cell padding); values can target responsive breakpoints. Example `small@lg`.",
4018
+ "tags": {
4019
+ "demoSelectMultiple": [
4020
+ {
4021
+ "description": "false",
4022
+ "title": "demoSelectMultiple"
4023
+ }
4024
+ ]
4025
+ },
4026
+ "values": [
4027
+ "small",
4028
+ "medium",
4029
+ "large"
4030
+ ],
4031
+ "type": {
4032
+ "name": "string"
4033
+ },
4034
+ "defaultValue": {
4035
+ "func": false,
4036
+ "value": "'medium'"
4037
+ }
4038
+ }
4039
+ ],
4040
+ "slots": [
4041
+ {
4042
+ "name": "default",
4043
+ "description": "CdrTable content (Valid table elements <th>, <tbody>, <tr>, <td>, etc.)"
4044
+ }
4045
+ ],
4046
+ "sourceFiles": [
4047
+ "./src/components/table/CdrTable.vue"
4048
+ ],
4049
+ "UIProperties": [
4050
+ {
4051
+ "name": "--cdr-table-base-text-color",
4052
+ "defaultValue": "--cdr-color-text-primary",
4053
+ "description": "Color of the cdr-table base text"
4054
+ },
4055
+ {
4056
+ "name": "--cdr-table-row-background-color",
4057
+ "defaultValue": "--cdr-color-background-table-row",
4058
+ "description": "Background color of the table rows"
4059
+ },
4060
+ {
4061
+ "name": "--cdr-table-header-background-color",
4062
+ "defaultValue": "--cdr-color-background-table-header",
4063
+ "description": "Background color of the table header"
4064
+ },
4065
+ {
4066
+ "name": "--cdr-table-text-cell-color",
4067
+ "defaultValue": "--cdr-color-text-primary",
4068
+ "description": "Text color of the table cells"
4069
+ },
3989
4070
  {
3990
4071
  "name": "--cdr-table-border-color-default",
3991
4072
  "defaultValue": "--cdr-color-border-table-default",
@@ -4316,178 +4397,10 @@
4316
4397
  }
4317
4398
  ]
4318
4399
  },
4319
- "CdrSkeletonBone": {
4320
- "name": "CdrSkeletonBone",
4400
+ "CdrTabPanel": {
4401
+ "name": "CdrTabPanel",
4321
4402
  "exportName": "default",
4322
- "displayName": "CdrSkeletonBone",
4323
- "description": "",
4324
- "tags": {},
4325
- "props": [
4326
- {
4327
- "name": "type",
4328
- "description": "Sets the type of content placeholder",
4329
- "tags": {
4330
- "demoSelectMultiple": [
4331
- {
4332
- "description": "false",
4333
- "title": "demoSelectMultiple"
4334
- }
4335
- ]
4336
- },
4337
- "values": [
4338
- "default",
4339
- "heading",
4340
- "line",
4341
- "rectangle",
4342
- "square"
4343
- ],
4344
- "type": {
4345
- "name": "string"
4346
- },
4347
- "defaultValue": {
4348
- "func": false,
4349
- "value": "'default'"
4350
- }
4351
- }
4352
- ],
4353
- "sourceFiles": [
4354
- "./src/components/skeleton/CdrSkeletonBone.vue"
4355
- ]
4356
- },
4357
- "CdrRating": {
4358
- "name": "CdrRating",
4359
- "description": "Provides insight into user opinions for products, experiences, and more",
4360
- "tags": {},
4361
- "exportName": "default",
4362
- "displayName": "CdrRating",
4363
- "props": [
4364
- {
4365
- "name": "rating",
4366
- "description": "Sets the rating values between 0 and 5.",
4367
- "type": {
4368
- "name": "string|number"
4369
- },
4370
- "required": true,
4371
- "defaultValue": {
4372
- "func": false,
4373
- "value": "0"
4374
- }
4375
- },
4376
- {
4377
- "name": "count",
4378
- "description": "Sets the total number of ratings",
4379
- "type": {
4380
- "name": "string|number"
4381
- },
4382
- "required": false,
4383
- "defaultValue": {
4384
- "func": false,
4385
- "value": "null"
4386
- }
4387
- },
4388
- {
4389
- "name": "compact",
4390
- "description": "Hides the word 'reviews' if true",
4391
- "type": {
4392
- "name": "boolean"
4393
- },
4394
- "defaultValue": {
4395
- "func": false,
4396
- "value": false
4397
- }
4398
- },
4399
- {
4400
- "name": "href",
4401
- "description": "Sets the rating component (icons and text) to display inline and wraps them in an anchor tag so they can act as link.",
4402
- "type": {
4403
- "name": "string"
4404
- }
4405
- },
4406
- {
4407
- "name": "size",
4408
- "description": "Sets the rating size.",
4409
- "tags": {
4410
- "demoSelectMultiple": [
4411
- {
4412
- "description": "false",
4413
- "title": "demoSelectMultiple"
4414
- }
4415
- ]
4416
- },
4417
- "values": [
4418
- "small",
4419
- "medium",
4420
- "large"
4421
- ],
4422
- "type": {
4423
- "name": "string"
4424
- },
4425
- "defaultValue": {
4426
- "func": false,
4427
- "value": "'medium'"
4428
- }
4429
- }
4430
- ],
4431
- "sourceFiles": [
4432
- "./src/components/rating/CdrRating.vue"
4433
- ],
4434
- "UIProperties": [
4435
- {
4436
- "name": "--cdr-rating-count-hover-color",
4437
- "defaultValue": "--cdr-color-text-rating-hover",
4438
- "description": "Hover text color of cdr-rating count"
4439
- },
4440
- {
4441
- "name": "--cdr-rating-text-rating-separator",
4442
- "defaultValue": "--cdr-color-text-rating-separator",
4443
- "description": "Color of the rating text separator"
4444
- },
4445
- {
4446
- "name": "--cdr-rating-star-null-fill-color",
4447
- "defaultValue": "#F9F8F6",
4448
- "description": "Fill color of a null star"
4449
- },
4450
- {
4451
- "name": "--cdr-rating-star-null-outline-color",
4452
- "defaultValue": "#928B80",
4453
- "description": "Outline color of a null star"
4454
- },
4455
- {
4456
- "name": "--cdr-rating-star-partial-fill-color",
4457
- "defaultValue": "#FFD280",
4458
- "description": "Fill color of a partially filled star"
4459
- },
4460
- {
4461
- "name": "--cdr-rating-star-partial-stroke-color",
4462
- "defaultValue": "#BD7B2D",
4463
- "description": "Stroke color of a partially filled star"
4464
- },
4465
- {
4466
- "name": "--cdr-rating-star-filled-fill-color",
4467
- "defaultValue": "#FFD280",
4468
- "description": "Fill color of a filled star"
4469
- },
4470
- {
4471
- "name": "--cdr-rating-star-filled-stroke-color",
4472
- "defaultValue": "#BD7B2D",
4473
- "description": "Stroke color of a filled star"
4474
- },
4475
- {
4476
- "name": "--cdr-rating-star-empty-fill-color",
4477
- "defaultValue": "#F9F8F6",
4478
- "description": "Fill color of an empty star"
4479
- },
4480
- {
4481
- "name": "--cdr-rating-star-empty-stroke-color",
4482
- "defaultValue": "#BD7B2D",
4483
- "description": "Stroke color of an empty star"
4484
- }
4485
- ]
4486
- },
4487
- "CdrTabPanel": {
4488
- "name": "CdrTabPanel",
4489
- "exportName": "default",
4490
- "displayName": "CdrTabPanel",
4403
+ "displayName": "CdrTabPanel",
4491
4404
  "description": "",
4492
4405
  "tags": {},
4493
4406
  "props": [
@@ -4535,16 +4448,59 @@
4535
4448
  "./src/components/tabs/CdrTabPanel.vue"
4536
4449
  ]
4537
4450
  },
4538
- "CdrToast": {
4539
- "name": "CdrToast",
4540
- "description": "Non-modal dialog used to communicate the status of a task or process",
4451
+ "CdrText": {
4452
+ "name": "CdrText",
4453
+ "description": "Text container used for any text element such as paragraphs, headings, and lists",
4541
4454
  "tags": {},
4542
4455
  "exportName": "default",
4543
- "displayName": "CdrToast",
4456
+ "displayName": "CdrText",
4544
4457
  "props": [
4545
4458
  {
4546
- "name": "type",
4547
- "description": "Sets the toast type.",
4459
+ "name": "tag",
4460
+ "description": "Sets the HTML tag (p, span, h1, h2, etc)",
4461
+ "type": {
4462
+ "name": "string"
4463
+ },
4464
+ "defaultValue": {
4465
+ "func": false,
4466
+ "value": "'p'"
4467
+ }
4468
+ }
4469
+ ],
4470
+ "slots": [
4471
+ {
4472
+ "name": "default",
4473
+ "description": "CdrText content"
4474
+ }
4475
+ ],
4476
+ "sourceFiles": [
4477
+ "./src/components/text/CdrText.vue"
4478
+ ],
4479
+ "UIProperties": [
4480
+ {
4481
+ "name": "--cdr-text-color",
4482
+ "defaultValue": "--cdr-color-text-primary",
4483
+ "description": "Text color"
4484
+ }
4485
+ ]
4486
+ },
4487
+ "CdrSwitch": {
4488
+ "name": "CdrSwitch",
4489
+ "description": "Permits selection from two opposing options",
4490
+ "tags": {},
4491
+ "exportName": "default",
4492
+ "displayName": "CdrSwitch",
4493
+ "props": [
4494
+ {
4495
+ "name": "id",
4496
+ "description": "Sets a custom ID for the switch. If this value is not set, it will be auto-generated.",
4497
+ "type": {
4498
+ "name": "string"
4499
+ }
4500
+ },
4501
+ {
4502
+ "name": "size",
4503
+ "description": "Sets the size of the switch",
4548
4504
  "tags": {
4549
4505
  "demoSelectMultiple": [
4550
4506
  {
@@ -4554,31 +4510,20 @@
4554
4510
  ]
4555
4511
  },
4556
4512
  "values": [
4557
- "info",
4558
- "success",
4559
- "warning",
4560
- "error",
4561
- "default"
4513
+ "medium",
4514
+ "large"
4562
4515
  ],
4563
4516
  "type": {
4564
4517
  "name": "string"
4565
4518
  },
4566
4519
  "defaultValue": {
4567
4520
  "func": false,
4568
- "value": "'default'"
4521
+ "value": "'medium'"
4569
4522
  }
4570
4523
  },
4571
4524
  {
4572
- "name": "open",
4573
- "description": "Used to programmatically control the toast open/close state.",
4574
- "tags": {
4575
- "demoIgnore": [
4576
- {
4577
- "description": "true",
4578
- "title": "demoIgnore"
4579
- }
4580
- ]
4581
- },
4525
+ "name": "fullWidth",
4526
+ "description": "Sets the label and switch to expand to the full width of its container with `space-between`",
4582
4527
  "type": {
4583
4528
  "name": "boolean"
4584
4529
  },
@@ -4588,223 +4533,211 @@
4588
4533
  }
4589
4534
  },
4590
4535
  {
4591
- "name": "autoDismiss",
4592
- "description": "Set to `false` to disable automatic closing after the `dismissDelay`.",
4536
+ "name": "modelValue",
4537
+ "tags": {
4538
+ "demoIgnore": [
4539
+ {
4540
+ "description": "true",
4541
+ "title": "demoIgnore"
4542
+ }
4543
+ ]
4544
+ },
4593
4545
  "type": {
4594
4546
  "name": "boolean"
4595
4547
  },
4596
- "defaultValue": {
4597
- "func": false,
4598
- "value": true
4599
- }
4600
- },
4548
+ "required": true
4549
+ }
4550
+ ],
4551
+ "events": [
4601
4552
  {
4602
- "name": "dismissDelay",
4603
- "description": "Sets the interval (in milliseconds) before the toast automatically closes.",
4604
- "type": {
4605
- "name": "number"
4606
- },
4607
- "defaultValue": {
4608
- "func": false,
4609
- "value": "5000"
4610
- }
4611
- }
4612
- ],
4613
- "events": [
4614
- {
4615
- "name": "open",
4616
- "description": "Emits when toast opens"
4617
- },
4618
- {
4619
- "name": "closed",
4620
- "description": "Emits when toast closes"
4553
+ "name": "update:modelValue",
4554
+ "description": "Event emitted by v-model on switch",
4555
+ "properties": [
4556
+ {
4557
+ "type": {
4558
+ "names": [
4559
+ "mixed"
4560
+ ]
4561
+ },
4562
+ "name": "modelValue"
4563
+ }
4564
+ ],
4565
+ "tags": [
4566
+ {
4567
+ "title": "param",
4568
+ "type": {
4569
+ "name": "mixed"
4570
+ },
4571
+ "name": "modelValue"
4572
+ }
4573
+ ]
4621
4574
  }
4622
4575
  ],
4623
4576
  "slots": [
4624
- {
4625
- "name": "icon-left",
4626
- "description": "Icon matching toast messaging type"
4627
- },
4628
4577
  {
4629
4578
  "name": "default",
4630
- "description": "CdrToast content"
4631
- },
4632
- {
4633
- "name": "icon"
4579
+ "description": "The label for the switch"
4634
4580
  }
4635
4581
  ],
4636
4582
  "sourceFiles": [
4637
- "./src/components/toast/CdrToast.vue"
4583
+ "./src/components/switch/CdrSwitch.vue"
4638
4584
  ],
4639
4585
  "UIProperties": [
4640
4586
  {
4641
- "name": "--cdr-toast-close-button-fill",
4642
- "defaultValue": "--cdr-color-text-emphasis",
4643
- "description": "Fill color of the cdr-toast close button icon"
4587
+ "name": "--cdr-switch-border-color",
4588
+ "defaultValue": "--cdr-color-border-secondary",
4589
+ "description": "Border of the cdr-switch button"
4644
4590
  },
4645
4591
  {
4646
- "name": "--cdr-toast-icon-left-background-color-default",
4647
- "defaultValue": "--cdr-color-background-message-default-02",
4648
- "description": "Default background color of the cdr-toast icon-left"
4592
+ "name": "--cdr-switch-background-color",
4593
+ "defaultValue": "--cdr-color-background-switch-default-rest",
4594
+ "description": "Background color of the cdr-switch button"
4649
4595
  },
4650
4596
  {
4651
- "name": "--cdr-toast-icon-left-fill-default",
4652
- "defaultValue": "--cdr-color-icon-message-default",
4653
- "description": "Default fill color of the cdr-toast icon-left"
4597
+ "name": "--cdr-switch-icon-fill",
4598
+ "defaultValue": "--cdr-color-icon-default",
4599
+ "description": "Fill of the cdr-switch x and check icons"
4654
4600
  },
4655
4601
  {
4656
- "name": "--cdr-toast-icon-left-background-color-info",
4657
- "defaultValue": "--cdr-color-background-message-info-02",
4658
- "description": "Info background color of the cdr-toast icon-left"
4602
+ "name": "--cdr-switch-box-shadow-color-focus",
4603
+ "defaultValue": "--cdr-color-border-secondary",
4604
+ "description": "Box-shadow of the cdr-switch button on focus"
4659
4605
  },
4660
4606
  {
4661
- "name": "--cdr-toast-icon-left-fill-info",
4662
- "defaultValue": "--cdr-color-icon-message-info",
4663
- "description": "Info fill color of the cdr-toast icon-left"
4607
+ "name": "--cdr-switch-background-color-focus",
4608
+ "defaultValue": "--cdr-color-background-switch-default-focus",
4609
+ "description": "Background color of the cdr-switch button on focus"
4664
4610
  },
4665
4611
  {
4666
- "name": "--cdr-toast-border-left-color-info",
4667
- "defaultValue": "--cdr-color-border-message-info-01",
4668
- "description": "Info border-left color of the cdr-toast"
4612
+ "name": "--cdr-switch-icon-fill-focus",
4613
+ "defaultValue": "--cdr-color-icon-default",
4614
+ "description": "Fill of the cdr-switch x and check icons on focus"
4669
4615
  },
4670
4616
  {
4671
- "name": "--cdr-toast-icon-left-background-color-warning",
4672
- "defaultValue": "--cdr-color-background-message-warning-02",
4673
- "description": "Warning background color of the cdr-toast icon-left"
4617
+ "name": "--cdr-switch-handle-background-color-focus",
4618
+ "defaultValue": "--cdr-color-background-switch-handle-default-focus",
4619
+ "description": "Background color of the cdr-switch handle before on focus"
4674
4620
  },
4675
4621
  {
4676
- "name": "--cdr-toast-icon-left-fill-warning",
4677
- "defaultValue": "--cdr-color-icon-message-warning",
4678
- "description": "Warning fill color of the cdr-toast icon-left"
4622
+ "name": "--cdr-switch-hover-border-color",
4623
+ "defaultValue": "--cdr-color-border-switch-default-hover",
4624
+ "description": "Border of the cdr-switch button on hover when not in focus"
4679
4625
  },
4680
4626
  {
4681
- "name": "--cdr-toast-border-left-color-warning",
4682
- "defaultValue": "--cdr-color-border-message-warning-01",
4683
- "description": "Warning border-left color of the cdr-toast"
4627
+ "name": "--cdr-switch-background-color-hover",
4628
+ "defaultValue": "--cdr-color-background-switch-default-hover",
4629
+ "description": "Background color of the cdr-switch button on hover when not in focus"
4684
4630
  },
4685
4631
  {
4686
- "name": "--cdr-toast-icon-left-background-color-success",
4687
- "defaultValue": "--cdr-color-background-message-success-02",
4688
- "description": "Success background color of the cdr-toast icon-left"
4632
+ "name": "--cdr-switch-icon-fill-hover",
4633
+ "defaultValue": "--cdr-color-icon-emphasis",
4634
+ "description": "Fill of the cdr-switch x and check icons on hover when not in focus"
4689
4635
  },
4690
4636
  {
4691
- "name": "--cdr-toast-icon-left-fill-success",
4692
- "defaultValue": "--cdr-color-icon-message-success",
4693
- "description": "Success fill color of the cdr-toast icon-left"
4637
+ "name": "--cdr-switch-handle-border-color-hover",
4638
+ "defaultValue": "--cdr-color-border-switch-default-hover",
4639
+ "description": "Border of the cdr-switch handle on hover when not in focus"
4694
4640
  },
4695
4641
  {
4696
- "name": "--cdr-toast-border-left-color-success",
4697
- "defaultValue": "--cdr-color-border-message-success-01",
4698
- "description": "Success border-left color of the cdr-toast"
4642
+ "name": "--cdr-switch-background-color-checked",
4643
+ "defaultValue": "--cdr-color-background-switch-selected-default-rest",
4644
+ "description": "Background color of the cdr-switch button when it is checked"
4699
4645
  },
4700
4646
  {
4701
- "name": "--cdr-toast-icon-left-background-color-error",
4702
- "defaultValue": "--cdr-color-background-message-error-02",
4703
- "description": "Error background color of the cdr-toast icon-left"
4647
+ "name": "--cdr-switch-icon-fill-checked",
4648
+ "defaultValue": "--cdr-color-icon-switch-selected-default-rest",
4649
+ "description": "Fill of the cdr-switch x and check icons when it is checked"
4704
4650
  },
4705
4651
  {
4706
- "name": "--cdr-toast-icon-left-fill-error",
4707
- "defaultValue": "--cdr-color-icon-message-error",
4708
- "description": "Error fill color of the cdr-toast icon-left"
4652
+ "name": "--cdr-switch-box-shadow-color-checked-focus",
4653
+ "defaultValue": "--cdr-color-border-secondary",
4654
+ "description": "Box-shadow of the cdr-switch button when it is checked and in focus"
4709
4655
  },
4710
4656
  {
4711
- "name": "--cdr-toast-border-left-color-error",
4712
- "defaultValue": "--cdr-color-border-message-error-01",
4713
- "description": "Error border-left color of the cdr-toast"
4657
+ "name": "--cdr-switch-background-color-checked-focus",
4658
+ "defaultValue": "--cdr-color-background-switch-selected-default-focus",
4659
+ "description": "Background color of the cdr-switch button when it is checked and in focus"
4714
4660
  },
4715
4661
  {
4716
- "name": "--cdr-toast-background-color-default",
4717
- "defaultValue": "--cdr-color-background-message-default-01",
4718
- "description": "Default background color of cdr-toast"
4662
+ "name": "--cdr-switch-handle-border-color-checked-focus",
4663
+ "defaultValue": "--cdr-color-border-switch-handle-default-focus",
4664
+ "description": "Border of the cdr-switch handle when it is checked and in focus"
4719
4665
  },
4720
4666
  {
4721
- "name": "--cdr-toast-outline-color-default",
4722
- "defaultValue": "--cdr-color-border-message-default-02",
4723
- "description": "Default outline color of cdr-toast"
4667
+ "name": "--cdr-switch-handle-background-color-checked-focus",
4668
+ "defaultValue": "--cdr-color-background-switch-handle-selected-default-focus",
4669
+ "description": "Background color of the cdr-switch handle when it is checked and in focus"
4724
4670
  },
4725
4671
  {
4726
- "name": "--cdr-toast-background-color-info",
4727
- "defaultValue": "--cdr-color-background-message-info-01",
4728
- "description": "Info background color of cdr-toast"
4672
+ "name": "--cdr-switch-icon-fill-checked-focus",
4673
+ "defaultValue": "--cdr-color-icon-switch-selected-default-focus",
4674
+ "description": "Fill of the cdr-switch x and check icons when it is checked and in focus"
4729
4675
  },
4730
4676
  {
4731
- "name": "--cdr-toast-background-color-success",
4732
- "defaultValue": "--cdr-color-background-message-success-01",
4733
- "description": "Success background color of cdr-toast"
4677
+ "name": "--cdr-switch-handle-background-color-checked",
4678
+ "defaultValue": "--cdr-color-background-switch-handle-selected-default-rest",
4679
+ "description": "Background color of the cdr-switch handle when it is checked"
4734
4680
  },
4735
4681
  {
4736
- "name": "--cdr-toast-outline-color-success",
4737
- "defaultValue": "--cdr-color-border-message-success-02",
4738
- "description": "Success outline color of cdr-toast"
4682
+ "name": "--cdr-switch-border-color-checked-hover",
4683
+ "defaultValue": "--cdr-color-border-secondary",
4684
+ "description": "Border of the cdr-switch button when it is checked and on hover but not in focus"
4739
4685
  },
4740
4686
  {
4741
- "name": "--cdr-toast-background-color-warning",
4742
- "defaultValue": "--cdr-color-background-message-warning-01",
4743
- "description": "Warning background color of cdr-toast"
4687
+ "name": "--cdr-switch-background-color-checked-hover",
4688
+ "defaultValue": "--cdr-color-background-switch-selected-default-hover",
4689
+ "description": "Background color of the cdr-switch button when it is checked and on hover but not in focus"
4744
4690
  },
4745
4691
  {
4746
- "name": "--cdr-toast-outline-color-warning",
4747
- "defaultValue": "--cdr-color-border-message-warning-02",
4748
- "description": "Warning outline color of cdr-toast"
4692
+ "name": "--cdr-switch-icon-fill-checked-hover",
4693
+ "defaultValue": "--cdr-color-icon-switch-selected-default-hover",
4694
+ "description": "Fill of the cdr-switch x and check icons when it is checked and on hover but not in focus"
4749
4695
  },
4750
4696
  {
4751
- "name": "--cdr-toast-background-color-error",
4752
- "defaultValue": "--cdr-color-background-message-error-01",
4753
- "description": "Error background color of cdr-toast"
4697
+ "name": "--cdr-switch-handle-border-color-checked-hover",
4698
+ "defaultValue": "--cdr-color-border-switch-handle-default-hover",
4699
+ "description": "Border of the cdr-switch handle when it is checked and on hover but not in focus"
4754
4700
  },
4755
4701
  {
4756
- "name": "--cdr-toast-outline-color-error",
4757
- "defaultValue": "--cdr-color-border-message-error-02",
4758
- "description": "Error outline color of cdr-toast"
4702
+ "name": "--cdr-switch-handle-border",
4703
+ "defaultValue": "--cdr-color-border-secondary",
4704
+ "description": "Border color of the cdr-switch handle"
4705
+ },
4706
+ {
4707
+ "name": "--cdr-switch-handle-background-color-rest",
4708
+ "defaultValue": "--cdr-color-background-switch-handle-default-rest",
4709
+ "description": "Background color of the cdr-switch handle"
4759
4710
  }
4760
4711
  ]
4761
4712
  },
4762
- "CdrTabs": {
4763
- "name": "CdrTabs",
4764
- "description": "Organizes related content into groups for people to navigate between",
4713
+ "CdrQuote": {
4714
+ "name": "CdrQuote",
4715
+ "description": "Short excerpt used to emphasize content or break up a large body of text",
4765
4716
  "tags": {},
4766
4717
  "exportName": "default",
4767
- "displayName": "CdrTabs",
4718
+ "displayName": "CdrQuote",
4768
4719
  "props": [
4769
4720
  {
4770
- "name": "height",
4771
- "description": "Sets height of the tabs container element.\nPassing a `px` value will render tabs with a static height,\npassing `auto` will render tabs with variable height based on content size.",
4721
+ "name": "tag",
4722
+ "description": "Sets the semantic HTML element for the quote.",
4723
+ "tags": {},
4724
+ "values": [
4725
+ "blockquote",
4726
+ "aside",
4727
+ "q",
4728
+ "div"
4729
+ ],
4772
4730
  "type": {
4773
4731
  "name": "string"
4774
4732
  },
4775
4733
  "defaultValue": {
4776
4734
  "func": false,
4777
- "value": "'240px'"
4778
- }
4779
- },
4780
- {
4781
- "name": "activeTab",
4782
- "description": "Sets the index of the tab that should be active on initial page load. Note that this property is zero-indexed.",
4783
- "type": {
4784
- "name": "number"
4785
- },
4786
- "defaultValue": {
4787
- "func": false,
4788
- "value": "0"
4735
+ "value": "'blockquote'"
4789
4736
  }
4790
4737
  },
4791
4738
  {
4792
4739
  "name": "modifier",
4793
- "description": "Modifies the style variants for this component",
4794
- "tags": {},
4795
- "values": [
4796
- "centered",
4797
- "compact",
4798
- "full-width",
4799
- "no-border"
4800
- ],
4801
- "type": {
4802
- "name": "string"
4803
- }
4804
- },
4805
- {
4806
- "name": "size",
4807
- "description": "Use `small` to reduce spacing around the tabs for a denser visual design",
4740
+ "description": "Modifies the style variant for the quote",
4808
4741
  "tags": {
4809
4742
  "demoSelectMultiple": [
4810
4743
  {
@@ -4814,15 +4747,121 @@
4814
4747
  ]
4815
4748
  },
4816
4749
  "values": [
4817
- "small"
4750
+ "pull"
4818
4751
  ],
4819
4752
  "type": {
4820
4753
  "name": "string"
4754
+ },
4755
+ "defaultValue": {
4756
+ "func": false,
4757
+ "value": "''"
4821
4758
  }
4822
4759
  },
4823
4760
  {
4824
- "name": "backgroundColor",
4825
- "description": "Sets the background color of the tab.\nFor CdrTabs that are rendered on non-primary backgrounds.\nPass the background-color into the component to ensure that the scrolling gradients render correctly.",
4761
+ "name": "summary",
4762
+ "description": "Sets the quote body text.",
4763
+ "type": {
4764
+ "name": "string"
4765
+ }
4766
+ },
4767
+ {
4768
+ "name": "citation",
4769
+ "description": "Sets the quote attribution text.",
4770
+ "type": {
4771
+ "name": "string"
4772
+ }
4773
+ }
4774
+ ],
4775
+ "slots": [
4776
+ {
4777
+ "name": "default"
4778
+ }
4779
+ ],
4780
+ "sourceFiles": [
4781
+ "./src/components/quote/CdrQuote.vue"
4782
+ ],
4783
+ "UIProperties": [
4784
+ {
4785
+ "name": "--cdr-quote-cite-text-color",
4786
+ "defaultValue": "--cdr-color-text-secondary",
4787
+ "description": "Text color of a cdr-quote citation"
4788
+ },
4789
+ {
4790
+ "name": "--cdr-quote-content-text-color",
4791
+ "defaultValue": "--cdr-color-text-primary",
4792
+ "description": "Text color of cdr-quote content"
4793
+ },
4794
+ {
4795
+ "name": "--cdr-quote-pull-container-border-color",
4796
+ "defaultValue": "--cdr-color-border-primary",
4797
+ "description": "Border color of a cdr-quote pull container"
4798
+ }
4799
+ ]
4800
+ },
4801
+ "CdrTabs": {
4802
+ "name": "CdrTabs",
4803
+ "description": "Organizes related content into groups for people to navigate between",
4804
+ "tags": {},
4805
+ "exportName": "default",
4806
+ "displayName": "CdrTabs",
4807
+ "props": [
4808
+ {
4809
+ "name": "height",
4810
+ "description": "Sets height of the tabs container element.\nPassing a `px` value will render tabs with a static height,\npassing `auto` will render tabs with variable height based on content size.",
4811
+ "type": {
4812
+ "name": "string"
4813
+ },
4814
+ "defaultValue": {
4815
+ "func": false,
4816
+ "value": "'240px'"
4817
+ }
4818
+ },
4819
+ {
4820
+ "name": "activeTab",
4821
+ "description": "Sets the index of the tab that should be active on initial page load. Note that this property is zero-indexed.",
4822
+ "type": {
4823
+ "name": "number"
4824
+ },
4825
+ "defaultValue": {
4826
+ "func": false,
4827
+ "value": "0"
4828
+ }
4829
+ },
4830
+ {
4831
+ "name": "modifier",
4832
+ "description": "Modifies the style variants for this component",
4833
+ "tags": {},
4834
+ "values": [
4835
+ "centered",
4836
+ "compact",
4837
+ "full-width",
4838
+ "no-border"
4839
+ ],
4840
+ "type": {
4841
+ "name": "string"
4842
+ }
4843
+ },
4844
+ {
4845
+ "name": "size",
4846
+ "description": "Use `small` to reduce spacing around the tabs for a denser visual design",
4847
+ "tags": {
4848
+ "demoSelectMultiple": [
4849
+ {
4850
+ "description": "true",
4851
+ "title": "demoSelectMultiple"
4852
+ }
4853
+ ]
4854
+ },
4855
+ "values": [
4856
+ "small"
4857
+ ],
4858
+ "type": {
4859
+ "name": "string"
4860
+ }
4861
+ },
4862
+ {
4863
+ "name": "backgroundColor",
4864
+ "description": "Sets the background color of the tab.\nFor CdrTabs that are rendered on non-primary backgrounds.\nPass the background-color into the component to ensure that the scrolling gradients render correctly.",
4826
4865
  "type": {
4827
4866
  "name": "string"
4828
4867
  },
@@ -4879,67 +4918,104 @@
4879
4918
  }
4880
4919
  ]
4881
4920
  },
4882
- "CdrText": {
4883
- "name": "CdrText",
4884
- "description": "Text container used for any text element such as paragraphs, headings, and lists",
4921
+ "CdrToggleButton": {
4922
+ "name": "CdrToggleButton",
4923
+ "description": "Permits switching two or more options on and off",
4885
4924
  "tags": {},
4886
4925
  "exportName": "default",
4887
- "displayName": "CdrText",
4926
+ "displayName": "CdrToggleButton",
4888
4927
  "props": [
4889
4928
  {
4890
- "name": "tag",
4891
- "description": "Sets the HTML tag (p, span, h1, h2, etc)",
4929
+ "name": "toggleValue",
4930
+ "description": "Sets the value and aria-label for the toggle button. Display can be overridden using default slot",
4892
4931
  "type": {
4893
4932
  "name": "string"
4894
4933
  },
4895
- "defaultValue": {
4896
- "func": false,
4897
- "value": "'p'"
4898
- }
4934
+ "required": true
4899
4935
  }
4900
4936
  ],
4901
4937
  "slots": [
4902
4938
  {
4903
4939
  "name": "default",
4904
- "description": "CdrText content"
4940
+ "description": "CdrToggleButton label content"
4905
4941
  }
4906
4942
  ],
4907
4943
  "sourceFiles": [
4908
- "./src/components/text/CdrText.vue"
4944
+ "./src/components/toggleButton/CdrToggleButton.vue"
4909
4945
  ],
4910
4946
  "UIProperties": [
4911
4947
  {
4912
- "name": "--cdr-text-color",
4913
- "defaultValue": "--cdr-color-text-primary",
4914
- "description": "Text color"
4948
+ "name": "--cdr-toggle-button-color-default-rest",
4949
+ "defaultValue": "--cdr-color-text-toggle-button-default-rest",
4950
+ "description": "Default text color of the cdr-toggle-button"
4951
+ },
4952
+ {
4953
+ "name": "--cdr-toggle-button-background-color-default-rest",
4954
+ "defaultValue": "--cdr-color-background-toggle-button-default-rest",
4955
+ "description": "Default background color of the cdr-toggle-button"
4956
+ },
4957
+ {
4958
+ "name": "--cdr-toggle-button-border-color-default-focus",
4959
+ "defaultValue": "--cdr-color-border-toggle-button-default-focus",
4960
+ "description": "Focus border color of the cdr-toggle-button"
4961
+ },
4962
+ {
4963
+ "name": "--cdr-toggle-button-background-color-default-focus",
4964
+ "defaultValue": "--cdr-color-background-toggle-button-default-focus",
4965
+ "description": "Focus background color of the cdr-toggle-button"
4966
+ },
4967
+ {
4968
+ "name": "--cdr-toggle-button-icon-fill-default",
4969
+ "defaultValue": "--cdr-color-icon-default",
4970
+ "description": "Default fill color of the cdr-toggle-button's svg"
4971
+ },
4972
+ {
4973
+ "name": "--cdr-toggle-button-background-color-default-selected-rest",
4974
+ "defaultValue": "--cdr-color-background-toggle-button-default-selected-rest",
4975
+ "description": "Selected background color of the cdr-toggle-button at rest"
4976
+ },
4977
+ {
4978
+ "name": "--cdr-toggle-button-border-color-default-selected-rest",
4979
+ "defaultValue": "--cdr-color-border-toggle-button-default-selected-rest",
4980
+ "description": "Selected border color of the cdr-toggle-button at rest"
4981
+ },
4982
+ {
4983
+ "name": "--cdr-toggle-button-icon-fill-selected-rest",
4984
+ "defaultValue": "--cdr-color-icon-emphasis",
4985
+ "description": "Selected fill color of the cdr-toggle-button's svg at rest"
4986
+ },
4987
+ {
4988
+ "name": "--cdr-toggle-button-border-color-default-selected-focus",
4989
+ "defaultValue": "--cdr-color-border-toggle-button-default-selected-focus",
4990
+ "description": "Selected border color of the cdr-toggle-button on focus"
4991
+ },
4992
+ {
4993
+ "name": "--cdr-toggle-button-background-color-default-selected-hover",
4994
+ "defaultValue": "--cdr-color-background-toggle-button-default-selected-hover",
4995
+ "description": "Selected background color of the cdr-toggle-button on hover"
4996
+ },
4997
+ {
4998
+ "name": "--cdr-toggle-button-background-color-default-hover",
4999
+ "defaultValue": "--cdr-color-background-toggle-button-default-hover",
5000
+ "description": "Background color of the cdr-toggle-button on hover"
5001
+ },
5002
+ {
5003
+ "name": "--cdr-toggle-button-border-color-hover-focus",
5004
+ "defaultValue": "--cdr-color-border-toggle-button-default-selected-focus",
5005
+ "description": "Hover border color of the cdr-toggle-button on focus"
4915
5006
  }
4916
5007
  ]
4917
5008
  },
4918
- "CdrToggleGroup": {
4919
- "name": "CdrToggleGroup",
4920
- "exportName": "default",
4921
- "displayName": "CdrToggleGroup",
4922
- "description": "",
5009
+ "CdrToast": {
5010
+ "name": "CdrToast",
5011
+ "description": "Non-modal dialog used to communicate the status of a task or process",
4923
5012
  "tags": {},
5013
+ "exportName": "default",
5014
+ "displayName": "CdrToast",
4924
5015
  "props": [
4925
5016
  {
4926
- "name": "modelValue",
4927
- "tags": {
4928
- "ignore": [
4929
- {
4930
- "description": true,
4931
- "title": "ignore"
4932
- }
4933
- ]
4934
- },
4935
- "type": {
4936
- "name": "string|number|boolean|object|array"
4937
- },
4938
- "required": true
4939
- },
4940
- {
4941
- "name": "size",
4942
- "description": "Sets toggle button size",
5017
+ "name": "type",
5018
+ "description": "Sets the toast type.",
4943
5019
  "tags": {
4944
5020
  "demoSelectMultiple": [
4945
5021
  {
@@ -4949,376 +5025,208 @@
4949
5025
  ]
4950
5026
  },
4951
5027
  "values": [
4952
- "medium",
4953
- "large"
5028
+ "info",
5029
+ "success",
5030
+ "warning",
5031
+ "error",
5032
+ "default"
4954
5033
  ],
4955
5034
  "type": {
4956
5035
  "name": "string"
4957
5036
  },
4958
5037
  "defaultValue": {
4959
5038
  "func": false,
4960
- "value": "'medium'"
4961
- }
4962
- }
4963
- ],
4964
- "events": [
4965
- {
4966
- "name": "update:modelValue",
4967
- "description": "Event emitted by v-model",
4968
- "properties": [
4969
- {
4970
- "type": {
4971
- "names": [
4972
- "mixed"
4973
- ]
4974
- },
4975
- "name": "modelValue"
4976
- }
4977
- ],
4978
- "tags": [
4979
- {
4980
- "title": "param",
4981
- "type": {
4982
- "name": "mixed"
4983
- },
4984
- "name": "modelValue"
4985
- }
4986
- ]
4987
- }
4988
- ],
4989
- "slots": [
4990
- {
4991
- "name": "default",
4992
- "description": "CdrToggleGroup content (CdrToggleButton components)"
4993
- }
4994
- ],
4995
- "sourceFiles": [
4996
- "./src/components/toggleButton/CdrToggleGroup.vue"
4997
- ],
4998
- "UIProperties": [
4999
- {
5000
- "name": "--cdr-toggle-group-border-color",
5001
- "defaultValue": "--cdr-color-border-primary",
5002
- "description": "Border color of the cdr-toggle-group"
5003
- },
5004
- {
5005
- "name": "--cdr-toggle-group-background-color-default-rest",
5006
- "defaultValue": "--cdr-color-background-toggle-group-default-rest",
5007
- "description": "Default background color of the cdr-toggle-group"
5008
- }
5009
- ]
5010
- },
5011
- "CdrSwitch": {
5012
- "name": "CdrSwitch",
5013
- "description": "Permits selection from two opposing options",
5014
- "tags": {},
5015
- "exportName": "default",
5016
- "displayName": "CdrSwitch",
5017
- "props": [
5018
- {
5019
- "name": "id",
5020
- "description": "Sets a custom ID for the switch. If this value is not set, it will be auto-generated.",
5021
- "type": {
5022
- "name": "string"
5039
+ "value": "'default'"
5023
5040
  }
5024
5041
  },
5025
5042
  {
5026
- "name": "size",
5027
- "description": "Sets the size of the switch",
5043
+ "name": "open",
5044
+ "description": "Used to programmatically control the toast open/close state.",
5028
5045
  "tags": {
5029
- "demoSelectMultiple": [
5046
+ "demoIgnore": [
5030
5047
  {
5031
- "description": "false",
5032
- "title": "demoSelectMultiple"
5048
+ "description": "true",
5049
+ "title": "demoIgnore"
5033
5050
  }
5034
5051
  ]
5035
5052
  },
5036
- "values": [
5037
- "medium",
5038
- "large"
5039
- ],
5040
5053
  "type": {
5041
- "name": "string"
5054
+ "name": "boolean"
5042
5055
  },
5043
5056
  "defaultValue": {
5044
5057
  "func": false,
5045
- "value": "'medium'"
5058
+ "value": false
5046
5059
  }
5047
5060
  },
5048
5061
  {
5049
- "name": "fullWidth",
5050
- "description": "Sets the label and switch to expand to the full width of its container with `space-between`",
5062
+ "name": "autoDismiss",
5063
+ "description": "Set to `false` to disable automatic closing after the `dismissDelay`.",
5051
5064
  "type": {
5052
5065
  "name": "boolean"
5053
5066
  },
5054
5067
  "defaultValue": {
5055
5068
  "func": false,
5056
- "value": false
5069
+ "value": true
5057
5070
  }
5058
5071
  },
5059
5072
  {
5060
- "name": "modelValue",
5061
- "tags": {
5062
- "demoIgnore": [
5063
- {
5064
- "description": "true",
5065
- "title": "demoIgnore"
5066
- }
5067
- ]
5068
- },
5073
+ "name": "dismissDelay",
5074
+ "description": "Sets the interval (in milliseconds) before the toast automatically closes.",
5069
5075
  "type": {
5070
- "name": "boolean"
5076
+ "name": "number"
5071
5077
  },
5072
- "required": true
5078
+ "defaultValue": {
5079
+ "func": false,
5080
+ "value": "5000"
5081
+ }
5073
5082
  }
5074
5083
  ],
5075
5084
  "events": [
5076
5085
  {
5077
- "name": "update:modelValue",
5078
- "description": "Event emitted by v-model on switch",
5079
- "properties": [
5080
- {
5081
- "type": {
5082
- "names": [
5083
- "mixed"
5084
- ]
5085
- },
5086
- "name": "modelValue"
5087
- }
5088
- ],
5089
- "tags": [
5090
- {
5091
- "title": "param",
5092
- "type": {
5093
- "name": "mixed"
5094
- },
5095
- "name": "modelValue"
5096
- }
5097
- ]
5086
+ "name": "open",
5087
+ "description": "Emits when toast opens"
5088
+ },
5089
+ {
5090
+ "name": "closed",
5091
+ "description": "Emits when toast closes"
5098
5092
  }
5099
5093
  ],
5100
5094
  "slots": [
5095
+ {
5096
+ "name": "icon-left",
5097
+ "description": "Icon matching toast messaging type"
5098
+ },
5101
5099
  {
5102
5100
  "name": "default",
5103
- "description": "The label for the switch"
5101
+ "description": "CdrToast content"
5102
+ },
5103
+ {
5104
+ "name": "icon"
5104
5105
  }
5105
5106
  ],
5106
5107
  "sourceFiles": [
5107
- "./src/components/switch/CdrSwitch.vue"
5108
+ "./src/components/toast/CdrToast.vue"
5108
5109
  ],
5109
5110
  "UIProperties": [
5110
5111
  {
5111
- "name": "--cdr-switch-border-color",
5112
- "defaultValue": "--cdr-color-border-secondary",
5113
- "description": "Border of the cdr-switch button"
5114
- },
5115
- {
5116
- "name": "--cdr-switch-background-color",
5117
- "defaultValue": "--cdr-color-background-switch-default-rest",
5118
- "description": "Background color of the cdr-switch button"
5119
- },
5120
- {
5121
- "name": "--cdr-switch-icon-fill",
5122
- "defaultValue": "--cdr-color-icon-default",
5123
- "description": "Fill of the cdr-switch x and check icons"
5124
- },
5125
- {
5126
- "name": "--cdr-switch-box-shadow-color-focus",
5127
- "defaultValue": "--cdr-color-border-secondary",
5128
- "description": "Box-shadow of the cdr-switch button on focus"
5129
- },
5130
- {
5131
- "name": "--cdr-switch-background-color-focus",
5132
- "defaultValue": "--cdr-color-background-switch-default-focus",
5133
- "description": "Background color of the cdr-switch button on focus"
5134
- },
5135
- {
5136
- "name": "--cdr-switch-icon-fill-focus",
5137
- "defaultValue": "--cdr-color-icon-default",
5138
- "description": "Fill of the cdr-switch x and check icons on focus"
5139
- },
5140
- {
5141
- "name": "--cdr-switch-handle-background-color-focus",
5142
- "defaultValue": "--cdr-color-background-switch-handle-default-focus",
5143
- "description": "Background color of the cdr-switch handle before on focus"
5144
- },
5145
- {
5146
- "name": "--cdr-switch-hover-border-color",
5147
- "defaultValue": "--cdr-color-border-switch-default-hover",
5148
- "description": "Border of the cdr-switch button on hover when not in focus"
5149
- },
5150
- {
5151
- "name": "--cdr-switch-background-color-hover",
5152
- "defaultValue": "--cdr-color-background-switch-default-hover",
5153
- "description": "Background color of the cdr-switch button on hover when not in focus"
5154
- },
5155
- {
5156
- "name": "--cdr-switch-icon-fill-hover",
5157
- "defaultValue": "--cdr-color-icon-emphasis",
5158
- "description": "Fill of the cdr-switch x and check icons on hover when not in focus"
5159
- },
5160
- {
5161
- "name": "--cdr-switch-handle-border-color-hover",
5162
- "defaultValue": "--cdr-color-border-switch-default-hover",
5163
- "description": "Border of the cdr-switch handle on hover when not in focus"
5164
- },
5165
- {
5166
- "name": "--cdr-switch-background-color-checked",
5167
- "defaultValue": "--cdr-color-background-switch-selected-default-rest",
5168
- "description": "Background color of the cdr-switch button when it is checked"
5169
- },
5170
- {
5171
- "name": "--cdr-switch-icon-fill-checked",
5172
- "defaultValue": "--cdr-color-icon-switch-selected-default-rest",
5173
- "description": "Fill of the cdr-switch x and check icons when it is checked"
5174
- },
5175
- {
5176
- "name": "--cdr-switch-box-shadow-color-checked-focus",
5177
- "defaultValue": "--cdr-color-border-secondary",
5178
- "description": "Box-shadow of the cdr-switch button when it is checked and in focus"
5179
- },
5180
- {
5181
- "name": "--cdr-switch-background-color-checked-focus",
5182
- "defaultValue": "--cdr-color-background-switch-selected-default-focus",
5183
- "description": "Background color of the cdr-switch button when it is checked and in focus"
5184
- },
5185
- {
5186
- "name": "--cdr-switch-handle-border-color-checked-focus",
5187
- "defaultValue": "--cdr-color-border-switch-handle-default-focus",
5188
- "description": "Border of the cdr-switch handle when it is checked and in focus"
5112
+ "name": "--cdr-toast-close-button-fill",
5113
+ "defaultValue": "--cdr-color-text-emphasis",
5114
+ "description": "Fill color of the cdr-toast close button icon"
5189
5115
  },
5190
5116
  {
5191
- "name": "--cdr-switch-handle-background-color-checked-focus",
5192
- "defaultValue": "--cdr-color-background-switch-handle-selected-default-focus",
5193
- "description": "Background color of the cdr-switch handle when it is checked and in focus"
5117
+ "name": "--cdr-toast-icon-left-background-color-default",
5118
+ "defaultValue": "--cdr-color-background-message-default-02",
5119
+ "description": "Default background color of the cdr-toast icon-left"
5194
5120
  },
5195
5121
  {
5196
- "name": "--cdr-switch-icon-fill-checked-focus",
5197
- "defaultValue": "--cdr-color-icon-switch-selected-default-focus",
5198
- "description": "Fill of the cdr-switch x and check icons when it is checked and in focus"
5122
+ "name": "--cdr-toast-icon-left-fill-default",
5123
+ "defaultValue": "--cdr-color-icon-message-default",
5124
+ "description": "Default fill color of the cdr-toast icon-left"
5199
5125
  },
5200
5126
  {
5201
- "name": "--cdr-switch-handle-background-color-checked",
5202
- "defaultValue": "--cdr-color-background-switch-handle-selected-default-rest",
5203
- "description": "Background color of the cdr-switch handle when it is checked"
5127
+ "name": "--cdr-toast-icon-left-background-color-info",
5128
+ "defaultValue": "--cdr-color-background-message-info-02",
5129
+ "description": "Info background color of the cdr-toast icon-left"
5204
5130
  },
5205
5131
  {
5206
- "name": "--cdr-switch-border-color-checked-hover",
5207
- "defaultValue": "--cdr-color-border-secondary",
5208
- "description": "Border of the cdr-switch button when it is checked and on hover but not in focus"
5132
+ "name": "--cdr-toast-icon-left-fill-info",
5133
+ "defaultValue": "--cdr-color-icon-message-info",
5134
+ "description": "Info fill color of the cdr-toast icon-left"
5209
5135
  },
5210
5136
  {
5211
- "name": "--cdr-switch-background-color-checked-hover",
5212
- "defaultValue": "--cdr-color-background-switch-selected-default-hover",
5213
- "description": "Background color of the cdr-switch button when it is checked and on hover but not in focus"
5137
+ "name": "--cdr-toast-border-left-color-info",
5138
+ "defaultValue": "--cdr-color-border-message-info-01",
5139
+ "description": "Info border-left color of the cdr-toast"
5214
5140
  },
5215
5141
  {
5216
- "name": "--cdr-switch-icon-fill-checked-hover",
5217
- "defaultValue": "--cdr-color-icon-switch-selected-default-hover",
5218
- "description": "Fill of the cdr-switch x and check icons when it is checked and on hover but not in focus"
5142
+ "name": "--cdr-toast-icon-left-background-color-warning",
5143
+ "defaultValue": "--cdr-color-background-message-warning-02",
5144
+ "description": "Warning background color of the cdr-toast icon-left"
5219
5145
  },
5220
5146
  {
5221
- "name": "--cdr-switch-handle-border-color-checked-hover",
5222
- "defaultValue": "--cdr-color-border-switch-handle-default-hover",
5223
- "description": "Border of the cdr-switch handle when it is checked and on hover but not in focus"
5147
+ "name": "--cdr-toast-icon-left-fill-warning",
5148
+ "defaultValue": "--cdr-color-icon-message-warning",
5149
+ "description": "Warning fill color of the cdr-toast icon-left"
5224
5150
  },
5225
5151
  {
5226
- "name": "--cdr-switch-handle-border",
5227
- "defaultValue": "--cdr-color-border-secondary",
5228
- "description": "Border color of the cdr-switch handle"
5152
+ "name": "--cdr-toast-border-left-color-warning",
5153
+ "defaultValue": "--cdr-color-border-message-warning-01",
5154
+ "description": "Warning border-left color of the cdr-toast"
5229
5155
  },
5230
5156
  {
5231
- "name": "--cdr-switch-handle-background-color-rest",
5232
- "defaultValue": "--cdr-color-background-switch-handle-default-rest",
5233
- "description": "Background color of the cdr-switch handle"
5234
- }
5235
- ]
5236
- },
5237
- "CdrToggleButton": {
5238
- "name": "CdrToggleButton",
5239
- "description": "Permits switching two or more options on and off",
5240
- "tags": {},
5241
- "exportName": "default",
5242
- "displayName": "CdrToggleButton",
5243
- "props": [
5157
+ "name": "--cdr-toast-icon-left-background-color-success",
5158
+ "defaultValue": "--cdr-color-background-message-success-02",
5159
+ "description": "Success background color of the cdr-toast icon-left"
5160
+ },
5244
5161
  {
5245
- "name": "toggleValue",
5246
- "description": "Sets the value and aria-label for the toggle button. Display can be overridden using default slot",
5247
- "type": {
5248
- "name": "string"
5249
- },
5250
- "required": true
5251
- }
5252
- ],
5253
- "slots": [
5162
+ "name": "--cdr-toast-icon-left-fill-success",
5163
+ "defaultValue": "--cdr-color-icon-message-success",
5164
+ "description": "Success fill color of the cdr-toast icon-left"
5165
+ },
5254
5166
  {
5255
- "name": "default",
5256
- "description": "CdrToggleButton label content"
5257
- }
5258
- ],
5259
- "sourceFiles": [
5260
- "./src/components/toggleButton/CdrToggleButton.vue"
5261
- ],
5262
- "UIProperties": [
5167
+ "name": "--cdr-toast-border-left-color-success",
5168
+ "defaultValue": "--cdr-color-border-message-success-01",
5169
+ "description": "Success border-left color of the cdr-toast"
5170
+ },
5263
5171
  {
5264
- "name": "--cdr-toggle-button-color-default-rest",
5265
- "defaultValue": "--cdr-color-text-toggle-button-default-rest",
5266
- "description": "Default text color of the cdr-toggle-button"
5172
+ "name": "--cdr-toast-icon-left-background-color-error",
5173
+ "defaultValue": "--cdr-color-background-message-error-02",
5174
+ "description": "Error background color of the cdr-toast icon-left"
5267
5175
  },
5268
5176
  {
5269
- "name": "--cdr-toggle-button-background-color-default-rest",
5270
- "defaultValue": "--cdr-color-background-toggle-button-default-rest",
5271
- "description": "Default background color of the cdr-toggle-button"
5177
+ "name": "--cdr-toast-icon-left-fill-error",
5178
+ "defaultValue": "--cdr-color-icon-message-error",
5179
+ "description": "Error fill color of the cdr-toast icon-left"
5272
5180
  },
5273
5181
  {
5274
- "name": "--cdr-toggle-button-border-color-default-focus",
5275
- "defaultValue": "--cdr-color-border-toggle-button-default-focus",
5276
- "description": "Focus border color of the cdr-toggle-button"
5182
+ "name": "--cdr-toast-border-left-color-error",
5183
+ "defaultValue": "--cdr-color-border-message-error-01",
5184
+ "description": "Error border-left color of the cdr-toast"
5277
5185
  },
5278
5186
  {
5279
- "name": "--cdr-toggle-button-background-color-default-focus",
5280
- "defaultValue": "--cdr-color-background-toggle-button-default-focus",
5281
- "description": "Focus background color of the cdr-toggle-button"
5187
+ "name": "--cdr-toast-background-color-default",
5188
+ "defaultValue": "--cdr-color-background-message-default-01",
5189
+ "description": "Default background color of cdr-toast"
5282
5190
  },
5283
5191
  {
5284
- "name": "--cdr-toggle-button-icon-fill-default",
5285
- "defaultValue": "--cdr-color-icon-default",
5286
- "description": "Default fill color of the cdr-toggle-button's svg"
5192
+ "name": "--cdr-toast-outline-color-default",
5193
+ "defaultValue": "--cdr-color-border-message-default-02",
5194
+ "description": "Default outline color of cdr-toast"
5287
5195
  },
5288
5196
  {
5289
- "name": "--cdr-toggle-button-background-color-default-selected-rest",
5290
- "defaultValue": "--cdr-color-background-toggle-button-default-selected-rest",
5291
- "description": "Selected background color of the cdr-toggle-button at rest"
5197
+ "name": "--cdr-toast-background-color-info",
5198
+ "defaultValue": "--cdr-color-background-message-info-01",
5199
+ "description": "Info background color of cdr-toast"
5292
5200
  },
5293
5201
  {
5294
- "name": "--cdr-toggle-button-border-color-default-selected-rest",
5295
- "defaultValue": "--cdr-color-border-toggle-button-default-selected-rest",
5296
- "description": "Selected border color of the cdr-toggle-button at rest"
5202
+ "name": "--cdr-toast-background-color-success",
5203
+ "defaultValue": "--cdr-color-background-message-success-01",
5204
+ "description": "Success background color of cdr-toast"
5297
5205
  },
5298
5206
  {
5299
- "name": "--cdr-toggle-button-icon-fill-selected-rest",
5300
- "defaultValue": "--cdr-color-icon-emphasis",
5301
- "description": "Selected fill color of the cdr-toggle-button's svg at rest"
5207
+ "name": "--cdr-toast-outline-color-success",
5208
+ "defaultValue": "--cdr-color-border-message-success-02",
5209
+ "description": "Success outline color of cdr-toast"
5302
5210
  },
5303
5211
  {
5304
- "name": "--cdr-toggle-button-border-color-default-selected-focus",
5305
- "defaultValue": "--cdr-color-border-toggle-button-default-selected-focus",
5306
- "description": "Selected border color of the cdr-toggle-button on focus"
5212
+ "name": "--cdr-toast-background-color-warning",
5213
+ "defaultValue": "--cdr-color-background-message-warning-01",
5214
+ "description": "Warning background color of cdr-toast"
5307
5215
  },
5308
5216
  {
5309
- "name": "--cdr-toggle-button-background-color-default-selected-hover",
5310
- "defaultValue": "--cdr-color-background-toggle-button-default-selected-hover",
5311
- "description": "Selected background color of the cdr-toggle-button on hover"
5217
+ "name": "--cdr-toast-outline-color-warning",
5218
+ "defaultValue": "--cdr-color-border-message-warning-02",
5219
+ "description": "Warning outline color of cdr-toast"
5312
5220
  },
5313
5221
  {
5314
- "name": "--cdr-toggle-button-background-color-default-hover",
5315
- "defaultValue": "--cdr-color-background-toggle-button-default-hover",
5316
- "description": "Background color of the cdr-toggle-button on hover"
5222
+ "name": "--cdr-toast-background-color-error",
5223
+ "defaultValue": "--cdr-color-background-message-error-01",
5224
+ "description": "Error background color of cdr-toast"
5317
5225
  },
5318
5226
  {
5319
- "name": "--cdr-toggle-button-border-color-hover-focus",
5320
- "defaultValue": "--cdr-color-border-toggle-button-default-selected-focus",
5321
- "description": "Hover border color of the cdr-toggle-button on focus"
5227
+ "name": "--cdr-toast-outline-color-error",
5228
+ "defaultValue": "--cdr-color-border-message-error-02",
5229
+ "description": "Error outline color of cdr-toast"
5322
5230
  }
5323
5231
  ]
5324
5232
  },
@@ -5452,5 +5360,98 @@
5452
5360
  "description": "Background color of the cdr-popup arrow"
5453
5361
  }
5454
5362
  ]
5363
+ },
5364
+ "CdrToggleGroup": {
5365
+ "name": "CdrToggleGroup",
5366
+ "exportName": "default",
5367
+ "displayName": "CdrToggleGroup",
5368
+ "description": "",
5369
+ "tags": {},
5370
+ "props": [
5371
+ {
5372
+ "name": "modelValue",
5373
+ "tags": {
5374
+ "ignore": [
5375
+ {
5376
+ "description": true,
5377
+ "title": "ignore"
5378
+ }
5379
+ ]
5380
+ },
5381
+ "type": {
5382
+ "name": "string|number|boolean|object|array"
5383
+ },
5384
+ "required": true
5385
+ },
5386
+ {
5387
+ "name": "size",
5388
+ "description": "Sets toggle button size",
5389
+ "tags": {
5390
+ "demoSelectMultiple": [
5391
+ {
5392
+ "description": "false",
5393
+ "title": "demoSelectMultiple"
5394
+ }
5395
+ ]
5396
+ },
5397
+ "values": [
5398
+ "medium",
5399
+ "large"
5400
+ ],
5401
+ "type": {
5402
+ "name": "string"
5403
+ },
5404
+ "defaultValue": {
5405
+ "func": false,
5406
+ "value": "'medium'"
5407
+ }
5408
+ }
5409
+ ],
5410
+ "events": [
5411
+ {
5412
+ "name": "update:modelValue",
5413
+ "description": "Event emitted by v-model",
5414
+ "properties": [
5415
+ {
5416
+ "type": {
5417
+ "names": [
5418
+ "mixed"
5419
+ ]
5420
+ },
5421
+ "name": "modelValue"
5422
+ }
5423
+ ],
5424
+ "tags": [
5425
+ {
5426
+ "title": "param",
5427
+ "type": {
5428
+ "name": "mixed"
5429
+ },
5430
+ "name": "modelValue"
5431
+ }
5432
+ ]
5433
+ }
5434
+ ],
5435
+ "slots": [
5436
+ {
5437
+ "name": "default",
5438
+ "description": "CdrToggleGroup content (CdrToggleButton components)"
5439
+ }
5440
+ ],
5441
+ "sourceFiles": [
5442
+ "./src/components/toggleButton/CdrToggleGroup.vue"
5443
+ ],
5444
+ "UIProperties": [
5445
+ {
5446
+ "name": "--cdr-toggle-group-border-color",
5447
+ "defaultValue": "--cdr-color-border-primary",
5448
+ "description": "Border color of the cdr-toggle-group"
5449
+ },
5450
+ {
5451
+ "name": "--cdr-toggle-group-background-color-default-rest",
5452
+ "defaultValue": "--cdr-color-background-toggle-group-default-rest",
5453
+ "description": "Default background color of the cdr-toggle-group"
5454
+ }
5455
+ ]
5455
5456
  }
5456
5457
  }