Angular Material coverage comparison

This static projection maps the complete pinned Angular Material catalog to CEM component and behavior owners. Angular Material is a coverage benchmark, not a runtime dependency or API-compatibility target.

Browse the public component gallery or read the CEM component reference .

Pinned benchmark

Product
Angular Material
Version
v22.1.1
Commit
0b67c3c38141049657b1167479accc80e455d2bd
Captured
2026-08-10

Official catalog and pinned catalog source

Coverage summary

37 retained catalog rows: 18 covered and 19 partial.

Covered means the bounded CEM behavioral capability is owned. Partial means the mapping is useful but a named behavior or deliberately excluded framework surface remains visible in the notes.

Catalog mappings

Autocomplete

Coverage
covered
Mapping kind
component
CEM owners
  • cem-autocomplete
  • cem-option
  • cem-option-group
States
  • default
  • hover
  • focus-visible
  • disabled
  • loading
  • expanded
  • invalid
  • required
  • readonly
  • selected
  • active
Keyboard
  • Keep focus on the native text input; use ArrowUp/ArrowDown to move the active option, Home/End for native text editing unless popup navigation follows an arrow key, Enter to select, Escape or Alt+ArrowUp to close, Alt+ArrowDown to open, and Tab to close without trapping focus.
Accessibility
  • Expose a labeled native input with combobox, aria-autocomplete, truthful aria-expanded/aria-controls, and connected enabled aria-activedescendant ownership; expose the transient popup as a listbox with option and labeled-group semantics.
Evidence
  • packages/cem-components/src/components/cem-autocomplete/cem-autocomplete.stories.ts::EditableComboboxAndForms
  • packages/cem-components/src/components/cem-autocomplete/cem-autocomplete.stories.ts::KeyboardCommit
  • packages/cem-components/src/components/cem-autocomplete/cem-autocomplete.stories.ts::IndependentPaintAndGeometry
  • packages/cem-components/src/components/cem-autocomplete/cem-autocomplete.stories.ts::NativeAdapterAndPresence
  • tools/cem-components/verify-autocomplete-forced-colors.mjs
  • tools/cem-components/verify-package.mjs
  • packages/cem-components/docs/autocomplete-contract.md

Scope: cem-autocomplete owns the editable-combobox capability with free-form and require-selection value models, application/CEM-QL-owned filtering, live declarative suggestion replacement, string form values, canonical rich options, exact native input/change ordering, and tokenized normal/forced-colors states. It intentionally does not reproduce Angular directives, TypeScript display callbacks, object identity, arbitrary overlay origins, or an overlay-service API.

Badge

Coverage
partial
Mapping kind
component
CEM owners
  • cem-badge
States
  • default
  • tone
Keyboard
  • No component-owned keyboard interaction; the standalone status label is not focusable.
Accessibility
  • Visible status text remains in the accessibility tree as ordinary text.
Evidence
  • packages/cem-components/src/components/cem-list/cem-list.stories.ts::ContentFamily
  • packages/cem-components/src/components/cem-badge/cem-badge.stories.ts::Semantics

Scope: cem-badge covers a standalone status, count, priority, or severity label. It does not attach a positioned badge to another host, toggle badge visibility, or project an aria-describedby description onto that host.

Bottom Sheet

Coverage
partial
Mapping kind
component
CEM owners
  • cem-sheet
States
  • default
  • expanded
Keyboard
  • Authored descendants retain native keyboard behavior; the sheet itself is focus-neutral and application-controlled.
Accessibility
  • Expose a labeled non-modal region without taking focus or creating a modal boundary.
Evidence
  • packages/cem-components/src/components/cem-sheet/cem-sheet.stories.ts::PersistentRegionAndNames
  • packages/cem-components/src/components/cem-sheet/cem-sheet.stories.ts::TransientFocusAndKeyboard

Scope: cem-sheet covers a declarative edge-attached surface and explicit visibility. It intentionally lacks the modal dialog semantics, Escape dismissal, focus trap/restoration, backdrop, and single-open overlay lifecycle of a Material bottom sheet.

Button

Coverage
partial
Mapping kind
component
CEM owners
  • cem-action
  • cem-icon-button
States
  • default
  • hover
  • focus-visible
  • active
  • disabled
  • loading
  • expanded
Keyboard
  • Use native Tab focus and Space/Enter button activation.
Accessibility
  • Render native buttons; require an accessible label for icon-only actions and preserve busy and disclosure state.
Evidence
  • packages/cem-components/src/components/cem-icon-button/cem-icon-button.stories.ts::AllAttributes
  • packages/cem-components/src/components/cem-icon-button/cem-icon-button.stories.ts::Hover
  • packages/cem-components/src/components/cem-menu-item/cem-menu-item.stories.ts::Active

Scope: Native text and icon commands are covered, and icon-button also supports legacy icon-link navigation and image/font icons. The row remains partial because FAB, mini-FAB, extended-FAB, general action anchors, and interactive-disabled variants are not implemented.

Button Toggle

Coverage
partial
Mapping kind
component
CEM owners
  • cem-chip
States
  • default
  • hover
  • focus-visible
  • active
  • checked
Keyboard
  • Use native Tab focus and Space/Enter activation on an individual checkable chip.
Accessibility
  • Expose an individual native button with aria-pressed while keeping passive chips non-interactive.
Evidence
  • packages/cem-components/src/components/cem-chip/cem-chip.stories.ts::CheckableAndPassive
  • packages/cem-components/src/components/cem-list/cem-list.stories.ts::KeyboardFocus

