@aceshooting/lyra-ui 4.2.0 → 5.1.0

package/llms/components/lr-branch-picker.md

@@ -0,0 +1,32 @@
+<!-- GENERATED by scripts/build-llms.mjs from llms/conversation.md — do not edit this file. -->
+
+# `lr-branch-picker`
+
+- **Import** `import '@aceshooting/lyra-ui/components/conversation/branch-picker/branch-picker.js';` (registers the tag; side-effect import)
+- **Class** `LyraBranchPicker`, also available unregistered from `@aceshooting/lyra-ui/components/conversation/branch-picker/branch-picker.class.js`
+- **Family** `components/conversation/` — see `llms/index.md` for its siblings
+- **Optional peers** none
+- **Library-wide behavior** (events, form association, `locale`/`strings`, tokens, TS types): `llms/shared.md`
+
+---
+
+## `lr-branch-picker`
+
+The "‹ 2 / 5 ›" navigator across regenerated/edited variants of one message. Pure controlled: it
+never mutates its own `index` — the same contract `<lr-pagination>` already establishes for
+`page`. The host listens for `lr-branch-change`, swaps the displayed branch content, and applies
+the new `index` back. Renders nothing at all while `count < 2`, so a host can bind it unconditionally
+on every message regardless of whether that message actually has multiple branches yet.
+
+**Properties:** `index: number = 0` (reflected) and `count: number = 1` (reflected) — the current
+0-based branch and the total branch count. `label: string = ''`.
+
+**Methods:** `focus()` and `blur()` forward to the group wrapper.
+
+**Events:** `lr-branch-change` — a branch navigation was requested. `detail: { index }`, always a
+valid target (never past either bound); the consumer applies `index` after switching the displayed
+branch content.
+
+**CSS parts:** `base` (the group wrapper, `role="group"`), `previous-button`, `next-button`,
+`previous-glyph` and `next-glyph` (the chevron inside each button — target these to swap the
+arrow without restyling the button), and `position` (the visible "2 / 5" text).

package/llms/components/lr-breadcrumb-item.md

@@ -0,0 +1,30 @@
+<!-- GENERATED by scripts/build-llms.mjs from llms/layout.md — do not edit this file. -->
+
+# `lr-breadcrumb-item`
+
+- **Import** `import '@aceshooting/lyra-ui/components/layout/breadcrumb/breadcrumb-item.js';` (registers the tag; side-effect import)
+- **Class** `LyraBreadcrumbItem`, also available unregistered from `@aceshooting/lyra-ui/components/layout/breadcrumb/breadcrumb-item.class.js`
+- **Family** `components/layout/` — see `llms/index.md` for its siblings
+- **Optional peers** none
+- **Documented with** `lr-breadcrumb` (same section below)
+- **Library-wide behavior** (events, form association, `locale`/`strings`, tokens, TS types): `llms/shared.md`
+
+---
+
+## `lr-breadcrumb` and `lr-breadcrumb-item`
+
+Responsive navigation trail primitives.
+
+**`lr-breadcrumb` properties:** `accessibleLabel: string = ''` (attribute `aria-label`) — overrides
+the localized `"Breadcrumb"` name on the shadow-root `<nav>` landmark, which never inherits a host
+attribute on its own.
+
+**`lr-breadcrumb-item` properties:** `href: string = ''` (URL-sanitized; an unsafe scheme renders the
+non-link form) and `current: boolean = false` (reflected — renders a `<span aria-current="page">`
+instead of an `<a>`, even when `href` is set). Each item sets `role="listitem"` on itself.
+
+**Slots:** breadcrumb's default slot takes `lr-breadcrumb-item` children; an item's default slot is
+its label.
+
+**CSS parts:** breadcrumb `base` (the `<nav>`) and `list` (the `role="list"` flex row wrapping the
+slotted items); item `base` (the `<a>` or `<span>`).

package/llms/components/lr-breadcrumb.md

