@rei/cedar 14.0.2-alpha.6 → 14.0.2-alpha.7

package/dist/component-docgen.json

@@ -1,168 +1,4 @@
 {
-  "CdrAccordion": {
-    "name": "CdrAccordion",
-    "description": "Vertically-stacked list that allows users to expand and collapse additional content",
-    "tags": {},
-    "exportName": "default",
-    "displayName": "CdrAccordion",
-    "props": [
-      {
-        "name": "id",
-        "description": "The unique id of an accordion.",
-        "tags": {
-          "demoIgnore": [
-            {
-              "description": "true",
-              "title": "demoIgnore"
-            }
-          ]
-        },
-        "type": {
-          "name": "string"
-        },
-        "required": true
-      },
-      {
-        "name": "opened",
-        "description": "Toggle this value to open/close the accordion.",
-        "tags": {
-          "demoIgnore": [
-            {
-              "description": "true",
-              "title": "demoIgnore"
-            }
-          ]
-        },
-        "type": {
-          "name": "boolean"
-        },
-        "defaultValue": {
-          "func": false,
-          "value": false
-        }
-      },
-      {
-        "name": "compact",
-        "description": "Sets a compact style.",
-        "type": {
-          "name": "boolean"
-        },
-        "defaultValue": {
-          "func": false,
-          "value": false
-        }
-      },
-      {
-        "name": "borderAligned",
-        "description": "Sets a border-aligned style.",
-        "type": {
-          "name": "boolean"
-        },
-        "defaultValue": {
-          "func": false,
-          "value": false
-        }
-      },
-      {
-        "name": "level",
-        "description": "Sets the heading level",
-        "tags": {
-          "demoIgnore": [
-            {
-              "description": "true",
-              "title": "demoIgnore"
-            }
-          ]
-        },
-        "type": {
-          "name": "string|number"
-        },
-        "required": true
-      },
-      {
-        "name": "contentSpacing",
-        "description": "Toggles content spacing (padding)",
-        "type": {
-          "name": "boolean"
-        },
-        "defaultValue": {
-          "func": false,
-          "value": true
-        }
-      },
-      {
-        "name": "label",
-        "description": "Sets the readable text on CdrAccordion button (also can be slotted)",
-        "tags": {
-          "demoIgnore": [
-            {
-              "description": "true",
-              "title": "demoIgnore"
-            }
-          ]
-        },
-        "type": {
-          "name": "string"
-        }
-      }
-    ],
-    "events": [
-      {
-        "name": "accordion-toggle",
-        "description": "Emits on accordion open/close"
-      }
-    ],
-    "slots": [
-      {
-        "name": "label",
-        "description": " Sets the readable text on the CdrAccordion button"
-      },
-      {
-        "name": "default",
-        "description": "CdrAccordion content"
-      }
-    ],
-    "sourceFiles": [
-      "./src/components/accordion/CdrAccordion.vue"
-    ],
-    "UIProperties": [
-      {
-        "name": "--cdr-accordion-border-color",
-        "defaultValue": "--cdr-color-border-primary",
-        "description": "Border color of cdr-accordion"
-      },
-      {
-        "name": "--cdr-accordion-button-background-color",
-        "defaultValue": "transparent",
-        "description": "Background color of a cdr-accordion header button"
-      },
-      {
-        "name": "--cdr-accordion-button-color",
-        "defaultValue": "--cdr-color-text-primary",
-        "description": "Text color of a cdr-accordion header button"
-      },
-      {
-        "name": "--cdr-accordion-button-background-color-hover",
-        "defaultValue": "--cdr-color-background-accordion-hover",
-        "description": "Background color of a cdr-accordion header button on focus and hover"
-      },
-      {
-        "name": "--cdr-accordion-icon-fill",
-        "defaultValue": "--cdr-color-icon-default",
-        "description": "Fill color of icons on a cdr-accordion. This is used for the caret which changes orientation when the accordion collapses and expands"
-      },
-      {
-        "name": "--cdr-accordion-content-background-color",
-        "defaultValue": "transparent",
-        "description": "Background color of cdr-accordion content"
-      },
-      {
-        "name": "--cdr-accordion-content-text-color",
-        "defaultValue": "--cdr-color-text-primary",
-        "description": "Text color of cdr-accordion content"
-      }
-    ]
-  },
   "CdrAccordionGroup": {
     "name": "CdrAccordionGroup",
     "exportName": "default",
@@ -402,16 +238,16 @@
       }
     ]
   },