Scope: A checkable cem-chip covers a single on/off pressed button. It does not provide a labeled toggle group, exclusive radio-like selection, multiple group selection, orientation, form value, or disabled toggle contract.

Card

Coverage
covered
Mapping kind
component
CEM owners
  • cem-card
States
  • default
  • loading
Keyboard
  • No card-owned keyboard interaction; authored interactive descendants retain native behavior.
Accessibility
  • Expose a labeled section with a header and preserve authored descendant semantics.
Evidence
  • packages/cem-components/src/components/cem-list/cem-list.stories.ts::ContentFamily
  • packages/cem-components/src/components/cem-card/cem-card.stories.ts::BusyContent

Scope: cem-card covers the behavioral card capability as a semantic, composable content surface with title, body, and explicit busy state. Consumer Semantic Theme styling replaces Material appearances; no Angular API compatibility is claimed.

Checkbox

Coverage
covered
Mapping kind
component
CEM owners
  • cem-checkbox
States
  • default
  • hover
  • focus-visible
  • disabled
  • loading
  • invalid
  • required
  • checked
  • indeterminate
Keyboard
  • Use native Tab focus and Space toggling.
Accessibility
  • Render a labeled native checkbox and expose checked, mixed, required, invalid, disabled, and busy semantics.
Evidence
  • packages/cem-components/src/components/cem-checkbox/cem-checkbox.stories.ts::NamesAndPresence
  • packages/cem-components/src/components/cem-checkbox/cem-checkbox.stories.ts::NativeFormsWorkerAndFallback
  • packages/cem-components/src/components/cem-checkbox/cem-checkbox.stories.ts::NativeKeyboardAndIndicators
  • packages/cem-components/src/components/cem-checkbox/cem-checkbox.stories.ts::MixedStateAndNativeEvents
  • packages/cem-components/src/components/cem-checkbox/cem-checkbox.stories.ts::ParentSliceBinding

Scope: cem-checkbox owns the native checkbox interaction and semantic states. Theme and event APIs differ from Angular Material without reducing the checkbox capability.

Chips

Coverage
partial
Mapping kind
component
CEM owners
  • cem-chip
States
  • default
  • hover
  • focus-visible
  • active
  • checked
Keyboard
  • Individual checkable chips use native Space/Enter activation; no roving arrow-key set behavior exists.
Accessibility
  • Render passive chips as non-focusable text and checkable chips as labeled aria-pressed buttons.
Evidence
  • packages/cem-components/src/components/cem-list/cem-list.stories.ts::ContentFamily
  • packages/cem-components/src/components/cem-chip/cem-chip.stories.ts::CheckableAndPassive
  • packages/cem-components/src/components/cem-list/cem-list.stories.ts::HoverOwners

Scope: cem-chip covers static and individual checkable chips. It lacks chip-set/listbox/grid ownership, single/multiple group selection, arrow navigation, input entry, editing, removal actions, orientation, and disabled interaction.

Core

Coverage
partial
Mapping kind
behavior
CEM owners
  • behavior:consumer-semantic-theme-core
States
  • default
  • hover
  • focus-visible
  • active
  • disabled
  • selected
  • forced-colors
Keyboard
  • Cross-cutting styles preserve native keyboard ownership and add visible keyboard focus without synthetic focus movement.
Accessibility
  • Tokenized contrast, focus-visible, disabled, and forced-colors behavior is shared across public primitives.
Evidence
  • packages/cem-components/src/styles.css
  • packages/cem-components/src/components/cem-field/cem-field.stories.ts::InteractionPaint

Scope: Consumer Semantic Theme styles provide the shared component foundation. The row is partial because cem-components has no single public equivalent for Angular Material Core services such as overlay/elevation infrastructure and general-purpose host directives.

Datepicker

Coverage
partial
Mapping kind
component
CEM owners
  • cem-datepicker
States
  • default
  • hover
  • focus-visible
  • expanded
  • selected
  • current
  • disabled
  • required
  • invalid
Keyboard
  • Keep the native text input as the closed focus owner; ArrowDown or Alt+ArrowDown opens the modal calendar, the roving grid uses arrows, Home/End, PageUp/PageDown, Shift/Alt+PageUp/PageDown, Enter/Space drafts selection, Escape cancels, and native Apply commits.
Accessibility
  • Connect one labeled native text input and optional native toggle to a modal native dialog containing a labeled grid, localized column headers, one roving day owner, exact selected/current/disabled semantics, and input-owned validation.
Evidence
  • packages/cem-components/src/components/cem-datepicker/cem-datepicker.stories.ts::NativeOwners
  • packages/cem-components/src/components/cem-datepicker/cem-datepicker.stories.ts::ValueValidationAndReset
  • packages/cem-components/src/components/cem-datepicker/cem-datepicker.stories.ts::RovingCalendarKeyboard
  • packages/cem-components/src/components/cem-datepicker/cem-datepicker.stories.ts::DraftAndDismissal
  • packages/cem-components/src/components/cem-datepicker/cem-datepicker.stories.ts::DisabledAndMalformedOwners
  • packages/cem-components/src/components/cem-datepicker/cem-datepicker.stories.ts::IndependentPaintAndGeometry
  • packages/cem-components/src/components/cem-datepicker/cem-datepicker.stories.ts::LiveBoundsAndExpanded
  • tools/cem-components/verify-datepicker-forced-colors.mjs
  • tools/cem-components/verify-package.mjs
  • packages/cem-components/docs/datepicker-contract.md

