Surfaces & data

Lists, accordions, sheets, snackbars, and progress rings — zero-JS surface & data components on platform primitives. Back to the kitchen sink.

List

Two-line divided list; rows are real links, one selected.

Authoring tags

The same rows via <lz-list-item>, compact.

Accordion

Native <details> panels sharing a name attribute — exclusive open, zero JS.

What is Lozenge?

An original HTML+CSS implementation of the Jira visual style — tokens, components, and authoring tags, with no runtime JavaScript.

How do the overlays work?

Modals, drawers, and sheets are native <dialog> elements; the platform supplies focus trapping, Esc, and the backdrop.

Why is this accordion exclusive?

Every panel carries name="surfaces-faq" — the platform's exclusive-accordion behavior for named <details> groups.

Sheets & fullscreen dialog

Share board

A fullscreen dialog on a solid surface — close leading, title filling, confirming action trailing. The fixed snackbar below is positioned from the top layer against the viewport.

Draft saved just now.

Snackbar

Static in flow below; the .snackbar-fixed variant is demonstrated inside the fullscreen dialog above.

Issue LOZ-42 moved to Done.

Rings

25%
60%
100%
100%
35%

Carousel

Scroll-snap strip — momentum, snapping, and RTL from the platform.

Sprint 14 board
Q3 roadmap
Release 2.4
Bug triage
Incident review

Indeterminate progress