Data table .kdt

Direct replacement for the current Orders screen. Order # is body text, not a link — that's an in-cell affordance, not a brand moment. Customer names hold a single line; addresses fall back to a whispered em-dash when empty (no orphan commas). Timestamps are tabular mono so the column scans without jitter.

Default is iPad-grade-plus (52 px rows). Compact is power-user dense. Cozy is for tablets in landscape and forms-adjacent contexts.

.kdt-flat is the default — hairline row dividers, transparent rows. .kdt-zebra alternates a faint cream tint, good for scanning long columns of numbers. .kdt-card lives on the wrapper and frames the whole grid in a rounded, hairline-bordered container.

Built into table.css so the primitive ships zero-dependency. When the standalone Tag primitive .kt-* lands, these will alias to it — same markup, no migration in pages.

Add .kdt-sticky-head to the wrapper for a sticky thead during vertical scroll. Add .kdt-sticky-first to keep the first column anchored during horizontal scroll. Scroll the box below to see both.

The sortable header is a <button class="kdt-sort"> inside the <th> — proper keyboard target, proper screen-reader semantics via aria-sort. Active sort tints the indicator crimson; the chevron flips for descending.

Selected rows get a single 3 px crimson left edge and a one-step paper lift — no pink, no tint. The bulk-actions strip is ink-dark with .kb kb-sm buttons inverted to read on near-black. Toggle the master checkbox or any row to see it slide in.

Two flavors: an inline empty row (a single mono caption) for filtered results, and a full empty board for first-run / never-had-any moments. Both consume only semantic tokens — neutral, never accusatory.

Set aria-busy="true" on the <tbody> and render N .kdt-skel rows. Bar widths vary per column via style="--w: 60%" so the skeleton reads as plausible content rather than a uniform stripe.

Below 640 px the same markup re-flows into per-row cards with label-value pairs. Add .kdt-stack to the wrapper and data-label to each <td>. Resize this window narrower than 640 px to see it. iPad-split-view friendly.