Renaming or removing any class listed here is a breaking change (requires a major/minor release with a changelog note). Consuming apps use these classes as CSS targets, so they are a public contract alongside component props. Component CSS lives in
@layer ca.components, so a plain unlayered app rule with the same single-class selector (.ca-btn:disabled { ... }) overrides the kit: no doubled classes, no!important(seegetting-started/theming).
--ca-* --ca-<component>-<property> --ca-<component>-<size|part>-<property> .ca-* @keyframes API.md Data attributes Internal Parts Variables ca-block--modifier ca-block__element ca-x- codeatlas-ui workarounds --strict dist/components.json dist/parts.json list_parts packages/ui/scripts/build-manifest.ts packages/ui/src/lib/styles/tokens.css styling tests/styling-parts.test.ts
Generated from grep -o 'ca-[a-z0-9_-]*' over packages/ui/src/lib/components/<Component>/ (.svelte, .css, .ts), excluding custom properties and duplicates. When you add or rename components, rerun the command and update this file. Some listed names may be @keyframes or internal identifiers (e.g. ca-accordion-down) rather than classes; treat them as stable to be safe.
Total: 836 unique classes across 84 components.
.ca-accordion .ca-accordion-down .ca-accordion-item .ca-accordion-item__body .ca-accordion-item__chevron .ca-accordion-item__content .ca-accordion-item__header .ca-accordion-item__title .ca-accordion-item__trigger .ca-accordion-up
.ca-alert .ca-alert--error .ca-alert--info .ca-alert--success .ca-alert--warning .ca-alert__bar .ca-alert__body .ca-alert__close .ca-alert__content .ca-alert__icon .ca-alert__title
.ca-alert-dialog .ca-alert-dialog__actions .ca-dialog .ca-dialog--sm .ca-dialog__actions .ca-dialog__body .ca-dialog__description .ca-dialog__header .ca-dialog__title .ca-overlay
.ca-app-form .ca-app-form__body .ca-app-form__desc .ca-app-form__footer .ca-app-form__footer-inner .ca-app-form__header .ca-app-form__header-inner .ca-app-form__inner .ca-app-form__leading .ca-app-form__meta .ca-app-form__title .ca-app-form__trailing .ca-shell__content
.ca-app-list .ca-app-list__actions .ca-app-list__body .ca-app-list__clear .ca-app-list__desc .ca-app-list__empty .ca-app-list__empty-msg .ca-app-list__footer .ca-app-list__header .ca-app-list__meta .ca-app-list__sel-label .ca-app-list__spacer .ca-app-list__title .ca-app-list__toolbar .ca-app-list__toolbar-sep .ca-page-info .ca-search-field .ca-shell__content
.ca-app-settings .ca-app-settings__actions .ca-app-settings__body .ca-app-settings__content .ca-app-settings__desc .ca-app-settings__header .ca-app-settings__meta .ca-app-settings__nav .ca-app-settings__nav-badge .ca-app-settings__nav-icon .ca-app-settings__nav-item .ca-app-settings__nav-label .ca-app-settings__title .ca-shell__content
.ca-bottom-nav .ca-bottom-nav__btn .ca-bottom-nav__btn--active .ca-bottom-nav__dialog .ca-bottom-nav__dialog-close .ca-bottom-nav__dialog-head .ca-bottom-nav__dialog-title .ca-bottom-nav__icon .ca-bottom-nav__label .ca-bottom-nav__more .ca-bottom-nav__more-btn .ca-bottom-nav__more-btn--active .ca-bottom-nav__more-extra .ca-bottom-nav__more-icon .ca-bottom-nav__more-label .ca-main .ca-mobile-header .ca-mobile-header__inner .ca-mobile-header__leading .ca-mobile-header__title .ca-mobile-header__title--custom .ca-mobile-header__trailing .ca-nav-item .ca-nav-item--active .ca-nav-item--grip .ca-nav-item__actions .ca-nav-item__badge .ca-nav-item__color .ca-nav-item__count .ca-nav-item__dot .ca-nav-item__grip .ca-nav-item__icon .ca-nav-item__label .ca-nav-item__leading .ca-nav-item__link .ca-nav-item__pip .ca-nav-list .ca-nav-module-badge .ca-nav-module-badge--dot .ca-panel .ca-panel-open .ca-panel__header .ca-panel__nav .ca-panel__resize .ca-panel__resize--active .ca-panel__title .ca-rail .ca-rail__bottom .ca-rail__bottom-sep .ca-rail__dock .ca-rail__icon .ca-rail__icon--active .ca-rail__icon--labeled .ca-rail__label .ca-rail__logo .ca-rail__logo-mark .ca-rail__pip .ca-rail__sep .ca-rail__top .ca-section .ca-section__chevron .ca-section__chevron--open .ca-section__header .ca-section__label .ca-section__trigger .ca-shell .ca-shell--stage .ca-shell__body .ca-shell__content .ca-shell__desktop-header .ca-shell__mobile-header .ca-shell__stage .ca-shell__stage--hidden .ca-sidebar .ca-stage-panel
.ca-audio .ca-audio__bar .ca-audio__bar--played .ca-audio__error .ca-audio__meta .ca-audio__rate .ca-audio__scrub .ca-audio__wave
.ca-auth .ca-auth--right .ca-auth-card .ca-auth-card--plain .ca-auth-card__body .ca-auth-card__footer .ca-auth-card__header .ca-auth-card__subtitle .ca-auth-card__title .ca-auth-card__title--display .ca-auth-float .ca-auth__blob .ca-auth__blob--a .ca-auth__blob--b .ca-auth__blob--c .ca-auth__blobs .ca-auth__col .ca-auth__col--framed .ca-auth__col--start .ca-auth__header .ca-auth__logo .ca-auth__main .ca-auth__mark .ca-auth__mobile-brand .ca-auth__mobile-mark .ca-auth__mobile-name .ca-auth__name .ca-auth__panel .ca-auth__panel--bleed .ca-auth__panel-inner .ca-auth__slot
Tokens: --ca-auth-panel-bg (any tone: overrides the panel background, a color or gradient) and --ca-auth-panel-fg (panel text base color; the slot's --panel-* vars derive from it). data-panel-tone="auto|brand|flat" on .ca-auth selects the tone.
.ca-aspect
--ca-aspect (the ratio) is set inline from the ratio prop; Image writes the same property on .ca-image--ratio with .ca-image--cover or .ca-image--contain.
.ca-avatar .ca-avatar__fallback .ca-avatar__img .ca-avatar__status .ca-avatar__status--away .ca-avatar__status--busy .ca-avatar__status--offline .ca-avatar__status--online
.ca-badge .ca-badge--brand .ca-badge--danger .ca-badge--dot .ca-badge--error .ca-badge--info .ca-badge--inline .ca-badge--md .ca-badge--neutral .ca-badge--sm .ca-badge--subtle .ca-badge--success .ca-badge--warning .ca-badge__dot .ca-badge-wrapper
.ca-box
.ca-breadcrumb .ca-breadcrumb__current .ca-breadcrumb__item .ca-breadcrumb__link .ca-breadcrumb__list .ca-breadcrumb__sep
.ca-btn .ca-btn--destructive .ca-btn--filled .ca-btn--full-width .ca-btn--ghost .ca-btn--glass .ca-btn--lg .ca-btn--between .ca-btn--loading .ca-btn--md .ca-btn--neutral .ca-btn--outlined .ca-btn--sm .ca-btn__leading .ca-btn__trailing .ca-btn__trailing--hint .ca-icon-btn .ca-icon-btn--filled .ca-icon-btn--glass .ca-icon-btn--lg .ca-icon-btn--loading .ca-icon-btn--md .ca-icon-btn--neutral .ca-icon-btn--outlined .ca-icon-btn--sm .ca-icon-btn--text .ca-spinner__arc .ca-spinner__track
.ca-btn-group; data-orientation="horizontal|vertical" on the root. Members are its direct children (.ca-btn, .ca-icon-btn), which lose their inner corner radius and overlap by one --ca-border-width; the hovered, open or :focus-visible member gets z-index 1 or 2.
.ca-card .ca-card--flush .ca-card--full .ca-card__header .ca-card__header-actions .ca-card__title
.ca-checkbox .ca-checkbox-wrapper .ca-checkbox__indicator .ca-checkbox__label .ca-checkbox__label--disabled
.ca-carousel .ca-carousel__controls .ca-carousel__dot .ca-carousel__dots .ca-carousel__item .ca-carousel__nav .ca-carousel__next .ca-carousel__play .ca-carousel__prev .ca-carousel__track .ca-carousel__viewport
--ca-carousel-per-view (slides visible at once) is set inline from perView; aria-current="true" marks the current .ca-carousel__dot.
.ca-chip .ca-chip--brand .ca-chip--error .ca-chip--info .ca-chip--interactive .ca-chip--selected .ca-chip--sm .ca-chip--success .ca-chip--warning .ca-chip__delete .ca-chip__icon .ca-chip__label
.ca-chip-group .ca-chip-group__check .ca-chip-group__chip .ca-chip-group__hint .ca-chip-group__hint--error .ca-chip-group__input .ca-chip-group__label .ca-chip-group__list .ca-chip-group__req .ca-chip-group__text
State attributes on .ca-chip-group__chip: data-state="checked|unchecked", data-disabled; on the root: data-invalid, data-disabled. The list is a 3-column grid below 600px and a wrapping flex row from 600px.
.ca-code-snippet .ca-code-snippet__copy .ca-code-snippet__lang .ca-code-snippet__pre .ca-code-snippet__pre--raw .ca-code-snippet__toolbar
.ca-color-field .ca-color-field__contrast .ca-color-field__level .ca-color-field__native .ca-color-field__pick .ca-color-field__ratio .ca-color-field__swatch
Contrast state is exposed as [data-pass] and [data-level] on .ca-color-field__contrast.
.ca-collapsible .ca-collapsible__body .ca-collapsible__chevron .ca-collapsible__content .ca-collapsible__title .ca-collapsible__trigger .ca-slide-down .ca-slide-up
.ca-combobox--error .ca-combobox--multiple .ca-combobox--sm .ca-combobox__chevron .ca-combobox__chip .ca-combobox__chips .ca-combobox__content .ca-combobox__empty .ca-combobox__hint--error .ca-combobox__hint .ca-combobox__input .ca-combobox__item--create .ca-combobox__item-check .ca-combobox__item-label .ca-combobox__item .ca-combobox__label .ca-combobox__req .ca-combobox__search-wrap .ca-combobox__trigger-count .ca-combobox__trigger-label .ca-combobox__trigger .ca-combobox__viewport .ca-combobox
.ca-cmd-dialog .ca-cmd-empty .ca-cmd-error .ca-cmd-fade-in .ca-cmd-fade-out .ca-cmd-group__label .ca-cmd-group .ca-cmd-item--active .ca-cmd-item__icon .ca-cmd-item__label .ca-cmd-item__module .ca-cmd-item .ca-cmd-list .ca-cmd-loading .ca-cmd-overlay .ca-cmd-search__hint .ca-cmd-search__icon .ca-cmd-search__input .ca-cmd-search__spinner .ca-cmd-search .ca-cmd-slide-in .ca-cmd-slide-out
.ca-container
.ca-contextmenu
.ca-conversation .ca-conversation--active .ca-conversation--unread .ca-conversation__avatar .ca-conversation__flags .ca-conversation__line .ca-conversation__main .ca-conversation__preview .ca-conversation__preview--typing .ca-conversation__previewicon .ca-conversation__previewrow .ca-conversation__time .ca-conversation__title .ca-conversation__unread .ca-conversation__unread--muted
.ca-copy
.ca-col-header .ca-col-header__idle .ca-col-toggle__check .ca-col-toggle__content .ca-col-toggle__item .ca-col-toggle__trigger .ca-datatable .ca-datatable__clear .ca-datatable__empty-panel .ca-datatable__glass .ca-datatable__grip .ca-datatable__grip-cell .ca-datatable__grip-col .ca-datatable__group .ca-datatable__group-count .ca-datatable__group-row .ca-datatable__group-toggle .ca-datatable__no-results .ca-datatable__no-results-icon .ca-datatable__no-results-inner .ca-datatable__no-results-sub .ca-datatable__no-results-title .ca-datatable__resize .ca-datatable__resize--active .ca-datatable__row--clickable .ca-datatable__scroll .ca-datatable__table .ca-datatable__table--fixed .ca-datatable__tbody .ca-datatable__th--resizable .ca-datatable__thead .ca-dt-pagination .ca-dt-pagination__btn .ca-dt-pagination__count .ca-dt-pagination__label .ca-dt-pagination__nav .ca-dt-pagination__select .ca-dt-pagination__size .ca-dt-toolbar .ca-dt-toolbar__count .ca-dt-toolbar__export .ca-dt-toolbar__input .ca-dt-toolbar__left .ca-dt-toolbar__right .ca-dt-toolbar__search .ca-dt-toolbar__search-icon .ca-dt-toolbar__spinner .ca-facet__badge .ca-facet__check .ca-facet__clear .ca-facet__content .ca-facet__count .ca-facet__empty .ca-facet__footer .ca-facet__item .ca-facet__item--active .ca-facet__item-label .ca-facet__list .ca-facet__sep .ca-facet__trigger .ca-spin .ca-table .ca-table-container .ca-table-wrap
.ca-cal .ca-cal--standalone .ca-cal__cell .ca-cal__day .ca-cal__grid .ca-cal__head-cell .ca-cal__header .ca-cal__heading .ca-cal__months .ca-cal__nav .ca-date .ca-date--disabled .ca-date--error .ca-date--sm .ca-date-in .ca-date-out .ca-date__content .ca-date__hint .ca-date__hint--error .ca-date__input .ca-date__label .ca-date__range-sep .ca-date__req .ca-date__segment .ca-date__sep .ca-date__trigger .ca-date__wrap .ca-tf
.ca-dialog .ca-dialog--chromeless .ca-dialog--split .ca-dialog-in .ca-dialog-out .ca-dialog__actions .ca-dialog__body .ca-dialog__description .ca-dialog__header .ca-dialog__sr-only .ca-dialog__title .ca-layer-close .ca-overlay .ca-overlay-in .ca-overlay-out
.ca-overlay is the modal <dialog> itself (dialog.ca-overlay), shared by Dialog, AlertDialog, Drawer, Sheet, CommandPalette and DocsSearch. The scrim is dialog.ca-overlay::backdrop, driven by --ca-scrim-color and --ca-scrim-blur. A background or backdrop-filter on .ca-overlay paints the panel, not the scrim.
.ca-overlay--inline (with data-inline on the <dialog>) is the inline prop of Dialog, Sheet and Drawer: the panel is position: absolute inside the nearest positioned ancestor instead of in the top layer, with no scrim, scroll lock or focus trap, and resolves the tokens of its container (a data-preset / data-theme-scope island).
.ca-divider .ca-divider--horizontal .ca-divider--vertical
.ca-dnd-indicator .ca-dnd-overlay
.ca-alert__content .ca-callout .ca-card-grid .ca-code .ca-codetab .ca-codetabs .ca-codetabs__bar .ca-codetabs__copy .ca-codetabs__panels .ca-codetabs__tab .ca-codetabs__tabs .ca-docs .ca-docs--bare .ca-docs-brand .ca-docs-content .ca-docs-header .ca-docs-header__inner .ca-docs-icon .ca-docs-main .ca-docs-menu .ca-docs-nav .ca-docs-nav__group .ca-docs-nav__label .ca-docs-nav__link .ca-docs-nav__title .ca-docs-search .ca-docs-search-btn .ca-docs-search-btn__label .ca-docs-search-icon .ca-docs-search-in .ca-docs-search-opt .ca-docs-search-out .ca-docs-search-pop-in .ca-docs-search-pop-out .ca-docs-search-results .ca-docs-search__bar .ca-docs-search__body .ca-docs-search__cancel .ca-docs-search__context .ca-docs-search__empty .ca-docs-search__enter .ca-docs-search__esc .ca-docs-search__icon .ca-docs-search__input .ca-docs-search__overlay .ca-docs-search__result .ca-docs-search__result--on .ca-docs-search__results .ca-docs-search__sr .ca-docs-search__text .ca-docs-search__title .ca-docs-section .ca-docs-sections .ca-docs-sheet-sections .ca-docs-sidebar .ca-docs-skip .ca-docs-spacer .ca-docs-theme .ca-docs-toc .ca-docs-toc-inline .ca-kbd .ca-link-card .ca-link-card__desc .ca-link-card__title .ca-method .ca-method--pill .ca-method--plain .ca-overlay .ca-prose .ca-rail-btn .ca-step .ca-steps .ca-toc .ca-toc--inline .ca-toc--rail .ca-toc__current .ca-toc__label .ca-toc__list .ca-toc__sub .ca-toc__summary-label .ca-release .ca-release-jump .ca-release-thanks .ca-release__meta
.ca-drawer .ca-drawer--bottom .ca-drawer--left .ca-drawer--right .ca-drawer-bottom-in .ca-drawer-bottom-out .ca-drawer-left-in .ca-drawer-left-out .ca-drawer-right-in .ca-drawer-right-out .ca-drawer__actions .ca-drawer__body .ca-drawer__header .ca-drawer__header--bare .ca-drawer__title .ca-layer-close .ca-overlay .ca-overlay--drawer
State attributes on dialog.ca-drawer: data-chromeless (body padding 0, no header), data-full-bleed="sm|md|lg" (full viewport below the breakpoint). .ca-drawer__body is a flex column with min-height: 0.
.ca-dropdown-content .ca-dropdown-group .ca-dropdown-in .ca-dropdown-item .ca-dropdown-item--destructive .ca-dropdown-item--selectable .ca-dropdown-item--sub-trigger .ca-dropdown-item__chevron .ca-dropdown-item__icon .ca-dropdown-item__indicator .ca-dropdown-item__label .ca-dropdown-label .ca-dropdown-out .ca-dropdown-sep .ca-dropdown-sub .ca-dropdown__point .ca-dropdown__trigger
.ca-empty .ca-empty--hero .ca-empty__actions .ca-empty__description .ca-empty__icon .ca-empty__title .ca-empty__title--display
.ca-error-page .ca-error-page__actions .ca-error-page__bubble .ca-error-page__hint .ca-error-page__inner .ca-error-page__status .ca-error-page__title
.ca-external-link .ca-external-link__icon .ca-external-link__sr
.ca-file-upload .ca-file-upload--disabled .ca-file-upload__errors .ca-file-upload__file .ca-file-upload__file-icon .ca-file-upload__file-name .ca-file-upload__file-size .ca-file-upload__hint .ca-file-upload__icon .ca-file-upload__input .ca-file-upload__label .ca-file-upload__list .ca-file-upload__remove .ca-file-upload__zone .ca-file-upload__zone--dragging
.ca-filter-group .ca-filter-group__item .ca-filter-group__label
.ca-flex
.ca-app-bar .ca-app-bar__content .ca-app-bar__leading .ca-app-bar__trailing
Deprecated, removed in the next major: use
Card(.ca-card*)..ca-glass-card.ca-glass-card--flush.ca-glass-card--full.ca-glass-card__header.ca-glass-card__header-actions.ca-glass-card__title
Deprecated, removed in the next major: use
Surface(.ca-surface). Itsglass,glass-*classes are materials utilities.
.ca-grid
.ca-heading .ca-heading--display .ca-heading--display-2 .ca-heading--display-3 .ca-heading--h1 .ca-heading--h2 .ca-heading--h3 .ca-heading--h4 .ca-heading--h5 .ca-heading--h6 .ca-highlight .ca-highlight--animated
.ca-hovercard-content .ca-hovercard-in .ca-hovercard-out .ca-hovercard__trigger
.ca-install .ca-install-dismissed .ca-install-title .ca-install__body .ca-install__close .ca-install__glyph .ca-install__icon .ca-install__steps .ca-install__text .ca-install__title
.ca-kbd
.ca-kanban .ca-kanban--mobile .ca-kanban__body .ca-kanban__board .ca-kanban__card .ca-kanban__col .ca-kanban__count .ca-kanban__dot .ca-kanban__empty .ca-kanban__head .ca-kanban__list .ca-kanban__more .ca-kanban__move .ca-kanban__rail .ca-kanban__skeleton .ca-kanban__summary .ca-kanban__summary--row .ca-kanban__tab .ca-kanban__tab-label .ca-kanban__tabs .ca-kanban__title
.ca-kpi .ca-kpi__chart .ca-kpi__icon .ca-kpi__inner .ca-kpi__title .ca-kpi__trend .ca-kpi__trend--down .ca-kpi__trend--up .ca-kpi__unit .ca-kpi__value
The trend element (.ca-kpi__trend, .ca-stat__trend) carries data-tone="good|bad|neutral": the verdict behind its colour. --up/--down only say which way the number moved; with trendTone="positive-down" a --down trend is good. Target data-tone to restyle the colour, never --up/--down.
.ca-lightbox .ca-lightbox-in .ca-lightbox-out .ca-lightbox__action .ca-lightbox__caption .ca-lightbox__caption-text .ca-lightbox__close .ca-lightbox__counter .ca-lightbox__img .ca-lightbox__meta .ca-lightbox__nav .ca-lightbox__nav--next .ca-lightbox__nav--prev .ca-lightbox__overlay .ca-lightbox__sr .ca-lightbox__stage .ca-lightbox__tools .ca-lightbox__video
.ca-live-list .ca-live-list__bar .ca-live-list__count .ca-live-list__empty .ca-live-list__frame .ca-live-list__head .ca-live-list__item .ca-live-list__jump .ca-live-list__list .ca-live-list__scroller
.ca-loading-boundary .ca-loading-boundary__content .ca-loading-boundary__pending
.ca-locale .ca-locale--compact .ca-locale__code .ca-locale__name .ca-map .ca-map-controls .ca-map-controls__needle .ca-map__canvas .ca-map__overlay
.ca-media-grid .ca-media-grid__doc .ca-media-grid__doc-title .ca-media-grid__duration .ca-media-grid__failed .ca-media-grid__grid .ca-media-grid__grid--single .ca-media-grid__grid--wide .ca-media-grid__img .ca-media-grid__img--hidden .ca-media-grid__more .ca-media-grid__play .ca-media-grid__skeleton .ca-media-grid__tile
.ca-menubar .ca-menubar__item
.ca-bubble .ca-bubble--in .ca-bubble--out .ca-bubble-row .ca-bubble-row--in .ca-bubble-row--out .ca-bubble-row--reacted .ca-bubble-row__avatar .ca-bubble__body .ca-bubble__meta .ca-bubble__quote .ca-bubble__reaction .ca-bubble__reaction--mine .ca-bubble__reactions .ca-bubble__sender .ca-bubble__status .ca-bubble__status--read
.ca-mobile-pane .ca-mobile-pane__body .ca-mobile-pane__body--fixed .ca-mobile-pane__header
.ca-motion-stage .ca-motion-stage__bar .ca-motion-stage__canvas
State attributes on .ca-motion-stage: data-playing, data-taken, data-reduced, data-cycle.
.ca-navmenu .ca-navmenu-in .ca-navmenu-out .ca-navmenu-panel .ca-navmenu__chevron .ca-navmenu__desc .ca-navmenu__entry .ca-navmenu__link .ca-navmenu__list .ca-navmenu__title .ca-navmenu__trigger
.ca-nav-progress .ca-nav-progress__bar
.ca-notif-action .ca-notif-actions .ca-notif-bell .ca-notif-empty .ca-notif-header .ca-notif-item .ca-notif-item--unread .ca-notif-item__body .ca-notif-item__btn .ca-notif-item__dot .ca-notif-item__dot--default .ca-notif-item__dot--error .ca-notif-item__dot--info .ca-notif-item__dot--success .ca-notif-item__dot--warning .ca-notif-item__text .ca-notif-item__time .ca-notif-item__title .ca-notif-list .ca-notif-panel .ca-notif-title .ca-notif-trigger
.ca-nf .ca-nf--disabled .ca-nf--error .ca-nf--sm .ca-nf__btn .ca-nf__hint .ca-nf__hint--error .ca-nf__input .ca-nf__label .ca-nf__req .ca-nf__wrap .ca-nf__wrap--error .ca-nf__wrap--focused
.ca-page-frame .ca-page-frame__body .ca-page-frame__footer .ca-page-frame__grip .ca-page-frame__handle .ca-page-frame__header .ca-page-frame__panel .ca-page-frame__toolbar. State is on data-mode, data-side, data-width, data-sheet, data-detent, data-dragging of the root. Custom properties: --ca-stage-inset-top|right|bottom|left on <html> (the covered area).
.ca-page-shell .ca-page-shell__actions .ca-page-shell__aside .ca-page-shell__body .ca-page-shell__description .ca-page-shell__frame .ca-page-shell__header .ca-page-shell__layout .ca-page-shell__layout--aside .ca-page-shell__layout--reading .ca-page-shell__main .ca-page-shell__meta .ca-page-shell__title .ca-page-shell__title--display .ca-shell__content
.ca-pagination .ca-pagination__ellipsis .ca-pagination__nav .ca-pagination__page
.ca-pwstrength .ca-pwstrength__bar .ca-pwstrength__label .ca-pwstrength__seg .ca-pwstrength__text
data-score="0|1|2|3" on .ca-pwstrength; data-on on a filled .ca-pwstrength__seg.
.ca-pin .ca-pin--disabled .ca-pin--error .ca-pin-blink .ca-pin__caret .ca-pin__cell .ca-pin__cells .ca-pin__hint .ca-pin__hint--error .ca-pin__label .ca-pin__root
.ca-popover-content .ca-popover-in .ca-popover-out .ca-popover__trigger
.ca-pstage .ca-pstage__bar .ca-pstage__canvas .ca-pstage__content .ca-pstage__frame .ca-pstage__handle .ca-pstage__iframe .ca-pstage__island .ca-pstage__loading .ca-pstage__readout .ca-pstage__viewport
data-dragging on .ca-pstage and data-active on the handle while it holds the pointer; data-scaled on the viewport when the frame is scaled down to fit. --pstage-w, --pstage-h and --pstage-scale are set inline on the canvas.
.ca-progress .ca-progress-shimmer .ca-progress__indicator .ca-progress__indicator--indeterminate .ca-progress__track
.ca-radio-group .ca-radio-group--horizontal .ca-radio-group--vertical .ca-radio-indicator .ca-radio-input .ca-radio-item .ca-radio-label .ca-radio-label--disabled
.ca-record-cell .ca-record-list .ca-record-list__body .ca-record-list__head .ca-record-row .ca-record-row__actions .ca-record-row__cells .ca-record-row__identity
Re-flow: the list is a size container (container-type: inline-size), rows stack below 36rem of the list's own width. --ca-record-columns (set from the columns prop) is the shared grid-template-columns of the header and every row.
Deprecated, removed in the next major: use
Flex(.ca-flex)..ca-row.ca-row--wrap
.ca-scheme-asset .ca-scheme-asset__dark .ca-scheme-asset__light
.ca-resizable .ca-resizable__handle .ca-resizable__panel
data-direction="horizontal|vertical" on .ca-resizable and .ca-resizable__handle; data-dragging on the group and data-active on the handle while it holds the pointer. --ca-panel-size (percent) is set inline on each panel.
.ca-scroll-area .ca-scroll-area__scrollbar .ca-scroll-area__scrollbar--h .ca-scroll-area__scrollbar--v .ca-scroll-area__thumb .ca-scroll-area__viewport
.ca-layout-section
.ca-sel .ca-sel--disabled .ca-sel--error .ca-sel--sm .ca-sel__check .ca-sel__content .ca-sel__hint .ca-sel__hint--error .ca-sel__icon .ca-sel__item .ca-sel__item-label .ca-sel__label .ca-sel__req .ca-sel__trigger .ca-sel__value .ca-sel__value--placeholder
.ca-setting-item .ca-setting-item__control .ca-setting-item__desc .ca-setting-item__label .ca-setting-item__text
.ca-layer-close .ca-overlay .ca-sheet .ca-sheet-fade-in .ca-sheet-fade-out .ca-sheet-in .ca-sheet-out .ca-sheet__body .ca-sheet__close .ca-sheet__description .ca-sheet__footer .ca-sheet__grab .ca-sheet__grab--active .ca-sheet__handle .ca-sheet__header .ca-sheet__meta .ca-sheet__overlay .ca-sheet__title
.ca-site-header .ca-site-header__bc-sep .ca-site-header__breadcrumb .ca-site-header__current--display .ca-site-header__inner .ca-site-header__left .ca-site-header__sep .ca-site-header__toggle .ca-site-header__trailing
.ca-shimmer .ca-skeleton .ca-skeleton--circular .ca-skeleton--rectangular .ca-skeleton--rounded .ca-skeleton--text .ca-skeleton-rows
The skeleton prop of Avatar, KpiCard, TextField, Table, Card and GlassCard sets [data-skeleton] (and aria-busy="true") on the component's frame; the placeholder paint and the ca-shimmer and ca-skeleton-pulse keyframes live in utilities.css. Under data-style flat, solid or outlined (or with no data-style at all, which is solid) the sweep is not drawn: the block pulses its opacity (ca-skeleton-pulse) instead.
.ca-skip-link
.ca-slider .ca-slider__range .ca-slider__thumb .ca-slider__track
.ca-slider-field .ca-slider-field__head .ca-slider-field__hint .ca-slider-field__label .ca-slider-field__value
.ca-rail-btn .ca-sound-toggle .ca-sound-toggle__btn .ca-sound-toggle__volume
.ca-spin .ca-spinner .ca-spinner__arc .ca-spinner__track
.ca-splash .ca-splash__logo
.ca-stack
.ca-stat .ca-stat__hint .ca-stat__label .ca-stat__trend .ca-stat__trend--down .ca-stat__trend--up .ca-stat__unit .ca-stat__value
data-tone="good|bad|neutral" on .ca-stat__trend: see KpiCard. The arrow and --up/--down follow the sign; the colour follows trendTone.
.ca-status-chip .ca-status-chip--error .ca-status-chip--info .ca-status-chip--neutral .ca-status-chip--success .ca-status-chip--warning
.ca-stepper .ca-stepper__bubble .ca-stepper__desc .ca-stepper__label .ca-stepper__line .ca-stepper__line--done .ca-stepper__step .ca-stepper__step--active .ca-stepper__step--done .ca-stepper__text
.ca-sticky-actions .ca-sticky-actions--end .ca-sticky-actions--stretch .ca-sticky-actions__inner
.ca-strike .ca-strike--animated
.ca-surface
.ca-surface-panel
.ca-switch .ca-switch-wrapper .ca-switch__label .ca-switch__label--disabled .ca-switch__thumb
.ca-table .ca-table--bare .ca-table--cards .ca-table--compact .ca-table--pinned .ca-table--sentence .ca-table-empty .ca-table-group .ca-table-group__chevron .ca-table-group__toggle .ca-table-root--static .ca-table-row--interactive .ca-table-sort .ca-table-sort__icon .ca-table-wrap .ca-table-wrap--cards .ca-user-cell .ca-user-cell__email .ca-user-cell__info .ca-user-cell__name
.ca-tabs .ca-tabs-content .ca-tabs-list .ca-tabs-trigger .ca-tabs-trigger__icon
.ca-form-section .ca-form-section--grid .ca-form-section--list .ca-form-section--stack .ca-form-section__desc .ca-form-section__fields .ca-form-section__header .ca-form-section__title
.ca-text .ca-text-body .ca-text-caption .ca-text-heading .ca-text-label .ca-text-num .ca-text-title
The role classes are also an opt-in stylesheet (@codeatlasdev/ui/styles/type-roles.css, ca.utilities layer) for any element: .ca-text-<role> sets font: var(--ca-text-<role>) and the role's tracking; .ca-text-num adds font-variant-numeric: tabular-nums. Override the role with ThemeOptions.type or --ca-text-<role>-{size,leading,tracking,weight} (body, label and caption sizes are --ca-font-size-body1, -label, -caption, and the label tracking is --ca-label-tracking).
.ca-ta .ca-ta--disabled .ca-ta--error .ca-ta__hint .ca-ta__hint--error .ca-ta__input .ca-ta__label .ca-ta__req .ca-ta__wrap .ca-ta__wrap--error .ca-ta__wrap--focused
.ca-tf .ca-tf--disabled .ca-tf--error .ca-tf--sm .ca-tf__addon .ca-tf__addon--prefix .ca-tf__addon--suffix .ca-tf__addon--text .ca-tf__adorn .ca-tf__adorn--lead .ca-tf__adorn--trail .ca-tf__hint .ca-tf__hint--error .ca-tf__input .ca-tf__label .ca-tf__req .ca-tf__wrap .ca-tf__wrap--addons .ca-tf__wrap--error .ca-tf__wrap--focused
.ca-theme-island
.ca-rail-btn .ca-theme-toggle .ca-theme-toggle__icon .ca-theme-toggle__icon--dark .ca-theme-toggle__icon--light
.ca-timeline .ca-timeline__connector .ca-timeline__content .ca-timeline__date .ca-timeline__desc .ca-timeline__dot .ca-timeline__dot--default .ca-timeline__dot--error .ca-timeline__dot--info .ca-timeline__dot--success .ca-timeline__dot--warning .ca-timeline__header .ca-timeline__item .ca-timeline__label .ca-timeline__track
.ca-toast .ca-toast--error .ca-toast--info .ca-toast--success .ca-toast--visible .ca-toast--warning .ca-toast__action .ca-toast__body .ca-toast__close .ca-toast__count .ca-toast__description .ca-toast__icon .ca-toast__message .ca-toaster .ca-toaster--inline
.ca-seg .ca-seg--md .ca-seg--sm .ca-seg__item .ca-seg__thumb .ca-toggle-group .ca-toggle-group--md .ca-toggle-group--outlined .ca-toggle-group--sm .ca-toggle-group__item
.ca-tooltip-content .ca-tooltip-in .ca-tooltip-out .ca-tooltip__trigger
.ca-turnstile
.ca-virtual-list .ca-virtual-list__empty .ca-virtual-list__head .ca-virtual-list__item .ca-virtual-list__list .ca-virtual-list__loading .ca-virtual-list__older .ca-virtual-list__scroller
These attributes are part of the public contract too (an app can restyle one axis with an attribute selector). They are set by Surface/Card/SurfacePanel and the layout primitives; their rules live in @layer ca.materials (Surface) and @layer ca.utilities (layout).
| Attribute | Values | On |
|---|---|---|
data-elevation |
0 1 2 3 4 5 |
.ca-surface |
data-material |
auto solid frosted glass liquid |
.ca-surface |
data-tone |
neutral brand success warning error info |
.ca-surface |
data-variant |
filled outlined ghost |
.ca-surface |
data-variant |
pill line |
.ca-tabs, .ca-tabs-list, .ca-tabs-trigger (the variant prop of Tabs) |
data-radius |
none sm md lg xl pill |
.ca-surface |
data-interactive, data-glow |
present or absent | .ca-surface |
data-grain |
present, or animated |
.ca-surface |
data-ca-blur |
ultra-thin thin regular thick chrome mat-thin mat-regular overlay chrome-layer tooltip |
any blurred element that is not a .ca-surface (Tabs list, Chip, Toast, Rail, Panel, FloatingLayer...) |
data-ca-blur-wide-off |
present or absent | an element with data-ca-blur: no blur from 900px up (StickyActions, the docs pager) |
data-gap, data-p, data-px, data-py |
spacing steps 0 0.5 ... 24 (--ca-space-<step>) |
layout primitives |
data-align, data-justify, data-direction, data-wrap, data-columns |
see Layout primitives docs | layout primitives |
data-<bp>-<prop> |
the same, from sm (600) md (900) lg (1200) xl (1536) px up |
layout primitives |
data-size |
sm md lg xl (Container), 1 2 3 (Section) |
.ca-container, .ca-layout-section |
data-ca-blur is the only way a component blurs its backdrop: the filter is declared once per role in surface.css (@layer ca.materials) from the --ca-blur-*, --ca-mat-*-filter, --ca-overlay-blur, --ca-chrome-blur and --ca-tooltip-blur tokens, so html[data-style] turns every one of them off or down together. A page with no data-style attribute is solid (:root:not([data-style]) shares the solid block), so no blur until data-style is glass or frosted. Override a single role with [data-ca-blur="thick"] { --ca-blur-role: ... } (unlayered app CSS wins). The modal scrim is dialog.ca-overlay::backdrop and reads --ca-scrim-blur.
Surface and layout CSS variables (--ca-surface-*, --ca-elevation-*, --ca-blur-role) are tokens, not listed here.
A component token is a custom property a component reads before its default: --ca-<component>-<property> for the component, --ca-<component>-<size|part>-<property> for one size or part (it wins over the first). Declare it on :root, on a wrapper or through ThemeOptions.components. Unset, the component draws what it always drew. Renaming or removing a token below is a breaking change, like a class.
- Button
--ca-btn-font-weight--ca-btn-letter-spacing--ca-btn-line-height--ca-btn-gap--ca-btn-{sm,md,lg}-height--ca-btn-{sm,md,lg}-padding-x--ca-btn-{sm,md,lg}-font-size--ca-btn-{sm,md,lg}-font-weight--ca-btn-{sm,md,lg}-letter-spacing--ca-btn-ghost-border-width--ca-btn-disabled-bg--ca-btn-touch-height - IconButton
--ca-icon-btn-size-{sm,md,lg}--ca-icon-btn-font-weight--ca-icon-btn-touch-size - Kbd
--ca-kbd-size--ca-kbd-font-size--ca-kbd-line-height - Avatar
--ca-avatar-fallback-{bg,color,size,weight}--ca-avatar-{xs,sm,md,lg,xl}-fallback-{size,weight}; proptone="neutral"(data-tone="neutral"on.ca-avatar,data-sizeon named sizes) - TextField / TextArea
--ca-field-gap--ca-field-label-leading--ca-tf-gap--ca-tf-label-line-height--ca-tf-addon-bg--ca-ta-gap--ca-ta-label-line-height--ca-ta-min-height(the visible box, border included) - Card
--ca-card-bg--ca-card-radius--ca-card-border--ca-card-shadow(--ca-card-paddingand--ca-card-gapalready existed) - SegmentedControl
--ca-seg-item-{padding-x,font-size,line-height}--ca-seg-{sm,md}-item-{padding-x,font-size,line-height} - EmptyState
--ca-empty-padding--ca-empty-title-size--ca-empty-title-weight; modifiers.ca-empty--bare(propbare) and.ca-empty--fill(propactionsFill)