@@ -0,0 +1,30 @@
+<!-- GENERATED by scripts/build-llms.mjs from llms/layout.md — do not edit this file. -->
+
+# `lr-breadcrumb`
+
+- **Import** `import '@aceshooting/lyra-ui/components/layout/breadcrumb/breadcrumb.js';` (registers the tag; side-effect import)
+- **Class** `LyraBreadcrumb`, also available unregistered from `@aceshooting/lyra-ui/components/layout/breadcrumb/breadcrumb.class.js`
+- **Family** `components/layout/` — see `llms/index.md` for its siblings
+- **Optional peers** none
+- **Documented with** `lr-breadcrumb-item` (same section below)
+- **Library-wide behavior** (events, form association, `locale`/`strings`, tokens, TS types): `llms/shared.md`
+
+---
+
+## `lr-breadcrumb` and `lr-breadcrumb-item`
+
+Responsive navigation trail primitives.
+
+**`lr-breadcrumb` properties:** `accessibleLabel: string = ''` (attribute `aria-label`) — overrides
+the localized `"Breadcrumb"` name on the shadow-root `<nav>` landmark, which never inherits a host
+attribute on its own.
+
+**`lr-breadcrumb-item` properties:** `href: string = ''` (URL-sanitized; an unsafe scheme renders the
+non-link form) and `current: boolean = false` (reflected — renders a `<span aria-current="page">`
+instead of an `<a>`, even when `href` is set). Each item sets `role="listitem"` on itself.
+
+**Slots:** breadcrumb's default slot takes `lr-breadcrumb-item` children; an item's default slot is
+its label.
+
+**CSS parts:** breadcrumb `base` (the `<nav>`) and `list` (the `role="list"` flex row wrapping the
+slotted items); item `base` (the `<a>` or `<span>`).

package/llms/components/lr-browser-frame.md

@@ -0,0 +1,51 @@
+<!-- GENERATED by scripts/build-llms.mjs from llms/agent-tools.md — do not edit this file. -->
+
+# `lr-browser-frame`
+
+- **Import** `import '@aceshooting/lyra-ui/components/agent-tools/browser-frame/browser-frame.js';` (registers the tag; side-effect import)
+- **Class** `LyraBrowserFrame`, also available unregistered from `@aceshooting/lyra-ui/components/agent-tools/browser-frame/browser-frame.class.js`
+- **Family** `components/agent-tools/` — see `llms/index.md` for its siblings
+- **Optional peers** none
+- **Library-wide behavior** (events, form association, `locale`/`strings`, tokens, TS types): `llms/shared.md`
+
+---
+
+## `lr-browser-frame`
+
+Presentational "agent computer" viewport: a screenshot/frame stream (or slotted live media), a
+read-only URL display, action-ping overlays, and take-over/stop affordances. No automation transport
+(no CDP/WebRTC/WebSocket) and no input relay — take-over is an event; the host swaps in its own
+interactive element (e.g. an iframe). No replay scrubber (compose `lr-playback` driving `frame-src`
+from a screenshot array); no console/network drawers (compose `lr-terminal`/`lr-json-viewer`); no
+pan/zoom of the frame content (slot the image/video inside a `lr-zoomable-frame` instead, though
+the pings overlay assumes the unzoomed content box in that composition).
+
+**Properties:** `frameSrc: string = ''` (attribute `frame-src`) — image/MJPEG stream URL rendered as
+an `<img>` (safe-URL-gated via `safeMediaSrc`); ignored once the default slot has content. `url:
+string = ''` — address shown read-only in the toolbar (`dir="ltr"`, truncating, full value in
+`title`). `status: 'idle' | 'connecting' | 'streaming' | 'stalled' = 'idle'` (reflected). `controller:
+'agent' | 'user' = 'agent'` (reflected) — who is driving; switches the take-over button's label.
+`pings: BrowserPing[] = []` (attribute: false, each `{ id, x, y, kind: 'click' | 'type' | 'scroll' |
+'move' }` — `x`/`y` are percent (0–100) of the frame's `object-fit: contain` content box,
+letterboxing-aware). `controls: boolean = true` — render the built-in take-over/stop buttons.
+
+**Slots:** default — host-owned live element (e.g. `<video>` or an interactive `<iframe>`), replacing
+the `frame-src` image. `actions` — extra toolbar controls.
+
+**Events:** `lr-take-over` — `detail: { controller }`, the *requested* controller (`'user'` when
+"Take over" is pressed, `'agent'` when "Hand back" is). `lr-stop` — stop the agent's browser
+session, no detail.
+
+**CSS parts:** `base` (`role="group"`), `toolbar`, `url`, `status` (`role="status"`),
+`controller-badge`, `actions`, `take-over-button`, `stop-button`, `viewport`, `frame` (the
+`frame-src` `<img>`, absent once the default slot is populated), `ping` (one action-ping marker,
+carries `data-kind`).
+
+**Themeable custom properties:** `--lr-browser-frame-aspect-ratio` (default `16 / 9`) — the
+viewport's aspect ratio.
+
+```html
+<lr-browser-frame status="streaming" url="https://example.com" .pings=${pings}
+  @lr-take-over=${(e) => setController(e.detail.controller)} @lr-stop=${() => stopSession()}
+></lr-browser-frame>
+```