-  "CdrBreadcrumb": {
-    "name": "CdrBreadcrumb",
-    "description": "Navigation used to reveal a page's location within the site hierarchy",
+  "CdrAccordion": {
+    "name": "CdrAccordion",
+    "description": "Vertically-stacked list that allows users to expand and collapse additional content",
     "tags": {},
     "exportName": "default",
-    "displayName": "CdrBreadcrumb",
+    "displayName": "CdrAccordion",
     "props": [
       {
-        "name": "items",
-        "description": "Sets the array of a breadcrumb object containing a 'url' and 'name' property.",
+        "name": "id",
+        "description": "The unique id of an accordion.",
         "tags": {
           "demoIgnore": [
             {
@@ -421,16 +257,70 @@
           ]
         },
         "type": {
-          "name": "breadcrumbItem[]"
+          "name": "string"
+        },
+        "required": true
+      },
+      {
+        "name": "opened",
+        "description": "Toggle this value to open/close the accordion.",
+        "tags": {
+          "demoIgnore": [
+            {
+              "description": "true",
+              "title": "demoIgnore"
+            }
+          ]
+        },
+        "type": {
+          "name": "boolean"
         },
         "defaultValue": {
-          "func": true,
-          "value": "() => []"
+          "func": false,
+          "value": false
         }
       },
       {
-        "name": "truncationEnabled",
-        "description": "Controls the ability to truncate the entire breadcrumb path. If this value is false, truncation will no longer occur.",
+        "name": "compact",
+        "description": "Sets a compact style.",
+        "type": {
+          "name": "boolean"
+        },
+        "defaultValue": {
+          "func": false,
+          "value": false
+        }
+      },
+      {
+        "name": "borderAligned",
+        "description": "Sets a border-aligned style.",
+        "type": {
+          "name": "boolean"
+        },
+        "defaultValue": {
+          "func": false,
+          "value": false
+        }
+      },
+      {
+        "name": "level",
+        "description": "Sets the heading level",
+        "tags": {
+          "demoIgnore": [
+            {
+              "description": "true",
+              "title": "demoIgnore"
+            }
+          ]
+        },
+        "type": {
+          "name": "string|number"
+        },
+        "required": true
+      },
+      {
+        "name": "contentSpacing",
+        "description": "Toggles content spacing (padding)",
         "type": {
           "name": "boolean"
         },
@@ -440,8 +330,8 @@
         }
       },
       {
-        "name": "id",
-        "description": "Define a custom ID for the `<nav>` element. Randomly generated if no ID provided.",
+        "name": "label",
+        "description": "Sets the readable text on CdrAccordion button (also can be slotted)",
         "tags": {
           "demoIgnore": [
             {
@@ -457,74 +347,58 @@
     ],
     "events": [
       {
-        "name": "navigate",
-        "description": "Emits when a breadcrumb item is clicked. `e.preventDefault()` may be used to override the default link navigation.",
-        "properties": [
-          {
-            "type": {
-              "names": [
-                "mixed"
-              ]
-            },
-            "name": "breadcrumb",
-            "description": "The breadcrumb data object"
-          }
-        ],
-        "tags": [
-          {
-            "title": "param",
-            "type": {
-              "name": "mixed"
-            },
-            "name": "breadcrumb",
-            "description": "The breadcrumb data object"
-          }
-        ]
+        "name": "accordion-toggle",
+        "description": "Emits on accordion open/close"
       }
     ],
     "slots": [
       {
-        "name": "link",
-        "scoped": true,
-        "bindings": [
-          {
-            "name": "class",
-            "title": "binding"
-          },
-          {
-            "name": "href",
-            "title": "binding"
-          },
-          {
-            "name": "content",
-            "title": "binding"
-          }
-        ]
+        "name": "label",
+        "description": " Sets the readable text on the CdrAccordion button"
+      },
+      {
+        "name": "default",
+        "description": "CdrAccordion content"
       }
     ],
     "sourceFiles": [
-      "./src/components/breadcrumb/CdrBreadcrumb.vue"
+      "./src/components/accordion/CdrAccordion.vue"
     ],
     "UIProperties": [
       {
-        "name": "--cdr-breadcrumb-ellipses-icon-color",
-        "defaultValue": "--cdr-color-text-secondary",
-        "description": "Ellipses icon color"
+        "name": "--cdr-accordion-border-color",
+        "defaultValue": "--cdr-color-border-primary",
+        "description": "Border color of cdr-accordion"
       },
       {
-        "name": "--cdr-breadcrumb-ellipses-icon-highlight-color",
-        "defaultValue": "--cdr-color-text-link-hover",
-        "description": "Ellipses icon hover, active and focus color"
+        "name": "--cdr-accordion-button-background-color",
+        "defaultValue": "transparent",
+        "description": "Background color of a cdr-accordion header button"
       },
       {
-        "name": "--cdr-breadcrumb-item-color",
-        "defaultValue": "--cdr-color-text-secondary",
-        "description": "Breadcrumb item color"
+        "name": "--cdr-accordion-button-color",
+        "defaultValue": "--cdr-color-text-primary",
+        "description": "Text color of a cdr-accordion header button"
       },
       {
-        "name": "--cdr-breadcrumb-item-linked-highlight-color",
-        "defaultValue": "--cdr-color-text-link-hover",
-        "description": "Breadcrumb item linked hover, active and focus color"
+        "name": "--cdr-accordion-button-background-color-hover",
+        "defaultValue": "--cdr-color-background-accordion-hover",
+        "description": "Background color of a cdr-accordion header button on focus and hover"
+      },
+      {
+        "name": "--cdr-accordion-icon-fill",
+        "defaultValue": "--cdr-color-icon-default",
+        "description": "Fill color of icons on a cdr-accordion. This is used for the caret which changes orientation when the accordion collapses and expands"
+      },
+      {
+        "name": "--cdr-accordion-content-background-color",
+        "defaultValue": "transparent",
+        "description": "Background color of cdr-accordion content"
+      },
+      {
+        "name": "--cdr-accordion-content-text-color",
+        "defaultValue": "--cdr-color-text-primary",
+        "description": "Text color of cdr-accordion content"
       }
     ]
   },
@@ -1230,54 +1104,129 @@
       }
     ]
   },
-  "CdrCard": {
-    "name": "CdrCard",
-    "description": "Related, interactive containers linking to a single subject or destination",
+  "CdrBreadcrumb": {
+    "name": "CdrBreadcrumb",
+    "description": "Navigation used to reveal a page's location within the site hierarchy",
     "tags": {},
     "exportName": "default",
-    "displayName": "CdrCard",
+    "displayName": "CdrBreadcrumb",
     "props": [
       {
-        "name": "tag",
-        "description": "Sets valid HTML container element tag.",
+        "name": "items",
+        "description": "Sets the array of a breadcrumb object containing a 'url' and 'name' property.",
+        "tags": {
+          "demoIgnore": [
+            {
+              "description": "true",
+              "title": "demoIgnore"
+            }
+          ]
+        },
         "type": {
-          "name": "string"
+          "name": "breadcrumbItem[]"
+        },
+        "defaultValue": {
+          "func": true,
+          "value": "() => []"
+        }
+      },
+      {
+        "name": "truncationEnabled",
+        "description": "Controls the ability to truncate the entire breadcrumb path. If this value is false, truncation will no longer occur.",
+        "type": {
+          "name": "boolean"
         },
         "defaultValue": {
           "func": false,
-          "value": "'article'"
+          "value": true
+        }
+      },
+      {
+        "name": "id",
+        "description": "Define a custom ID for the `<nav>` element. Randomly generated if no ID provided.",
+        "tags": {
+          "demoIgnore": [
+            {
+              "description": "true",
+              "title": "demoIgnore"
+            }
+          ]
+        },
+        "type": {
+          "name": "string"
         }
       }
     ],
+    "events": [
+      {
+        "name": "navigate",
+        "description": "Emits when a breadcrumb item is clicked. `e.preventDefault()` may be used to override the default link navigation.",
+        "properties": [
+          {
+            "type": {
+              "names": [
+                "mixed"
+              ]
+            },
+            "name": "breadcrumb",
+            "description": "The breadcrumb data object"
+          }
+        ],
+        "tags": [
+          {
+            "title": "param",
+            "type": {
+              "name": "mixed"
+            },
+            "name": "breadcrumb",
+            "description": "The breadcrumb data object"
+          }
+        ]
+      }
+    ],
     "slots": [
       {
-        "name": "default",
-        "description": "CdrCard content"
+        "name": "link",
+        "scoped": true,
+        "bindings": [
+          {
+            "name": "class",
+            "title": "binding"
+          },
+          {
+            "name": "href",
+            "title": "binding"
+          },
+          {
+            "name": "content",
+            "title": "binding"
+          }
+        ]
       }
     ],
     "sourceFiles": [
-      "./src/components/card/CdrCard.vue"
+      "./src/components/breadcrumb/CdrBreadcrumb.vue"
     ],
     "UIProperties": [
       {
-        "name": "--cdr-card-base-background-color",
-        "defaultValue": "--cdr-color-background-primary",
-        "description": "Background color of a cdr-card"
+        "name": "--cdr-breadcrumb-ellipses-icon-color",
+        "defaultValue": "--cdr-color-text-secondary",
+        "description": "Ellipses icon color"
       },
       {
-        "name": "--cdr-card-base-color",
-        "defaultValue": "--cdr-color-text-primary",
-        "description": "Text color of a cdr-card"
+        "name": "--cdr-breadcrumb-ellipses-icon-highlight-color",
+        "defaultValue": "--cdr-color-text-link-hover",
+        "description": "Ellipses icon hover, active and focus color"
       },
       {
-        "name": "--cdr-card-link-color",
-        "defaultValue": "--cdr-color-text-primary",
-        "description": "Link text color of a cdr-card"
+        "name": "--cdr-breadcrumb-item-color",
+        "defaultValue": "--cdr-color-text-secondary",
+        "description": "Breadcrumb item color"
       },
       {
-        "name": "--cdr-card-link-hover-color",
+        "name": "--cdr-breadcrumb-item-linked-highlight-color",
         "defaultValue": "--cdr-color-text-link-hover",
-        "description": "Link hover text color of a cdr-card"
+        "description": "Breadcrumb item linked hover, active and focus color"
       }
     ]
   },
@@ -1335,6 +1284,57 @@
       }
     ]
   },
+  "CdrCard": {
+    "name": "CdrCard",
+    "description": "Related, interactive containers linking to a single subject or destination",
+    "tags": {},
+    "exportName": "default",
+    "displayName": "CdrCard",
+    "props": [
+      {
+        "name": "tag",
+        "description": "Sets valid HTML container element tag.",
+        "type": {
+          "name": "string"
+        },
+        "defaultValue": {
+          "func": false,
+          "value": "'article'"
+        }
+      }
+    ],
+    "slots": [
+      {
+        "name": "default",
+        "description": "CdrCard content"
+      }
+    ],
+    "sourceFiles": [
+      "./src/components/card/CdrCard.vue"
+    ],
+    "UIProperties": [
+      {
+        "name": "--cdr-card-base-background-color",
+        "defaultValue": "--cdr-color-background-primary",
+        "description": "Background color of a cdr-card"
+      },
+      {
+        "name": "--cdr-card-base-color",
+        "defaultValue": "--cdr-color-text-primary",
+        "description": "Text color of a cdr-card"
+      },
+      {
+        "name": "--cdr-card-link-color",
+        "defaultValue": "--cdr-color-text-primary",
+        "description": "Link text color of a cdr-card"
+      },
+      {
+        "name": "--cdr-card-link-hover-color",
+        "defaultValue": "--cdr-color-text-link-hover",
+        "description": "Link hover text color of a cdr-card"
+      }
+    ]
+  },
   "CdrCheckbox": {
     "name": "CdrCheckbox",
     "description": "Allows selecting one or more items from a list",
@@ -1593,15 +1593,56 @@
       }
     ]
   },
