Sleeve

The content container, and the last link in the chain. A Stack arranges regions, a Slot is one region, and a Sleeve arranges the content inside one — on --space-component-*, the only primitive that does.

Each example measures itself, so its gutters are to scale rather than to the page's. The arrangements are exact.

A Sleeve goes inside a Slot; it does not replace one. The Slot is the region — it is what the Stack places, and it carries min-width: 0 so content can shrink, its snap placement, its element semantics and its label. The Sleeve is what arranges the content once the region exists. Four labels in the guides above, one per layer of the chain.

The gap is --space-component-*, and that is why this is a component rather than a prop on Stack. Everything above it in the chain spaces on --space-layout-*, which clamps against the container — right between two regions, wrong between a heading and the table it labels. That distance belongs to the pair, the way a button's padding belongs to the button, and it should not get roomier because the window did.

The three boxes are the natures from Slot — auto sizes to its content, fixed has a definite size, fill takes 100%. They answer justify only where they can, which is easiest to see by moving it in Properties.

The gap is all it applies. If a child arrives carrying a margin of its own — a heading does, from base.css — the two add. That is a fact about the child rather than a feature here; a Sleeve spaces what it finds and does not reach inside it. The one exception is p + p, switched off within a Sleeve because it does the same job as the gap and would otherwise double it.

The same Slot, without one

A Slot places a region; it does not arrange what is inside it.

On the left the three boxes are flush against each other, and nothing in the system was ever going to separate them — a Stack's gap holds regions apart, and these are the contents of one. The two Slots are otherwise identical.

It is a narrower difference for prose than it looks here, and worth saying so: base.css already spaces two paragraphs and already gives a heading its air. What no element rule can reach is a block — p + p can only ever space two paragraphs. A Sleeve spaces whatever it finds.

What it deliberately is not

Not a measure. A Sleeve caps nothing. Content width comes from the lane a Stack puts it in — a cap is absolute where a lane is proportional, and giving a region two answers to one question is how they drift apart.

Not a surface, yet. No background, border, radius or padding. A panel is a combination of those, which makes it a component rather than a pile of props — and padding in particular has no job until there is something painted to inset content from. They arrive together.

No inherited gap. A nested Stack takes its parent band's gap, because a fluid cqi value re-resolves against whatever container it lands in. A Sleeve's gap is fixed px and means the same thing at any depth, so a nested Sleeve simply declares its own.

No align, and no alignSelf. Its rows hug their content, so align-items would have nothing to move — the useful property is align-content, reserved under its own name. And align-self is only honoured by a grid parent, where a Slot is a block box: a stretched Slot creates the space and block layout has no way to distribute it.

So positioning a Sleeve is the Slot's job — <Slot align="end"> makes the Slot a single-cell grid and places the Sleeve in it. That is also the right owner: the Slot owns the height, so the Slot says how it is used, on the same principle that puts the max-width cap on Stack rather than Section.