package/llms/components/lr-bubble-chart.md

@@ -0,0 +1,70 @@
+<!-- GENERATED by scripts/build-llms.mjs from llms/charts.md — do not edit this file. -->
+
+# `lr-bubble-chart`
+
+- **Import** `import '@aceshooting/lyra-ui/components/charts/chart/bubble-chart.js';` (registers the tag; side-effect import)
+- **Class** `LyraBubbleChart`, also available unregistered from `@aceshooting/lyra-ui/components/charts/chart/bubble-chart.class.js`
+- **Family** `components/charts/` — see `llms/index.md` for its siblings
+- **Optional peers** `chart.js`, `chartjs-plugin-zoom` — see `llms/peers.md`
+- **Documented with** `lr-line-chart`, `lr-bar-chart`, `lr-pie-chart`, `lr-doughnut-chart`, `lr-radar-chart`, `lr-polar-area-chart`, `lr-scatter-chart` (same section below)
+- **Library-wide behavior** (events, form association, `locale`/`strings`, tokens, TS types): `llms/shared.md`
+
+---
+
+## Typed subclasses: `lr-line-chart`, `lr-bar-chart`, `lr-pie-chart`, `lr-doughnut-chart`, `lr-radar-chart`, `lr-polar-area-chart`, `lr-bubble-chart`, `lr-scatter-chart`
+
+Each is `LyraChart` with `type` locked to a fixed value — respectively `line`, `bar`, `pie`,
+`doughnut`, `radar`, `polarArea`, `bubble`, `scatter` — via a real `get`/`set` accessor pair the
+shared `lockChartType()` helper installs on the subclass's own prototype (`declare type: '…'`
+narrows the TS type at compile time; the runtime lock is the `Object.defineProperty` pair alongside
+it — the same helper `lr-histogram` uses), not merely a class-field default a later assignment
+could still override.
+
+Everything else is inherited verbatim from `lr-chart`; each name below has the same type, default,
+and behavior there. **See `llms/components/lr-chart.md` for the details, code example, and gotchas
+of every entry in these lists.**
+
+**Properties:** `labels`, `datasets`, `legend`, `legendPosition` (attribute `legend-position`),
+`valueFormatter`, `area`, `zoom`, `height`, `xLabel` (`x-label`), `yLabel` (`y-label`), `y2Label`
+(`y2-label`), `beginAtZero` (`begin-at-zero`), `horizontal`, `stacked`, `config`, `accessibleLabel`
+(`accessible-label`), `accessibleDescription` (`accessible-description`), `showDataTable`
+(`show-data-table`), `chartArea` (readonly). `type` is the only member that differs: read-only,
+locked to this tag's value.
+
+**Methods:** `resetZoom()`, `refreshTheme()`.
+
+**Events:** `lr-zoom` (`detail: { zoomed: boolean }`), `lr-point-click` (`detail: { datasetIndex,
+index, label, value }`).
+
+**Slots:** `data-table`, `center`.
+
+**CSS parts:** `base`, `canvas`, `reset-zoom-button`, `description`, `data-table`, `center`.
+
+**Themeable custom properties:** `--lr-chart-height`, `--lr-chart-grid-color`,
+`--lr-chart-tick-color`, `--lr-chart-legend-color`, `--lr-chart-tooltip-bg`,
+`--lr-chart-tooltip-text`.
+
+**Optional peer deps:** same as `lr-chart` — `chart.js`, plus `chartjs-plugin-zoom` only once
+`zoom` is set.
+
+```html
+<lr-bar-chart legend></lr-bar-chart>
+<lr-pie-chart></lr-pie-chart>
+<script>
+  document.querySelector('lr-bar-chart').labels = ['A', 'B'];
+  document.querySelector('lr-bar-chart').datasets = [{ label: 'Count', data: [4, 9] }];
+
+  document.querySelector('lr-pie-chart').labels = ['A', 'B', 'C'];
+  document.querySelector('lr-pie-chart').datasets = [{ label: 'Share', data: [30, 45, 25], color: ['#2563eb', '#16a34a', '#dc2626'] }];
+</script>
+```
+
+**Known gotchas (in addition to the core `lr-chart` list in `llms/components/lr-chart.md`):**
+- `type` truly is locked per subclass: `<lr-pie-chart type="bar">` or `el.type = 'bar'` at runtime
+  is a genuine no-op (the accessor's setter silently ignores the write), not a footgun like a plain
+  overridden class-field default would be.
+- `lr-bubble-chart` needs `Series.points` entries with an `x`/`y`/`r` triple, but `Series.points`
+  is typed as `{x, y, label?}[]` with no `r` field — cast the array through `as unknown as
+  Series['points']` (or a local `BubblePoint` type) when constructing bubble data.
+
+---

package/llms/components/lr-button-group.md

@@ -0,0 +1,30 @@
+<!-- GENERATED by scripts/build-llms.mjs from llms/layout.md — do not edit this file. -->
+
+# `lr-button-group`
+
+- **Import** `import '@aceshooting/lyra-ui/components/layout/button-group/button-group.js';` (registers the tag; side-effect import)
+- **Class** `LyraButtonGroup`, also available unregistered from `@aceshooting/lyra-ui/components/layout/button-group/button-group.class.js`
+- **Family** `components/layout/` — see `llms/index.md` for its siblings
+- **Optional peers** none
+- **Library-wide behavior** (events, form association, `locale`/`strings`, tokens, TS types): `llms/shared.md`
+
+---
+
+## `lr-button-group`
+
+Responsive semantic grouping primitive for related action controls. It preserves the slotted
+controls and exposes `role="group"` on its internal wrapper.
+
+**Properties:**
+- `orientation: 'horizontal' | 'vertical' = 'horizontal'` (reflected)
+- `label: string = ''` — accessible group name; a host `aria-label` is used when `label` is empty
+
+**Slots:** default action controls.
+
+**CSS parts:** `base` (the `role="group"` flex wrapper; wraps, and goes full-width below a 20rem
+container inline-size).
+
+**Themeable custom properties:** `--lr-button-group-gap` (default `var(--lr-space-2xs)`) — gap
+between slotted controls on both axes.
+
+---

package/llms/components/lr-button.md

@@ -0,0 +1,89 @@
+<!-- GENERATED by scripts/build-llms.mjs from llms/forms.md — do not edit this file. -->
+
+# `lr-button`
+
+- **Import** `import '@aceshooting/lyra-ui/components/forms/button/button.js';` (registers the tag; side-effect import)
+- **Class** `LyraButton`, also available unregistered from `@aceshooting/lyra-ui/components/forms/button/button.class.js`
+- **Family** `components/forms/` — see `llms/index.md` for its siblings
+- **Optional peers** none
+- **Library-wide behavior** (events, form association, `locale`/`strings`, tokens, TS types): `llms/shared.md`
+
+---
+
+## `lr-button`
+
+A generic action-button primitive. Renders an internal native `<button>`; `type="submit"`/
+`type="reset"` are handled by the component itself via the host's own `closest('form')`, since a
+shadow-internal native button doesn't participate in an ancestor form's submission on its own.
+
+**Properties:**
+- `variant: 'neutral' | 'brand' | 'success' | 'warning' | 'danger' = 'neutral'` (reflected)
+- `appearance: 'accent' | 'filled' | 'outlined' | 'plain' | 'quiet' | 'link' = 'filled'` (reflected)
+  — `'accent'` is a
+  loud, high-contrast filled tier,
+  distinct from `'filled'` for `variant="neutral"` specifically (`'filled'` reads the ambient
+  surface color there; `'accent'` reads a solid neutral fill). `'quiet'` is a de-emphasized tier:
+  transparent background with a bordered, muted-text chrome that fills to `--lr-color-surface` on
+  hover; its text/border tokens are **not** variant-swapped, so `variant` has no effect on it.
+  `'link'` is a true inline-link tier:
+  zero chrome (no padding, border, border-radius, or `min-block-size` floor), underlined
+  (`text-underline-offset: var(--lr-size-0-15rem)`), colored from `--lr-button-accent` (the same token `'plain'`
+  uses, so `variant` still selects the link color) and inheriting the surrounding font-size/weight
+  — for a text link that flows within a sentence rather than a button-shaped control. Declared
+  after the per-`size` rules, so it overrides them whatever `size` is set
+- `size: '2xs' | 'xs' | 's' | 'm' | 'l' | 'xl' = 'm'` (reflected) — `'2xs'` is the tightest tier,
+  below `'xs'`, for dense chrome; `'m'` is the standard one
+- `type: 'button' | 'submit' | 'reset' = 'button'`
+- `loading: boolean = false` (reflected) — shows an internal spinner and disables the button without
+  clearing `disabled`
+- `disabled: boolean = false` (reflected)
+
+The shared `m` size uses `--lr-font-size-m`. The internal button follows the host's inline size through `--lr-button-width` (default
+`100%`), and each size tier's `min-block-size` floor is exposed as its own token (see below).
+
+**Getters/methods:** `click()`, `focus(options?)`, and `blur()` — forwarded to the internal native
+`<button>`; `click()` also runs the component's submit/reset behavior.
+
+**Events:** none (a plain native `click` bubbles and composes through the shadow boundary
+unmodified; disabled while `disabled` or `loading`).
+
+**Slots:** default (label content), `start` (leading icon/content), `end` (trailing icon/content).
+
+**CSS parts:** `base`, `label`, `start`, `end`, `spinner` (present only while `loading`).
+
+**Themeable custom properties:** `--lr-button-width`, `--lr-button-accent`, `--lr-button-fill`,
+`--lr-button-on-fill`, `--lr-button-border` (each swapped by the active `variant`, default
+`neutral` falls back to plain text/surface/border tokens), `--lr-button-accent-fill`,
+`--lr-button-accent-on-fill` (the `appearance="accent"` fill/foreground pair; `neutral` falls
+back to `--lr-color-neutral`/`--lr-color-on-neutral`, every other variant reuses that variant's own
+loud fill token), `--lr-button-outlined-border` (default `--lr-color-border-strong`, the
+`appearance="outlined"` border color — variant-independent, unlike `--lr-button-border`),
+`--lr-button-quiet-text` (default `--lr-color-text-quiet`) and `--lr-button-quiet-border` (default
+`--lr-color-border`) — the `appearance="quiet"` foreground/border pair, also variant-independent,
+`--lr-button-hover-brightness` (default `1.08`, the `:hover` filter intensity),
+`--lr-button-active-scale` (default `0.9875`, the `:active` press-scale, disabled under
+`prefers-reduced-motion`), `--lr-button-spinner-duration` (default `1s`, the `loading` spinner's
+rotation period; forced to `0.001ms` under `prefers-reduced-motion`), and the per-`size`
+`min-block-size` floors `--lr-button-size-2xs` (`1.25rem`), `--lr-button-size-xs` (`1.5rem`),
+`--lr-button-size-s` (`1.75rem`), `--lr-button-size-m` (`2rem`), `--lr-button-size-l` (`2.5rem`),
+`--lr-button-size-xl` (`3rem`) — each read only by its own `size` tier, and all ignored by
+`appearance="link"`.
+
+**Optional peer deps:** none.
+
+```html
+<lr-button variant="brand" appearance="filled">Save</lr-button>
+<lr-button variant="neutral" appearance="accent">Save</lr-button>
+<lr-button appearance="plain" aria-label="Close dialog"><svg slot="start">...</svg></lr-button>
+<p>The message failed. <lr-button appearance="link" variant="brand">Retry</lr-button></p>
+```
+
+**Known gotchas:**
+- A host `aria-label` is forwarded to the internal button as a literal string (for an icon-only
+  button); an external `aria-labelledby`/`aria-describedby` idref is not copied across the shadow
+  boundary.
+- Is form-associated (`static formAssociated = true` + `attachInternals()`), so it participates in
+  an ancestor `<form>.elements` the same way `wa-button` does — a sibling text field's own
+  Enter-to-submit lookup (which scans `form.elements` for a `type === 'submit'` control) finds it.
+
+---