-  "CdrChip": {
-    "name": "CdrChip",
-    "description": "Allows people to make selections, filter content, or trigger actions",
-    "tags": {},
+  "CdrChipGroup": {
+    "name": "CdrChipGroup",
     "exportName": "default",
-    "displayName": "CdrChip",
-    "slots": [
-      {
-        "name": "icon-left",
+    "displayName": "CdrChipGroup",
+    "description": "",
+    "tags": {},
+    "props": [
+      {
+        "name": "label",
+        "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.",
+        "type": {
+          "name": "string"
+        },
+        "required": true
+      },
+      {
+        "name": "hideLabel",
+        "description": "Visually hides the chip group label but makes it accessible to screen readers.",
+        "type": {
+          "name": "boolean"
+        },
+        "defaultValue": {
+          "func": false,
+          "value": true
+        }
+      }
+    ],
+    "slots": [
+      {
+        "name": "label",
+        "description": "Override CdrChip label content with a custom element"
+      },
+      {
+        "name": "default",
+        "description": "CdrChipGroup content (CdrChip components)"
+      }
+    ],
+    "sourceFiles": [
+      "./src/components/chip/CdrChipGroup.vue"
+    ]
+  },
+  "CdrChip": {
+    "name": "CdrChip",
+    "description": "Allows people to make selections, filter content, or trigger actions",
+    "tags": {},
+    "exportName": "default",
+    "displayName": "CdrChip",
+    "slots": [
+      {
+        "name": "icon-left",
         "description": "Icon to the left of the content"
       },
       {
@@ -1724,47 +1765,6 @@
       }
     ]
   },
-  "CdrChipGroup": {
-    "name": "CdrChipGroup",
-    "exportName": "default",
-    "displayName": "CdrChipGroup",
-    "description": "",
-    "tags": {},
-    "props": [
-      {
-        "name": "label",
-        "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.",
-        "type": {
-          "name": "string"
-        },
-        "required": true
-      },
-      {
-        "name": "hideLabel",
-        "description": "Visually hides the chip group label but makes it accessible to screen readers.",
-        "type": {
-          "name": "boolean"
-        },
-        "defaultValue": {
-          "func": false,
-          "value": true
-        }
-      }
-    ],
-    "slots": [
-      {
-        "name": "label",
-        "description": "Override CdrChip label content with a custom element"
-      },
-      {
-        "name": "default",
-        "description": "CdrChipGroup content (CdrChip components)"
-      }
-    ],
-    "sourceFiles": [
-      "./src/components/chip/CdrChipGroup.vue"
-    ]
-  },
   "CdrContainer": {
     "name": "CdrContainer",
     "description": "Provides base margins and responsive layout logic for pages",
@@ -2661,6 +2661,87 @@
       }
     ]
   },
+  "CdrList": {
+    "name": "CdrList",
+    "description": "Groups related content items together either vertically or horizontally",
+    "tags": {},
+    "exportName": "default",
+    "displayName": "CdrList",
+    "props": [
+      {
+        "name": "tag",
+        "description": "Sets list type and HTML element as \"unordered\" or \"ordered\"",
+        "tags": {},
+        "values": [
+          "ul",
+          "ol"
+        ],
+        "type": {
+          "name": "string"
+        },
+        "defaultValue": {
+          "func": false,
+          "value": "'ul'"
+        }
+      },
+      {
+        "name": "modifier",
+        "description": "Modifies the style variant for this component",
+        "tags": {
+          "demoSelectMultiple": [
+            {
+              "description": "true",
+              "title": "demoSelectMultiple"
+            }
+          ]
+        },
+        "values": [
+          "ordered",
+          "unordered",
+          "compact",
+          "inline"
+        ],
+        "type": {
+          "name": "string"
+        },
+        "defaultValue": {
+          "func": false,
+          "value": "''"
+        }
+      }
+    ],
+    "slots": [
+      {
+        "name": "default",
+        "description": "CdrList content (list-items)"
+      }
+    ],
+    "sourceFiles": [
+      "./src/components/list/CdrList.vue"
+    ],
+    "UIProperties": [
+      {
+        "name": "--cdr-list-inline-text-color",
+        "defaultValue": "--cdr-color-text-secondary",
+        "description": "Color of the unordered inline list item prefix"
+      },
+      {
+        "name": "--cdr-list-ordered-nested-prefix-color",
+        "defaultValue": "--cdr-color-text-secondary",
+        "description": "Color of the nested ordered cdr-list item prefix"
+      },
+      {
+        "name": "--cdr-list-unordered-prefix-color",
+        "defaultValue": "--cdr-color-text-secondary",
+        "description": "Color of the unordered cdr-list item prefix"
+      },
+      {
+        "name": "--cdr-list-unordered-nested-prefix-color",
+        "defaultValue": "--cdr-color-text-secondary",
+        "description": "Color of the nested unordered cdr-list item prefix"
+      }
+    ]
+  },
   "CdrLabelWrapper": {
     "name": "CdrLabelWrapper",
     "exportName": "default",
@@ -2792,84 +2873,155 @@
       }
     ]
   },