Scope: cem-datepicker covers one canonical Gregorian YYYY-MM-DD value, authored native text-input form ownership, locale-aware month/day presentation, bounded validation, a six-week modal calendar grid, explicit draft/Apply commit, native modal focus containment/restoration, tokenized current/selected/hover/focus/disabled coexistence, and top-layer forced-colors behavior. The catalog row remains partial because date ranges, date adapters and filters, alternate year/multi-year views, date-time integration, timezone/Date/Temporal values, and locale-specific text parsing are intentionally outside this bounded single-date contract.

Dialog

Coverage
covered
Mapping kind
component
CEM owners
  • cem-dialog
  • cem-dialog-shell
States
  • default
  • expanded
  • focus-visible
Keyboard
  • Native modal mode owns containment; both modes use cancelable close and eligible focus restoration.
Accessibility
  • One native dialog with visible heading naming; explicit ARIA names take precedence. Nonmodal by default, with explicit modal mode.
Evidence
  • packages/cem-components/src/components/cem-dialog/cem-dialog.stories.ts::NamesAndNonmodalLifecycle
  • packages/cem-components/src/components/cem-dialog/cem-dialog.stories.ts::ModalFormsAndCancel
  • packages/cem-components/src/components/cem-dialog/cem-dialog.stories.ts::KeyboardFallbackFocus
  • packages/cem-components/src/components/cem-dialog-shell/cem-dialog-shell.stories.ts::NativeAlias

Scope: The CEM mapping uses declarative markup and the native dialog lifecycle rather than an Angular service. Modal focus, dismissal, restoration, labeling, and authored content/actions are behaviorally covered.

Divider

Coverage
covered
Mapping kind
component
CEM owners
  • cem-divider
States
  • default
  • inset
  • vertical
Keyboard
  • The divider is non-focusable and owns no keyboard interaction or activation.
Accessibility
  • Expose a non-focusable separator with exact horizontal/vertical orientation when meaningful; decorative use removes the separator role and orientation and sets aria-hidden=true.
Evidence
  • packages/cem-components/src/components/cem-divider/cem-divider.stories.ts::Semantics
  • packages/cem-components/src/components/cem-divider/cem-divider.stories.ts::TokenGeometry
  • packages/cem-components/src/components/cem-divider/cem-divider.stories.ts::PointerNeutral
  • tools/cem-components/verify-divider-forced-colors.mjs
  • packages/cem-components/docs/divider-contract.md

Scope: cem-divider covers horizontal, vertical, inset, semantic, and decorative sibling separation as a complete tokenized line-plus-margins track. It intentionally has no content, focus, keyboard, state, or event lifecycle and does not substitute for document headings, list/table structure, boundaries around one component, or focus/selection indicators.

Expansion Panel

Coverage
covered
Mapping kind
component
CEM owners
  • cem-expansion
States
  • default
  • hover
  • focus-visible
  • expanded
  • disabled
Keyboard
  • Tab to the header control; Space/Enter toggles its panel while disabled headers suppress activation.
Accessibility
  • Associate a button-like header and controlled content with aria-expanded and aria-controls.
Evidence
  • packages/cem-components/src/components/cem-expansion/cem-expansion.stories.ts::NativeOwners
  • packages/cem-components/src/components/cem-expansion/cem-expansion.stories.ts::NativeActivation
  • packages/cem-components/src/components/cem-expansion/cem-expansion.stories.ts::DisabledAndAuthorControl
  • packages/cem-components/src/components/cem-expansion/cem-expansion.stories.ts::TransientPaint
  • tools/cem-components/verify-expansion-forced-colors.mjs
  • packages/cem-components/docs/expansion-contract.md

Scope: cem-expansion owns one independent general-purpose disclosure panel with a native header button, live expanded host state, persistent controlled-panel references, disabled suppression, and tokenized normal/forced-color states. Multiple siblings remain independent; exclusive single-open accordion-group coordination is intentionally outside this parity slice, and navigation-specific cem-nav disclosure remains a separate owner.

Form Field

Coverage
partial
Mapping kind
component
CEM owners
  • cem-field
  • cem-text-field
  • cem-textarea
  • cem-select
States
  • default
  • hover
  • focus-visible
  • disabled
  • loading
  • expanded
  • invalid
  • required
  • readonly
Keyboard
  • Delegate editing, selection, focus, and disclosure keys to the owned native or ARIA control.
Accessibility
  • Provide programmatic labels and retain help, description, validation, and error relationships.
Evidence
  • packages/cem-components/src/components/cem-field/cem-field.stories.ts::AllAttributes
  • packages/cem-components/src/components/cem-field/cem-field.stories.ts::InteractionPaint
  • packages/cem-components/src/components/cem-field/cem-field.stories.ts::RequiredMarker
  • packages/cem-components/src/components/cem-select/cem-select.stories.ts::export const FormAndKeyboard

Scope: CEM field owners cover labeled controls, help, error references, validation, and semantic indicators. Prefix/suffix ownership, projected hint/error regions, floating-label policy, and subscript sizing are not defined as a general form-field composition contract.

Grid List

Coverage
partial
Mapping kind
component
CEM owners
  • cem-grid
States
  • default
Keyboard
  • No grid-owned keyboard interaction; authored descendants retain their semantics.
Accessibility
  • Provide layout without imposing list, grid, or tile roles on authored content.
Evidence
  • packages/cem-components/src/components/cem-nav/cem-nav.stories.ts::LayoutComposition

Scope: cem-grid covers responsive layout columns and gaps. It does not own grid-list tiles, row height, colspan/rowspan, header/footer regions, or grid-list semantics.

Icon

Coverage
partial
Mapping kind
component
CEM owners
  • cem-icon
States
  • default
  • decorative
  • labeled
Keyboard
  • Icons are not independently keyboard interactive; an owning control supplies interaction.
