`node`

group node

What every element accepts. Every visual prop springs; x, y, scale, rotate and opacity are paint-only and never relayout.

Prop	Type
`id`	`Node`	Names the element, so others read its state (`results.selected`) and keys route to it (`nav: results`).
`width`	`length \| auto`	Its width: logical pixels, or `40%` of the parent; `auto` (as unset) sizes it by what it holds, and takes a transition there (`width: auto ~ instant`).
`height`	`length \| auto`	Its height: logical pixels, or a percentage of the parent; `auto` as for `width`.
`min_width`	`length`	The smallest width it takes.
`min_height`	`length`	The smallest height it takes.
`max_width`	`length`	The largest width it takes.
`max_height`	`length`	The largest height it takes: `max_height: 420`.
`size`	`length \| auto`	Its width and height at once: `size: 8`; `auto` as for `width`.
`grow`	`float`	Its share of the space left in its row or column: `grow: 1`.
`shrink`	`float`	How much it gives up when its row or column is too small: `shrink: 0` keeps its size (default 1).
`justify`	`Justify`	How its children share the main axis: `justify: space_between`.
`pad`	`insets`	Space inside its edge: one to four values (`pad: 0, $space.3`).
`margin`	`insets`	Space outside its edge: one to four values.
`gap`	`length`	Space between its children: `gap: $space.2`.
`align`	`Align`	Alignment of its children on the cross axis, or of a text's lines.
`place`	`Place`	`absolute` takes it out of the flow, placed by `x` and `y`.
`stagger`	`duration`	Delays each child's `enter` this much after the one before.
`x`	`length`	Horizontal offset; paint-only.
`y`	`length`	Vertical offset; paint-only.
`scale`	`float`	Scale about its centre; paint-only.
`rotate`	`angle`	Rotation about its centre; paint-only: `rotate: t * 20deg`.
`opacity`	`float`	Opacity, 0 to 1; paint-only.
`bg`	`paint`	Background paint: a colour or a gradient.
`color`	`color`	Inherited. Text and icon colour, inherited by every descendant.
`font`	`font`	Inherited. Font, inherited by every descendant: `"Inter" 13px 500`, `$font.ui`.
`weight`	`int`	Inherited. Font weight, inherited by every descendant: `weight: 600`.
`radius`	`corners \| full`	Corner radii: one value, four (`14, 14, 0, 0`), or `full` for a pill.
`corners`	`CornerStyle`	`squircle` for smooth corners.
`border`	`length, paint`	A border of a width and a paint: `border: 1, $border`. A gradient's angle may animate; only the ring repaints.
`shadow`	`shadow`	Drop shadows: `0 2px 8px $shadow.alpha(0.25)`, comma-separated.
`inner_shadow`	`shadow`	A shadow inside its edge.
`blur`	`length`	Blur behind it, done by the compositor: `blur: 24`.
`blur_fallback`	`BlurFallback`	What to draw when the compositor cannot blur.
`backdrop`	`Filter`	A filter over your own content behind it: `backdrop: blur(16)`.
`clip`	`bool`	Clips its children to its rounded shape.
`hit`	`HitArea \| none`	Its hit area: `hit: grow(6)` enlarges it for small targets; `hit: none` takes no input in its own box (the pointer passes through to what is below), while its children take theirs. On a `trigger: hover` popup that draws nothing, a top-level element with `hit: none` gives the popup's input region its children's boxes instead of its own.
`cursor`	`CursorShape`	The pointer's shape while it is over it: `cursor: pointer` on a link, `grab` on a handle (`when pressed { cursor: grabbing }`), `ew_resize` on a grip. The innermost node under the pointer with one decides, and while a press is held the one it went down on does; an `input` shows `text` unless it says otherwise, anything else the default arrow. Set through `wp_cursor_shape_v1`, or the cursor theme where the compositor lacks it.
`tooltip`	`text`	A tooltip shown on hover.
`filter`	`Filter \| [Filter]`	Colour filters on its subtree: `filter: grayscale(1)`, or a list.
`blend`	`Blend`	How it blends with what is below it.
`mask`	`Mask`	Masks its subtree: `fade(bottom, 24)`, `radial(…)`, `shape(cookie)`.
`glow`	`length, color`	A glow of a radius and a colour: `glow: 12, $accent.alpha(0.6)`.
`rim`	`Edge, color`	A lit edge: `rim: top, $fg.alpha(0.15)`.
`grain`	`float`	Film grain: `grain: 0.04`.
`morph`	`text`	A shared-element name: nodes with the same `morph` morph into each other across surfaces (`morph: "media"`).
`jelly`	`float`	Squash and stretch while dragged: `jelly: 0.4`.
`parallax`	`length`	Moves with the pointer, up to this far: `parallax: 6px`.
`tilt`	`angle`	Tilts toward the pointer, up to this angle: `tilt: 8deg`.
`shape`	`Shape`	A shape from the shape library; a change morphs by spring.
`stroke`	`length, paint`	An outline of a width and a paint, with styles: `stroke: 3, $accent { trim: 0, progress; cap: round }`.
`stroke.trim`	`float, float`	The part drawn: from a start to an end fraction.
`stroke.wave`	`float, length`	A wavy stroke: its amplitude and wavelength.
`stroke.cap`	`Cap`	The line caps.
`stroke.dash`	`length, length`	Dash and gap lengths.
`enter`	`Pose \| PoseName`	The pose it enters from: `enter { opacity: 0 }`, `popin(0.8)`, `slide(top)`, `fade` or `slidefade`. `exit` mirrors it unless given.
`exit`	`Pose \| PoseName`	The pose it leaves by; the subtree unmounts once it has played.
`transition`	`SwapTransition \| SwapKind`	How its content swaps on `if`, `pages` and image changes: `wipe(left)`, `disc`, `dissolve` or `pixelate`; `none` for no mask.
`drag`	`any`	Makes it a drag source carrying this value: `drag: pin`.

Event
`on click`	A primary click.
`on secondary`	A secondary (right) click.
`on middle`	A middle click.
`on scroll(dy: float, dx: float)`	A scroll: `on scroll(dy) { … }`.
`on drop(value: any, at: int)`	Something was dropped on it: a `drag:` source's value or a `Drop` from another program, and the index it landed at.
`on key(key: Key)`	A key press while it has focus.
`on activate`	It was chosen: clicked, Enter while selected in a `list`, or Enter in an `input` with no `nav:` list.