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

package/dist/component-docgen.json

@@ -1974,6 +1974,60 @@
       }
     ]
   },
+  "CdrGrid": {
+    "name": "CdrGrid",
+    "description": "Simple wrapper for working with CSS grid",
+    "tags": {},
+    "exportName": "default",
+    "displayName": "CdrGrid",
+    "props": [
+      {
+        "name": "gutter",
+        "description": "Defines gutter size. Also accepts responsive values with `@breakpoint`: \"none@md\"",
+        "tags": {
+          "demoSelectMultiple": [
+            {
+              "description": "false",
+              "title": "demoSelectMultiple"
+            }
+          ]
+        },
+        "values": [
+          "none",
+          "small",
+          "medium",
+          "large"
+        ],
+        "type": {
+          "name": "string"
+        },
+        "defaultValue": {
+          "func": false,
+          "value": "'medium@xs medium@sm large@md large@lg'"
+        }
+      },
+      {
+        "name": "tag",
+        "description": "Sets the HTML tag for the grid element",
+        "type": {
+          "name": "string"
+        },
+        "defaultValue": {
+          "func": false,
+          "value": "'div'"
+        }
+      }
+    ],
+    "slots": [
+      {
+        "name": "default",
+        "description": "CdrGrid content (grid child elements)"
+      }
+    ],
+    "sourceFiles": [
+      "./src/components/grid/CdrGrid.vue"
+    ]
+  },
   "CdrIcon": {
     "name": "CdrIcon",
     "description": "Communicates meaning through graphics representing simple and complex ideas",
@@ -2173,60 +2227,6 @@
       "./src/components/image/CdrImg.vue"
     ]
   },
-  "CdrGrid": {
-    "name": "CdrGrid",
-    "description": "Simple wrapper for working with CSS grid",
-    "tags": {},
-    "exportName": "default",
-    "displayName": "CdrGrid",
-    "props": [
-      {
-        "name": "gutter",
-        "description": "Defines gutter size. Also accepts responsive values with `@breakpoint`: \"none@md\"",
-        "tags": {
-          "demoSelectMultiple": [
-            {
-              "description": "false",
-              "title": "demoSelectMultiple"
-            }
-          ]
-        },
-        "values": [
-          "none",
-          "small",
-          "medium",
-          "large"
-        ],
-        "type": {
-          "name": "string"
-        },
-        "defaultValue": {
-          "func": false,
-          "value": "'medium@xs medium@sm large@md large@lg'"
-        }
-      },
-      {
-        "name": "tag",
-        "description": "Sets the HTML tag for the grid element",
-        "type": {
-          "name": "string"
-        },
-        "defaultValue": {
-          "func": false,
-          "value": "'div'"
-        }
-      }
-    ],
-    "slots": [
-      {
-        "name": "default",
-        "description": "CdrGrid content (grid child elements)"
-      }
-    ],
-    "sourceFiles": [
-      "./src/components/grid/CdrGrid.vue"
-    ]
-  },
   "CdrInput": {
     "name": "CdrInput",
     "description": "Allows for data entry, editing, and search",
@@ -2792,6 +2792,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"
+      }
+    ]
+  },
   "CdrLink": {
     "name": "CdrLink",
     "description": "Clickable text elements used for navigating to other pages or sections",
@@ -2913,140 +2994,59 @@
       }
     ]
   },
-  "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\"",
-        "tags": {},
-        "values": [
-          "ul",
-          "ol"
-        ],
+        "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": "'ul'"
+          "value": true
         }
       },
       {
-        "name": "modifier",
-        "description": "Modifies the style variant for this component",
-        "tags": {
-          "demoSelectMultiple": [
-            {
-              "description": "true",
-              "title": "demoSelectMultiple"
-            }
-          ]
-        },
-        "values": [
-          "ordered",
-          "unordered",
-          "compact",
-          "inline"
-        ],
+        "name": "ariaDescribedby",
+        "description": "Text for aria-describedby attribute. Applied to modal content element",
         "type": {
           "name": "string"
         },
+        "required": false,
         "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"
-      }
-    ]
-  },
-  "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"
+          "value": "null"
         }
       },
       {
@@ -3146,6 +3146,126 @@
       }
     ]
   },