-  "CdrList": {
-    "name": "CdrList",
-    "description": "Groups related content items together either vertically or horizontally",
+  "CdrModal": {
+    "name": "CdrModal",
+    "description": "Disruptive, action-blocking overlays used to display important information",
     "tags": {},
     "exportName": "default",
-    "displayName": "CdrList",
+    "displayName": "CdrModal",
     "props": [
       {
-        "name": "tag",
-        "description": "Sets list type and HTML element as \"unordered\" or \"ordered\"",
+        "name": "opened",
+        "description": "Toggles the state of the modal",
+        "tags": {
+          "demoIgnore": [
+            {
+              "description": "true",
+              "title": "demoIgnore"
+            }
+          ]
+        },
+        "type": {
+          "name": "boolean"
+        },
+        "required": true
+      },
+      {
+        "name": "label",
+        "description": "Sets `aria-label` and modal title text. Can also use title slot to set title.",
+        "type": {
+          "name": "string"
+        },
+        "required": true
+      },
+      {
+        "name": "showTitle",
+        "description": "Toggles the modal title text, which comes from `label` prop or `title` slot.",
+        "type": {
+          "name": "boolean"
+        },
+        "required": false,
+        "defaultValue": {
+          "func": false,
+          "value": true
+        }
+      },
+      {
+        "name": "ariaDescribedby",
+        "description": "Text for aria-describedby attribute. Applied to modal content element",
+        "type": {
+          "name": "string"
+        },
+        "required": false,
+        "defaultValue": {
+          "func": false,
+          "value": "null"
+        }
+      },
+      {
+        "name": "role",
+        "description": "Sets the `role` attribute on the modal content element",
         "tags": {},
         "values": [
-          "ul",
-          "ol"
+          "dialog",
+          "alertDialog"
         ],
         "type": {
           "name": "string"
         },
+        "required": false,
         "defaultValue": {
           "func": false,
-          "value": "'ul'"
+          "value": "'dialog'"
         }
       },
       {
-        "name": "modifier",
-        "description": "Modifies the style variant for this component",
-        "tags": {
-          "demoSelectMultiple": [
-            {
-              "description": "true",
-              "title": "demoSelectMultiple"
-            }
-          ]
+        "name": "id",
+        "description": "Sets unique `id` for modal",
+        "type": {
+          "name": "string"
         },
-        "values": [
-          "ordered",
-          "unordered",
-          "compact",
-          "inline"
-        ],
+        "required": false,
+        "defaultValue": {
+          "func": false,
+          "value": "null"
+        }
+      },
+      {
+        "name": "overlayClass",
+        "description": "Adds custom class to the `cdr-modal__overlay` div",
+        "type": {
+          "name": "string"
+        }
+      },
+      {
+        "name": "wrapperClass",
+        "description": "Adds custom class to the `cdr-modal__outerWrap` div",
+        "type": {
+          "name": "string"
+        }
+      },
+      {
+        "name": "contentClass",
+        "description": "Adds custom class to the `cdr-modal__innerWrap` div",
         "type": {
           "name": "string"
+        }
+      },
+      {
+        "name": "animationDuration",
+        "description": "Sets duration for modal's close animation",
+        "type": {
+          "name": "number"
         },
         "defaultValue": {
           "func": false,
-          "value": "''"
+          "value": "300"
         }
       }
     ],
-    "slots": [
+    "events": [
       {
-        "name": "default",
-        "description": "CdrList content (list-items)"
+        "name": "closed",
+        "description": "Fires when modal is closed"
       }
     ],
-    "sourceFiles": [
-      "./src/components/list/CdrList.vue"
-    ],
-    "UIProperties": [
+    "slots": [
       {
-        "name": "--cdr-list-inline-text-color",
-        "defaultValue": "--cdr-color-text-secondary",
-        "description": "Color of the unordered inline list item prefix"
+        "name": "modal",
+        "description": "Use to override the entire CdrModal content container."
       },
       {
-        "name": "--cdr-list-ordered-nested-prefix-color",
-        "defaultValue": "--cdr-color-text-secondary",
-        "description": "Color of the nested ordered cdr-list item prefix"
+        "name": "title",
+        "description": "Use to override the default title"
       },
       {
-        "name": "--cdr-list-unordered-prefix-color",
-        "defaultValue": "--cdr-color-text-secondary",
-        "description": "Color of the unordered cdr-list item prefix"
+        "name": "default"
+      }
+    ],
+    "sourceFiles": [
+      "./src/components/modal/CdrModal.vue"
+    ],
+    "UIProperties": [
+      {
+        "name": "--cdr-modal-overlay-background-color",
+        "defaultValue": "--cdr-color-background-modal-overlay",
+        "description": "Background color of the modal overlay"
       },
       {
-        "name": "--cdr-list-unordered-nested-prefix-color",
-        "defaultValue": "--cdr-color-text-secondary",
-        "description": "Color of the nested unordered cdr-list item prefix"
+        "name": "--cdr-modal-content-wrap-background-color",
+        "defaultValue": "--cdr-color-background-primary",
+        "description": "Background color of the content wrap"
       }
     ]
   },
@@ -2948,201 +3100,49 @@
         }
       },
       {
-        "name": "rel",
-        "tags": {
-          "ignore": [
-            {
-              "description": true,
-              "title": "ignore"
-            }
-          ]
-        },
-        "type": {
-          "name": "string"
-        }
-      }
-    ],
-    "slots": [
-      {
-        "name": "default",
-        "description": "Readable text of the link"
-      }
-    ],
-    "sourceFiles": [
-      "./src/components/link/CdrLink.vue"
-    ],
-    "UIProperties": [
-      {
-        "name": "--cdr-link-text-color",
-        "defaultValue": "--cdr-color-text-link-rest",
-        "description": "Color of the link text"
-      },
-      {
-        "name": "--cdr-link-fill-color",
-        "defaultValue": "--cdr-color-text-link-rest",
-        "description": "Color of the link fill"
-      },
-      {
-        "name": "--cdr-link-active-text-color-active",
-        "defaultValue": "--cdr-color-text-link-active",
-        "description": "Color of the link text when active or focused"
-      },
-      {
-        "name": "--cdr-link-text-color-hover",
-        "defaultValue": "--cdr-color-text-link-hover",
-        "description": "Color of the link text when hovered"
-      }
-    ]
-  },
-  "CdrModal": {
-    "name": "CdrModal",
-    "description": "Disruptive, action-blocking overlays used to display important information",
-    "tags": {},
-    "exportName": "default",
-    "displayName": "CdrModal",
-    "props": [
-      {
-        "name": "opened",
-        "description": "Toggles the state of the modal",
-        "tags": {
-          "demoIgnore": [
-            {
-              "description": "true",
-              "title": "demoIgnore"
-            }
-          ]
-        },
-        "type": {
-          "name": "boolean"
-        },
-        "required": true
-      },
-      {
-        "name": "label",
-        "description": "Sets `aria-label` and modal title text. Can also use title slot to set title.",
-        "type": {
-          "name": "string"
-        },
-        "required": true
-      },
-      {
-        "name": "showTitle",
-        "description": "Toggles the modal title text, which comes from `label` prop or `title` slot.",
-        "type": {
-          "name": "boolean"
-        },
-        "required": false,
-        "defaultValue": {
-          "func": false,
-          "value": true
-        }
-      },
-      {
-        "name": "ariaDescribedby",
-        "description": "Text for aria-describedby attribute. Applied to modal content element",
-        "type": {
-          "name": "string"
-        },
-        "required": false,
-        "defaultValue": {
-          "func": false,
-          "value": "null"
-        }
-      },
-      {
-        "name": "role",
-        "description": "Sets the `role` attribute on the modal content element",
-        "tags": {},
-        "values": [
-          "dialog",
-          "alertDialog"
-        ],
-        "type": {
-          "name": "string"
-        },
-        "required": false,
-        "defaultValue": {
-          "func": false,
-          "value": "'dialog'"
-        }
-      },
-      {
-        "name": "id",
-        "description": "Sets unique `id` for modal",
-        "type": {
-          "name": "string"
-        },
-        "required": false,
-        "defaultValue": {
-          "func": false,
-          "value": "null"
-        }
-      },
-      {
-        "name": "overlayClass",
-        "description": "Adds custom class to the `cdr-modal__overlay` div",
-        "type": {
-          "name": "string"
-        }
-      },
-      {
-        "name": "wrapperClass",
-        "description": "Adds custom class to the `cdr-modal__outerWrap` div",
-        "type": {
-          "name": "string"
-        }
-      },
-      {
-        "name": "contentClass",
-        "description": "Adds custom class to the `cdr-modal__innerWrap` div",
-        "type": {
-          "name": "string"
-        }
-      },
-      {
-        "name": "animationDuration",
-        "description": "Sets duration for modal's close animation",
-        "type": {
-          "name": "number"
+        "name": "rel",
+        "tags": {
+          "ignore": [
+            {
+              "description": true,
+              "title": "ignore"
+            }
+          ]
         },
-        "defaultValue": {
-          "func": false,
-          "value": "300"
+        "type": {
+          "name": "string"
         }
       }
     ],
-    "events": [
-      {
-        "name": "closed",
-        "description": "Fires when modal is closed"
-      }
-    ],
     "slots": [
       {
-        "name": "modal",
-        "description": "Use to override the entire CdrModal content container."
-      },
-      {
-        "name": "title",
-        "description": "Use to override the default title"
-      },
-      {
-        "name": "default"
+        "name": "default",
+        "description": "Readable text of the link"
       }
     ],
     "sourceFiles": [
-      "./src/components/modal/CdrModal.vue"
+      "./src/components/link/CdrLink.vue"
     ],
     "UIProperties": [
       {
-        "name": "--cdr-modal-overlay-background-color",
-        "defaultValue": "--cdr-color-background-modal-overlay",
-        "description": "Background color of the modal overlay"
+        "name": "--cdr-link-text-color",
+        "defaultValue": "--cdr-color-text-link-rest",
+        "description": "Color of the link text"
       },
       {
-        "name": "--cdr-modal-content-wrap-background-color",
-        "defaultValue": "--cdr-color-background-primary",
-        "description": "Background color of the content wrap"
+        "name": "--cdr-link-fill-color",
+        "defaultValue": "--cdr-color-text-link-rest",
+        "description": "Color of the link fill"
+      },
+      {
+        "name": "--cdr-link-active-text-color-active",
+        "defaultValue": "--cdr-color-text-link-active",
+        "description": "Color of the link text when active or focused"
+      },
+      {
+        "name": "--cdr-link-text-color-hover",
+        "defaultValue": "--cdr-color-text-link-hover",
+        "description": "Color of the link text when hovered"
       }
     ]
   },
@@ -3266,6 +3266,77 @@
       "./src/components/popover/CdrPopover.vue"
     ]
   },
+  "CdrPopup": {
+    "name": "CdrPopup",
+    "description": "An internal helper component used by Popover and Tooltip",
+    "tags": {},
+    "exportName": "default",
+    "displayName": "CdrPopup",
+    "props": [
+      {
+        "name": "opened",
+        "type": {
+          "name": "boolean"
+        },
+        "defaultValue": {
+          "func": false,
+          "value": false
+        }
+      },
+      {
+        "name": "position",
+        "type": {
+          "name": "string"
+        },
+        "required": false,
+        "defaultValue": {
+          "func": false,
+          "value": "'top'"
+        }
+      },
+      {
+        "name": "autoPosition",
+        "type": {
+          "name": "boolean"
+        },
+        "defaultValue": {
+          "func": false,
+          "value": true
+        }
+      },
+      {
+        "name": "contentClass",
+        "type": {
+          "name": "string"
+        }
+      }
+    ],
+    "events": [
+      {
+        "name": "closed"
+      }
+    ],
+    "slots": [
+      {
+        "name": "default"
+      }
+    ],
+    "sourceFiles": [
+      "./src/components/popup/CdrPopup.vue"
+    ],
+    "UIProperties": [
+      {
+        "name": "--cdr-popup-content-background",
+        "defaultValue": "--cdr-color-background-primary",
+        "description": "Background color of cdr-popup content"
+      },
+      {
+        "name": "--cdr-popup-content-border-color",
+        "defaultValue": "--cdr-color-border-secondary",
+        "description": "Border color of cdr-popup content"
+      }
+    ]
+  },
   "CdrPagination": {
     "name": "CdrPagination",
     "description": "Allows people to navigate to the next or previous page within an experience",
@@ -3419,77 +3490,6 @@
       }
     ]
   },