Accessibility
  • Hide decorative icons and expose labeled icons with role=img and an accessible name.
Evidence
  • packages/cem-components/src/components/cem-icon/cem-icon.stories.ts::SourcesAndLiveAttributes
  • packages/cem-components/src/components/cem-icon/cem-icon.stories.ts::ContentAndVisibility
  • packages/cem-components/src/components/cem-icon/cem-icon.stories.ts::ThemeSizes

Scope: Canonical cem-icon supports Unicode/emoji, image URLs, Font Awesome classes, Material Icons ligatures, a name alias, three theme-owned sizes, and row/column content. Decorative/labeled semantics are covered. An SVG registry, namespaces, and inline SVG sanitization remain outside this contract.

Input

Coverage
covered
Mapping kind
component
CEM owners
  • cem-field
  • cem-text-field
  • cem-textarea
States
  • default
  • hover
  • focus-visible
  • disabled
  • loading
  • invalid
  • required
  • readonly
Keyboard
  • Preserve native text editing, selection, Tab focus, and type-specific input behavior.
Accessibility
  • Render labeled native input and textarea controls with help, description, error, validation, required, readonly, disabled, and busy semantics.
Evidence
  • packages/cem-components/src/components/cem-field/cem-field.stories.ts::AllAttributes
  • packages/cem-components/src/components/cem-text-field/cem-text-field.stories.ts::InteractionPaint
  • packages/cem-components/src/components/cem-textarea/cem-textarea.stories.ts::NativeConstraintsAndFormOwnership
  • packages/cem-components/src/components/cem-textarea/cem-textarea.stories.ts::EnterEditsWithoutSubmitting
  • packages/cem-components/src/components/cem-textarea/cem-textarea.stories.ts::InteractionPaint

Scope: The behavioral text-input and textarea capability is covered through native controls. Form-field composition breadth is tracked separately and remains partial.

List

Coverage
partial
Mapping kind
component
CEM owners
  • cem-list
States
  • default
  • hover
  • focus-visible
  • selected
  • disabled
  • empty
Keyboard
  • Passive lists have no container interaction; selectable mode delegates focus, arrow navigation, and selection to a native select listbox.
Accessibility
  • Render a labeled native list for passive content or a labeled single-select native listbox with disabled options.
Evidence
  • packages/cem-components/src/components/cem-list/cem-list.stories.ts::ContentFamily
  • packages/cem-components/src/components/cem-list/cem-list.stories.ts::SelectionAndPassive
  • packages/cem-components/src/components/cem-list/cem-list.stories.ts::PassiveEmptyStates

Scope: Passive and native single-select list modes are covered. Material action lists, navigation lists, multi-selection lists, subheaders, multi-line metadata, and dedicated list-item action ownership remain absent or live in separate CEM components.

Menu

Coverage
partial
Mapping kind
component
CEM owners
  • cem-menu-item
States
  • default
  • hover
  • focus-visible
  • active
  • disabled
  • selected
  • expanded
Keyboard
  • Individual menu items use native button activation; no menu-level ArrowUp/ArrowDown, Home/End, Escape, or typeahead controller exists.
Accessibility
  • Expose labeled native buttons with role=menuitem, disabled state, and disclosure state.
Evidence
  • packages/cem-components/src/components/cem-icon-button/cem-icon-button.stories.ts::AllAttributes
  • packages/cem-components/src/components/cem-menu-item/cem-menu-item.stories.ts::AllAttributes
  • packages/cem-components/src/components/cem-menu-item/cem-menu-item.stories.ts::Active

Scope: cem-menu-item covers command-row semantics only. There is no public menu container, trigger/popup relationship, focus controller, dismissal lifecycle, positioning, nested menu, or menu selection group.

Paginator

Coverage
covered
Mapping kind
component
CEM owners
  • cem-paginator
States
  • default
  • hover
  • focus-visible
  • active
  • disabled
  • page
  • page-size
  • forced-colors
Keyboard
  • Use native Tab focus for the page-size select and available actions, native select keyboard behavior, and native Enter/Space button activation; a focused action that becomes a page boundary retains focus while leaving subsequent sequential navigation.
Accessibility
  • Expose a labeled pagination navigation landmark, labeled native page-size select and actions, focus-stable aria-disabled page boundaries, and one atomic polite current-range status.
Evidence
  • packages/cem-components/src/components/cem-paginator/cem-paginator.stories.ts::NativeOwners
  • packages/cem-components/src/components/cem-paginator/cem-paginator.stories.ts::NativeActivation
  • packages/cem-components/src/components/cem-paginator/cem-paginator.stories.ts::PageSizeChange
  • packages/cem-components/src/components/cem-paginator/cem-paginator.stories.ts::AuthorControl
  • packages/cem-components/src/components/cem-paginator/cem-paginator.stories.ts::TransientPaint
  • packages/cem-components/src/components/cem-paginator/cem-paginator.stories.ts::ApplicationDataOwnership
  • tools/cem-components/verify-paginator-forced-colors.mjs
  • tools/cem-components/verify-package.mjs
  • packages/cem-components/docs/paginator-contract.md

Scope: cem-paginator owns labeled paged-content navigation with a zero-based normalized page model, localizable labels, optional first/last and page-size controls, first-visible-item preservation on page-size changes, one serializable cem-page request event, focus-stable boundary suppression, and tokenized normal/forced-color states. Applications retain data loading, row/item rendering, and result-announcement ownership; Angular dependency-injection defaults and TypeScript paginator APIs are intentionally not reproduced.

Progress Bar