+  "CdrPopover": {
+    "name": "CdrPopover",
+    "description": "Small overlay used to display contextual information",
+    "tags": {},
+    "exportName": "default",
+    "displayName": "CdrPopover",
+    "props": [
+      {
+        "name": "position",
+        "description": "Sets the position where the popover will render relative to the trigger element.",
+        "tags": {
+          "demoSelectMultiple": [
+            {
+              "description": "false",
+              "title": "demoSelectMultiple"
+            }
+          ]
+        },
+        "values": [
+          "top",
+          "bottom",
+          "left",
+          "right"
+        ],
+        "type": {
+          "name": "string"
+        },
+        "required": false,
+        "defaultValue": {
+          "func": false,
+          "value": "'top'"
+        }
+      },
+      {
+        "name": "autoPosition",
+        "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`.",
+        "type": {
+          "name": "boolean"
+        },
+        "required": false,
+        "defaultValue": {
+          "func": false,
+          "value": true
+        }
+      },
+      {
+        "name": "label",
+        "description": "Sets the title for the popover content. Can also be provided via the `title` slot.",
+        "type": {
+          "name": "string"
+        },
+        "required": false
+      },
+      {
+        "name": "id",
+        "description": "ID for the popover element, required for accessibility",
+        "type": {
+          "name": "string"
+        },
+        "required": true
+      },
+      {
+        "name": "contentClass",
+        "description": "Add custom class to the popover content wrapper. Allows for overriding size, styling, etc.",
+        "type": {
+          "name": "string"
+        },
+        "required": false
+      },
+      {
+        "name": "open",
+        "description": "Used to programmatically control the popover state. Does not need to be set if you are using the `trigger` slot.",
+        "tags": {
+          "demoIgnore": [
+            {
+              "description": "true",
+              "title": "demoIgnore"
+            }
+          ]
+        },
+        "type": {
+          "name": "boolean"
+        },
+        "required": false,
+        "defaultValue": {
+          "func": false,
+          "value": false
+        }
+      }
+    ],
+    "events": [
+      {
+        "name": "opened",
+        "description": "Emits when popover is opened"
+      },
+      {
+        "name": "closed",
+        "description": "Emits when popover is closed"
+      }
+    ],
+    "slots": [
+      {
+        "name": "trigger",
+        "description": " Slot for the element that triggers the popover."
+      },
+      {
+        "name": "title",
+        "description": "Sets the title for the popover. Can also be set with `label` prop"
+      },
+      {
+        "name": "default"
+      },
+      {
+        "name": "icon"
+      }
+    ],
+    "sourceFiles": [
+      "./src/components/popover/CdrPopover.vue"
+    ]
+  },
   "CdrPagination": {
     "name": "CdrPagination",
     "description": "Allows people to navigate to the next or previous page within an experience",
@@ -3299,30 +3419,25 @@
       }
     ]
   },