-  "CdrPopup": {
-    "name": "CdrPopup",
-    "description": "An internal helper component used by Popover and Tooltip",
-    "tags": {},
-    "exportName": "default",
-    "displayName": "CdrPopup",
-    "props": [
-      {
-        "name": "opened",
-        "type": {
-          "name": "boolean"
-        },
-        "defaultValue": {
-          "func": false,
-          "value": false
-        }
-      },
-      {
-        "name": "position",
-        "type": {
-          "name": "string"
-        },
-        "required": false,
-        "defaultValue": {
-          "func": false,
-          "value": "'top'"
-        }
-      },
-      {
-        "name": "autoPosition",
-        "type": {
-          "name": "boolean"
-        },
-        "defaultValue": {
-          "func": false,
-          "value": true
-        }
-      },
-      {
-        "name": "contentClass",
-        "type": {
-          "name": "string"
-        }
-      }
-    ],
-    "events": [
-      {
-        "name": "closed"
-      }
-    ],
-    "slots": [
-      {
-        "name": "default"
-      }
-    ],
-    "sourceFiles": [
-      "./src/components/popup/CdrPopup.vue"
-    ],
-    "UIProperties": [
-      {
-        "name": "--cdr-popup-content-background",
-        "defaultValue": "--cdr-color-background-primary",
-        "description": "Background color of cdr-popup content"
-      },
-      {
-        "name": "--cdr-popup-content-border-color",
-        "defaultValue": "--cdr-color-border-secondary",
-        "description": "Border color of cdr-popup content"
-      }
-    ]
-  },
   "CdrRadio": {
     "name": "CdrRadio",
     "description": "Permits the selection of only one option from a list of two or more",
@@ -3694,39 +3694,127 @@
         "description": "Background color of the inner circle of cdr-radio when disabled"
       },
       {
-        "name": "--cdr-radio-inner-circle-background-color-selected-disabled",
-        "defaultValue": "--cdr-color-background-input-default-disabled",
-        "description": "Background color of the inner circle of cdr-radio when selected and disabled"
+        "name": "--cdr-radio-inner-circle-background-color-selected-disabled",
+        "defaultValue": "--cdr-color-background-input-default-disabled",
+        "description": "Background color of the inner circle of cdr-radio when selected and disabled"
+      },
+      {
+        "name": "--cdr-radio-box-shadow-color-focus",
+        "defaultValue": "--cdr-color-border-input-default-active",
+        "description": "Box-shadow color of cdr-radio on focus"
+      },
+      {
+        "name": "--cdr-radio-background-color-focus",
+        "defaultValue": "--cdr-color-background-input-default-focus",
+        "description": "Background color of cdr-radio on focus"
+      },
+      {
+        "name": "--cdr-radio-background-color-selected-focus",
+        "defaultValue": "--cdr-color-background-input-default-selected-focus",
+        "description": "Background color of cdr-radio when selected on focus"
+      },
+      {
+        "name": "--cdr-radio-box-shadow-color-active",
+        "defaultValue": "--cdr-color-border-input-default-active",
+        "description": "Box-shadow color of cdr-radio when active"
+      },
+      {
+        "name": "--cdr-radio-background-color-active",
+        "defaultValue": "--cdr-color-background-input-default-active",
+        "description": "Background color of cdr-radio when active"
+      },
+      {
+        "name": "--cdr-radio-inner-circle-background-color-selected-active",
+        "defaultValue": "--cdr-color-icon-checkbox-default-selected-active",
+        "description": "Background color of the inner circle of cdr-radio when selected and active"
+      }
+    ]
+  },
+  "CdrQuote": {
+    "name": "CdrQuote",
+    "description": "Short excerpt used to emphasize content or break up a large body of text",
+    "tags": {},
+    "exportName": "default",
+    "displayName": "CdrQuote",
+    "props": [
+      {
+        "name": "tag",
+        "description": "Sets the semantic HTML element for the quote.",
+        "tags": {},
+        "values": [
+          "blockquote",
+          "aside",
+          "q",
+          "div"
+        ],
+        "type": {
+          "name": "string"
+        },
+        "defaultValue": {
+          "func": false,
+          "value": "'blockquote'"
+        }
+      },
+      {
+        "name": "modifier",
+        "description": "Modifies the style variant for the quote",
+        "tags": {
+          "demoSelectMultiple": [
+            {
+              "description": "true",
+              "title": "demoSelectMultiple"
+            }
+          ]
+        },
+        "values": [
+          "pull"
+        ],
+        "type": {
+          "name": "string"
+        },
+        "defaultValue": {
+          "func": false,
+          "value": "''"
+        }
       },
       {
-        "name": "--cdr-radio-box-shadow-color-focus",
-        "defaultValue": "--cdr-color-border-input-default-active",
-        "description": "Box-shadow color of cdr-radio on focus"
+        "name": "summary",
+        "description": "Sets the quote body text.",
+        "type": {
+          "name": "string"
+        }
       },
       {
-        "name": "--cdr-radio-background-color-focus",
-        "defaultValue": "--cdr-color-background-input-default-focus",
-        "description": "Background color of cdr-radio on focus"
-      },
+        "name": "citation",
+        "description": "Sets the quote attribution text.",
+        "type": {
+          "name": "string"
+        }
+      }
+    ],
+    "slots": [
       {
-        "name": "--cdr-radio-background-color-selected-focus",
-        "defaultValue": "--cdr-color-background-input-default-selected-focus",
-        "description": "Background color of cdr-radio when selected on focus"
-      },
+        "name": "default"
+      }
+    ],
+    "sourceFiles": [
+      "./src/components/quote/CdrQuote.vue"
+    ],
+    "UIProperties": [
       {
-        "name": "--cdr-radio-box-shadow-color-active",
-        "defaultValue": "--cdr-color-border-input-default-active",
-        "description": "Box-shadow color of cdr-radio when active"
+        "name": "--cdr-quote-cite-text-color",
+        "defaultValue": "--cdr-color-text-secondary",
+        "description": "Text color of a cdr-quote citation"
       },
       {
-        "name": "--cdr-radio-background-color-active",
-        "defaultValue": "--cdr-color-background-input-default-active",
-        "description": "Background color of cdr-radio when active"
+        "name": "--cdr-quote-content-text-color",
+        "defaultValue": "--cdr-color-text-primary",
+        "description": "Text color of cdr-quote content"
       },
       {
-        "name": "--cdr-radio-inner-circle-background-color-selected-active",
-        "defaultValue": "--cdr-color-icon-checkbox-default-selected-active",
-        "description": "Background color of the inner circle of cdr-radio when selected and active"
+        "name": "--cdr-quote-pull-container-border-color",
+        "defaultValue": "--cdr-color-border-primary",
+        "description": "Border color of a cdr-quote pull container"
       }
     ]
   },
@@ -3860,145 +3948,6 @@
       }
     ]
   },