Coverage
partial
Mapping kind
component
CEM owners
  • cem-progress
States
  • default
  • determinate
  • indeterminate
Keyboard
  • No keyboard interaction is required for the read-only progress indicator.
Accessibility
  • Render a labeled native progress element; expose value and max when determinate and omit value when indeterminate.
Evidence
  • packages/cem-components/src/components/cem-toast/cem-toast.stories.ts::Semantics
  • packages/cem-components/src/components/cem-list/cem-list.stories.ts::PassiveEmptyStates

Scope: cem-progress behaviorally covers a linear determinate or indeterminate progress bar through the native progress element. It has no secondary buffer value or buffer-mode rendering contract; query-specific animation is also not owned.

Progress Spinner

Coverage
covered
Mapping kind
component
CEM owners
  • cem-progress-spinner
States
  • default
  • determinate
  • indeterminate
  • reduced-motion
  • forced-colors
Keyboard
  • The read-only spinner has no tab stop or keyboard interaction; focus skips it and remains on surrounding authored controls.
Accessibility
  • Expose one labeled progressbar; determinate mode publishes normalized min/max/now values, indeterminate mode omits aria-valuenow, and the circular SVG is hidden from assistive technology.
Evidence
  • packages/cem-components/src/components/cem-progress-spinner/cem-progress-spinner.stories.ts::Semantics
  • packages/cem-components/src/components/cem-progress-spinner/cem-progress-spinner.stories.ts::Normalization
  • packages/cem-components/src/components/cem-progress-spinner/cem-progress-spinner.stories.ts::RetainedGeometry
  • packages/cem-components/src/components/cem-progress-spinner/cem-progress-spinner.stories.ts::NativeInputNeutrality
  • tools/cem-components/verify-progress-spinner-forced-colors.mjs
  • tools/cem-components/verify-package.mjs
  • packages/cem-components/docs/progress-spinner-contract.md

Scope: cem-progress-spinner owns circular determinate/indeterminate progress without changing the linear cem-progress owner. Value presence selects mode, numeric semantics are normalized without rewriting author input, the SVG owner remains stable, automatic indeterminate motion stops under reduced motion, and generated D0/D2c/D7 tokens cover normal and forced colors. It intentionally does not reproduce Angular directives, dependency-injection defaults, or public per-instance diameter, stroke-width, palette, and animation APIs.

Radio Button

Coverage
partial
Mapping kind
component
CEM owners
  • cem-radio
States
  • default
  • hover
  • focus-visible
  • disabled
  • loading
  • invalid
  • required
  • checked
Keyboard
  • Individual radios use native focus and activation; same-name native radio grouping is available but group arrow-key behavior is not asserted by the product harness.
Accessibility
  • Render a labeled native radio with checked, disabled, required, invalid, and busy semantics.
Evidence
  • packages/cem-components/src/components/cem-radio/cem-radio.stories.ts::NamesAndPresence
  • packages/cem-components/src/components/cem-radio/cem-radio.stories.ts::NativeFormsWorkerAndFallback
  • packages/cem-components/src/components/cem-radio/cem-radio.stories.ts::NativeKeyboardAndIndicators
  • packages/cem-components/src/components/cem-radio/cem-radio.stories.ts::NativeRadioPeers

Scope: The individual native radio is covered. The row remains partial until a public labeled radio-group boundary and executable group selection and arrow-key contract exist.

Ripples

Coverage
partial
Mapping kind
behavior
CEM owners
  • behavior:active-interaction-feedback
States
  • hover
  • focus-visible
  • active
  • disabled
  • forced-colors
Keyboard
  • Paint held active feedback for trusted pointer activation and native Space/Enter activation without synthesizing events or mutating component state.
Accessibility
  • Keep visible focus independent from active paint, preserve readable contrast, suppress disabled activation, and use system colors in forced-colors mode.
Evidence
  • packages/cem-components/src/components/cem-menu-item/cem-menu-item.stories.ts::Active
  • packages/cem-components/src/components/cem-nav/cem-nav.stories.ts::NativeActive

Scope: CEM provides tokenized bounded active feedback rather than a radial pointer-origin ripple. The behavior is partial because it is scoped to accepted interactive owners and has no arbitrary-host ripple directive, radius/origin animation, or programmatic launch API.

Select

Coverage
covered
Mapping kind
component
CEM owners
  • cem-select
  • cem-option
  • cem-option-group
States
  • default
  • hover
  • focus-visible
  • disabled
  • loading
  • expanded
  • invalid
  • required
  • selected
  • multiple
Keyboard
  • Support ArrowUp/ArrowDown, Home/End, Enter, Space, Escape, and Tab commit behavior across dropdown, listbox, and multiple-listbox modes.
Accessibility
  • Expose labeled combobox/listbox, option and group semantics, aria-expanded, aria-controls, aria-activedescendant, disabled/selected options, and form-associated values.
Evidence
  • packages/cem-components/src/components/cem-select/cem-select.stories.ts::export const Default
  • packages/cem-components/src/components/cem-select/cem-select.stories.ts::export const FormAndKeyboard
  • packages/cem-components/src/components/cem-select/cem-select.stories.ts::export const MultipleListbox
  • packages/cem-components/docs/select-contract.md

Scope: CEM owns rich single and multiple selection, option grouping, disabled options, keyboard behavior, validation, form submission/reset, and legacy native-option migration. The declarative CEM API intentionally differs from Angular Material.

Sidenav

Coverage
partial
Mapping kind
component
CEM owners
  • cem-nav
  • cem-sheet
States
  • default
  • hover
  • focus-visible
  • active
  • disabled
  • selected
  • expanded
