Utilities

Pipeline’s utility classes, including focus-ring helpers for accessible focus styling.

Safe areas

theme.css exposes four physical safe-area variables: --safe-area-inset-top, --safe-area-inset-right, --safe-area-inset-bottom, and --safe-area-inset-left. They read the viewport’s env() values and fall back to zero.

Padding utilities are available as p, px, py, pt, pr, pb, pl, ps, and pe; margin utilities use the matching m family; positioning utilities are inset, inset-x, inset-y, top, right, bottom, left, start, and end. Use the bare form to apply only the inset, or append a spacing value to add it: pb-safe-area-4 is the bottom inset plus 16px and ps-safe-area-1.5 supports fractional spacing values. Safe areas are edge distances, so Pipeline intentionally does not provide w, h, or size variants.

Physical utilities preserve physical viewport geometry. Logical ps, pe, ms, me, start, and end resolve dir on the utility’s owner, so nested RTL content uses the correct physical edge.

App.Root owns viewport padding and applies safe-area-consumed to descendants. That resets the inherited physical variables below the padded boundary, preventing nested roots and composers from consuming an inset twice. Apply safe-area-consumed only below a boundary that already owns its padding. Portals mounted outside that boundary retain root variables; Toaster reads env() directly so its viewport clearance also works when it is mounted inside the boundary.

Scroll borders

scroll-border-y reveals an element’s top and bottom borders across the first and last --spacing(1) of its vertical scroll range. Apply it to the same overflow-y-auto element as border-y; existing border width and color utilities control the border geometry and color. It works alone or with scroll-fade-y, its only supported scroll-fade pairing. In browsers without scroll-timeline support, the borders are static and a paired content fade is disabled.

The utility repeats shadcn’s scroll-fade-y animation list because CSS cannot append animations. Recheck it when upgrading shadcn’s scroll-fade utilities.

Accessibility

• focus-ring: resets browser default focus styling and displays a ring when the element is focused (uses --default-ring-width)
• focus-ring-<n>: sets ring width to npx via ---focus-ring-width (e.g. focus-ring-1, focus-ring-2); pair with focus-ring. Offset width stays 1px. Arbitrary lengths like focus-ring-[3px] are supported
• focus-ring-offset-<color>: changes the offset color of the focus ring to match the background color of its parent