-  "CdrSkeleton": {
-    "name": "CdrSkeleton",
-    "description": "Visually communicates content is in the process of loading",
-    "tags": {},
-    "exportName": "default",
-    "displayName": "CdrSkeleton",
-    "props": [
-      {
-        "name": "motion",
-        "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.",
-        "type": {
-          "name": "boolean"
-        },
-        "defaultValue": {
-          "func": false,
-          "value": true
-        }
-      }
-    ],
-    "slots": [
-      {
-        "name": "default",
-        "description": "CdrSkeleton content (CdrSkeletonBone components)"
-      }
-    ],
-    "sourceFiles": [
-      "./src/components/skeleton/CdrSkeleton.vue"
-    ],
-    "UIProperties": [
-      {
-        "name": "--cdr-skeleton-bone-background-color",
-        "defaultValue": "#edeae3",
-        "description": "Skeleton bone background color"
-      },
-      {
-        "name": "--cdr-skeleton-gradient-1",
-        "defaultValue": "rgba(237,234,227,1)",
-        "description": "Skeleton shimmer gradient part 1"
-      },
-      {
-        "name": "--cdr-skeleton-gradient-2",
-        "defaultValue": "rgba(249,248,240,1)",
-        "description": "Skeleton shimmer gradient part 2"
-      },
-      {
-        "name": "--cdr-skeleton-gradient-3",
-        "defaultValue": "rgba(237,234,227,1)",
-        "description": "Skeleton shimmer gradient part 3"
-      }
-    ]
-  },
-  "CdrQuote": {
-    "name": "CdrQuote",
-    "description": "Short excerpt used to emphasize content or break up a large body of text",
-    "tags": {},
-    "exportName": "default",
-    "displayName": "CdrQuote",
-    "props": [
-      {
-        "name": "tag",
-        "description": "Sets the semantic HTML element for the quote.",
-        "tags": {},
-        "values": [
-          "blockquote",
-          "aside",
-          "q",
-          "div"
-        ],
-        "type": {
-          "name": "string"
-        },
-        "defaultValue": {
-          "func": false,
-          "value": "'blockquote'"
-        }
-      },
-      {
-        "name": "modifier",
-        "description": "Modifies the style variant for the quote",
-        "tags": {
-          "demoSelectMultiple": [
-            {
-              "description": "true",
-              "title": "demoSelectMultiple"
-            }
-          ]
-        },
-        "values": [
-          "pull"
-        ],
-        "type": {
-          "name": "string"
-        },
-        "defaultValue": {
-          "func": false,
-          "value": "''"
-        }
-      },
-      {
-        "name": "summary",
-        "description": "Sets the quote body text.",
-        "type": {
-          "name": "string"
-        }
-      },
-      {
-        "name": "citation",
-        "description": "Sets the quote attribution text.",
-        "type": {
-          "name": "string"
-        }
-      }
-    ],
-    "slots": [
-      {
-        "name": "default"
-      }
-    ],
-    "sourceFiles": [
-      "./src/components/quote/CdrQuote.vue"
-    ],
-    "UIProperties": [
-      {
-        "name": "--cdr-quote-cite-text-color",
-        "defaultValue": "--cdr-color-text-secondary",
-        "description": "Text color of a cdr-quote citation"
-      },
-      {
-        "name": "--cdr-quote-content-text-color",
-        "defaultValue": "--cdr-color-text-primary",
-        "description": "Text color of cdr-quote content"
-      },
-      {
-        "name": "--cdr-quote-pull-container-border-color",
-        "defaultValue": "--cdr-color-border-primary",
-        "description": "Border color of a cdr-quote pull container"
-      }
-    ]
-  },
   "CdrSelect": {
     "name": "CdrSelect",
     "description": "Allows the selection of one or more options from a dropdown list",
@@ -4266,29 +4215,80 @@
         "description": "Background color of a primary cdr-select"
       },
       {
-        "name": "--cdr-select-primary-background-color-active",
-        "defaultValue": "--cdr-color-background-input-default-active",
-        "description": "Background color of a primary cdr-select when active or focused"
-      },
+        "name": "--cdr-select-primary-background-color-active",
+        "defaultValue": "--cdr-color-background-input-default-active",
+        "description": "Background color of a primary cdr-select when active or focused"
+      },
+      {
+        "name": "--cdr-select-secondary-background-color",
+        "defaultValue": "--cdr-color-background-input-secondary",
+        "description": "Background color of a secondary cdr-select"
+      },
+      {
+        "name": "--cdr-select-secondary-background-color-active",
+        "defaultValue": "--cdr-color-background-input-secondary-active",
+        "description": "Background color of a secondary cdr-select when active or focused"
+      },
+      {
+        "name": "--cdr-select-background-color-error",
+        "defaultValue": "--cdr-color-background-input-error",
+        "description": "Background color of a cdr-select error"
+      },
+      {
+        "name": "--cdr-select-box-shadow-color-error",
+        "defaultValue": "--cdr-color-border-input-error",
+        "description": "Box-shadow color of a cdr-select error"
+      }
+    ]
+  },
+  "CdrSkeleton": {
+    "name": "CdrSkeleton",
+    "description": "Visually communicates content is in the process of loading",
+    "tags": {},
+    "exportName": "default",
+    "displayName": "CdrSkeleton",
+    "props": [
+      {
+        "name": "motion",
+        "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.",
+        "type": {
+          "name": "boolean"
+        },
+        "defaultValue": {
+          "func": false,
+          "value": true
+        }
+      }
+    ],
+    "slots": [
+      {
+        "name": "default",
+        "description": "CdrSkeleton content (CdrSkeletonBone components)"
+      }
+    ],
+    "sourceFiles": [
+      "./src/components/skeleton/CdrSkeleton.vue"
+    ],
+    "UIProperties": [
       {
-        "name": "--cdr-select-secondary-background-color",
-        "defaultValue": "--cdr-color-background-input-secondary",
-        "description": "Background color of a secondary cdr-select"
+        "name": "--cdr-skeleton-bone-background-color",
+        "defaultValue": "#edeae3",
+        "description": "Skeleton bone background color"
       },
       {
-        "name": "--cdr-select-secondary-background-color-active",
-        "defaultValue": "--cdr-color-background-input-secondary-active",
-        "description": "Background color of a secondary cdr-select when active or focused"
+        "name": "--cdr-skeleton-gradient-1",
+        "defaultValue": "rgba(237,234,227,1)",
+        "description": "Skeleton shimmer gradient part 1"
       },
       {
-        "name": "--cdr-select-background-color-error",
-        "defaultValue": "--cdr-color-background-input-error",
-        "description": "Background color of a cdr-select error"
+        "name": "--cdr-skeleton-gradient-2",
+        "defaultValue": "rgba(249,248,240,1)",
+        "description": "Skeleton shimmer gradient part 2"
       },
       {
-        "name": "--cdr-select-box-shadow-color-error",
-        "defaultValue": "--cdr-color-border-input-error",
-        "description": "Box-shadow color of a cdr-select error"
+        "name": "--cdr-skeleton-gradient-3",
+        "defaultValue": "rgba(237,234,227,1)",
+        "description": "Skeleton shimmer gradient part 3"
       }
     ]
   },
@@ -4556,157 +4556,123 @@
       }
     ]
   },
-  "CdrTable": {
-    "name": "CdrTable",
-    "description": "Organizes structured data for users to easily scan, compare, and analyze",
+  "CdrTabs": {
+    "name": "CdrTabs",
+    "description": "Organizes related content into groups for people to navigate between",
     "tags": {},
     "exportName": "default",
-    "displayName": "CdrTable",
+    "displayName": "CdrTabs",
     "props": [
       {
-        "name": "striped",
-        "description": "Sets row colors to alternate between darker and lighter backgrounds.\nStriping will not apply when `border` is true",
-        "type": {
-          "name": "boolean"
-        },
-        "defaultValue": {
-          "func": false,
-          "value": false
-        }
-      },
-      {
-        "name": "border",
-        "description": "Adds borders between rows. Will disable `striped` if both are true",
-        "type": {
-          "name": "boolean"
-        },
-        "defaultValue": {
-          "func": false,
-          "value": true
-        }
-      },
-      {
-        "name": "fullWidth",
-        "description": "Sets the width to 100%. Also accepts space separated strings for breakpoints that it should be full width: { '@xs' | '@sm' | '@md' | '@lg' }",
+        "name": "height",
+        "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.",
         "type": {
-          "name": "boolean|string"
+          "name": "string"
         },
         "defaultValue": {
           "func": false,
-          "value": true
+          "value": "'240px'"
         }
       },
       {
-        "name": "responsive",
-        "description": "Makes the table scroll horizontally when it would overflow its container",
+        "name": "activeTab",
+        "description": "Sets the index of the tab that should be active on initial page load. Note that this property is zero-indexed.",
         "type": {
-          "name": "boolean"
+          "name": "number"
         },
         "defaultValue": {
           "func": false,
-          "value": true
+          "value": "0"
         }
       },
       {
-        "name": "hover",
-        "description": "Adds a darker background on row hover",
+        "name": "modifier",
+        "description": "Modifies the style variants for this component",
+        "tags": {},
+        "values": [
+          "centered",
+          "compact",
+          "full-width",
+          "no-border"
+        ],
         "type": {
-          "name": "boolean"
-        },
-        "defaultValue": {
-          "func": false,
-          "value": false
+          "name": "string"
         }
       },
       {
         "name": "size",
-        "description": "Sets the table size (cell padding); values can target responsive breakpoints. Example `small@lg`.",
+        "description": "Use `small` to reduce spacing around the tabs for a denser visual design",
         "tags": {
           "demoSelectMultiple": [
             {
-              "description": "false",
+              "description": "true",
               "title": "demoSelectMultiple"
             }
           ]
         },
         "values": [
-          "small",
-          "medium",
-          "large"
+          "small"
         ],
+        "type": {
+          "name": "string"
+        }
+      },
+      {
+        "name": "backgroundColor",
+        "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.",
         "type": {
           "name": "string"
         },
         "defaultValue": {
           "func": false,
-          "value": "'medium'"
+          "value": "CdrColorBackgroundPrimary"
         }
       }
     ],
     "slots": [
       {
         "name": "default",
-        "description": "CdrTable content (Valid table elements <th>, <tbody>, <tr>, <td>, etc.)"
+        "description": "CdrTabs content (CdrTabPanel components)"
       }
     ],
     "sourceFiles": [
-      "./src/components/table/CdrTable.vue"
+      "./src/components/tabs/CdrTabs.vue"
     ],
     "UIProperties": [
       {
-        "name": "--cdr-table-base-text-color",
-        "defaultValue": "--cdr-color-text-primary",
-        "description": "Color of the cdr-table base text"
-      },
-      {
-        "name": "--cdr-table-row-background-color",
-        "defaultValue": "--cdr-color-background-table-row",
-        "description": "Background color of the table rows"
-      },
-      {
-        "name": "--cdr-table-header-background-color",
-        "defaultValue": "--cdr-color-background-table-header",
-        "description": "Background color of the table header"
-      },
-      {
-        "name": "--cdr-table-text-cell-color",
-        "defaultValue": "--cdr-color-text-primary",
-        "description": "Text color of the table cells"
-      },
-      {
-        "name": "--cdr-table-border-color-default",
-        "defaultValue": "--cdr-color-border-table-default",
-        "description": "Default border color of the table"
+        "name": "--cdr-tabs-header-container-keyline-color",
+        "defaultValue": "--cdr-color-border-tab-keyline-rest",
+        "description": "Keyline color of the cdr-tabs header container"
       },
       {
-        "name": "--cdr-table-head-border-default",
-        "defaultValue": "--cdr-color-border-table-head",
-        "description": "Head border color of the table"
+        "name": "--cdr-tabs-tab-text-color",
+        "defaultValue": "--cdr-color-text-tab-rest",
+        "description": "Text color in a tab"
       },
       {
-        "name": "--cdr-table-odd-row-background-color",
-        "defaultValue": "--cdr-color-background-table-row-alt",
-        "description": "Background color of all odd rows in the table"
+        "name": "--cdr-tabs-tab-text-color-active",
+        "defaultValue": "--cdr-color-text-tab-active",
+        "description": "Text color of an active tab"
       },
       {
-        "name": "--cdr-table-header-odd-row-background-color",
-        "defaultValue": "--cdr-color-background-table-row",
-        "description": "Background color of odd rows in the table header"
+        "name": "--cdr-tabs-tab-text-color-interaction",
+        "defaultValue": "--cdr-color-text-tab-hover",
+        "description": "Text color of a tab on active, focus, or hover"
       },
       {
-        "name": "--cdr-table-striped-odd-row-background-color",
-        "defaultValue": "--cdr-color-background-table-row",
-        "description": "Background color of the odd rows in striped tables"
+        "name": "--cdr-tabs-tab-text-color-disabled",
+        "defaultValue": "--cdr-color-text-tab-disabled",
+        "description": "Text color of a disabled tab"
       },
       {
-        "name": "--cdr-table-body-footer-odd-row-background-color",
-        "defaultValue": "--cdr-color-background-table-row-alt",
-        "description": "Background color of odd rows in the table body and footer"
+        "name": "--cdr-tabs-keyline-background-color",
+        "defaultValue": "--cdr-color-border-tab-keyline-active",
+        "description": "Background color of the cdr-tabs keyline"
       },
       {
-        "name": "--cdr-table-cell-background-color-hover",
-        "defaultValue": "--cdr-color-background-table-header",
-        "description": "Background color of table cells on hover"
+        "name": "--cdr-tabs-no-border-border-color",
+        "defaultValue": "transparent",
+        "description": "Border color of the cdr-tabs with no-border modifier"
       }
     ]
   },
@@ -4761,123 +4727,157 @@
       "./src/components/tabs/CdrTabPanel.vue"
     ]
   },
