feat(uix): touch-target — list rows hit 44px on coarse pointers

Second touch-target pass (after the button-like controls, a265d39a). On COARSE
pointers (touch), menu / select / listbox / command rows grow to the 44px mobile
minimum. `--list-item-height` (list-surface.css) is the row's min-block-size floor
that every list surface bridges to, so lifting it for the small sizes (xs/sm/md,
all < 44) grows every list row at once; lg (44) / xl (52) already clear it. Desktop
(fine pointer) keeps its compact rhythm.

Verified: coarse rule serves; md list-surface matches (->44), lg doesn't; desktop
md row stays calc(36px).
active-uix
dev 3 months ago
parent a265d39aef
commit c0904fc6e1

@ -69,3 +69,20 @@
--list-content-padding: var(--space-2-5);
--list-content-radius: var(--radius-md);
}
/* ── Touch-target (a11y) — coarse pointers ──────────────────────────────────
* On COARSE pointers (touch), a list row is a tap target → it must clear the 44px
* mobile minimum (WCAG 2.5.5 AAA · Apple HIG 44pt · Material 48dp), matching the
* button-like controls (archetypes.css). `--list-item-height` is the row's
* min-block-size FLOOR (`[data-archetype='item'/'option']`), and every menu /
* select / listbox / command bridges its own item-height token to it — so lifting
* it here grows every list row at once. Only the small sizes (xs/sm/md, all < 44)
* are raised; lg (44) / xl (52) already clear it. Desktop (fine pointer) keeps its
* compact rhythm. */
@media (pointer: coarse) {
[data-list-surface][data-size='xs'],
[data-list-surface][data-size='sm'],
[data-list-surface][data-size='md'] {
--list-item-height: 44px;
}
}

Loading…
Cancel
Save

Powered by TurnKey Linux.