Keyboard
  • Navigation links/buttons retain native keyboard behavior and an optional disclosure button toggles navigation content; the sheet remains focus-neutral.
Accessibility
  • Expose a labeled navigation landmark and a separately labeled edge-region surface.
Evidence
  • packages/cem-components/src/components/cem-nav/cem-nav.stories.ts::LandmarksAndTabs
  • packages/cem-components/src/components/cem-nav/cem-nav.stories.ts::DisclosureAndPassive
  • packages/cem-components/src/components/cem-sheet/cem-sheet.stories.ts::TransientFocusAndKeyboard

Scope: cem-nav plus cem-sheet can compose an edge navigation surface. There is no integrated sidenav container, start/end drawer ownership, over/push/side modes, backdrop dismissal, responsive transition contract, or modal focus policy.

Slide Toggle

Coverage
covered
Mapping kind
component
CEM owners
  • cem-switch
States
  • default
  • hover
  • focus-visible
  • disabled
  • loading
  • invalid
  • required
  • checked
Keyboard
  • Use native Tab focus and Space toggling.
Accessibility
  • Render a labeled native checkbox with role=switch and expose checked, disabled, required, invalid, and busy semantics.
Evidence
  • packages/cem-components/src/components/cem-switch/cem-switch.stories.ts::NamesAndPresence
  • packages/cem-components/src/components/cem-switch/cem-switch.stories.ts::NativeFormsWorkerAndFallback
  • packages/cem-components/src/components/cem-switch/cem-switch.stories.ts::NativeKeyboardAndIndicators

Scope: cem-switch covers the boolean switch capability with native form and keyboard behavior. Consumer Semantic Theme styling replaces the Material slide-toggle appearance.

Slider

Coverage
covered
Mapping kind
component
CEM owners
  • cem-slider
States
  • default
  • hover
  • focus-visible
  • active
  • disabled
  • min
  • max
  • step
  • range
Keyboard
  • Retain native horizontal range-input Arrow, PageUp/PageDown, Home, and End behavior for single/start/end thumbs while clamping range thumbs so start never exceeds end.
Accessibility
  • Keep each authored native range input as the focus, slider-value, bounds, step, accessible-name, event, and form owner; require distinct names for start/end thumbs and hide generated track, ticks, and labels.
Evidence
  • packages/cem-components/src/components/cem-slider/cem-slider.stories.ts::NativeOwners
  • packages/cem-components/src/components/cem-slider/cem-slider.stories.ts::NativeKeyboardAndRange
  • packages/cem-components/src/components/cem-slider/cem-slider.stories.ts::FormsAndIdentity
  • packages/cem-components/src/components/cem-slider/cem-slider.stories.ts::PointerStateAndGeometry
  • packages/cem-components/src/components/cem-slider/cem-slider.stories.ts::DisabledOwners
  • packages/cem-components/src/components/cem-slider/cem-slider.stories.ts::VisualValues
  • tools/cem-components/verify-slider-forced-colors.mjs
  • tools/cem-components/verify-package.mjs
  • packages/cem-components/docs/slider-contract.md

Scope: cem-slider owns one horizontal single-value or range visual while exact authored native range inputs retain pointer, keyboard, focus, value, event, accessible-name, and independent form serialization ownership. Parent min/max/step/disabled state is normalized and projected, range thumbs cannot cross, and optional discrete labels/ticks are hidden visuals. Canonical D0 slider colors and D2c track/thumb geometry cover normal/forced-color styling without a component CSS exception. Angular directives, dependency-injection defaults, vertical sliders, tuple form values, and JavaScript displayWith callbacks are intentionally not reproduced.

Snackbar

Coverage
partial
Mapping kind
component
CEM owners
  • cem-toast
States
  • default
Keyboard
  • The status container has no keyboard owner; authored action descendants retain native behavior.
Accessibility
  • Announce visible message content through role=status and aria-live=polite.
Evidence
  • packages/cem-components/src/components/cem-toast/cem-toast.stories.ts::Semantics
  • packages/cem-components/src/components/cem-list/cem-list.stories.ts::PassiveEmptyStates

Scope: cem-toast covers polite transient-status semantics. It lacks an open/dismiss lifecycle, duration and queue policy, single action/dismiss ownership, announcement politeness configuration, overlay positioning, and focus-restoration behavior.

Sort Header

Coverage
covered
Mapping kind
component
CEM owners
  • cem-sort-header
States
  • default
  • hover
  • focus-visible
  • active
  • disabled
  • ascending
  • descending
  • none
Keyboard
  • Use native Tab focus and Space/Enter button activation to cycle none, ascending, descending, and none exactly once per activation.
Accessibility
  • Expose a native action inside a columnheader, conditionally apply aria-sort only for ascending/descending state, provide a Sort by action name, and emit cem-sort so the application can reorder rows and announce the localized result.
Evidence
  • packages/cem-components/src/components/cem-sort-header/cem-sort-header.stories.ts::NativeOwners
  • packages/cem-components/src/components/cem-sort-header/cem-sort-header.stories.ts::NativeCycle
  • packages/cem-components/src/components/cem-sort-header/cem-sort-header.stories.ts::AuthorControl
  • packages/cem-components/src/components/cem-sort-header/cem-sort-header.stories.ts::TransientPaint
  • tools/cem-components/verify-sort-header-forced-colors.mjs
  • tools/cem-components/verify-package.mjs
  • packages/cem-components/docs/sort-header-contract.md

