, | , etc.)"
}
],
"sourceFiles": [
"src/components/table/CdrTable.vue"
],
"UIProperties": [
{
"name": "--cdr-color-text-primary",
"defaultValue": "#{tokens.$cdr-color-text-primary}",
"description": "Color of the cdr-table base text"
},
{
"name": "--cdr-color-background-table-row",
"defaultValue": "#{tokens.$cdr-color-background-table-row}",
"description": "Background color of the table rows"
},
{
"name": "--cdr-color-background-table-header",
"defaultValue": "#{tokens.$cdr-color-background-table-header}",
"description": "Background color of the table header"
},
{
"name": "--cdr-color-text-primary",
"defaultValue": "#{tokens.$cdr-color-text-primary}",
"description": "Text color of the table cells"
},
{
"name": "--cdr-color-border-table-default",
"defaultValue": "#{tokens.$cdr-color-border-table-default}",
"description": "Default border color of the table"
},
{
"name": "--cdr-color-border-table-head",
"defaultValue": "#{tokens.$cdr-color-border-table-head}",
"description": "Head border color of the table"
},
{
"name": "--cdr-color-background-table-row-alt",
"defaultValue": "#{tokens.$cdr-color-background-table-row-alt}",
"description": "Background color of all odd rows in the table"
},
{
"name": "--cdr-color-background-table-row",
"defaultValue": "#{tokens.$cdr-color-background-table-row}",
"description": "Background color of odd rows in the table header"
},
{
"name": "--cdr-color-background-table-row",
"defaultValue": "#{tokens.$cdr-color-background-table-row}",
"description": "Background color of the odd rows in striped tables"
},
{
"name": "--cdr-color-background-table-row-alt",
"defaultValue": "#{tokens.$cdr-color-background-table-row-alt}",
"description": "Background color of odd rows in the table body and footer"
},
{
"name": "--cdr-color-background-table-header",
"defaultValue": "#{tokens.$cdr-color-background-table-header}",
"description": "Background color of table cells on hover"
}
]
},
"CdrSurfaceSelection": {
"name": "CdrSurfaceSelection",
"description": "Selection variant of CdrSurface with additional interactive states",
"tags": {},
"exportName": "default",
"displayName": "CdrSurfaceSelection",
"props": [
{
"name": "palette",
"description": "Defines a palette for the component's style variations.",
"required": false,
"type": {
"name": "SurfacePalette"
}
},
{
"name": "tag",
"description": "Determines which HTML tag to use.",
"required": false,
"type": {
"name": "Tag"
},
"defaultValue": {
"func": false,
"value": "div"
}
},
{
"name": "boxShadow",
"description": "Adds a shadow based on the token options within Cedar.",
"required": false,
"type": {
"name": "union",
"elements": [
{
"name": "Shadow"
},
{
"name": "StateConfig",
"elements": [
{
"name": "Shadow"
}
]
}
]
}
},
{
"name": "borderRadius",
"description": "Adds in a border radius based on the token options within Cedar.",
"required": false,
"type": {
"name": "union",
"elements": [
{
"name": "Radius"
},
{
"name": "StateConfig",
"elements": [
{
"name": "Radius"
}
]
}
]
}
},
{
"name": "borderWidth",
"description": "Specifies a border width based on the token options within Cedar.",
"required": false,
"type": {
"name": "union",
"elements": [
{
"name": "SpaceFixed"
},
{
"name": "StateConfig",
"elements": [
{
"name": "SpaceFixed"
}
]
}
]
}
},
{
"name": "borderStyle",
"description": "Specifies a border style based on the token options within Cedar.",
"required": false,
"type": {
"name": "union",
"elements": [
{
"name": "BorderStyle"
},
{
"name": "StateConfig",
"elements": [
{
"name": "BorderStyle"
}
]
}
]
}
},
{
"name": "borderColor",
"description": "Specifies a border color based on the token options within Cedar.",
"required": false,
"type": {
"name": "union",
"elements": [
{
"name": "BorderColor"
},
{
"name": "StateConfig",
"elements": [
{
"name": "BorderColor"
}
]
}
]
}
},
{
"name": "background",
"description": "Adds in a background color based on the current palette's tokens.",
"required": false,
"type": {
"name": "union",
"elements": [
{
"name": "Background"
},
{
"name": "StateConfig",
"elements": [
{
"name": "Background"
}
]
}
]
}
},
{
"name": "checked",
"description": "Determines if the surface is in a checked state. Adds an `aria-checked` attribute.",
"required": false,
"type": {
"name": "boolean"
}
},
{
"name": "disabled",
"description": "Determines if the surface is in a disabled state.",
"required": false,
"type": {
"name": "boolean"
}
},
{
"name": "loading",
"description": "Determines if the surface is in a loading state.",
"required": false,
"type": {
"name": "boolean"
}
},
{
"name": "role",
"description": "Determines the ARIA role of the surface. Typically 'radio' or 'checkbox'.",
"required": false,
"type": {
"name": "string"
},
"defaultValue": {
"func": false,
"value": "checkbox"
}
},
{
"name": "layout",
"description": "Layout props that will be merged with selection defaults.",
"required": false,
"type": {
"name": "Layout"
}
}
],
"slots": [
{
"name": "default"
},
{
"name": "loading"
}
],
"sourceFiles": [
"src/components/surfaceSelection/CdrSurfaceSelection.vue"
]
},
"CdrSwitch": {
"name": "CdrSwitch",
"description": "Permits selection from two opposing options",
"tags": {
"uses": [
{
"description": "CdrIcon",
"title": "uses"
}
]
},
"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",
"required": false,
"type": {
"name": "string"
}
},
{
"name": "size",
"description": "Sets the size of the switch",
"required": false,
"type": {
"name": "SwitchSize"
},
"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",
"required": false,
"type": {
"name": "boolean"
},
"defaultValue": {
"func": false,
"value": false
}
},
{
"name": "modelValue",
"description": "v-model binding",
"required": true,
"type": {
"name": "boolean"
}
}
],
"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-color-border-secondary",
"defaultValue": "#{tokens.$cdr-color-border-secondary}",
"description": "Border of the cdr-switch button"
},
{
"name": "--cdr-color-icon-default",
"defaultValue": "#{tokens.$cdr-color-icon-default}",
"description": "Fill of the cdr-switch x and check icons"
},
{
"name": "--cdr-color-border-secondary",
"defaultValue": "#{tokens.$cdr-color-border-secondary}",
"description": "Box-shadow of the cdr-switch button on focus"
},
{
"name": "--cdr-color-icon-default",
"defaultValue": "#{tokens.$cdr-color-icon-default}",
"description": "Fill of the cdr-switch x and check icons on focus"
},
{
"name": "--cdr-color-icon-emphasis",
"defaultValue": "#{tokens.$cdr-color-icon-emphasis}",
"description": "Fill of the cdr-switch x and check icons on hover when not in focus"
},
{
"name": "--cdr-color-border-secondary",
"defaultValue": "#{tokens.$cdr-color-border-secondary}",
"description": "Box-shadow of the cdr-switch button when it is checked and in focus"
},
{
"name": "--cdr-color-border-secondary",
"defaultValue": "#{tokens.$cdr-color-border-secondary}",
"description": "Border of the cdr-switch button when it is checked and on hover but not in focus"
},
{
"name": "--cdr-color-border-secondary",
"defaultValue": "#{tokens.$cdr-color-border-secondary}",
"description": "Border color of the cdr-switch handle"
}
]
},
"CdrSurfaceScroll": {
"name": "CdrSurfaceScroll",
"description": "A scrollable surface component that provides custom scrollbars and smooth scrolling behavior",
"tags": {},
"exportName": "default",
"displayName": "CdrSurfaceScroll",
"expose": [
{
"name": "viewportRef"
}
],
"props": [
{
"name": "rootProps",
"description": "Root props passed to ScrollAreaRoot",
"required": false,
"type": {
"name": "any"
}
},
{
"name": "scrollbarProps",
"description": "Scrollbar props passed to ScrollAreaScrollbar",
"required": false,
"type": {
"name": "any"
}
},
{
"name": "thumbProps",
"description": "Thumb props passed to ScrollAreaThumb",
"required": false,
"type": {
"name": "any"
}
},
{
"name": "viewportProps",
"description": "Viewport props passed to ScrollAreaViewport",
"required": false,
"type": {
"name": "any"
}
}
],
"slots": [
{
"name": "default"
}
],
"sourceFiles": [
"src/components/surfaceScroll/CdrSurfaceScroll.vue"
]
},
"CdrSurfaceNavigation": {
"name": "CdrSurfaceNavigation",
"description": "Navigation variant of CdrSurface",
"tags": {},
"exportName": "default",
"displayName": "CdrSurfaceNavigation",
"props": [
{
"name": "background",
"description": "Adds in a background color based on the current palette's tokens.",
"required": false,
"type": {
"name": "union",
"elements": [
{
"name": "Background"
},
{
"name": "StateConfig",
"elements": [
{
"name": "Background"
}
]
}
]
}
},
{
"name": "borderColor",
"description": "Specifies a border color based on the token options within Cedar.",
"required": false,
"type": {
"name": "union",
"elements": [
{
"name": "BorderColor"
},
{
"name": "StateConfig",
"elements": [
{
"name": "BorderColor"
}
]
}
]
}
},
{
"name": "borderStyle",
"description": "Specifies a border style based on the token options within Cedar.",
"required": false,
"type": {
"name": "union",
"elements": [
{
"name": "BorderStyle"
},
{
"name": "StateConfig",
"elements": [
{
"name": "BorderStyle"
}
]
}
]
}
},
{
"name": "borderWidth",
"description": "Specifies a border width based on the token options within Cedar.",
"required": false,
"type": {
"name": "union",
"elements": [
{
"name": "SpaceFixed"
},
{
"name": "StateConfig",
"elements": [
{
"name": "SpaceFixed"
}
]
}
]
}
},
{
"name": "borderRadius",
"description": "Adds in a border radius based on the token options within Cedar.",
"required": false,
"type": {
"name": "union",
"elements": [
{
"name": "Radius"
},
{
"name": "StateConfig",
"elements": [
{
"name": "Radius"
}
]
}
]
}
},
{
"name": "boxShadow",
"description": "Adds a shadow based on the token options within Cedar.",
"required": false,
"type": {
"name": "union",
"elements": [
{
"name": "Shadow"
},
{
"name": "StateConfig",
"elements": [
{
"name": "Shadow"
}
]
}
]
}
},
{
"name": "tag",
"description": "Determines which HTML tag to use.",
"required": false,
"type": {
"name": "Tag"
},
"defaultValue": {
"func": false,
"value": "div"
}
},
{
"name": "palette",
"description": "Defines a palette for the component's style variations.",
"required": false,
"type": {
"name": "SurfacePalette"
}
}
],
"slots": [
{
"name": "default"
}
],
"sourceFiles": [
"src/components/surfaceNavigation/CdrSurfaceNavigation.vue"
]
},
"CdrSurface": {
"name": "CdrSurface",
"description": "Foundational container for creating structured layouts",
"tags": {},
"exportName": "default",
"displayName": "CdrSurface",
"props": [
{
"name": "background",
"description": "Adds in a background color based on the current palette's tokens.",
"required": false,
"type": {
"name": "union",
"elements": [
{
"name": "Background"
},
{
"name": "StateConfig",
"elements": [
{
"name": "Background"
}
]
}
]
}
},
{
"name": "borderColor",
"description": "Specifies a border color based on the token options within Cedar.",
"required": false,
"type": {
"name": "union",
"elements": [
{
"name": "BorderColor"
},
{
"name": "StateConfig",
"elements": [
{
"name": "BorderColor"
}
]
}
]
}
},
{
"name": "borderStyle",
"description": "Specifies a border style based on the token options within Cedar.",
"required": false,
"type": {
"name": "union",
"elements": [
{
"name": "BorderStyle"
},
{
"name": "StateConfig",
"elements": [
{
"name": "BorderStyle"
}
]
}
]
}
},
{
"name": "borderWidth",
"description": "Specifies a border width based on the token options within Cedar.",
"required": false,
"type": {
"name": "union",
"elements": [
{
"name": "SpaceFixed"
},
{
"name": "StateConfig",
"elements": [
{
"name": "SpaceFixed"
}
]
}
]
}
},
{
"name": "borderRadius",
"description": "Adds in a border radius based on the token options within Cedar.",
"required": false,
"type": {
"name": "union",
"elements": [
{
"name": "Radius"
},
{
"name": "StateConfig",
"elements": [
{
"name": "Radius"
}
]
}
]
}
},
{
"name": "boxShadow",
"description": "Adds a shadow based on the token options within Cedar.",
"required": false,
"type": {
"name": "union",
"elements": [
{
"name": "Shadow"
},
{
"name": "StateConfig",
"elements": [
{
"name": "Shadow"
}
]
}
]
}
},
{
"name": "tag",
"description": "Determines which HTML tag to use.",
"required": false,
"type": {
"name": "Tag"
},
"defaultValue": {
"func": false,
"value": "div"
}
},
{
"name": "palette",
"description": "Defines a palette for the component's style variations.",
"required": false,
"type": {
"name": "SurfacePalette"
}
}
],
"slots": [
{
"name": "default"
}
],
"sourceFiles": [
"src/components/surface/CdrSurface.vue"
]
},
"CdrSplitSurface": {
"name": "CdrSplitSurface",
"description": "Introduces a layered surface for distinct content sections, smoothing the transition from one page section to another",
"tags": {},
"exportName": "default",
"displayName": "CdrSplitSurface",
"props": [
{
"name": "surface",
"description": "Sets the orientation of the surface to the top or bottom slot",
"required": false,
"type": {
"name": "union",
"elements": [
{
"name": "\"top\""
},
{
"name": "\"bottom\""
}
]
},
"defaultValue": {
"func": false,
"value": "bottom"
}
},
{
"name": "tag",
"description": "Sets the HTML tag for the split-surface element",
"required": false,
"type": {
"name": "string"
},
"defaultValue": {
"func": false,
"value": "div"
}
}
],
"slots": [
{
"name": "top",
"description": "top slot"
},
{
"name": "bottom",
"description": "bottom slot"
}
],
"sourceFiles": [
"src/components/splitSurface/CdrSplitSurface.vue"
],
"UIProperties": [
{
"name": "--cdr-color-background-primary",
"defaultValue": "#{tokens.$cdr-color-background-primary}",
"description": "Color of the split-surface's surface layer"
}
]
},
"CdrSkeletonBone": {
"name": "CdrSkeletonBone",
"exportName": "default",
"displayName": "CdrSkeletonBone",
"description": "",
"tags": {},
"props": [
{
"name": "type",
"description": "Sets the type of content placeholder",
"required": false,
"type": {
"name": "union",
"elements": [
{
"name": "\"default\""
},
{
"name": "\"heading\""
},
{
"name": "\"line\""
},
{
"name": "\"rectangle\""
},
{
"name": "\"square\""
}
]
},
"defaultValue": {
"func": false,
"value": "default"
}
}
],
"sourceFiles": [
"src/components/skeleton/CdrSkeletonBone.vue"
]
},
"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. Automatically disabled if prefers-reduced-motion is set by user",
"required": false,
"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": "rgb(237, 234, 227, 1",
"description": "Skeleton shimmer gradient part 1"
},
{
"name": "--cdr-skeleton-gradient-2",
"defaultValue": "rgb(249, 248, 240, 1",
"description": "Skeleton shimmer gradient part 2"
},
{
"name": "--cdr-skeleton-gradient-3",
"defaultValue": "rgb(237, 234, 227, 1",
"description": "Skeleton shimmer gradient part 3"
}
]
},
"CdrHeadingDisplay": {
"name": "CdrHeadingDisplay",
"exportName": "default",
"displayName": "CdrHeadingDisplay",
"description": "",
"tags": {},
"props": [
{
"name": "tag",
"description": "Sets the HTML tag (p, span, h1, h2, etc)",
"required": false,
"type": {
"name": "Tag"
},
"defaultValue": {
"func": false,
"value": "h1"
}
},
{
"name": "scale",
"description": "Sets the type scale using Cedar values derived from cdr-tokens CdrTypeKey values.",
"tags": {
"type": [
{
"title": "type",
"description": "TypeScale"
}
]
},
"required": false,
"type": {
"name": "Extract",
"elements": [
{
"name": "TypeScale"
},
{
"name": "union",
"elements": [
{
"name": "\"scale-2\""
},
{
"name": "\"scale-3\""
},
{
"name": "\"scale-4\""
},
{
"name": "\"scale-5\""
},
{
"name": "\"scale-6\""
},
{
"name": "\"scale-7\""
}
]
}
]
},
"defaultValue": {
"func": false,
"value": "scale-7"
},
"values": [
"scale-2",
"scale-3",
"scale-4",
"scale-5",
"scale-6",
"scale-7"
]
}
],
"slots": [
{
"name": "default"
}
],
"sourceFiles": [
"src/components/text/presets/CdrHeadingDisplay.vue"
]
},
"CdrSelect": {
"name": "CdrSelect",
"description": "Allows the selection of one or more options from a dropdown list",
"tags": {
"uses": [
{
"description": "CdrIcon",
"title": "uses"
}
]
},
"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 `large@lg`",
"tags": {
"demoSelectMultiple": [
{
"description": "true",
"title": "demoSelectMultiple"
}
]
},
"values": [
"large"
],
"type": {
"name": "string"
}
},
{
"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 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 ( |