<!-- GENERATED by scripts/build-llms.mjs from llms/retrieval.md — do not edit this file. -->

# `lr-entity-card`

- **Import** `import '@aceshooting/lyra-ui/components/lr-entity-card.js';` (stable tag alias; registers the tag)
- **Class** `LyraEntityCard`, also available unregistered from `@aceshooting/lyra-ui/components/retrieval/entity-card/entity-card.class.js`
- **Family** `components/retrieval/` — 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** 12 parts, 3 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-entity-card`

A dossier card for one knowledge-graph entity: type badge, description, key/value property rows,
degree, community chip, plus a built-in "focus in graph" action. Never fetches or focuses a graph
itself — `lr-entity-select` is a request a host routes into `lr-graph`'s own
`focusNode(id, options?)`.

The host `aria-level` attribute overrides the internal title heading live. Changing or removing it
updates that heading without another property change; omission or an empty override uses level 3.

**Properties:**

- `entity: LyraEntity | null = null` (attribute: false) — `LyraEntity { id: string; label: string;
type?: string; description?: string; properties?: Record<string, string | number>; degree?:
number; communityId?: string }`; field names deliberately mirror `lr-graph`'s `LyraGraphNode`
  additions, so a graph node adapts into a `LyraEntity` with no mapping table; `null` renders the
  empty state
- `types: LyraNodeTypeStyle[] = []` (attribute: false) — the same `lr-graph.nodeTypes`/
  `lr-graph-legend.types` entry shape, resolving `entity.type` to a label/color for the badge
- `communityLabel: string = ''` (attribute `community-label`) — override text for the community chip
- `showFocusButton: boolean = true` (attribute `show-focus-button`)
- `compact: boolean = false` (reflected) — tighter root padding and row gap for dense contexts (a
  dossier rendered in a sidebar, a result list) — the same convention as `lr-empty`'s `compact` and
  as this component's sibling `lr-community-card`. Purely a density knob: the border and background
  stay. `false` (the default) keeps the full card padding.
- `frame: LyraFrame = 'card'` (reflected) — container treatment, in the library-wide `frame`
  vocabulary (`'card' | 'plain'`). `'card'` (the default) keeps the bordered, filled, padded box;
  `'plain'` removes the border, background, padding and corner radius, so a card nested inside a
  container that already draws a border doesn't double it. `plain` wins over `compact` when both are
  set — there is nothing left to tighten. The exported alias `EntityCardAppearance` is retained as a
  name for the same union.

**Events:** `lr-entity-select` (`detail: { entityId }`, the built-in focus button was activated).

**Slots:** default (extra body content below the property rows, e.g. a `lr-neighbor-list`),
`actions` (extra header actions alongside the built-in focus button).

**CSS parts:** `base`, `header`, `type-badge`, `title` (`role="heading" aria-level="3"` by default),
`description`, `properties`, `property` (one key/value row), `degree`, `community`, `actions`,
`focus-button`, `empty` (shown when `entity` is `null`).

**Themeable custom properties:** `--lr-entity-card-bg` (default `var(--lr-color-surface)`) —
`[part='base']`'s RESTING background, the companion to the `compact` tier's levers below;
`frame='plain'` still drops the fill entirely. `--lr-entity-card-compact-padding` (default
`var(--lr-space-s)`) — `[part='base']`'s padding while `compact`; `--lr-entity-card-compact-gap` (default
`var(--lr-space-xs)`) — the gap between `[part='base']`'s rows while `compact`. Both apply only in
the `compact` state, so a dense card can be tuned without re-pointing shared spacing tokens for
everything else. Otherwise shared tokens; a data-driven `entity.type` color is applied as
sanitized inline `--lr-badge-*` overrides on the type badge only (the one "type color is
data-driven by design" exception this library already grants graph nodes) — every other color comes
from tokens.

**Optional peer deps:** none.

```html
<lr-entity-card id="card"></lr-entity-card>
<script>
  document.getElementById("card").entity = {
    id: "e1",
    label: "Ada Lovelace",
    type: "person",
    description: "Mathematician",
    properties: { born: 1815 },
    degree: 4,
  };
  document
    .getElementById("card")
    .addEventListener("lr-entity-select", (e) =>
      graph.focusNode(e.detail.entityId)
    );
</script>
```

**Known gotchas:**

- The type badge's data-driven background uses a 12% quiet-tint mix against
  `--lr-color-surface`, while its text continues to use `--lr-color-text`. Treat the percentage as
  an implementation detail; override the documented nested badge properties together when a
  product palette needs a different contrast-qualified treatment.
- A blank `entity.id` renders the empty state. Blank/later duplicate `types[].id` entries cannot
  become badge lookup owners.

---