0.9.1-alpha.21
Alpha@xaui/native@0.9.1-alpha.21
Patch Changes
-
1555901:
Card— the v1 surface, and the control it becomes.A compound root with five slots —
Header,Body,Footer,Title,Description— on the same shape as theButton: the recipe resolves once at the root and publishes the resolved styles, every node takes its own style props (R14),asChildmerges into the caller's element, and the context hook is exported so a third party can add a slot.variantnarrows the shared vocabulary to its four emphasis levels —default,secondary,tertiary,ghost— over the theme'ssurface*family, with the surface shadow on the one level that stands on the background.sizedrives padding, both gaps, the radius and the type of the two text slots, and never a height: a card is as tall as what it holds.isPressableturns the surface into aPressableFeedbackwith a press wash,accessibilityRole="button"and the shared scale.The rendering is the reference implementation's card measured —
mdis 16pt of padding, a 24pt radius, an 18/28 title inmediumover a 16/24 description, no border on a filled surface — reached through our own vocabulary rather than through their utility classes, and with the gaps the component owns instead of leaving to the call site.Also fixes a
NoInfergap in the recipe engine: acompoundVariantsentry naming one variant used to collapse the whole recipe's variant union to that single value.Card.Background— a photo, a gradient or a video behind the card. The root hoists it, so JSX order does not decide stacking: a background written after the header would otherwise cover it, which is the invisible ordering rule composition should not carry. It reuses the marking idiomPressableFeedbackuses for its overlays, andmarkBackgroundis exported so a third party's layer is not a second-class citizen.The clip lives on the layer rather than on the root:
overflow: 'hidden'cuts the node's own shadow on iOS, so clipping the card would cost adefaultone the elevation its variant just gave it.radiustherefore moves both slots together — a corner that moved only the root would round the card and leave its photo square. The reference implementation reaches the same feature through abackgroundprop and clips on both nodes, losing the shadow.The light
surfaceSecondarymoves up half a step,#f4f4f5→#ececee. It sat so close to thebackground(#fafafa) that asecondarycard on the page read as no card at all, andzinc[200]was alreadysurfaceTertiary— so the level between them was the only one left. It is the OKLab midpoint of the two, written in the source layer rather than added to the palette:PaletteShadeis derived fromzinc, so a150there would have claimed every other family has one too.