Scope: cem-sort-header owns sortable-column semantics and native activation while cem-table remains passive. User activation cycles a fixed direction sequence, clears active peers only in the nearest table, and emits serializable cem-sort detail; applications retain row-order and localized live-announcement ownership. Existing contextual action, D1/D2/D2c/D3/D5/D6 tokens cover normal and forced-color paint without a CSS exception. It intentionally does not reproduce Angular directives, dependency-injection defaults, configurable start/clear policies, or table data-source APIs.

Stepper

Coverage
covered
Mapping kind
component
CEM owners
  • cem-stepper
  • cem-step
States
  • default
  • focus-visible
  • selected
  • completed
  • editable
  • optional
  • invalid
  • disabled
Keyboard
  • Use roving Left/Right in horizontal orientation or Up/Down in vertical orientation, wrapping and skipping native-disabled steps; Home/End reach the first/last enabled header, while native Enter/Space activation obeys linear and editable eligibility.
Accessibility
  • Expose a labeled ordered workflow, exact native step-header buttons with aria-current=step, stable reciprocal header/panel references, visible completion/optional/error copy, native disabled suppression, and focusable aria-disabled eligibility without substituting generic tab roles.
Evidence
  • packages/cem-components/src/components/cem-stepper/cem-stepper.stories.ts::NativeOwners
  • packages/cem-components/src/components/cem-stepper/cem-stepper.stories.ts::NativeActivation
  • packages/cem-components/src/components/cem-stepper/cem-stepper.stories.ts::RovingFocus
  • packages/cem-components/src/components/cem-stepper/cem-stepper.stories.ts::ApplicationWorkflowFacts
  • packages/cem-components/src/components/cem-stepper/cem-stepper.stories.ts::ProgrammaticAndDisabled
  • packages/cem-components/src/components/cem-stepper/cem-stepper.stories.ts::StatePaintAndGeometry
  • tools/cem-components/verify-stepper-forced-colors.mjs
  • tools/cem-components/verify-package.mjs
  • packages/cem-components/docs/stepper-contract.md

Scope: cem-stepper now owns the workflow capability separately from cem-tabs: strict inert cem-step payloads, application-authored completion/invalid facts, linear/nonlinear eligibility, optional steps, editable return, horizontal/vertical roving focus, stable linked panels, silent programmatic selection, one serializable activation event, and tokenized normal/forced-colors states. Angular form directives, dependency injection, custom icon templates, and animation APIs are framework APIs rather than missing behavioral ownership.

Table

Coverage
partial
Mapping kind
component
CEM owners
  • cem-table
States
  • default
  • empty
Keyboard
  • The passive table has no component-owned keyboard interaction; authored interactive cells retain native behavior.
Accessibility
  • Expose a labeled role=table wrapper and preserve authored row, columnheader, and cell roles.
Evidence
  • packages/cem-components/src/components/cem-list/cem-list.stories.ts::ContentFamily
  • packages/cem-components/src/components/cem-list/cem-list.stories.ts::PassiveEmptyStates

Scope: cem-table covers a semantic structured-data wrapper and explicit empty fallback; sortable columns may compose cem-sort-header and paged views may compose cem-paginator without giving the table data ownership. It still lacks data/column/row definitions, rendering updates, sticky regions, data sources, filtering, table-owned pagination integration, grid/treegrid focus behavior, and table-owned selection.

Tabs

Coverage
covered
Mapping kind
component
CEM owners
  • cem-tabs
  • cem-tab
States
  • default
  • hover
  • focus-visible
  • active
  • disabled
  • selected
Keyboard
  • Use manual activation: roving Left/Right in horizontal orientation or Up/Down in vertical orientation wraps and skips native-disabled tabs; Home/End reach the first/last enabled tab, Enter/Space selects, and the other-axis arrows remain native.
Accessibility
  • Expose one labeled tablist, exact native tab buttons, stable reciprocal tab/tabpanel references, one selected enabled tab and visible focusable panel, native disabled suppression, and focus recovery before a selected panel is hidden.
Evidence
  • packages/cem-components/src/components/cem-tabs/cem-tabs.stories.ts::NativeOwners
  • packages/cem-components/src/components/cem-tabs/cem-tabs.stories.ts::NativeActivation
  • packages/cem-components/src/components/cem-tabs/cem-tabs.stories.ts::ManualRovingFocus
  • packages/cem-components/src/components/cem-tabs/cem-tabs.stories.ts::ProgrammaticSelectionAndRecovery
  • packages/cem-components/src/components/cem-tabs/cem-tabs.stories.ts::MalformedAuthoring
  • packages/cem-components/src/components/cem-nav/cem-nav.stories.ts::HoverOwners
  • packages/cem-components/src/components/cem-nav/cem-nav.stories.ts::NativeActive
  • tools/cem-components/verify-tabs-forced-colors.mjs
  • tools/cem-components/verify-package.mjs
  • packages/cem-components/docs/tabs-contract.md

Scope: cem-tabs owns local-view switching through strict inert cem-tab payloads, stable linked tabpanels, horizontal/vertical roving focus, deliberate manual activation, silent programmatic selection, one serializable activation event, native disabled behavior, focus-safe dynamic removal/disable recovery, and tokenized normal/forced-color states. Routing, navigation links, lazy loading, label pagination, deletion, popup behavior, and arbitrary in-place payload reordering remain outside the v1 owner.

Timepicker

Coverage
covered
Mapping kind
component
CEM owners
  • cem-timepicker
  • cem-option
States
  • default
  • hover
  • focus-visible
  • expanded
  • selected
  • disabled
  • required
  • invalid
Keyboard
  • Keep focus on the native text input; ArrowUp/ArrowDown open and move the active enabled time, Enter commits, Escape closes without changing value, and Tab closes without trapping focus while other text-editing keys remain native.