package/llms/components/lr-calendar-viewer.md

@@ -0,0 +1,32 @@
+<!-- GENERATED by scripts/build-llms.mjs from llms/viewers.md — do not edit this file. -->
+
+# `lr-calendar-viewer`
+
+- **Import** `import '@aceshooting/lyra-ui/components/viewers/calendar-viewer/calendar-viewer.js';` (registers the tag; side-effect import)
+- **Class** `LyraCalendarViewer`, also available unregistered from `@aceshooting/lyra-ui/components/viewers/calendar-viewer/calendar-viewer.class.js`
+- **Family** `components/viewers/` — see `llms/index.md` for its siblings
+- **Optional peers** `ical.js` — see `llms/peers.md`
+- **Library-wide behavior** (events, form association, `locale`/`strings`, tokens, TS types): `llms/shared.md`
+
+---
+
+## `lr-calendar-viewer`
+
+Fetches and parses `.ics` calendars with the optional `ical.js` peer and renders each VEVENT as
+plain text, including its title, start/end time, location, and description. No HTML is injected.
+
+**Properties:** `src`, `name`, and `maxHeight` (attribute `max-height`) are strings.
+
+**Events:** `lr-render-error` with `detail.error` when fetching or parsing fails.
+
+**CSS parts:** `base`, `body`, `event-list`, `event`, `event-summary`, `event-time`, `event-location`,
+`event-description`, `spinner`, and `error`.
+
+**Themeable custom properties:** `--lr-calendar-viewer-max-height` (default `none`) — maximum block
+size of `[part="body"]`; also settable via the `max-height` property, which writes this token inline.
+
+**Optional peer dependency:** install `ical.js` with `pnpm add ical.js`. The component registers
+`text/calendar` and falls back to matching `.ics` filenames in `<lr-document-viewer>`.
+
+Remote resources are capped at 25 MB; exceeding it surfaces the localized
+`documentPreviewResourceTooLarge` message instead of the calendar.

