# `lr-commit-card` - **Import** `import '@aceshooting/lyra-ui/components/lr-commit-card.js';` (stable tag alias; registers the tag) - **Class** `LyraCommitCard`, also available unregistered from `@aceshooting/lyra-ui/components/agent-tools/commit-card/commit-card.class.js` - **Family** `components/agent-tools/` — see `llms/index.md` for its siblings - **Status** `stable` since `4.0.0` — see the maturity and deprecation policy in `llms/shared.md` - **Release history** [CHANGELOG.md](../../CHANGELOG.md); family-wide breaking-change summaries: [llms-full.txt](../../llms-full.txt) - **Deprecations** none - **Optional peers** none - **Themeable via** 18 parts, 4 custom properties — see this component's own `@csspart`/`@cssprop` list below - **Library-wide behavior** (events, form association, `locale`/`strings`, tokens, TS types): `llms/shared.md` --- ## `lr-commit-card` A compact commit summary (subject, author/time, diffstat, per-file changes) that links file rows out to a diff view. Removing the `message` attribute clears the displayed subject and body; the property retains the normal `null` readback of a removed string attribute. **Properties:** `hash: string = ''`, `message: string = ''`, `author: string = ''`, `timestamp?: number` (attribute: false, epoch milliseconds), `files: CommitFileChange[] = []` (attribute: false) — `CommitFileChange { path: string; additions: number; deletions: number; status?: GitStatus }` (exported here), where `GitStatus = 'added' | 'modified' | 'deleted' | 'renamed' | 'untracked' | 'conflicted' | 'ignored'` (shared with `lr-file-tree`); the diffstat is summed from `additions`/ `deletions` across `files`. Counts are normalized to finite non-negative integers before per-file display, total arithmetic, localization, and accessible summaries. `path` is the file identity; empty/blank paths and later duplicates are omitted before both diffstat arithmetic and row events. `filesExpanded: boolean = false` (attribute `files-expanded`, reflected — renamed from `filesCollapsed` in 9.0.0, default inverted so the rendered starting state is unchanged: `el.filesCollapsed = true` becomes `el.filesExpanded = false`), and `copyable: boolean = true` (reflected). `compact: boolean = false` (reflected) — tighter `[part="base"]` padding for a commit rendered as a row in a list or PR timeline, same convention as ``'s own `compact`; the border stays, so pair it with `frame="plain"` to drop the chrome entirely. `frame: LyraFrame = 'card'` (reflected) — container treatment, in the library-wide `frame` vocabulary (`'card' | 'plain'`), the same property ``/`` carry: `'card'` keeps the bordered, padded box, `'plain'` removes the border, padding, and corner radius so a commit nested in a host list that already draws its own row chrome doesn't double it; `plain` wins over `compact` when both are set. The exported alias `CommitCardAppearance` is retained as a name for the same union. **Slots:** `actions` — trailing header controls (e.g. an "open PR" button). **Events:** `lr-file-select` (`detail: { filePath: string }`), `lr-toggle` (`detail: { collapsed: boolean }`), and `lr-copy` (`detail: { ok: true; text: string }`, fired only after the full-hash clipboard write resolves successfully). A failed or unavailable write emits the compatibility `lr-error` event (no detail) and `lr-copy-error` (`detail: { ok: false; text: string; reason: 'unsupported'|'denied'|'failed'; error: unknown }`) instead; failure never emits `lr-copy`. **CSS parts:** `base`, `subject`, `body`, `hash`, `meta`, `author`, `time`, `diffstat`, `additions`, `deletions`, `files-toggle`, `file` (carries `data-status`), `file-path`, `file-status`, `file-additions`, `file-deletions`, `copy-button`, and `actions`. `file-status` is the one-letter git-status badge (`A`/`M`/`D`/`R`/`U`/`C`/`!`) rendered inside `[part="file-path"]`, present only for a file that has a `status`. The letter alone is meaningless to a screen reader, so the element carries the localized expansion as its `aria-label` — "Modified", "Added", … — reusing ``'s shared `gitStatusAdded`/`gitStatusModified`/ `gitStatusDeleted`/`gitStatusRenamed`/`gitStatusUntracked`/`gitStatusConflicted`/`gitStatusIgnored` message keys, so one `registerLyraLocale()` registration (or one `.strings` override) translates the badge in both components at once. **Themeable custom properties:** `--lr-commit-card-compact-padding` (default `var(--lr-space-s)`) — `[part="base"]` padding while `compact`. `--lr-commit-card-border-color` (default `var(--lr-color-border)`) and `--lr-commit-card-radius` (default `var(--lr-radius)`) retune the card's border and corner radius, and `--lr-commit-card-background` (default `transparent`) gives it a fill of its own — this card has never painted one, so it still takes the surface it sits on unless you opt in. `frame="plain"` still removes the border and radius.