Kit catalog¶

The kit ships 24 components, grouped by how they hold state. The gallery (/ui-kit in the demo umbrella) shows every one live. The browser e2e drives them all.

Pure slots: presentation only¶

These hold no state; the parent projects content.

Attribute forwarding applies to every component: class on the host merges into the child's root; style/id/title/role/tabindex/aria-*/data-* are forwarded. A mistyped prop (anything else) fails closed.

Controlled: the parent owns the flag¶

Externally-triggered overlays: the opener lives elsewhere on the page, so the parent holds the Local and the wiring (:open prop + @close emit).

<button @click="confirm_open = True" class="ui-btn ui-btn--primary">Delete…</button>
<Dialog :open="confirm_open" @close="close_confirm">
  <template slot="title">Delete 3 issues?</template>
  <button class="ui-btn ui-btn--danger" @click="do_delete()">Delete</button>
</Dialog>

Uncontrolled: the component owns its state¶

Self-triggered widgets: drop them in with zero parent wiring; each placement is monomorphized into independent state.

Widget primitives: the optional runtime family¶

These are complex widgets whose presentation state (open option, sort column, page) nothing else reads. They ship as a runtime in widgets.js; your data and selection stay in Locals the app reads. Each is a labelled runtime stand-in. Use the component: this table is the canonical reference. The :binder column is the kit's internal wiring, which you do not author directly.

DataGrid columns¶

<DataGrid> (and <DataTable>) read their columns from the <th data-field> cells in the head slot; each <th> carries optional data-* options. Hand-author them, or let declui's screens=("table",) generate them from a typed model.

<DataGrid>'s toolbar adds a global filter, a Columns menu (visibility + pin toggles), and a page-size selector + a "Showing X-Y of Z" line. On the headers: drag the right edge to resize, drag the left grip to reorder, click to sort. Data and selection stay in the app's Locals; cells are textContent-only (never HTML). <DataTable> is the minimal sortable subset (no toolbar).

Native-wrapped¶

Class-contract variants (no component needed)¶

These are classes you write directly: buttons (ui-btn, --primary/--danger/--ghost, sizes, loading), inputs (ui-input, invalid state), ui-badge--*, ui-alert--*, tables + pagination, ui-progress, ui-skeleton, ui-kbd. There is nothing to instantiate.

Slots & props: at a glance¶

This table gives the exact contract of each component, so you can place one without opening the source. + body means the default (unnamed) slot; binders and the state-mode rationale are in the family sections above. Every component also forwards class + the passthrough attributes.