-  "CdrPopover": {
-    "name": "CdrPopover",
-    "description": "Small overlay used to display contextual information",
+  "CdrPopup": {
+    "name": "CdrPopup",
+    "description": "An internal helper component used by Popover and Tooltip",
     "tags": {},
     "exportName": "default",
-    "displayName": "CdrPopover",
+    "displayName": "CdrPopup",
     "props": [
       {
-        "name": "position",
-        "description": "Sets the position where the popover will render relative to the trigger element.",
-        "tags": {
-          "demoSelectMultiple": [
-            {
-              "description": "false",
-              "title": "demoSelectMultiple"
-            }
-          ]
+        "name": "opened",
+        "type": {
+          "name": "boolean"
         },
-        "values": [
-          "top",
-          "bottom",
-          "left",
-          "right"
-        ],
+        "defaultValue": {
+          "func": false,
+          "value": false
+        }
+      },
+      {
+        "name": "position",
         "type": {
           "name": "string"
         },
@@ -3334,89 +3449,45 @@
       },
       {
         "name": "autoPosition",
-        "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`.",
         "type": {
           "name": "boolean"
         },
-        "required": false,
         "defaultValue": {
           "func": false,
           "value": true
         }
       },
       {
-        "name": "label",
-        "description": "Sets the title for the popover content. Can also be provided via the `title` slot.",
+        "name": "contentClass",
         "type": {
           "name": "string"
-        },
-        "required": false
-      },
+        }
+      }
+    ],
+    "events": [
       {
-        "name": "id",
-        "description": "ID for the popover element, required for accessibility",
-        "type": {
-          "name": "string"
-        },
-        "required": true
-      },
-      {
-        "name": "contentClass",
-        "description": "Add custom class to the popover content wrapper. Allows for overriding size, styling, etc.",
-        "type": {
-          "name": "string"
-        },
-        "required": false
-      },
-      {
-        "name": "open",
-        "description": "Used to programmatically control the popover state. Does not need to be set if you are using the `trigger` slot.",
-        "tags": {
-          "demoIgnore": [
-            {
-              "description": "true",
-              "title": "demoIgnore"
-            }
-          ]
-        },
-        "type": {
-          "name": "boolean"
-        },
-        "required": false,
-        "defaultValue": {
-          "func": false,
-          "value": false
-        }
+        "name": "closed"
       }
     ],
-    "events": [
-      {
-        "name": "opened",
-        "description": "Emits when popover is opened"
-      },
+    "slots": [
       {
-        "name": "closed",
-        "description": "Emits when popover is closed"
+        "name": "default"
       }
     ],
-    "slots": [
-      {
-        "name": "trigger",
-        "description": " Slot for the element that triggers the popover."
-      },
-      {
-        "name": "title",
-        "description": "Sets the title for the popover. Can also be set with `label` prop"
-      },
+    "sourceFiles": [
+      "./src/components/popup/CdrPopup.vue"
+    ],
+    "UIProperties": [
       {
-        "name": "default"
+        "name": "--cdr-popup-content-background",
+        "defaultValue": "--cdr-color-background-primary",
+        "description": "Background color of cdr-popup content"
       },
       {
-        "name": "icon"
+        "name": "--cdr-popup-content-border-color",
+        "defaultValue": "--cdr-color-border-secondary",
+        "description": "Border color of cdr-popup content"
       }
-    ],
-    "sourceFiles": [
-      "./src/components/popover/CdrPopover.vue"
     ]
   },
   "CdrRadio": {
@@ -3659,165 +3730,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"
-      }
-    ]
-  },
-  "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"
-      }
-    ]
-  },
   "CdrRating": {
     "name": "CdrRating",
     "description": "Provides insight into user opinions for products, experiences, and more",
@@ -3999,61 +3911,156 @@
       }
     ]
   },
-  "CdrSkeletonBone": {
-    "name": "CdrSkeletonBone",
-    "exportName": "default",
-    "displayName": "CdrSkeletonBone",
-    "description": "",
+  "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": "type",
-        "description": "Sets the type of content placeholder",
-        "tags": {
-          "demoSelectMultiple": [
-            {
-              "description": "false",
-              "title": "demoSelectMultiple"
-            }
-          ]
-        },
+        "name": "tag",
+        "description": "Sets the semantic HTML element for the quote.",
+        "tags": {},
         "values": [
-          "default",
-          "heading",
-          "line",
-          "rectangle",
-          "square"
+          "blockquote",
+          "aside",
+          "q",
+          "div"
         ],
         "type": {
           "name": "string"
         },
         "defaultValue": {
           "func": false,
-          "value": "'default'"
+          "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/skeleton/CdrSkeletonBone.vue"
+      "./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"
+      }
     ]
   },