Accessibility
  • Connect a natively labeled text-input combobox and optional native toggle to a stable listbox with active-descendant, selected, disabled, expanded, required, and invalid semantics.
Evidence
  • packages/cem-components/src/components/cem-timepicker/cem-timepicker.stories.ts::NativeOwners
  • packages/cem-components/src/components/cem-timepicker/cem-timepicker.stories.ts::ValueValidationAndReset
  • packages/cem-components/src/components/cem-timepicker/cem-timepicker.stories.ts::KeyboardNavigation
  • packages/cem-components/src/components/cem-timepicker/cem-timepicker.stories.ts::PointerCommit
  • packages/cem-components/src/components/cem-timepicker/cem-timepicker.stories.ts::DisabledAndMalformed
  • packages/cem-components/src/components/cem-timepicker/cem-timepicker.stories.ts::StatePaintAndGeometry
  • packages/cem-components/src/components/cem-timepicker/cem-timepicker.stories.ts::LiveBoundsAndExpansion
  • tools/cem-components/verify-timepicker-forced-colors.mjs
  • tools/cem-components/verify-package.mjs
  • packages/cem-components/docs/timepicker-contract.md

Scope: cem-timepicker owns a canonical HH:mm time-of-day picker around one authored native text-input form owner and an optional native toggle. It supports generated intervals or direct cem-option choices, range and syntax validation, exact input/change commit ordering, input-retained listbox focus, Popover/CSS-anchor presentation, and tokenized normal/forced-color states. Date values, time zones, seconds, locale adapters, and datepicker integration remain deliberately outside this string time-of-day capability.

Toolbar

Coverage
partial
Mapping kind
component
CEM owners
  • cem-app-bar
States
  • default
Keyboard
  • The container has no keyboard behavior; authored action descendants retain native focus and activation.
Accessibility
  • Expose a labeled application header with role=banner and preserve authored action semantics.
Evidence
  • packages/cem-components/src/components/cem-nav/cem-nav.stories.ts::LandmarksAndTabs
  • packages/cem-components/src/components/cem-app-bar/cem-app-bar.stories.ts::Semantics

Scope: cem-app-bar covers a single application title/context/action header. It does not provide a generic or multi-row toolbar, opt-in role=toolbar ownership, orientation, or toolbar roving-keyboard contract.

Tooltip

Coverage
covered
Mapping kind
component
CEM owners
  • cem-tooltip
States
  • default
  • hover
  • focus-visible
  • expanded
  • disabled
Keyboard
  • Show the same description for keyboard focus as pointer hover; Escape or blur hides it without trapping focus.
Accessibility
  • The same non-focusable native tooltip supplies persistent aria-describedby text and transient manual Popover presentation.
Evidence
  • packages/cem-components/src/components/cem-tooltip/cem-tooltip.stories.ts::DescriptionIdentityAndInterest
  • packages/cem-components/src/components/cem-tooltip/cem-tooltip.stories.ts::EditorTriggersAndDisabledTouch
  • packages/cem-components/src/components/cem-tooltip/cem-tooltip.stories.ts::ScopedExternalAndProjectedDescription
  • packages/cem-components/playgrounds/cem-tooltip-gallery.html
  • packages/cem-components/docs/tooltip-contract.md

Scope: Canonical CEM-ML declaration using shared native-surface for independent pointer/focus interest, delayed pointer presentation, immediate keyboard presentation, Escape suppression, native editor triggers, persistent description ownership, scoped references, geometry and lifecycle cleanup. Touch and native activation stay unchanged; the legacy host open attribute is retired.

Tree

Coverage
covered
Mapping kind
component
CEM owners
  • cem-tree
  • cem-tree-item
States
  • default
  • hover
  • active
  • focus-visible
  • selected
  • expanded
  • disabled
  • loading
Keyboard
  • Keep one visible enabled treeitem in the roving tab order; Up/Down traverse without wrapping, Right opens or moves to a child, Left closes or moves to a parent, Home/End reach boundaries, typeahead searches visible labels, and native Enter/Space activates the exact button owner.
Accessibility
  • Expose one labeled tree with exact native button treeitems, stable owned groups, explicit aria-level/aria-posinset/aria-setsize, parent-only aria-expanded, optional single/multiple aria-selected projection, and aria-busy loading status.
Evidence
  • packages/cem-components/src/components/cem-tree/cem-tree.stories.ts::NativeOwners
  • packages/cem-components/src/components/cem-tree/cem-tree.stories.ts::NativeActivation
  • packages/cem-components/src/components/cem-tree/cem-tree.stories.ts::VisibleRovingFocus
  • packages/cem-components/src/components/cem-tree/cem-tree.stories.ts::ApplicationSelectionAndLoading
  • packages/cem-components/src/components/cem-tree/cem-tree.stories.ts::DisabledAndSilentProperties
  • packages/cem-components/src/components/cem-tree/cem-tree.stories.ts::StatePaintAndGeometry
  • tools/cem-components/verify-tree-forced-colors.mjs
  • tools/cem-components/verify-package.mjs
  • packages/cem-components/docs/tree-contract.md

Scope: cem-tree owns a generic recursively authored hierarchy with inert cem-tree-item payloads, stable semantic IDs, component-owned expansion and composite focus, optional application-authored selection, application-authored loading, exact toggle/leaf-activation events, tokenized normal/forced-colors states, and no data requests. It intentionally does not provide Angular directive/controller APIs, flat-tree transformation, hierarchy data sources, check propagation, filtering, virtual scrolling, navigation, or application selection mutation.