-  "CdrTabs": {
-    "name": "CdrTabs",
-    "description": "Organizes related content into groups for people to navigate between",
+  "CdrTable": {
+    "name": "CdrTable",
+    "description": "Organizes structured data for users to easily scan, compare, and analyze",
     "tags": {},
     "exportName": "default",
-    "displayName": "CdrTabs",
+    "displayName": "CdrTable",
     "props": [
       {
-        "name": "height",
-        "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.",
+        "name": "striped",
+        "description": "Sets row colors to alternate between darker and lighter backgrounds.\nStriping will not apply when `border` is true",
         "type": {
-          "name": "string"
+          "name": "boolean"
         },
         "defaultValue": {
           "func": false,
-          "value": "'240px'"
+          "value": false
         }
       },
       {
-        "name": "activeTab",
-        "description": "Sets the index of the tab that should be active on initial page load. Note that this property is zero-indexed.",
+        "name": "border",
+        "description": "Adds borders between rows. Will disable `striped` if both are true",
         "type": {
-          "name": "number"
+          "name": "boolean"
         },
         "defaultValue": {
           "func": false,
-          "value": "0"
+          "value": true
         }
       },
       {
-        "name": "modifier",
-        "description": "Modifies the style variants for this component",
-        "tags": {},
-        "values": [
-          "centered",
-          "compact",
-          "full-width",
-          "no-border"
-        ],
+        "name": "fullWidth",
+        "description": "Sets the width to 100%. Also accepts space separated strings for breakpoints that it should be full width: { '@xs' | '@sm' | '@md' | '@lg' }",
         "type": {
-          "name": "string"
+          "name": "boolean|string"
+        },
+        "defaultValue": {
+          "func": false,
+          "value": true
+        }
+      },
+      {
+        "name": "responsive",
+        "description": "Makes the table scroll horizontally when it would overflow its container",
+        "type": {
+          "name": "boolean"
+        },
+        "defaultValue": {
+          "func": false,
+          "value": true
+        }
+      },
+      {
+        "name": "hover",
+        "description": "Adds a darker background on row hover",
+        "type": {
+          "name": "boolean"
+        },
+        "defaultValue": {
+          "func": false,
+          "value": false
         }
       },
       {
         "name": "size",
-        "description": "Use `small` to reduce spacing around the tabs for a denser visual design",
+        "description": "Sets the table size (cell padding); values can target responsive breakpoints. Example `small@lg`.",
         "tags": {
           "demoSelectMultiple": [
             {
-              "description": "true",
+              "description": "false",
               "title": "demoSelectMultiple"
             }
           ]
         },
         "values": [
-          "small"
+          "small",
+          "medium",
+          "large"
         ],
-        "type": {
-          "name": "string"
-        }
-      },
-      {
-        "name": "backgroundColor",
-        "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.",
         "type": {
           "name": "string"
         },
         "defaultValue": {
           "func": false,
-          "value": "CdrColorBackgroundPrimary"
+          "value": "'medium'"
         }
       }
     ],
     "slots": [
       {
         "name": "default",
-        "description": "CdrTabs content (CdrTabPanel components)"
+        "description": "CdrTable content (Valid table elements <th>, <tbody>, <tr>, <td>, etc.)"
       }
     ],
     "sourceFiles": [
-      "./src/components/tabs/CdrTabs.vue"
+      "./src/components/table/CdrTable.vue"
     ],
     "UIProperties": [
       {
-        "name": "--cdr-tabs-header-container-keyline-color",
-        "defaultValue": "--cdr-color-border-tab-keyline-rest",
-        "description": "Keyline color of the cdr-tabs header container"
+        "name": "--cdr-table-base-text-color",
+        "defaultValue": "--cdr-color-text-primary",
+        "description": "Color of the cdr-table base text"
       },
       {
-        "name": "--cdr-tabs-tab-text-color",
-        "defaultValue": "--cdr-color-text-tab-rest",
-        "description": "Text color in a tab"
+        "name": "--cdr-table-row-background-color",
+        "defaultValue": "--cdr-color-background-table-row",
+        "description": "Background color of the table rows"
       },
       {
-        "name": "--cdr-tabs-tab-text-color-active",
-        "defaultValue": "--cdr-color-text-tab-active",
-        "description": "Text color of an active tab"
+        "name": "--cdr-table-header-background-color",
+        "defaultValue": "--cdr-color-background-table-header",
+        "description": "Background color of the table header"
       },
       {
-        "name": "--cdr-tabs-tab-text-color-interaction",
-        "defaultValue": "--cdr-color-text-tab-hover",
-        "description": "Text color of a tab on active, focus, or hover"
+        "name": "--cdr-table-text-cell-color",
+        "defaultValue": "--cdr-color-text-primary",
+        "description": "Text color of the table cells"
       },
       {
-        "name": "--cdr-tabs-tab-text-color-disabled",
-        "defaultValue": "--cdr-color-text-tab-disabled",
-        "description": "Text color of a disabled tab"
+        "name": "--cdr-table-border-color-default",
+        "defaultValue": "--cdr-color-border-table-default",
+        "description": "Default border color of the table"
       },
       {
-        "name": "--cdr-tabs-keyline-background-color",
-        "defaultValue": "--cdr-color-border-tab-keyline-active",
-        "description": "Background color of the cdr-tabs keyline"
+        "name": "--cdr-table-head-border-default",
+        "defaultValue": "--cdr-color-border-table-head",
+        "description": "Head border color of the table"
       },
       {
-        "name": "--cdr-tabs-no-border-border-color",
-        "defaultValue": "transparent",
-        "description": "Border color of the cdr-tabs with no-border modifier"
+        "name": "--cdr-table-odd-row-background-color",
+        "defaultValue": "--cdr-color-background-table-row-alt",
+        "description": "Background color of all odd rows in the table"
+      },
+      {
+        "name": "--cdr-table-header-odd-row-background-color",
+        "defaultValue": "--cdr-color-background-table-row",
+        "description": "Background color of odd rows in the table header"
+      },
+      {
+        "name": "--cdr-table-striped-odd-row-background-color",
+        "defaultValue": "--cdr-color-background-table-row",
+        "description": "Background color of the odd rows in striped tables"
+      },
+      {
+        "name": "--cdr-table-body-footer-odd-row-background-color",
+        "defaultValue": "--cdr-color-background-table-row-alt",
+        "description": "Background color of odd rows in the table body and footer"
+      },
+      {
+        "name": "--cdr-table-cell-background-color-hover",
+        "defaultValue": "--cdr-color-background-table-header",
+        "description": "Background color of table cells on hover"
       }
     ]
   },
@@ -5141,94 +5141,6 @@
       }
     ]
   },