-  "CdrSwitch": {
-    "name": "CdrSwitch",
-    "description": "Permits selection from two opposing options",
+  "CdrSelect": {
+    "name": "CdrSelect",
+    "description": "Allows the selection of one or more options from a dropdown list",
     "tags": {},
     "exportName": "default",
-    "displayName": "CdrSwitch",
+    "displayName": "CdrSelect",
     "props": [
       {
         "name": "id",
-        "description": "Sets a custom ID for the switch. If this value is not set, it will be auto-generated.",
+        "description": "Custom ID that is mapped to the label ‘for’ attribute. If this value is not set, it will be auto-generated.",
+        "type": {
+          "name": "string"
+        }
+      },
+      {
+        "name": "label",
+        "description": "Sets the text value for the select label.\nRequired for accessibility compliance. Use ‘hideLabel’ to\nvisually hide the label but keep it available to screenreaders.",
+        "type": {
+          "name": "string"
+        },
+        "required": true
+      },
+      {
+        "name": "hideLabel",
+        "description": "Visually hides the label element, but leaves it available to screen readers for accessibility compliance.",
+        "type": {
+          "name": "boolean"
+        },
+        "defaultValue": {
+          "func": false,
+          "value": false
+        }
+      },
+      {
+        "name": "prompt",
+        "description": "Adds an option that is disabled and selected by default to serve as a `placeholder` for the select.",
         "type": {
           "name": "string"
         }
       },
+      {
+        "name": "options",
+        "description": "Build options programmatically with data.\nProvide an array of objects [{ text: String, value: String}] for greater control\nor provide an array of strings ['String'] for simpler setup (value and text will be the same).",
+        "type": {
+          "name": "selectOption[] | string[]"
+        }
+      },
+      {
+        "name": "background",
+        "description": "Sets the background color the radio button is rendered on",
+        "tags": {},
+        "values": [
+          "primary",
+          "secondary"
+        ],
+        "type": {
+          "name": "backgroundProps"
+        }
+      },
       {
         "name": "size",
-        "description": "Sets the size of the switch",
+        "description": "Sets the component's size; values can target responsive breakpoints. Example `small@lg`",
         "tags": {
           "demoSelectMultiple": [
             {
@@ -4063,48 +4070,90 @@
           ]
         },
         "values": [
+          "small",
           "medium",
           "large"
         ],
         "type": {
-          "name": "string"
+          "name": "sizeProps"
+        }
+      },
+      {
+        "name": "error",
+        "description": "Sets the select to an error state, displays the `error` slot if one is present.",
+        "type": {
+          "name": "boolean|string"
         },
         "defaultValue": {
           "func": false,
-          "value": "'medium'"
+          "value": false
         }
       },
       {
-        "name": "fullWidth",
-        "description": "Sets the label and switch to expand to the full width of its container with `space-between`",
+        "name": "errorRole",
+        "description": "Sets the `role` attribute for the embedded error state messaging.",
         "type": {
-          "name": "boolean"
+          "name": "string"
         },
         "defaultValue": {
           "func": false,
-          "value": false
+          "value": "'status'"
         }
       },
       {
         "name": "modelValue",
         "tags": {
-          "demoIgnore": [
+          "ignore": [
             {
-              "description": "true",
-              "title": "demoIgnore"
+              "description": true,
+              "title": "ignore"
             }
           ]
         },
+        "type": {
+          "name": "string|number|boolean|object|array|symbol|func"
+        }
+      },
+      {
+        "name": "disabled",
+        "description": "Disables the input and sets appropriate styling",
         "type": {
           "name": "boolean"
-        },
-        "required": true
+        }
+      },
+      {
+        "name": "required",
+        "description": "Sets aria-required on the input field and displays an asterisk next to the select label",
+        "type": {
+          "name": "boolean"
+        }
+      },
+      {
+        "name": "optional",
+        "description": "Displays '(optional)' text next to the select label.",
+        "type": {
+          "name": "boolean"
+        }
+      },
+      {
+        "name": "multiple",
+        "description": "Turns CdrSelect into a multi-select element.",
+        "type": {
+          "name": "boolean"
+        }
+      },
+      {
+        "name": "multipleSize",
+        "description": "Sets the height of the CdrSelect when using the multiple option.\nThis number corresponds to the number of select options that will be visible without scrolling.",
+        "type": {
+          "name": "number"
+        }
       }
     ],
     "events": [
       {
         "name": "update:modelValue",
-        "description": "Event emitted by v-model on switch",
+        "description": "Event emitted by v-model on the radio's <input> element",
         "properties": [
           {
             "type": {
@@ -4127,57 +4176,301 @@
       }
     ],
     "slots": [
+      {
+        "name": "helper-text",
+        "description": "Helper text above the select field"
+      },
+      {
+        "name": "info",
+        "description": "Link or icon to the right above the select field."
+      },
+      {
+        "name": "pre-icon",
+        "description": "Icon preceding text within the select field"
+      },
       {
         "name": "default",
-        "description": "The label for the switch"
+        "description": "CdrSelect content (<option> tags). Leave empty if using the `options` prop."
+      },
+      {
+        "name": "info-action",
+        "description": "Action-wrapped icon to the right of the select field"
+      },
+      {
+        "name": "error",
+        "description": "Error messaging text that is displayed when the `error` prop is true."
       }
     ],
     "sourceFiles": [
-      "./src/components/switch/CdrSwitch.vue"
+      "./src/components/select/CdrSelect.vue"
     ],
     "UIProperties": [
       {
-        "name": "--cdr-switch-border-color",
-        "defaultValue": "--cdr-color-border-secondary",
-        "description": "Border of the cdr-switch button"
+        "name": "--cdr-select-caret-fill",
+        "defaultValue": "--cdr-color-text-primary",
+        "description": "Color of the cdr-select caret"
       },
       {
-        "name": "--cdr-switch-background-color",
-        "defaultValue": "--cdr-color-background-switch-default-rest",
-        "description": "Background color of the cdr-switch button"
+        "name": "--cdr-select-caret-fill-disabled",
+        "defaultValue": "--cdr-color-icon-disabled",
+        "description": "Color of  a disabled cdr-select caret"
       },
       {
-        "name": "--cdr-switch-icon-fill",
-        "defaultValue": "--cdr-color-icon-default",
-        "description": "Fill of the cdr-switch x and check icons"
+        "name": "--cdr-select-background-color",
+        "defaultValue": "--cdr-color-background-input-default",
+        "description": "Background color of cdr-select"
       },
       {
-        "name": "--cdr-switch-box-shadow-color-focus",
-        "defaultValue": "--cdr-color-border-secondary",
-        "description": "Box-shadow of the cdr-switch button on focus"
+        "name": "--cdr-select-text-color",
+        "defaultValue": "--cdr-color-text-input-default",
+        "description": "Text color of cdr-select"
       },
       {
-        "name": "--cdr-switch-background-color-focus",
-        "defaultValue": "--cdr-color-background-switch-default-focus",
-        "description": "Background color of the cdr-switch button on focus"
+        "name": "--cdr-select-box-shadow-color",
+        "defaultValue": "--cdr-color-border-input-default",
+        "description": "Box-shadow color of cdr-select"
       },
       {
-        "name": "--cdr-switch-icon-fill-focus",
-        "defaultValue": "--cdr-color-icon-default",
-        "description": "Fill of the cdr-switch x and check icons on focus"
+        "name": "--cdr-select-background-color-disabled",
+        "defaultValue": "--cdr-color-background-input-default-disabled",
+        "description": "Background color of a disabled cdr-select"
       },
       {
-        "name": "--cdr-switch-handle-background-color-focus",
-        "defaultValue": "--cdr-color-background-switch-handle-default-focus",
-        "description": "Background color of the cdr-switch handle before on focus"
+        "name": "--cdr-select-text-color-disabled",
+        "defaultValue": "--cdr-color-text-input-disabled",
+        "description": "Text color of a disabled cdr-select"
       },
       {
-        "name": "--cdr-switch-hover-border-color",
-        "defaultValue": "--cdr-color-border-switch-default-hover",
-        "description": "Border of the cdr-switch button on hover when not in focus"
+        "name": "--cdr-select-box-shadow-color-disabled",
+        "defaultValue": "--cdr-color-border-input-default-disabled",
+        "description": "Box-shadow color of a disabled cdr-select"
       },
       {
-        "name": "--cdr-switch-background-color-hover",
+        "name": "--cdr-select-box-shadow-color-focus",
+        "defaultValue": "--cdr-color-border-input-default-focus",
+        "description": "Box-shadow color of a cdr-select when active or focused"
+      },
+      {
+        "name": "--cdr-select-prompt-text-color",
+        "defaultValue": "--cdr-color-text-primary",
+        "description": "Text color of cdr-select prompt"
+      },
+      {
+        "name": "--cdr-select-prompt-text-color-disabled",
+        "defaultValue": "--cdr-color-text-input-disabled",
+        "description": "Text color of a disabled cdr-select prompt"
+      },
+      {
+        "name": "--cdr-select-primary-background-color",
+        "defaultValue": "--cdr-color-background-input-default",
+        "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-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"
+      }
+    ]
+  },
+  "CdrSkeletonBone": {
+    "name": "CdrSkeletonBone",
+    "exportName": "default",
+    "displayName": "CdrSkeletonBone",
+    "description": "",
+    "tags": {},
+    "props": [
+      {
+        "name": "type",
+        "description": "Sets the type of content placeholder",
+        "tags": {
+          "demoSelectMultiple": [
+            {
+              "description": "false",
+              "title": "demoSelectMultiple"
+            }
+          ]
+        },
+        "values": [
+          "default",
+          "heading",
+          "line",
+          "rectangle",
+          "square"
+        ],
+        "type": {
+          "name": "string"
+        },
+        "defaultValue": {
+          "func": false,
+          "value": "'default'"
+        }
+      }
+    ],
+    "sourceFiles": [
+      "./src/components/skeleton/CdrSkeletonBone.vue"
+    ]
+  },
+  "CdrSwitch": {
+    "name": "CdrSwitch",
+    "description": "Permits selection from two opposing options",
+    "tags": {},
+    "exportName": "default",
+    "displayName": "CdrSwitch",
+    "props": [
+      {
+        "name": "id",
+        "description": "Sets a custom ID for the switch. If this value is not set, it will be auto-generated.",
+        "type": {
+          "name": "string"
+        }
+      },
+      {
+        "name": "size",
+        "description": "Sets the size of the switch",
+        "tags": {
+          "demoSelectMultiple": [
+            {
+              "description": "false",
+              "title": "demoSelectMultiple"
+            }
+          ]
+        },
+        "values": [
+          "medium",
+          "large"
+        ],
+        "type": {
+          "name": "string"
+        },
+        "defaultValue": {
+          "func": false,
+          "value": "'medium'"
+        }
+      },
+      {
+        "name": "fullWidth",
+        "description": "Sets the label and switch to expand to the full width of its container with `space-between`",
+        "type": {
+          "name": "boolean"
+        },
+        "defaultValue": {
+          "func": false,
+          "value": false
+        }
+      },
+      {
+        "name": "modelValue",
+        "tags": {
+          "demoIgnore": [
+            {
+              "description": "true",
+              "title": "demoIgnore"
+            }
+          ]
+        },
+        "type": {
+          "name": "boolean"
+        },
+        "required": true
+      }
+    ],
+    "events": [
+      {
+        "name": "update:modelValue",
+        "description": "Event emitted by v-model on switch",
+        "properties": [
+          {
+            "type": {
+              "names": [
+                "mixed"
+              ]
+            },
+            "name": "modelValue"
+          }
+        ],
+        "tags": [
+          {
+            "title": "param",
+            "type": {
+              "name": "mixed"
+            },
+            "name": "modelValue"
+          }
+        ]
+      }
+    ],
+    "slots": [
+      {
+        "name": "default",
+        "description": "The label for the switch"
+      }
+    ],
+    "sourceFiles": [
+      "./src/components/switch/CdrSwitch.vue"
+    ],
+    "UIProperties": [
+      {
+        "name": "--cdr-switch-border-color",
+        "defaultValue": "--cdr-color-border-secondary",
+        "description": "Border of the cdr-switch button"
+      },
+      {
+        "name": "--cdr-switch-background-color",
+        "defaultValue": "--cdr-color-background-switch-default-rest",
+        "description": "Background color of the cdr-switch button"
+      },
+      {
+        "name": "--cdr-switch-icon-fill",
+        "defaultValue": "--cdr-color-icon-default",
+        "description": "Fill of the cdr-switch x and check icons"
+      },
+      {
+        "name": "--cdr-switch-box-shadow-color-focus",
+        "defaultValue": "--cdr-color-border-secondary",
+        "description": "Box-shadow of the cdr-switch button on focus"
+      },
+      {
+        "name": "--cdr-switch-background-color-focus",
+        "defaultValue": "--cdr-color-background-switch-default-focus",
+        "description": "Background color of the cdr-switch button on focus"
+      },
+      {
+        "name": "--cdr-switch-icon-fill-focus",
+        "defaultValue": "--cdr-color-icon-default",
+        "description": "Fill of the cdr-switch x and check icons on focus"
+      },
+      {
+        "name": "--cdr-switch-handle-background-color-focus",
+        "defaultValue": "--cdr-color-background-switch-handle-default-focus",
+        "description": "Background color of the cdr-switch handle before on focus"
+      },
+      {
+        "name": "--cdr-switch-hover-border-color",
+        "defaultValue": "--cdr-color-border-switch-default-hover",
+        "description": "Border of the cdr-switch button on hover when not in focus"
+      },
+      {
+        "name": "--cdr-switch-background-color-hover",
         "defaultValue": "--cdr-color-background-switch-default-hover",
         "description": "Background color of the cdr-switch button on hover when not in focus"
       },
@@ -4624,299 +4917,6 @@
       }
     ]
   },
-  "CdrSelect": {
-    "name": "CdrSelect",
-    "description": "Allows the selection of one or more options from a dropdown list",
-    "tags": {},
-    "exportName": "default",
-    "displayName": "CdrSelect",
-    "props": [
-      {
-        "name": "id",
-        "description": "Custom ID that is mapped to the label ‘for’ attribute. If this value is not set, it will be auto-generated.",
-        "type": {
-          "name": "string"
-        }
-      },
-      {
-        "name": "label",
-        "description": "Sets the text value for the select label.\nRequired for accessibility compliance. Use ‘hideLabel’ to\nvisually hide the label but keep it available to screenreaders.",
-        "type": {
-          "name": "string"
-        },
-        "required": true
-      },
-      {
-        "name": "hideLabel",
-        "description": "Visually hides the label element, but leaves it available to screen readers for accessibility compliance.",
-        "type": {
-          "name": "boolean"
-        },
-        "defaultValue": {
-          "func": false,
-          "value": false
-        }
-      },
-      {
-        "name": "prompt",
-        "description": "Adds an option that is disabled and selected by default to serve as a `placeholder` for the select.",
-        "type": {
-          "name": "string"
-        }
-      },
-      {
-        "name": "options",
-        "description": "Build options programmatically with data.\nProvide an array of objects [{ text: String, value: String}] for greater control\nor provide an array of strings ['String'] for simpler setup (value and text will be the same).",
-        "type": {
-          "name": "selectOption[] | string[]"
-        }
-      },
-      {
-        "name": "background",
-        "description": "Sets the background color the radio button is rendered on",
-        "tags": {},
-        "values": [
-          "primary",
-          "secondary"
-        ],
-        "type": {
-          "name": "backgroundProps"
-        }
-      },
-      {
-        "name": "size",
-        "description": "Sets the component's size; values can target responsive breakpoints. Example `small@lg`",
-        "tags": {
-          "demoSelectMultiple": [
-            {
-              "description": "false",
-              "title": "demoSelectMultiple"
-            }
-          ]
-        },
-        "values": [
-          "small",
-          "medium",
-          "large"
-        ],
-        "type": {
-          "name": "sizeProps"
-        }
-      },
-      {
-        "name": "error",
-        "description": "Sets the select to an error state, displays the `error` slot if one is present.",
-        "type": {
-          "name": "boolean|string"
-        },
-        "defaultValue": {
-          "func": false,
-          "value": false
-        }
-      },
-      {
-        "name": "errorRole",
-        "description": "Sets the `role` attribute for the embedded error state messaging.",
-        "type": {
-          "name": "string"
-        },
-        "defaultValue": {
-          "func": false,
-          "value": "'status'"
-        }
-      },
-      {
-        "name": "modelValue",
-        "tags": {
-          "ignore": [
-            {
-              "description": true,
-              "title": "ignore"
-            }
-          ]
-        },
-        "type": {
-          "name": "string|number|boolean|object|array|symbol|func"
-        }
-      },
-      {
-        "name": "disabled",
-        "description": "Disables the input and sets appropriate styling",
-        "type": {
-          "name": "boolean"
-        }
-      },
-      {
-        "name": "required",
-        "description": "Sets aria-required on the input field and displays an asterisk next to the select label",
-        "type": {
-          "name": "boolean"
-        }
-      },
-      {
-        "name": "optional",
-        "description": "Displays '(optional)' text next to the select label.",
-        "type": {
-          "name": "boolean"
-        }
-      },
-      {
-        "name": "multiple",
-        "description": "Turns CdrSelect into a multi-select element.",
-        "type": {
-          "name": "boolean"
-        }
-      },
-      {
-        "name": "multipleSize",
-        "description": "Sets the height of the CdrSelect when using the multiple option.\nThis number corresponds to the number of select options that will be visible without scrolling.",
-        "type": {
-          "name": "number"
-        }
-      }
-    ],
-    "events": [
-      {
-        "name": "update:modelValue",
-        "description": "Event emitted by v-model on the radio's <input> element",
-        "properties": [
-          {
-            "type": {
-              "names": [
-                "mixed"
-              ]
-            },
-            "name": "modelValue"
-          }
-        ],
-        "tags": [
-          {
-            "title": "param",
-            "type": {
-              "name": "mixed"
-            },
-            "name": "modelValue"
-          }
-        ]
-      }
-    ],
-    "slots": [
-      {
-        "name": "helper-text",
-        "description": "Helper text above the select field"
-      },
-      {
-        "name": "info",
-        "description": "Link or icon to the right above the select field."
-      },
-      {
-        "name": "pre-icon",
-        "description": "Icon preceding text within the select field"
-      },
-      {
-        "name": "default",
-        "description": "CdrSelect content (<option> tags). Leave empty if using the `options` prop."
-      },
-      {
-        "name": "info-action",
-        "description": "Action-wrapped icon to the right of the select field"
-      },
-      {
-        "name": "error",
-        "description": "Error messaging text that is displayed when the `error` prop is true."
-      }
-    ],
-    "sourceFiles": [
-      "./src/components/select/CdrSelect.vue"
-    ],
-    "UIProperties": [
-      {
-        "name": "--cdr-select-caret-fill",
-        "defaultValue": "--cdr-color-text-primary",
-        "description": "Color of the cdr-select caret"
-      },
-      {
-        "name": "--cdr-select-caret-fill-disabled",
-        "defaultValue": "--cdr-color-icon-disabled",
-        "description": "Color of  a disabled cdr-select caret"
-      },
-      {
-        "name": "--cdr-select-background-color",
-        "defaultValue": "--cdr-color-background-input-default",
-        "description": "Background color of cdr-select"
-      },
-      {
-        "name": "--cdr-select-text-color",
-        "defaultValue": "--cdr-color-text-input-default",
-        "description": "Text color of cdr-select"
-      },
-      {
-        "name": "--cdr-select-box-shadow-color",
-        "defaultValue": "--cdr-color-border-input-default",
-        "description": "Box-shadow color of cdr-select"
-      },
-      {
-        "name": "--cdr-select-background-color-disabled",
-        "defaultValue": "--cdr-color-background-input-default-disabled",
-        "description": "Background color of a disabled cdr-select"
-      },
-      {
-        "name": "--cdr-select-text-color-disabled",
-        "defaultValue": "--cdr-color-text-input-disabled",
-        "description": "Text color of a disabled cdr-select"
-      },
-      {
-        "name": "--cdr-select-box-shadow-color-disabled",
-        "defaultValue": "--cdr-color-border-input-default-disabled",
-        "description": "Box-shadow color of a disabled cdr-select"
-      },
-      {
-        "name": "--cdr-select-box-shadow-color-focus",
-        "defaultValue": "--cdr-color-border-input-default-focus",
-        "description": "Box-shadow color of a cdr-select when active or focused"
-      },
-      {
-        "name": "--cdr-select-prompt-text-color",
-        "defaultValue": "--cdr-color-text-primary",
-        "description": "Text color of cdr-select prompt"
-      },
-      {
-        "name": "--cdr-select-prompt-text-color-disabled",
-        "defaultValue": "--cdr-color-text-input-disabled",
-        "description": "Text color of a disabled cdr-select prompt"
-      },
-      {
-        "name": "--cdr-select-primary-background-color",
-        "defaultValue": "--cdr-color-background-input-default",
-        "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-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"
-      }
-    ]
-  },
   "CdrToast": {
     "name": "CdrToast",
     "description": "Non-modal dialog used to communicate the status of a task or process",