package/llms/components/lr-calendar.md

@@ -0,0 +1,52 @@
+<!-- GENERATED by scripts/build-llms.mjs from llms/data.md — do not edit this file. -->
+
+# `lr-calendar`
+
+- **Import** `import '@aceshooting/lyra-ui/components/data/calendar/calendar.js';` (registers the tag; side-effect import)
+- **Class** `LyraCalendar`, also available unregistered from `@aceshooting/lyra-ui/components/data/calendar/calendar.class.js`
+- **Family** `components/data/` — see `llms/index.md` for its siblings
+- **Optional peers** none
+- **Library-wide behavior** (events, form association, `locale`/`strings`, tokens, TS types): `llms/shared.md`
+
+---
+
+## `lr-calendar`
+
+Responsive month calendar with event markers and an agenda view.
+
+**Properties:**
+- `events: CalendarEvent[] = []` (attribute: false) — `{ id?, date, title, start?, end?, color?,
+  data? }`; `date` is an ISO `YYYY-MM-DD` string and `color` is sanitized before being used as the
+  marker background
+- `value: string = ''` — the selected ISO date
+- `viewDate: string` (attribute `view-date`, defaults to the 1st of the current month) — the visible
+  month; an unparseable value falls back to the current month
+- `view: 'month' | 'agenda' = 'month'` (reflected) — agenda lists this month's events, date-sorted
+- `firstDayOfWeek: number = 1` (attribute `first-day-of-week`) — sanitized to a finite integer
+  (fallback `1`) and wrapped into `0`–`6`, so a malformed value can't drop days
+- `accessibleLabel: string = ''` (attribute `aria-label`) — names the calendar `<section>`; falls back
+  to the localized `calendarLabel`
+
+**Keyboard:** the month grid is a fixed 6×7 matrix (leading/trailing days of adjacent months fill it
+out) with one roving tab stop — `focusedDate`, else `value`, else today, else the first rendered day.
+Arrows move by 1 day (Left/Right swapped under RTL) or 7; stepping past the rendered grid rolls
+`viewDate` to the target's month and emits `lr-view-change`. Enter/Space select.
+
+**Events:** `lr-date-select` (`detail: { date }`), `lr-event-select` (`detail: { event }`),
+`lr-view-change` (`detail: { viewDate }`, from the prev/next buttons and out-of-grid arrow moves).
+
+**Slots:** none.
+
+**CSS parts:** `header`, `nav` (carried both by the previous button itself and by the wrapper around
+the next button), `nav-glyph` (the chevron, `scaleX(-1)`-mirrored under RTL), `title`, `weekdays`,
+`weekday`, `grid`, `week` (`display: contents`), `day`, `date`, `event` (a month-view marker),
+`agenda`, `agenda-event`.
+
+**Themeable custom properties:** `--lr-calendar-day-min-block-size` (default `var(--lr-size-6rem)`)
+and `--lr-calendar-day-min-block-size-narrow` (default `4rem`, applied at container inline-size
+≤ 28rem).
+
+**Gotcha:** month-view `[part='event']` markers are a mouse-only quick-select affordance — they sit
+inside the day `<button>`, which may not contain focusable descendants. Agenda view renders each
+event as a real `<button part="agenda-event">` and is the keyboard-accessible path to
+`lr-event-select`.

