CRUD detail

Preview Available in release assets

Render one server-authoritative record with durable list and edit navigation.

Server contract

Use .thin-crud-detail on an identified article or section and real links for edit, back, and related destinations.

Links and ordinary server-submitted forms retain complete list, detail, edit, validation, and cancellation workflows without Datastar or JavaScript.

CRUD detail primary example

<article class="thin-crud-detail" id="project-alpha">
  <header>
    <h2>Alpha migration</h2>
    <nav class="thin-crud-actions" aria-label="Project actions">
      <a  href="/projects/alpha/edit">Edit</a>
      <a href="/projects">Back</a>
    </nav>
  </header>
  <dl>
    <dt>Status</dt>
    <dd>Active</dd>
    <dt>Owner</dt>
    <dd>Operations</dd>
  </dl>
</article>

Show code

<article class="thin-crud-detail" id="project-alpha">
  <header>
    <h2>Alpha migration</h2>
    <nav class="thin-crud-actions" aria-label="Project actions">
      <a  href="/projects/alpha/edit">Edit</a>
      <a href="/projects">Back</a>
    </nav>
  </header>
  <dl>
    <dt>Status</dt>
    <dd>Active</dd>
    <dt>Owner</dt>
    <dd>Operations</dd>
  </dl>
</article>

Anatomy

Stable server-owned region
Durable links or form action
Native controls
Server-rendered result or validation error

Variants and sizes

Definition list
Semantic article

Gallery coverage: No structured variant fixtures are published yet; the primary example above is the only verified production markup.

States and difficult content

Rendered fixtures exercise authored content and constrained layouts with the same production assets.

Pending
Empty
Not found
Forbidden
Validation error
Long content
Narrow container
Reconnect after morph

Structured state fixtures are not published for this item yet.

Interaction and keyboard behavior

Navigation remains ordinary links. Optional Datastar may replace the detail region after a mutation, but missing and forbidden records remain server responses.

Accessibility

Use headings, landmarks, links, native controls, explicit labels, server error text, and predictable focus. Datastar patches the same stable region and must preserve an understandable full-page response and focus target.

Contract

COMPOSE

Basis

Native links, forms, headings, lists, and buttons; no client grid/widget role

Evidence

tests/unit/library/crud-recipes.test.ts

API

Use .thin-crud-detail on an identified article or section and real links for edit, back, and related destinations.

Behavior tier: datastar-required

Structured host, property, and example tables are not authored for this item yet. Use the summary above and the primary example.

Fallback

Links and ordinary server-submitted forms retain complete list, detail, edit, validation, and cancellation workflows without Datastar or JavaScript.

Assets and dependencies

/components.css

Dependencies: datastar@1.0.2

Source: packages/ui/src/items/crud/style.ts

Composition

Derived from the examples and style specs, not authored.

Composes

CRUD list