CEM component gallery

This static catalog presents package-owned component semantics and verified state coverage without copying executable fixtures.

State requirements: 41; browser-covered: 41; static-only: 0; gaps: 0.

Public components

Component semantics, token families, and category state coverage
Component	Category	Primary use	Token families	Category states	Reference
`cem-action`	Action	Text action, submit, command and container-selected buttons	`action` `control` `palette` `bend` `typography`	selected: covered default: covered hover: covered focus-visible: covered active: covered disabled: covered pending: covered	Component reference
`cem-icon-button`	Action	Compact icon-only command with required accessible name	`action` `control` `palette` `stroke` `bend`	selected: covered default: covered hover: covered focus-visible: covered active: covered disabled: covered pending: covered	Component reference
`cem-menu-item`	Action	Command or navigation row inside menus and action lists	`action` `palette` `gap` `inset` `typography`	selected: covered default: covered hover: covered focus-visible: covered active: covered disabled: covered pending: covered	Component reference
`cem-theme-switch`	Input	Persistent theme scope with contextual sun/moon dropdown and selected contextual choices	`action` `zebra` `palette` `control` `stroke` `gap` `typography`	default: covered hover: covered focus-visible: covered disabled: covered loading: covered expanded: covered invalid: covered required: covered readonly: covered checked: covered indeterminate: covered	Component reference
`cem-fieldset`	Input	Native labeled form groups with linked help and inherited disabled state	`palette` `stroke` `bend` `gap` `inset` `typography`	default: covered hover: covered focus-visible: covered disabled: covered loading: covered expanded: covered invalid: covered required: covered readonly: covered checked: covered indeterminate: covered	Component reference
`cem-field`	Input	Generic labeled field wrapper for simple form controls	`palette` `stroke` `bend` `gap` `typography`	default: covered hover: covered focus-visible: covered disabled: covered loading: covered expanded: covered invalid: covered required: covered readonly: covered checked: covered indeterminate: covered	Component reference
`cem-text-field`	Input	Single-line text entry with label, help, and validation	`palette` `stroke` `bend` `gap` `typography`	default: covered hover: covered focus-visible: covered disabled: covered loading: covered expanded: covered invalid: covered required: covered readonly: covered checked: covered indeterminate: covered	Component reference
`cem-source-editor`	Input	Source documents with retained caret/undo, explicit source selection and optional native HTML/CEM-ML/CSS coloring	`palette` `stroke` `bend` `gap` `inset` `control` `typography`	default: covered hover: covered focus-visible: covered disabled: covered loading: covered expanded: covered invalid: covered required: covered readonly: covered checked: covered indeterminate: covered	Component reference
`cem-textarea`	Input	Multi-line text entry with label, help, and validation	`palette` `stroke` `bend` `gap` `typography`	default: covered hover: covered focus-visible: covered disabled: covered loading: covered expanded: covered invalid: covered required: covered readonly: covered checked: covered indeterminate: covered	Component reference
`cem-autocomplete`	Input	Form-associated editable combobox with declarative suggestions	`palette` `select` `stroke` `bend` `layering` `control` `typography`	default: covered hover: covered focus-visible: covered disabled: covered loading: covered expanded: covered invalid: covered required: covered readonly: covered checked: covered indeterminate: covered	Component reference
`cem-timepicker`	Input	Time-of-day choice popup with an authored native text-input form owner	`action` `palette` `select` `stroke` `bend` `layering` `coupling` `control` `typography`	default: covered hover: covered focus-visible: covered disabled: covered loading: covered expanded: covered invalid: covered required: covered readonly: covered checked: covered indeterminate: covered	Component reference
`cem-datepicker`	Input	Single-date modal calendar with an authored native text-input form owner	`action` `palette` `content` `select` `stroke` `bend` `layering` `coupling` `control` `typography`	default: covered hover: covered focus-visible: covered disabled: covered loading: covered expanded: covered invalid: covered required: covered readonly: covered checked: covered indeterminate: covered	Component reference
`cem-suggestions`	Input	Suggestions attached to an existing text field with one native editor/form owner	`palette` `select` `stroke` `bend` `gap` `typography`	default: covered hover: covered focus-visible: covered disabled: covered loading: covered expanded: covered invalid: covered required: covered readonly: covered checked: covered indeterminate: covered	Component reference
`cem-select`	Input	Form-associated rich single/multiple choice	`palette` `select` `stroke` `bend` `layering` `control` `typography`	default: covered hover: covered focus-visible: covered disabled: covered loading: covered expanded: covered invalid: covered required: covered readonly: covered checked: covered indeterminate: covered	Component reference
`cem-option`	Input	Canonical rich option payload for select and autocomplete	`typography`	default: covered hover: covered focus-visible: covered disabled: covered loading: covered expanded: covered invalid: covered required: covered readonly: covered checked: covered indeterminate: covered	Component reference
`cem-option-group`	Input	Labeled option grouping payload for select and autocomplete	`typography`	default: covered hover: covered focus-visible: covered disabled: covered loading: covered expanded: covered invalid: covered required: covered readonly: covered checked: covered indeterminate: covered	Component reference
`cem-checkbox`	Input	Binary consent, settings, and filters	`palette` `stroke` `control` `bend` `typography`	default: covered hover: covered focus-visible: covered disabled: covered loading: covered expanded: covered invalid: covered required: covered readonly: covered checked: covered indeterminate: covered	Component reference
`cem-radio`	Input	Mutually exclusive choice inside a radio group	`palette` `stroke` `control` `typography`	default: covered hover: covered focus-visible: covered disabled: covered loading: covered expanded: covered invalid: covered required: covered readonly: covered checked: covered indeterminate: covered	Component reference
`cem-switch`	Input	Immediate boolean setting toggle	`palette` `stroke` `action` `control` `bend`	default: covered hover: covered focus-visible: covered disabled: covered loading: covered expanded: covered invalid: covered required: covered readonly: covered checked: covered indeterminate: covered	Component reference
`cem-slider`	Input	Single-value or range input with native thumb/form ownership	`slider` `coupling` `stroke` `bend` `gap` `typography`	default: covered hover: covered focus-visible: covered disabled: covered loading: covered expanded: covered invalid: covered required: covered readonly: covered checked: covered indeterminate: covered	Component reference
`cem-surface`	Layout	Section surface for grouped content and workflow regions	`palette` `stroke` `bend` `gap` `inset`	default: covered loading: covered empty: covered	Component reference
`cem-text`	Content	Token-scoped inline text and typography variant wrapper	`typography` `palette`	default: covered hover: covered focus-visible: covered selected: covered loading: covered empty: covered checked: covered	Component reference
`cem-icon`	Content	Decorative or labeled icon text primitive	`action` `palette` `stroke` `typography`	default: covered hover: covered focus-visible: covered selected: covered loading: covered empty: covered checked: covered	Component reference
`cem-stack`	Layout	Single-axis layout container	`gap` `responsive`	default: covered loading: covered empty: covered	Component reference
`cem-grid`	Layout	Responsive grid layout container	`gap` `responsive`	default: covered loading: covered empty: covered	Component reference
`cem-accordion`	Layout	Stacked independent disclosure sections sharing available height	`palette` `typography` `stroke` `coupling` `control`	default: covered loading: covered empty: covered	Component reference
`cem-workspace`	Layout	Retained navigation, editor, preview and tools regions	`gap` `inset` `palette` `stroke` `bend` `typography` `responsive` `control` `coupling`	default: covered loading: covered empty: covered	Component reference
`cem-divider`	Layout	Semantic or decorative sibling-separation track	`separator` `stroke` `gap` `inset` `coupling`	default: covered loading: covered empty: covered	Component reference
`cem-list`	Content	Ordered or unordered collection, including empty state	`palette` `content` `stroke` `gap` `typography`	default: covered hover: covered focus-visible: covered selected: covered loading: covered empty: covered checked: covered	Component reference
`cem-card`	Content	Summary container for profile, asset, and message content	`palette` `stroke` `bend` `gap` `inset`	default: covered hover: covered focus-visible: covered selected: covered loading: covered empty: covered checked: covered	Component reference
`cem-expansion`	Content	Independent general-purpose disclosure panel	`action` `palette` `stroke` `bend` `gap` `inset` `coupling` `control` `typography`	default: covered hover: covered focus-visible: covered selected: covered loading: covered empty: covered checked: covered	Component reference
`cem-data-view`	Content	Bounded native typed-data table and structural projection	`palette` `stroke` `gap` `typography` `control`	default: covered hover: covered focus-visible: covered selected: covered loading: covered empty: covered checked: covered	Component reference
`cem-table`	Content	Structured data comparison and asset grids	`palette` `stroke` `gap` `typography` `control`	default: covered hover: covered focus-visible: covered selected: covered loading: covered empty: covered checked: covered	Component reference
`cem-sort-header`	Content	Sortable column action with application-owned row ordering	`action` `control` `stroke` `bend` `gap` `coupling` `typography`	default: covered hover: covered focus-visible: covered selected: covered loading: covered empty: covered checked: covered	Component reference
`cem-chip`	Content	Compact filter, token, or removable label	`palette` `content` `action` `stroke` `bend` `inset` `typography`	default: covered hover: covered focus-visible: covered selected: covered loading: covered empty: covered checked: covered	Component reference
`cem-badge`	Content	Status, count, priority, and severity labels	`palette` `bend` `inset` `typography`	default: covered hover: covered focus-visible: covered selected: covered loading: covered empty: covered checked: covered	Component reference
`cem-avatar`	Content	Person or organization visual identity	`palette` `bend` `typography`	default: covered hover: covered focus-visible: covered selected: covered loading: covered empty: covered checked: covered	Component reference
`cem-media-preview`	Content	Asset thumbnail, file, or object preview	`palette` `stroke` `bend` `gap` `typography`	default: covered hover: covered focus-visible: covered selected: covered loading: covered empty: covered checked: covered	Component reference
`cem-tree`	Content	Generic expandable hierarchy with composite focus and application-owned selection/loading	`palette` `content` `control` `stroke` `bend` `gap` `coupling` `typography`	default: covered hover: covered focus-visible: covered selected: covered loading: covered empty: covered checked: covered	Component reference
`cem-tree-item`	Content	Inert recursive hierarchy payload consumed by `cem-tree`	`typography`	default: covered hover: covered focus-visible: covered selected: covered loading: covered empty: covered checked: covered	Component reference
`cem-app-bar`	Navigation	Product title, global actions, and current context	`palette` `stroke` `gap` `inset` `typography` `control` `coupling`	default: covered hover: covered focus-visible: covered active: covered disabled: covered selected: covered expanded: covered	Component reference
`cem-dropdown`	Navigation	Triggered popup for arbitrary content and nested menus	`action` `palette` `stroke` `control` `bend` `typography`	default: covered hover: covered focus-visible: covered active: covered disabled: covered selected: covered expanded: covered	Component reference
`cem-menu`	Navigation	Persistent wrapping commands and links with optional nested composite menus	`action` `palette` `stroke` `gap` `inset` `typography`	default: covered hover: covered focus-visible: covered active: covered disabled: covered selected: covered expanded: covered	Component reference
`cem-nav`	Navigation	Labeled navigation region and item list	`palette` `navigation` `gap` `inset` `typography`	default: covered hover: covered focus-visible: covered active: covered disabled: covered selected: covered expanded: covered	Component reference
`cem-tabs`	Navigation	Labeled local-view switching with linked persistent panels	`palette` `navigation` `stroke` `bend` `gap` `coupling` `control` `typography`	default: covered hover: covered focus-visible: covered active: covered disabled: covered selected: covered expanded: covered	Component reference
`cem-tab`	Navigation	Inert labeled local-view payload consumed by `cem-tabs`	`typography`	default: covered hover: covered focus-visible: covered active: covered disabled: covered selected: covered expanded: covered	Component reference
`cem-stepper`	Navigation	Labeled linear or nonlinear workflow navigation with persistent panels	`palette` `navigation` `workflow` `stroke` `bend` `gap` `coupling` `control` `typography`	default: covered hover: covered focus-visible: covered active: covered disabled: covered selected: covered expanded: covered	Component reference
`cem-step`	Navigation	Inert labeled workflow-step payload consumed by `cem-stepper`	`typography`	default: covered hover: covered focus-visible: covered active: covered disabled: covered selected: covered expanded: covered	Component reference
`cem-paginator`	Navigation	Paged-content navigation with application-owned data	`action` `palette` `select` `control` `stroke` `bend` `gap` `inset` `typography`	default: covered hover: covered focus-visible: covered active: covered disabled: covered selected: covered expanded: covered	Component reference
`cem-recovery-status`	Feedback	Advisory recovery publications and enrollment; never a checkpoint eligibility or recovery authority proof	`palette` `gap` `inset` `stroke` `typography` `coupling`	default: covered focus-visible: covered loading: covered expanded: covered invalid: covered indeterminate: covered	Component reference
`cem-tooltip`	Feedback	Supplemental plain-text description for one authored native trigger	`palette` `stroke` `bend` `gap` `inset` `layering` `typography`	default: covered focus-visible: covered loading: covered expanded: covered invalid: covered indeterminate: covered	Component reference
`cem-dialog`	Feedback	Native nonmodal task, with explicit modal decision mode	`palette` `stroke` `bend` `gap` `inset`	default: covered focus-visible: covered loading: covered expanded: covered invalid: covered indeterminate: covered	Component reference
`cem-dialog-shell`	Feedback	Labeled dialog shell for focused light-DOM task content	`palette` `stroke` `bend` `gap` `inset`	default: covered focus-visible: covered loading: covered expanded: covered invalid: covered indeterminate: covered	Component reference
`cem-sheet`	Feedback	Non-modal or edge-attached task surface	`palette` `stroke` `bend` `gap` `inset`	default: covered focus-visible: covered loading: covered expanded: covered invalid: covered indeterminate: covered	Component reference
`cem-toast`	Feedback	Transient status message	`palette` `stroke` `inset` `typography`	default: covered focus-visible: covered loading: covered expanded: covered invalid: covered indeterminate: covered	Component reference
`cem-progress`	Feedback	Determinate and indeterminate progress	`progress`	default: covered focus-visible: covered loading: covered expanded: covered invalid: covered indeterminate: covered	Component reference
`cem-progress-spinner`	Feedback	Circular determinate and indeterminate progress	`progress` `timing`	default: covered focus-visible: covered loading: covered expanded: covered invalid: covered indeterminate: covered	Component reference
`cem-skeleton`	Feedback	Loading placeholder preserving layout	`palette` `control` `bend` `stroke`	default: covered focus-visible: covered loading: covered expanded: covered invalid: covered indeterminate: covered	Component reference
`cem-alert`	Feedback	Inline info, success, warning, and error feedback	`palette` `stroke` `inset` `typography`	default: covered focus-visible: covered loading: covered expanded: covered invalid: covered indeterminate: covered	Component reference

Storybook

Interactive stories remain a separately owned local build. Run yarn nx run cem-elements:storybook or build them with yarn nx run cem-elements:build-storybook.

Browse the separately owned Storybook source

Workflow example sources

auth-form.html — Auth form with action and input families.
registration.html — Registration form with required, invalid, readonly, loading, and progress states.
password-reset.html — Password-reset form with help/error relationships, loading submit action, and progress feedback.
profile-editor.html — Profile editor with avatar, editable fields, preferences, validation feedback, and save action.
asset-browser.html — Navigation plus content components for asset browsing.
discussion-thread.html — Discussion thread with message list, composer, status badge, toast, alert, and post action.
settings.html — Settings and feedback flow using switches, radio choices, dialog, sheet, toast, progress, skeleton, and alert.
feedback-settings.html — Legacy combined settings example retained as an alias for existing links.