package/llms/components/lr-callout.md

@@ -0,0 +1,37 @@
+<!-- GENERATED by scripts/build-llms.mjs from llms/overlays.md — do not edit this file. -->
+
+# `lr-callout`
+
+- **Import** `import '@aceshooting/lyra-ui/components/overlays/callout/callout.js';` (registers the tag; side-effect import)
+- **Class** `LyraCallout`, also available unregistered from `@aceshooting/lyra-ui/components/overlays/callout/callout.class.js`
+- **Family** `components/overlays/` — see `llms/index.md` for its siblings
+- **Optional peers** none
+- **Library-wide behavior** (events, form association, `locale`/`strings`, tokens, TS types): `llms/shared.md`
+
+---
+
+## `lr-callout`
+
+An inline status, warning, or error surface. Set `inline` for lightweight reactive form or mutation
+errors without panel chrome.
+
+**Properties:** `variant: 'neutral'|'brand'|'success'|'warning'|'danger' = 'neutral'` (reflected —
+also picks `[part="base"]`'s role: `alert` for `danger`, `status` otherwise), `heading: string = ''`,
+`closable: boolean = false` (reflected), `inline: boolean = false` (reflected), `open: boolean = true`
+(reflected — `false` renders nothing at all), and `accessibleLabel: string = ''`
+(`accessible-label`; falls back to a plain host `aria-label` attribute when unset).
+
+**Events:** cancelable `lr-close` (no detail); the callout sets `open = false` after the event
+unless a listener calls `preventDefault()`.
+
+**Slots:** default message, `heading` (rendered alongside the `heading` property), `icon`.
+
+**CSS parts:** `base`, `icon` (hidden while the `icon` slot is empty), `content`, `heading`,
+`message` (wrapper around the default slot), `close-button` (the close control's hit target, always
+at least `--lr-icon-button-size` in both the panel and `inline` treatments), `close-icon` (the
+visible "×" glyph inside it — this is what shrinks under `inline`, so the hit target never does).
+
+**Themeable custom properties:** `--lr-callout-background`, `--lr-callout-color`,
+`--lr-callout-border` — the trio each `:host([variant])` rule rewrites (same
+surface/text/border → `*-quiet`/loud/loud scheme as `lr-badge`). `inline` drops the border,
+background, and panel padding regardless of what these are set to.

package/llms/components/lr-card.md

@@ -0,0 +1,67 @@
+<!-- GENERATED by scripts/build-llms.mjs from llms/layout.md — do not edit this file. -->
+
+# `lr-card`
+
+- **Import** `import '@aceshooting/lyra-ui/components/layout/card/card.js';` (registers the tag; side-effect import)
+- **Class** `LyraCard`, also available unregistered from `@aceshooting/lyra-ui/components/layout/card/card.class.js`
+- **Family** `components/layout/` — see `llms/index.md` for its siblings
+- **Optional peers** none
+- **Library-wide behavior** (events, form association, `locale`/`strings`, tokens, TS types): `llms/shared.md`
+
+---
+
+## `lr-card`
+
+A generic, styled bordered content container — the "small bordered surface with padding" idiom common
+to hero highlights, clickable grid tiles, and management-list items. A direct `<lr-*>` counterpart
+to `<wa-card>`'s contract, staying slot-compatible with `lr-result-card` where they overlap.
+
+**Properties:**
+- `appearance: 'accent' | 'filled' | 'outlined' | 'filled-outlined' | 'plain' = 'outlined'`
+  (reflected) — `'outlined'` (the default) is a plain bordered surface; `'filled'` swaps the border
+  for a quiet brand-tinted background; `'filled-outlined'` keeps the border and adds that same tinted
+  background; `'accent'` drops the border for a single colored accent stripe on the leading edge;
+  `'plain'` has no border or background at all.
+- `interactive: boolean = false` (reflected) — opt-in hover/focus-visible treatment (border-color
+  shift, cursor: pointer) for a card used as a clickable tile — purely visual; this component takes
+  no position on what "activate" means unless `href` is also set. `false` (the default) reproduces a
+  plain static card.
+- `href?: string` — when set, the card's root renders as a real `<a href=...>` instead of a `<div>`,
+  for a whole-card link (e.g. a wide CTA tile). Unset (the default) renders a plain `<div>`.
+
+**Events:** none.
+
+**Slots:** default (the card body), `header` (header row content, rendered above the body), `media`
+(media content, e.g. an image, rendered above the header), `footer` (footer content, rendered below
+the body), `actions` (small header controls, rendered alongside the header content).
+
+**CSS parts:** `base` (the outer container — a `<div>`, or an `<a>` when `href` is set), `media`
+(wrapper around the `media` slot, hidden entirely when empty), `header` (wrapper around the `header`
+slot and `actions`, hidden entirely when both are empty), `actions` (wrapper around the `actions`
+slot, hidden entirely when empty), `body` (wrapper around the default slot), `footer` (wrapper around
+the `footer` slot, hidden entirely when empty).
+
+**Themeable custom properties:** shared tokens only — `--lr-color-border`/`-surface`/`-brand`/
+`-brand-quiet`, `--lr-radius`, `--lr-space-s`/`-m`, `--lr-transition-fast`,
+`--lr-focus-ring-*`.
+
+**Optional peer deps:** none.
+
+```html
+<lr-card appearance="outlined" interactive href="/reports/42">
+  <img slot="media" src="/thumb.png" alt="" />
+  <span slot="header">Q3 Report</span>
+  <span slot="actions"><lr-chip tone="success">Ready</lr-chip></span>
+  Revenue up 12% quarter-over-quarter.
+  <span slot="footer">Updated 2 days ago</span>
+</lr-card>
+```
+
+**Known gotchas:**
+- every `appearance` renders on the *same* `[part="base"]` element — there's no separate element per
+  variant, so a `::part(base)` override applies uniformly regardless of `appearance`.
+- slot-presence (`header`/`media`/`footer`/`actions`) is tracked in JS, not via CSS `:empty` (a
+  `[part]` wrapper always contains a literal `<slot>` child, so `:empty` never matches) — the same
+  pattern `lr-empty`/`lr-widget` use.
+
+---

package/llms/components/lr-carousel-item.md

@@ -0,0 +1,29 @@
+<!-- GENERATED by scripts/build-llms.mjs from llms/layout.md — do not edit this file. -->
+
+# `lr-carousel-item`
+
+- **Import** `import '@aceshooting/lyra-ui/components/layout/carousel/carousel-item.js';` (registers the tag; side-effect import)
+- **Class** `LyraCarouselItem`, also available unregistered from `@aceshooting/lyra-ui/components/layout/carousel/carousel-item.class.js`
+- **Family** `components/layout/` — see `llms/index.md` for its siblings
+- **Optional peers** none
+- **Library-wide behavior** (events, form association, `locale`/`strings`, tokens, TS types): `llms/shared.md`
+
+---
+
+## `lr-carousel-item`
+
+Optional semantic wrapper for one slide in `<lr-carousel>`. The carousel also accepts arbitrary
+slotted elements, so this element is useful when a migration needs the explicit item tag.
+
+**Slots:** default slide content.
+
+**CSS parts:** `base`.
+
+```html
+<lr-carousel>
+  <lr-carousel-item>Dashboard overview</lr-carousel-item>
+  <lr-carousel-item>Dashboard details</lr-carousel-item>
+</lr-carousel>
+```
+
+---

package/llms/components/lr-carousel.md

@@ -0,0 +1,43 @@
+<!-- GENERATED by scripts/build-llms.mjs from llms/layout.md — do not edit this file. -->
+
+# `lr-carousel`
+
+- **Import** `import '@aceshooting/lyra-ui/components/layout/carousel/carousel.js';` (registers the tag; side-effect import)
+- **Class** `LyraCarousel`, also available unregistered from `@aceshooting/lyra-ui/components/layout/carousel/carousel.class.js`
+- **Family** `components/layout/` — see `llms/index.md` for its siblings
+- **Optional peers** none
+- **Library-wide behavior** (events, form association, `locale`/`strings`, tokens, TS types): `llms/shared.md`
+
+---
+
+## `lr-carousel`
+
+Accessible carousel for arbitrary slotted slide elements. It shows one assigned element at a time,
+adds slide semantics and localized position labels, and provides keyboard, button, and indicator
+navigation.
+
+**Properties:**
+- `index: number = 0` (attribute `index`, reflected) — active slide index
+- `loop: boolean = false` (attribute `loop`, reflected) — wraps navigation at either end
+- `autoplay: boolean = false` (attribute `autoplay`, reflected) and `autoplayInterval: number = 5000`
+  (attribute `autoplay-interval`) — optional timed advance; autoplay is disabled under reduced motion
+- `showIndicators: boolean = true` (attribute `show-indicators`) — renders slide indicator buttons
+- `accessibleLabel: string = ''` (attribute `accessible-label`) — fallback landmark name; a host
+  `aria-label` takes precedence
+
+**Methods:** `next()`, `previous()`, and `goTo(index)` update the active index and emit
+`lr-slide-change` (`detail: { index }`).
+
+**CSS parts:** `base` (the `role="region"` landmark), `viewport` (the keyboard-focusable slide
+viewport), `track`, `controls`, `previous-button`, `next-button`, `previous-glyph`/`next-glyph` (the
+chevron inside each, mirrored under RTL), `indicators`, `indicator` (one indicator's hit target,
+sized to the shared minimum tappable size), and `indicator-dot` (the compact visible dot inside it).
+
+```html
+<lr-carousel aria-label="Screenshots">
+  <img alt="Dashboard overview" src="overview.png">
+  <img alt="Dashboard details" src="details.png">
+</lr-carousel>
+```
+
+---