every namethatui element, padded only at the leaves

summary hover and open fills run wall to wall; the padded leaf is the summary and the body.

the stripe is a container-painted leaf; text leaves pad inside.

overlap uses translate on the container row, not negative margins.

the removable chip is two leaves split by an overflow-hidden container.

the caption sits on the tile edge; the tile clips, the caption pads.

each tab is one padded leaf; the active fill covers the full tab.

crumbs and the current page pad; separators are bare glyphs.

the media block paints, never pads; text and action leaves pad. see the full A/B in “the one rule” above.

snap scrolling is native css; the track gap does the spacing.

the tail is a one-sided corner radius on the padded leaf.

the field is a flex row: input leaf pads, the caret does not.

the rule is a bare paint block between padded rows.

cells pad; row hover and selection fills run wall to wall.

every day cell is its own leaf; range and today fills are per-cell.

the sheet is an edge-anchored column inside a clipped relative container.

rules are bare paint blocks; only the label “or” pads.

react state reorders: draggable rows, drop to move (was a site.js hook).

react state plays every bar; each row carries its own transition-timing-function.

the dashed border belongs to the container; the leaves own the breathing room.

rings are focus states on the padded leaves, offset from zinc-950.

label, input and hint stack with gap; the error border is on the input leaf.

bars are bare spans; the burger leaf owns the tap padding. react state shows and hides the links.

a demo nav is content: plain components, never the site shell.

pure css reveal: hover on the relative wrapper flips visibility and opacity.

chrome buttons are edge-anchored leaves over a full-bleed backdrop.

one keyframes (mq, in globals.css) translates -50% of the w-max track.

css columns; mb-2 on tiles is the one sanctioned exception to no outer margins.

tokens and the inline input share one wrapping flex container.

divide-x draws the seams; pages are padded leaves over hover fills.

sticky top-0 inside overflow-y-auto; zero js, zero transforms.

details gives the dropdown natively; the tooltip is a hover flip.

bar, segmented bar and svg ring; only the segmented label pads.

native resize:horizontal on the pane; the handle is a bare paint strip.

the veil is an absolute paint layer; the modal stacks above it relatively.

react state: scroll position picks the active nav item (was a site.js hook).

gutter tracks inset every field; the shadcn input and button leaves pad themselves.

both are pure paint: animate-pulse on the stack, border trick on the spin.

element.animate with a spring-ish curve, run by react on click (was a site.js hook).

ping and core are stacked paint leaves; animate-ping does the pulse.

each step is one leaf: number chip pads inside, the fill covers the step.

the header sticks inside the scroll box while rows slide under it.

react state drives the toggle knob; the native checkbox and radio are accent-styled.

react state paints the active tab; the underline is an inset shadow.

hover runs a char shuffle in react (was a site.js hook).

bounce stagger is animation-delay utilities, no keyframe copies.

the rail is a flex column: dot leaf, then a flex-1 line that closes the gap.

three leaves: status paint block, body column, action seam.

react state, one segmented frame (same shape as tabs).

truncate and line-clamp on padded leaves; the split keeps the extension pinned.