-  "CdrToggleButton": {
-    "name": "CdrToggleButton",
-    "description": "Permits switching two or more options on and off",
-    "tags": {},
-    "exportName": "default",
-    "displayName": "CdrToggleButton",
-    "props": [
-      {
-        "name": "toggleValue",
-        "description": "Sets the value and aria-label for the toggle button. Display can be overridden using default slot",
-        "type": {
-          "name": "string"
-        },
-        "required": true
-      }
-    ],
-    "slots": [
-      {
-        "name": "default",
-        "description": "CdrToggleButton label content"
-      }
-    ],
-    "sourceFiles": [
-      "./src/components/toggleButton/CdrToggleButton.vue"
-    ],
-    "UIProperties": [
-      {
-        "name": "--cdr-toggle-button-color-default-rest",
-        "defaultValue": "--cdr-color-text-toggle-button-default-rest",
-        "description": "Default text color of the cdr-toggle-button"
-      },
-      {
-        "name": "--cdr-toggle-button-background-color-default-rest",
-        "defaultValue": "--cdr-color-background-toggle-button-default-rest",
-        "description": "Default background color of the cdr-toggle-button"
-      },
-      {
-        "name": "--cdr-toggle-button-border-color-default-focus",
-        "defaultValue": "--cdr-color-border-toggle-button-default-focus",
-        "description": "Focus border color of the cdr-toggle-button"
-      },
-      {
-        "name": "--cdr-toggle-button-background-color-default-focus",
-        "defaultValue": "--cdr-color-background-toggle-button-default-focus",
-        "description": "Focus background color of the cdr-toggle-button"
-      },
-      {
-        "name": "--cdr-toggle-button-icon-fill-default",
-        "defaultValue": "--cdr-color-icon-default",
-        "description": "Default fill color of the cdr-toggle-button's svg"
-      },
-      {
-        "name": "--cdr-toggle-button-background-color-default-selected-rest",
-        "defaultValue": "--cdr-color-background-toggle-button-default-selected-rest",
-        "description": "Selected background color of the cdr-toggle-button at rest"
-      },
-      {
-        "name": "--cdr-toggle-button-border-color-default-selected-rest",
-        "defaultValue": "--cdr-color-border-toggle-button-default-selected-rest",
-        "description": "Selected border color of the cdr-toggle-button at rest"
-      },
-      {
-        "name": "--cdr-toggle-button-icon-fill-selected-rest",
-        "defaultValue": "--cdr-color-icon-emphasis",
-        "description": "Selected fill color of the cdr-toggle-button's svg at rest"
-      },
-      {
-        "name": "--cdr-toggle-button-border-color-default-selected-focus",
-        "defaultValue": "--cdr-color-border-toggle-button-default-selected-focus",
-        "description": "Selected border color of the cdr-toggle-button on focus"
-      },
-      {
-        "name": "--cdr-toggle-button-background-color-default-selected-hover",
-        "defaultValue": "--cdr-color-background-toggle-button-default-selected-hover",
-        "description": "Selected background color of the cdr-toggle-button on hover"
-      },
-      {
-        "name": "--cdr-toggle-button-background-color-default-hover",
-        "defaultValue": "--cdr-color-background-toggle-button-default-hover",
-        "description": "Background color of the cdr-toggle-button on hover"
-      },
-      {
-        "name": "--cdr-toggle-button-border-color-hover-focus",
-        "defaultValue": "--cdr-color-border-toggle-button-default-selected-focus",
-        "description": "Hover border color of the cdr-toggle-button on focus"
-      }
-    ]
-  },
   "CdrToggleGroup": {
     "name": "CdrToggleGroup",
     "exportName": "default",
@@ -5322,6 +5234,94 @@
       }
     ]
   },
+  "CdrToggleButton": {
+    "name": "CdrToggleButton",
+    "description": "Permits switching two or more options on and off",
+    "tags": {},
+    "exportName": "default",
+    "displayName": "CdrToggleButton",
+    "props": [
+      {
+        "name": "toggleValue",
+        "description": "Sets the value and aria-label for the toggle button. Display can be overridden using default slot",
+        "type": {
+          "name": "string"
+        },
+        "required": true
+      }
+    ],
+    "slots": [
+      {
+        "name": "default",
+        "description": "CdrToggleButton label content"
+      }
+    ],
+    "sourceFiles": [
+      "./src/components/toggleButton/CdrToggleButton.vue"
+    ],
+    "UIProperties": [
+      {
+        "name": "--cdr-toggle-button-color-default-rest",
+        "defaultValue": "--cdr-color-text-toggle-button-default-rest",
+        "description": "Default text color of the cdr-toggle-button"
+      },
+      {
+        "name": "--cdr-toggle-button-background-color-default-rest",
+        "defaultValue": "--cdr-color-background-toggle-button-default-rest",
+        "description": "Default background color of the cdr-toggle-button"
+      },
+      {
+        "name": "--cdr-toggle-button-border-color-default-focus",
+        "defaultValue": "--cdr-color-border-toggle-button-default-focus",
+        "description": "Focus border color of the cdr-toggle-button"
+      },
+      {
+        "name": "--cdr-toggle-button-background-color-default-focus",
+        "defaultValue": "--cdr-color-background-toggle-button-default-focus",
+        "description": "Focus background color of the cdr-toggle-button"
+      },
+      {
+        "name": "--cdr-toggle-button-icon-fill-default",
+        "defaultValue": "--cdr-color-icon-default",
+        "description": "Default fill color of the cdr-toggle-button's svg"
+      },
+      {
+        "name": "--cdr-toggle-button-background-color-default-selected-rest",
+        "defaultValue": "--cdr-color-background-toggle-button-default-selected-rest",
+        "description": "Selected background color of the cdr-toggle-button at rest"
+      },
+      {
+        "name": "--cdr-toggle-button-border-color-default-selected-rest",
+        "defaultValue": "--cdr-color-border-toggle-button-default-selected-rest",
+        "description": "Selected border color of the cdr-toggle-button at rest"
+      },
+      {
+        "name": "--cdr-toggle-button-icon-fill-selected-rest",
+        "defaultValue": "--cdr-color-icon-emphasis",
+        "description": "Selected fill color of the cdr-toggle-button's svg at rest"
+      },
+      {
+        "name": "--cdr-toggle-button-border-color-default-selected-focus",
+        "defaultValue": "--cdr-color-border-toggle-button-default-selected-focus",
+        "description": "Selected border color of the cdr-toggle-button on focus"
+      },
+      {
+        "name": "--cdr-toggle-button-background-color-default-selected-hover",
+        "defaultValue": "--cdr-color-background-toggle-button-default-selected-hover",
+        "description": "Selected background color of the cdr-toggle-button on hover"
+      },
+      {
+        "name": "--cdr-toggle-button-background-color-default-hover",
+        "defaultValue": "--cdr-color-background-toggle-button-default-hover",
+        "description": "Background color of the cdr-toggle-button on hover"
+      },
+      {
+        "name": "--cdr-toggle-button-border-color-hover-focus",
+        "defaultValue": "--cdr-color-border-toggle-button-default-selected-focus",
+        "description": "Hover border color of the cdr-toggle-button on focus"
+      }
+    ]
+  },
   "CdrTooltip": {
     "name": "CdrTooltip",
     "description": "Floating label used to clarify interface actions",