Because Type changes what sits at the ends of the row and Collapsed changes whether there is a row at all. Seven types times four states times two widths is fifty-six, and the alternative - hidden layers for the trailing glyphs - does not work here, because Tree adds a leading chevron and Big Icon changes the height from 32 to 48. Both of those move their neighbours, which only a variant can do.
How do Hover and Active differ?
Both fill with base.sidebar-accent, so the fill alone tells you nothing. Active also moves the label to base.sidebar-accent-foreground and to 500 weight. The weight is the part you actually read at a glance, and it is what the source does too - data-[active=true] carries font-medium, not a different colour.
What happens to the label when it collapses?
It is removed, not clipped. A collapsed row is a 32 square with the icon centred, and the Hover and Active collapsed variants carry a tooltip layer instead - a rail with no labels has to put the name somewhere, and that somewhere is beside the icon on hover.
Why is there a whole component for the collapse glyph?
Because there are four conventions and teams disagree about them. Horizontal points right when shut and down when open, Vertical points down then up, Plus Minus swaps the sign, and Up Down is a single chevron pair that never changes. Drawing them as one component with a Type axis means a file can pick one and be consistent everywhere.
What do the five shells show?
The same four groups and thirty items arranged five ways: flat labels, collapsible labels, items indented under a rule, both at once, and an application nav with a footer and a collapsed 48 rail beside it. All five clip at 900 in the file because a still frame cannot show a scrollbar - the content is 1,088 tall, so the last group is always below the fold.
Where are side, variant and collapsible?
Nowhere in the file, and they should not be. All three are layout: side flips which edge the panel sits on, collapsible decides whether folding leaves a 48 rail, closes to nothing, or is disabled, and variant lifts either the panel or the content off the edge with a shadow. The full-layout section on this page lets you set all three and watch what changes.
What happens on a phone?
The sidebar stops being a column and becomes an off-canvas panel over the content, at 18rem rather than 16. Nothing inside it changes. That is worth knowing before you design a rail that only works at 48 wide, because on a phone there is no rail - there is a trigger and a scrim.
Does it work right to left?
In the source, yes, on the dir prop: the panel moves to the other edge, the rows reverse, and the chevrons mirror. None of that is drawn in the file and none of it should be - mirroring fifty-six menu button variants would make a hundred and twelve for something no designer sets by hand. The last section on this page shows the mirrored layout so you can see what you are asking for.
What is the trap in building the RTL version?
Reversing twice. Under dir=rtl a plain flex row already lays its children out from the right, so adding flex-row-reverse on top cancels the flip and the panel ends up back on the left - which is what this page did on its first attempt. Reverse nothing: let dir handle order, use logical properties (inset-inline-start, text-start, ms/ps) for placement, and flip only the chevrons by hand, because a glyph pointing right is a direction rather than a position.